<?php use_helper( 'UrlFunctions' ); ?>
<?php use_helper( 'IncludePartial' ); ?>
<?php use_helper( 'UtilFunctions' ); ?>


<nav class="navbar navbar-expand-md navbar-dark fixed-top">
    <div class="form-row mx-0">
        <div class="col-md-12 mb-1">
            <div class="form-row mx-0">
                <div class="col-md-6">
                    <h4 style="padding-top: 10px;" class="text-info text-nowrap mb-0"><?=$s_Titulo?></h4>
                </div>
                <div class="col-md-6">
                    <h4 style="padding-top: 10px;" class="text-info text-nowrap mb-0"><?=$s_Titulo2?></h4>
                </div>
            </div>
        </div>
    </div>
</nav>

<br><br><br><br>

<div class="form-row mx-0">
    <div class="col-md-3">
        <div class="card" id="">
            <div class="card-body" style="padding: 10px;">

                <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

            </div>
        </div>
    </div>

    <div class="col-md-9">
        <div class="card" id="">
            <div class="card-body" style="padding: 10px;">




                <script>
                    collapseContentTab = function( elm )
                    {
                        var elms    = $( elm ).find( "svg" );
                        var elm_sel = elms.first();

                        if( $( elm ).hasClass( "active" ) )
                        {
                            if( $( "#nav-tabContent" ).is( ":visible" ) )
                            {
                                $( elm_sel ).removeClass( "fa-angle-down" );
                                $( elm_sel ).addClass( "fa-angle-right" );
                                $( "#nav-tabContent" ).collapse( 'hide' );
                            }
                            else
                            {
                                $( elm_sel ).removeClass( "fa-angle-right" );
                                $( elm_sel ).addClass( "fa-angle-down" );
                                $( "#nav-tabContent" ).collapse( 'show' );
                            }
                        }
                        else
                        {
                            if( !$( "#nav-tabContent" ).is( ":visible" ) )
                            {
                                $( elm_sel ).removeClass( "fa-angle-right" );
                                $( elm_sel ).addClass( "fa-angle-down" );
                                $( "#nav-tabContent" ).collapse( 'show' );
                            }
                            else
                            {
                                $( elm_sel ).removeClass( "fa-angle-right" );
                                $( elm_sel ).addClass( "fa-angle-down" );
                            }
                        }
                    }
                </script>
                <div class="table-responsive">
                    <nav>
                        <div class="nav nav-tabs" id="myTab" role="tablist">
                            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true" onclick="collapseContentTab( this );">General <i class="fas fa-angle-down" onclick=""></i> </a>
                            <!--<a class="nav-item nav-link" id="nav-file-tab" data-toggle="tab" href="#nav-file" role="tab" aria-controls="nav-file" aria-selected="false">Archivos</a>-->
                            <!--<a class="nav-item nav-link" id="nav-proyecto-tab" data-toggle="tab" href="#nav-proyecto" role="tab" aria-controls="nav-proyecto" aria-selected="false">Proyecto <?/*=$o_VTA_PrsProyectosBN?'( <i class="fas fa-check"></i> )':'( <i class="fas fa-times"></i> )'*/?> </a>-->
                            <a class="nav-item nav-link" id="nav-cobra-tab" data-toggle="tab" href="#nav-cobra" role="tab" aria-controls="nav-cobra" aria-selected="false" onclick="collapseContentTab( this );">Cobranza <i class="fas fa-angle-right" onclick=""></i></a>
                            <!--<a class="nav-item nav-link" id="nav-comenta-tab" data-toggle="tab" href="#nav-comenta" role="tab" aria-controls="nav-comenta" aria-selected="false">Comentario</a>-->
                            <!--<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Log</a>-->
                        </div>
                    </nav>
                </div>

                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        <div class="" style="border-left: 1px solid rgba(0,0,0,.125); border-right: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125);">
                            <iframe width="100%" frameborder="0" align="middle" id="iframe_formpago"  class="embed-responsive-item" src=""  <?php if( $o_VTA_OrdenBN->getOrdenTipoId() == "1" ){ ?> height="370" <?php }else{ ?> height="220" <?php } ?> ></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-file" role="tabpanel" aria-labelledby="nav-file-tab">
                        <div class="" style="border-left: 1px solid rgba(0,0,0,.125); border-right: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125);">
                            <iframe width="100%" frameborder="0" align="middle" id="iframe_file"  class="embed-responsive-item" src="" height="320" ></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-proyecto" role="tabpanel" aria-labelledby="nav-proyecto-tab">
                        <div class="" style="border-left: 1px solid rgba(0,0,0,.125); border-right: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125);">
                            <iframe width="100%" frameborder="0" align="middle" id="iframe_proyecto"  class="embed-responsive-item" src="" height="320" ></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-renovacion" role="tabpanel" aria-labelledby="nav-renovacion-tab">
                        <div class="" style="border-left: 1px solid rgba(0,0,0,.125); border-right: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125);">
                            <iframe width="100%" frameborder="0" align="middle" id="iframe_renovacion"  class="embed-responsive-item" src="" height="320" ></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-cobra" role="tabpanel" aria-labelledby="nav-cobra-tab">
                        <div class="" style="border-left: 1px solid rgba(0,0,0,.125); border-right: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125);">
                            <iframe width="100%" frameborder="0" align="middle" id="iframe_cobra"  class="embed-responsive-item" src="" height="220" ></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-comenta" role="tabpanel" aria-labelledby="nav-comenta-tab">
                        <div class="" style="border-left: 1px solid rgba(0,0,0,.125); border-right: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125);">
                            <iframe width="100%" frameborder="0" align="middle" id="iframe_comenta"  class="embed-responsive-item" src="" height="320" ></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                        <div class="" style="border-left: 1px solid rgba(0,0,0,.125); border-right: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125);">
                            <iframe width="100%" frameborder="0" align="middle" id="iframe_log"  class="embed-responsive-item" src="" height="320" ></iframe>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    $( '#myTab a' ).on
                                   (
                                       'click', function ( e )
                                       {
                                           pr( $( e.currentTarget ).attr( "aria-controls" ) );

                                           var id_content = $( e.currentTarget ).attr( "aria-controls" );
                                           if( id_content == "nav-home" )
                                           {
                                               $( '#iframe_formpago' ).attr( "src", "<?=buildUrl( 'cot/listOrdFco', "ord_id={$o_VTA_OrdenBN->getOrdenId()}&ord_num={$o_VTA_OrdenBN->getOrdenNum()}" ) ?>" );
                                           }
                                           if( id_content == "nav-file" )
                                           {
                                               $( '#iframe_file' ).attr( "src", "<?=buildUrl( 'cot/buscarFile', "ord_id={$o_VTA_OrdenBN->getOrdenId()}&ord_num={$o_VTA_OrdenBN->getOrdenNum()}" ) ?>" );
                                           }
                                           if( id_content == "nav-proyecto" )
                                           {
                                               $( '#iframe_proyecto' ).attr( "src", "<?=buildUrl( 'cot/proyectos', "ord_id={$o_VTA_OrdenBN->getOrdenId()}&ord_num={$o_VTA_OrdenBN->getOrdenNum()}" ) ?>" );
                                           }
                                           if( id_content == "nav-renovacion" )
                                           {
                                               $( '#iframe_renovacion' ).attr( "src", "<?=buildUrl( 'cot/renovaciones', "ord_id={$o_VTA_OrdenBN->getOrdenId()}&ord_num={$o_VTA_OrdenBN->getOrdenNum()}" ) ?>" );
                                           }
                                           if( id_content == "nav-cobra" )
                                           {
                                               $( '#iframe_cobra' ).attr( "src", "<?=buildUrl( 'cot/cotiCobranza', "ord_id={$o_VTA_OrdenBN->getOrdenId()}&ord_num={$o_VTA_OrdenBN->getOrdenNum()}" ) ?>" );
                                           }
                                           if( id_content == "nav-comenta" )
                                           {
                                               $( '#iframe_comenta' ).attr( "src", "<?=buildUrl( 'cot/cotiComentario', "ord_id={$o_VTA_OrdenBN->getOrdenId()}&ord_num={$o_VTA_OrdenBN->getOrdenNum()}" ) ?>" );
                                           }
                                           if( id_content == "nav-profile" )
                                           {
                                               $( '#iframe_log' ).attr( "src", "<?=buildUrl( 'cot/buscarLog', "ord_id={$o_VTA_OrdenBN->getOrdenId()}&ord_num={$o_VTA_OrdenBN->getOrdenNum()}" ) ?>" );
                                           }

                                           e.preventDefault()
                                           $( this ).tab( 'show' );
                                       }
                                   );
                    //tab por defecto
                    $( '#iframe_formpago' ).attr( "src", "<?=buildUrl( 'cot/listOrdFco', "ord_id={$o_VTA_OrdenBN->getOrdenId()}&ord_num={$o_VTA_OrdenBN->getOrdenNum()}" ) ?>" );
                </script>

                <div class="dropdown-divider"></div>

                <div id="resultContent" style=""></div>
                <div id="content_alert" style=""></div>

                <?php if( $o_VTA_OrdenBN->getOrdenEstado() == VTA_OrdenBN::ESTADO_ABIERTO ){ ?>

                    <div class="form-row mx-0 text-center">
                        <div class="form-group col-md-12">

                            <button type="button" id="btnAgregar" class="btn btn-primary btn-sm">[+] Productos</button>
                            <button type="button" id="btnAgregarSrv" class="btn btn-primary btn-sm">[-] Servicios</button>
                            <button type="button" id="btnAgregarCmm" class="btn btn-primary btn-sm">[*] Comentario</button>

                            <script>
                                $( "#btnAgregar" ).click( function(){ buscarProductosPopup(); } );
                                $( "#btnAgregarSrv" ).click( function(){ buscarServiciosPopup(); } );
                                $( "#btnAgregarCmm" ).click( function(){ agregarComentario(); } );
                            </script>

                        </div>
                    </div>

                    <style type="text/css">
                        .ui-autocomplete-row
                        {
                            padding:0px;
                            background-color: #f4f4f4;
                            border-bottom:1px solid #ccc;
                            font-weight:bold;
                        }
                        .ui-autocomplete-row:hover
                        {
                            background-color: #ddd;
                        }
                    </style>
                    <div class="d-flex justify-content-center">
                        <div class="form-group col-md-4">
                            <div class="input-group input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1"><i class="fas fa-search" onclick=""></i></span>
                                </div>
                                <input type="text" class="form-control input-lg" placeholder="Buscar Productos" aria-label="Username" aria-describedby="basic-addon1" autocomplete="off" name="txtBuscarProd" id="txtBuscarProd" onfocus="this.select();">
                            </div>
                        </div>
                    </div>
                    <script>
                        $( '#txtBuscarProd' ).autocomplete
                                             (
                                                 {
                                                     source: "<?=buildUrl( 'pto/autocompleteProductos' )?>",
                                                     minLength: 2,
                                                     select: function( event, ui )
                                                     {
                                                         asignarValores( ui.item.value );

                                                         setTimeout
                                                         (
                                                             function(  )
                                                             {
                                                                 $( 'body' ).trigger( { type: 'keyup', which: 27 } );
                                                             },
                                                             500
                                                         );
                                                     }
                                                 }
                                             ).data( 'ui-autocomplete' )._renderItem = function( ul, item )
                        {
                            return $( "<li class='ui-autocomplete-row'></li>" )
                                .data( "item.autocomplete", item )
                                .append( item.label )
                                .appendTo( ul );
                        };

                        $( "#txtBuscarProd" ).keypress
                                             (
                                                 function( e )
                                                 {
                                                     if( e.which == 32 ){ return false; }
                                                     if( e.which == 13 )
                                                     {
                                                         blockContent( 'content_detail' );

                                                         executeAjaxJson
                                                         (
                                                             "<?php echo buildUrl( 'cot/saveOrdenVtaDetail' ) ?>",
                                                             "s_TipoProc=codigo_barras&i_Id=&IdAlmacen=" + $( "#IdAlmacen" ).val() + "&CodigoBarras=" + $( e.currentTarget ).val() + "&i_Id=<?=$i_Id?>",
                                                             function( o_json )
                                                             {
                                                                 unBlockContent( 'content_detail' );
                                                                 if( o_json.error )
                                                                 {
                                                                     //showAlertBootStrap( 'content_alert', 'alert-danger', o_json.mensaje_error );
                                                                     return false;
                                                                 }
                                                                 executeFindDetail();
                                                                 b_GuardarItem = false;
                                                                 id_adicional  = "";

                                                                 //$( "#btnAgregarCmm" ).focus();
                                                                 $( "#nav-home-tab" ).focus()
                                                                 setTimeout
                                                                 (
                                                                     function(  )
                                                                     {
                                                                         $( 'body' ).trigger( { type: 'keyup', which: 27 } );
                                                                     },
                                                                     500
                                                                 );

                                                             }
                                                         );

                                                         return false;
                                                     }
                                                     return true;
                                                 }
                                             );
                    </script>
                <?php } ?>

                <input type="hidden" name="i_Id" id="i_Id" value="<?=$i_Id?>">
                <input type="hidden" name="TypeSub" id="TypeSub" value="0">

                <input type="hidden" name="IdAlmacen" id="IdAlmacen" value="<?=$o_VTA_OrdenBN->getAlmacenDespacho()?>">
                <input type="hidden" name="IdCompania" id="IdCompania" value="<?=$o_VTA_OrdenBN->getCiaCod()?>">

                <style type="text/css">
                    .table td
                    {
                        vertical-align: middle;
                    }
                </style>

                <div id="content_result_grid1">
                    <table class="table table-bordered">
                        <thead id="">
                        <tr>
                            <th width="2%"  align="center" scope="col"><b>No</b></th>
                            <th width="10%" align="center" scope="col"><b>C&oacute;digo</b></th>
                            <th width="20%" align="" scope="col"><b>Descripci&oacute;n</b></th>
                            <th width="8%" align="center" scope="col"><b>Stock</b></th>
                            <th width="8%" align="center" scope="col"><b>Cant.Pedida</b></th>
                            <th width="8%" align="center" scope="col"><b>Precio</b></th>
                            <th width="8%" align="center" scope="col"><b>IGV</b></th>
                            <th width="8%" align="center" scope="col"><b>Total</b></th>
                            <th width="5%" align="center" scope="col">&nbsp;</th>
                        </tr>
                        </thead>
                        <tbody id="content_nvo">
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>


