<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<style>
.ui-jqgrid tr.jqgrow td{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
</style>
<script>
    findControl = function ()
    {
        strFormSerialize = $( 'form' ).serialize();
        relaodGrid( strFormSerialize );
    }
    
    relaodGrid = function( s_url_param )
    {
        jQuery( '#jqGrid' ).jqGrid( 'clearGridData' );
        jQuery( '#jqGrid' ).jqGrid( 'setGridParam', { url: '<?=buildUrl('cierre/grid','block=001')?>?' + s_url_param } );
        jQuery( '#jqGrid' ).trigger( 'reloadGrid' );
    }
    
    cerrarPeriodo = function( i_Id, PeriodoDesc )
    {
        x = confirm( "Esta seguro de Cerrar el Periodo " + PeriodoDesc + "?" );
        if( x )
        {
            blockContent( "jqGrid" );
            mostrarCargaImg();
            $( "#jqGrid" ).closest( ".ui-jqgrid" ).find( '.loading' ).show();
            var strFormSerialize = "i_Id=" + i_Id;
            executeAjaxJson( 
                                "<?php echo buildUrl( 'cierre/cierrePeriodo', "" ) ?>", 
                                strFormSerialize,
                                function( o_json )
                                {
                                    console.log( o_json );
                                    ocultarCargaImg();
                                    unBlockContent( "jqGrid" );
                                    $( "#jqGrid" ).closest( ".ui-jqgrid" ).find( '.loading' ).hide();
                                    if( o_json.error )
                                    {
                                        mostrarMensajeError( o_json.mensaje_error );
                                        return false;
                                    }
                                    findControl();
                                } 
                           );
        }
    }
    
    abrirPeriodo = function( i_Id, PeriodoDesc )
    {
        x = confirm( "Esta seguro de Cerrar el Periodo " + PeriodoDesc + "?" );
        if( x )
        {
            blockContent( "jqGrid" );
            mostrarCargaImg();
            $("#jqGrid").closest(".ui-jqgrid").find('.loading').show();
            var strFormSerialize = "i_Id=" + i_Id;
            executeAjaxJson( 
                                "<?php echo buildUrl( 'cierre/abrirPeriodo', "" ) ?>", 
                                strFormSerialize,
                                function( o_json )
                                {
                                    console.log( o_json );
                                    ocultarCargaImg();
                                    unBlockContent( "jqGrid" );
                                    $( "#jqGrid" ).closest( ".ui-jqgrid" ).find( '.loading' ).hide();
                                    if( o_json.error )
                                    {
                                        mostrarMensajeError( o_json.mensaje_error );
                                        return false;
                                    }
                                    findControl();
                                } 
                           );
        }
    }
    
    closeWindow = function( s_NameWin )
    {
        $( '#' + s_NameWin ).dialog( 'close' );
    }
</script>

<script>
    var jqGridContent = $( "#jqGrid" );
    jqGridContent.jqGrid
    (
        {
            url         : '<?=buildUrl( 'cierre/grid', '' )?>',
            mtype       : "POST",
            datatype    : "json",
            editurl     : 'edicionData.php',                        
            colNames    : [ 'IdCierre', 'Periodo', 'Estado', 'Comentario', 'Usuario', '' ],
            colModel    : 
                          [
                            { name: 'IdCierre',        width: 0, align: 'center', hidden: true, hidedlg: false, editrules : { required: true }, key: true },
                            { name: 'PeriodoDesc',     width: ( $( window ).width() ) /10, align: 'center', editable: false, sortable: false },
                            { name: 'EstadoDesc',      width: ( $( window ).width() ) /10, align: 'center', editable: false, sortable: false },
                            { name: 'Comentario',      width: ( $( window ).width() ) /10, align: 'center', editable: false, sortable: false },
                            { name: 'UsuarioCreacion', width: ( $( window ).width() ) /10, align: 'center', editable: false, sortable: false },
                            
                            { name: 'edit', width: ( $( window ).width() ) /10, align: 'center', sortable: false, search: false,
                                formatter:function()
                                {
                                    var o_Data = arguments[2];
                                    
                                    if( o_Data.Estado == "A" )
                                    {
                                        return "<input type='button' class='button' value='CERRAR' style='padding: 0;font-family: Verdana,Arial,sans-serif;' onclick='cerrarPeriodo( \"" + o_Data.IdCierre + "\", \"" + o_Data.PeriodoDesc + "\" )'>";
                                    }
                                    if( o_Data.AbrirPeriodoFlag )
                                    {
                                        return "<input type='button' class='button' value='ABRIR' style='padding: 0;font-family: Verdana,Arial,sans-serif;' onclick='abrirPeriodo( \"" + o_Data.IdCierre + "\", \"" + o_Data.PeriodoDesc + "\" )'>";
                                    }
                                    return "";
                                }
                            }
                          ],
            viewrecords : true,
            height      : $(window).height()-200, 
            width       : $(window).width() - 20,
            //width       : 600,
            //autowidth   : true,
            sortable    : true,
            multiSort   : true,
            //width: null,
            //shrinkToFit: false,
            emptyrecords: "No se encontro registros",
            //height      : 480,
            rowNum      : 15,
            rownumbers  : true, // show row numbers
            //multiselect : true,//SELECCION MULTIPLE
            pager       : "#jqGridPager",
            //caption     : "Products / Category Primary Grid View"
            onCellSelect: function()
            {

            },
            beforeSelectRow: function ( rowid, e ) 
            {

            }
        }
    );

    $( "#jqGrid" ).jqGrid( 'bindKeys' );
    
    $(window).on
    ( 
        "resize", 
        function () 
        {
            var newWidth = $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() - 20;
            jqGridContent.jqGrid( "setGridWidth", newWidth, true);
        }
    );
</script>

<?=crearFuentePopupIframe( array( "div_id"=>"dialog", "iframe_id"=>"myIframe", "popup_title"=>"Resumen", "popup_width"=>"700", "popup_height"=>"370" ) )?>
