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

<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">Reporte de Atenci&oacute;n</h4>
        </div>
    </div>
</div>

<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>

<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">
            <div class="card-body pb-1">
                <form class="" name="form1" id="form1" method="POST" action="">
                    <div class="form-row mx-0">
                        <div class="col-md-4 mb-1">
                            <label class="col-form-label" for="DocParentCod">Nota de Ingreso</label>
                            <input type="text" class="form-control" name="DocParentCod" id="DocParentCod" placeholder="" autocomplete="off">
                        </div>
                        <div class="col-md-4 mb-1">
                            <label class="col-form-label" for="RutaDetEstado">Estado</label>
                            <?=crearCombo( array( "name"=>"RutaDetEstado" ), TR_RutaDetalleBN::getArrayEstados(), "I" )?>
                        </div>
                        <div class="col-md-4 mb-1 ">
                            <div class="col-auto">
                                <label class="sr-only" for="FechaDocumento1">Fecha Desde</label>
                                <div class="input-group mb-2">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text"><?=addImgButton( "calendar.png", array( "class"=>"", "height"=>24 ) )?></div>
                                    </div>
                                    <input type="text" class="form-control text-center" id="FechaDocumento1" name="FechaDocumento1" placeholder="Fecha Desde" value="<?=date( "Y-m-" )?>01" autocomplete="off">
                                    <script type="text/javascript">
                                        $( "#FechaDocumento1" ).datepicker( { dateFormat: "yy-mm-dd", changeYear:true, yearRange: "-5:+0", changeMonth: true, onClose: function (){ this.focus(); } } );
                                    </script>
                                </div>
                            </div>
                            <div class="col-auto">
                                <label class="sr-only" for="FechaDocumento2">Fecha Hasta</label>
                                <div class="input-group mb-2">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text"><?=addImgButton( "calendar.png", array( "class"=>"", "height"=>24 ) )?></div>
                                    </div>
                                    <input type="text" class="form-control text-center" id="FechaDocumento2" name="FechaDocumento2" placeholder="Fecha Hasta" autocomplete="off">
                                    <script type="text/javascript">
                                        $( "#FechaDocumento2" ).datepicker( { dateFormat: "yy-mm-dd", changeYear:true, yearRange: "-5:+0", changeMonth: true, onClose: function (){ this.focus(); } } );
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row mx-0">
                        <div class="col-md-4 mb-1">
                            <label class="col-form-label" for="RutaDocumento">Ruta Nro</label>
                            <input type="text" class="form-control" name="RutaDocumento" id="RutaDocumento" placeholder="" autocomplete="off">
                        </div>
                        <div class="col-md-4 mb-1">
                            <label class="col-form-label" for="RutaDocDespacho">Comprobante</label>
                            <input type="text" class="form-control" name="RutaDocDespacho" id="RutaDocDespacho" placeholder="" autocomplete="off">
                        </div>
                        <div class="col-md-4 mb-1">
                            <label class="col-form-label" for="NumeroDocumentoRef">Guia Transportista</label>
                            <input type="text" class="form-control" name="NumeroDocumentoRef" id="NumeroDocumentoRef" placeholder="" autocomplete="off">
                        </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>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    cargarTotales = function( s_params )
    {
        blockContent( 'content_totales' );
        executeAjaxUpdater(
            "content_totales",
            "<?=buildUrl( 'pro/totales', '' )?>",
            s_params,
            function()
            {
                unBlockContent( 'content_totales' );

                //var column = $( '#content_all_row td:nth-child( 4 )' );
                //modifyTableRowspan( column );
            }
        );
    }
    exportarExcel = function()
    {
        strFormSerialize = $( 'form' ).serialize();
        window.open( '<?=buildUrl( 'pro/expexcel' )?>?' + strFormSerialize, '_BLANK' );
    }
</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>

<script type="text/javascript">
    executeAjaxUpdater
    (
        "content_totales",
        "<?=buildUrl( 'pro/request', 'TipoProc=anular_doc_limit' )?>",
        '',
        function()
        {
        }
    );
</script>
