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

<link rel="stylesheet" type="text/css" href="<?=Constantes::ROOT_DIR_APP?>web/lib/bootstrap/css/tempusdominus-bootstrap-4.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js" integrity="sha512-ubuT8Z88WxezgSqf3RLuNi5lmjstiJcyezx34yIU2gAHonIi27Na7atqzUZCOoY4CExaoFumzOsFQ2Ch+I/HCw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment-with-locales.min.js" integrity="sha512-EATaemfsDRVs6gs1pHbvhc6+rKFGv8+w4Wnxk4LmkC0fzdVoyWb+Xtexfrszd1YuUMBEhucNuorkf8LpFBhj6w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.31/moment-timezone-with-data-10-year-range.min.js" integrity="sha512-Rb9RCtecTEK3SdnnQhrZx4GM1ascb2CNHybgugRDTriP/b1As79OemxeIT5qs6RMJ/fCpeJrDjtpASh7I7EKMQ==" crossorigin="anonymous"></script>

<script type="text/javascript" src="<?=Constantes::ROOT_DIR_APP?>web/lib/bootstrap/js/tempusdominus-bootstrap-4.js"></script>

<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"><?=$s_Titulo?></h4>
        </div>
    </div>
</div>

<div class="card">
    <h5 class="card-header">Filtro</h5>
    <div class="card-body pb-1">
        <form class="" name="form1" id="form1" method="POST" action="">
            <input type="hidden" name="IdCompania" value="<?=$IdCompania?>"/>
            <div class="form-row mx-0">
                <div class="col-md-10 mb-1">
                    <div class="form-row mx-0">
                        <div class="col-md-4 mb-1">
                            <label class="col-form-label" for="FechaDocumento1">Ejercicio</label>
                            <div class="input-group date" id="" data-target-input="nearest">
                                <input type="text" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#FechaDocumento1" id="FechaDocumento1" name="FechaDocumento1" value="<?=date( "Y" )?>" autocomplete="off" />
                                <div class="input-group-append" data-target="#FechaDocumento1" >
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                                <script type="text/javascript">
                                    $(function () { $('#FechaDocumento1').datetimepicker({ viewMode: 'years', format: 'YYYY' }); });
                                </script>
                            </div>
                        </div>
                        <div class="col-md-4 mb-1">
                            <label class="col-form-label" for="FechaDocumento2">Periodo</label>
                            <div class="input-group date" id="" data-target-input="nearest">
                                <input type="text" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#FechaDocumento2" id="FechaDocumento2" name="FechaDocumento2" value="<?=date( "m" )?>" autocomplete="off" />
                                <div class="input-group-append" data-target="#FechaDocumento2" >
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                                <script type="text/javascript">
                                    $(function () { $('#FechaDocumento2').datetimepicker({ locale: 'es', viewMode: 'years', format: 'MM' }); });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 mb-1">
                    <button class="btn btn-primary btn-block" type="button" onclick="findControl( 1 );">BUSCAR</button>
                    <button type="button" class="btn btn-primary btn-block" onclick="findControl( 2 );">EXCEL</button>
                </div>
            </div>
        </form>
    </div>
</div>

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

<div id="jqGridPager"></div>

<script>
regexDateValidator = function ( fecha ) 
{
    return ( fecha ).match(/([0-9]{4})\-([0-9]{2})\-([0-9]{2})/);
}
findControl = function ( tipo )
{
    b_Control = true;
    //Validacion de Fecha de Inicio
	/*var b_Control = regexDateValidator( $( "#FechaDocumento1" ).val() );
    if( !b_Control )
    {
    	alert( "Seleccione una fecha de Inicio." );
    }*/

    //VALIDAR FECHA NO MAYOR QUE
    /*var b_result = validate_fechaMayorQue( $( "#FechaDocumento1" ).val(), $( "#FechaDocumento2" ).val() );
    if( b_result )
    {
    	alert( "La Fecha Inicial no puede ser Mayor que la Fecha Final." );
    	return false;
    }*/
    if( b_Control )
    {
        strFormSerialize = $( 'form' ).serialize();
        relaodGrid( strFormSerialize, tipo );
    }
}

relaodGrid = function( s_url_param, tipo )
{
    if( tipo == 1 )
    {
    	blockContent( 'jqGridPager' );
        executeAjaxUpdater
        ( 
            "jqGridPager", 
            "<?=buildUrl( 'rep/gridCompras' )?>", 
            strFormSerialize, 
            function()
            {
            	unBlockContent( 'jqGridPager' );
                
            	//var column = $( '#content_all_row td:nth-child( 4 )' );
            	//modifyTableRowspan( column );
            }
        );
    }
    else
    {
        window.open( "<?=buildUrl( 'rep/gridCompras' )?>?export_excel=1&" + s_url_param, "_BLANCK" );
    }
}
//findControl();
</script>