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

<script type="text/javascript">
    changeIcon = function( elm, name )
    {
        var elms    = $( elm ).find( "svg" );
        var elm_sel = elms.first();

        if( $( "#" + name ).is( ":visible" ) )
        {
            $( elm_sel ).removeClass( "fa-angle-down" );
            $( elm_sel ).addClass( "fa-angle-right" );
        }
        else
        {
            $( elm_sel ).removeClass( "fa-angle-right" );
            $( elm_sel ).addClass( "fa-angle-down" );
        }
    }
</script>

<style type="text/css">
    .ui-dialog .ui-dialog-titlebar-close
    {
        position: absolute;
        right: .3em;
        top: 50%;
        width: 20px;
        margin: -10px 0 0 0;
        padding: 1px;
        height: 20px;
        background-position: -96px -128px;
        /*background-image: url("images/ui-icons_056b93_256x240.png");*/
        background-image: url("<?=Constantes::ROOT_DIR_APP?>web/css/jquery/themes/start_1.12.1/images/ui-icons_056b93_256x240.png");
    }
</style>

<div class="shadow-sm p-3 mb-2 bg-white rounded card card-body">
    <div class="row">
        <div class="col mb-1">
            <h4 class="text-info text-nowrap mb-0">Lote</h4>
        </div>
        <div class="form-row mx-1">
            <!--<input type="button" class="btn btn-primary btn-block" value="Nuevo" onclick="location.href='<?/*=buildUrl( "lote/addedit", "s_TipoProc=nvo" )*/?>';" >-->
        </div>
    </div>
</div>

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

<div id="accordion" class="mb-2">
    <div class="card">
        <div class="card-header">
            <a data-toggle="collapse" href="#collapseThree" aria-expanded="true" aria-controls="collapse1"
               class="text-info" onclick="changeIcon(this,'collapseThree');" id="cotent_a_collapse"
            >
                <h5 class="mb-0"> Filtro <i class="fas fa-angle-right pull-right"></i></h5>
            </a>
        </div>
        <div id="collapseThree" class="collapse" data-parent="#accordion">
            <input type="hidden" name="IdCompania" id="IdCompania" value="<?= myUser::getUser()->getIdBusiness() ?>">
            <div class="card-body pb-1">
                <div class="form-row mx-0">
                    <div class="col-md-4 mb-1">
                        <label class="col-form-label" for="IdItem">Producto</label>
                        <div class="input-group mb-0 flex-nowrap">
                            <input type="text" class="form-control" style="width: 80px; text-align: center;" autocomplete="off" name="IdItem" id="IdItem"
                                   onfocus="this.select();" onblur="verificarCambios( this.value );" value="">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary btn-sm" type="button" onclick="buscarProductosPopup();">Buscar</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-1">
                        <label class="col-form-label" for="LoteNumero">Numero Lote</label>
                        <input type="text" class="form-control" name="LoteNumero" id="LoteNumero" placeholder="" value="" >
                    </div>
                    <div class="col-md-4 mb-1">
                        <label class="col-form-label" for="Estado">Estado</label>
                        <select class="form-control" name="Estado" id="Estado">
                            <option value=""> - Seleccione - </option>
                            <option value="A"> ACTIVO </option>
                            <option value="I"> INACTIVO </option>
                        </select>
                    </div>
                </div>
                <div class="text-center mt-2">
                    <button class="btn btn-primary text-center" type="button" onclick="findControl();" >Buscar</button>
                    <a data-toggle="collapse" href="#collapseThree" class="text-info" onclick="changeIcon( $('#cotent_a_collapse')[0],'collapseThree');" style="background: none;">
                        Contraer <i class="fas fa-angle-up"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<style type="text/css">
    #exampleModalCenter .modal
    {
        padding: 0 !important;
    }
    #exampleModalCenter .modal-dialog {
        max-width: 95% !important;
        height: 90%;
        /*  padding: 0;
        margin: 0;*/
    }

    #exampleModalCenter .modal-content
    {
        /*border-radius: 0 !important;*/
        height: 90%;
    }
</style>
<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

<!-- Modal 1-->
<div class="modal hide fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Buscar Producto</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <iframe id="iframe_id" src="" style="zoom:0.60;" width="99.6%" height="99.6%" frameborder="0"></iframe>
            </div>
            <!--<div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>-->
        </div>
    </div>
</div>
<script type="text/javascript">
    asignarItem = function( id_item, item_descripcion )
    {
        console.log( arguments );
        $( "#IdItem" ).val( id_item );
        $( "#content_desc_item" ).html( item_descripcion );

        ocultarModal( 'exampleModalCenter' );

    }
    buscarProductosPopup = function()
    {
        var s_param = "type/01";
        $( '#iframe_id' ).attr( "src", '<?=buildUrlComplet( 'alm.php/transacciones/listItem' )?>' + s_param );
        $( '#exampleModalCenter' ).modal( { show:true } );
    }
    ocultarModal = function( name_modal )
    {
        $( '#' + name_modal ).modal( 'hide' );
    }
</script>
<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

<?php include_partial( "grid" ); ?>

<script>
$( document ).bind
(
    'keyup',
    function( e )
    {
        if( e.which == 13 ) //ENTER
        {
            findControl();
        }
        if( e.which == 107 || e.which == 27 || e.which == 109 ) //tecla + | ESC | -
        {
            $( "#cotent_a_collapse" ).trigger( "click" );
        }
    }
);
</script>