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

<script>
    findControl = function ()
    {
        strFormSerialize = $( 'form' ).serialize();
        relaodGrid( strFormSerialize );
    }

    relaodGrid = function( s_url_param )
    {
        jQuery( '#jqGrid' ).jqGrid( 'clearGridData' );
        jQuery( '#jqGrid' ).jqGrid( 'setGridParam', { url: '<?=buildUrl( 'cxpagar/gridRecibo', '' )?>?' + s_url_param } );
        jQuery( '#jqGrid' ).trigger( 'reloadGrid' );
    }

    showView = function( i_Id )
    {
        //window.open( '<?=buildUrl( 'cxpagar/cierreCajaPDF', 'id_cierre=' ) ?>' + i_Id, '_BLANK' );
        $( '#myIframe' ).attr( 'src', '<?=buildUrl( 'cxpagar/viewdel', 's_TipoProc=shw&i_Id=' )?>' + i_Id );
        $( '#dialog' ).dialog( 'open' );
    }

    deleteRow = function( i_Id )
    {
        $( '#myIframe' ).attr( 'src', '<?=buildUrl( 'cxpagar/viewdel', 's_TipoProc=dlt&i_Id=' )?>' + i_Id );
        $( '#dialog' ).dialog( 'open' );
    }

    closeWindow = function()
    {
        $( '#dialog' ).dialog( 'close' );
    }
</script>

<script>
    var jqGridContent = $( "#jqGrid" );
    jqGridContent.jqGrid
    (
        {
            url         : '<?=buildUrl( 'caja/nothing' )?>',
            mtype       : "POST",
            datatype    : "json",
            editurl     : 'edicionData.php',
            colNames    : [ 'IdDocRecibo', 'Nro Cob', 'Fecha Op', 'Med Pago', 'No Operacion', 'TipoDoc', 'NumDoc',  'Proveedor', 'Banco', 'Nro Cuenta', 'Moneda', 'Monto', 'Saldo', 'Estado', '' ],
            colModel    :
                [
                    { name: 'IdDocRecibo',       width: 0, align: 'center', hidden: true, hidedlg: false, editrules : { required: true }, key: true },
                    { name: 'IdDocRecibo',       width: 50, align: 'center', editable: true, sortable: true },
                    { name: 'ReciboFecha',       width: 70, align: 'center', editable: true, sortable: true, formatter:'date', formatoptions: {srcformat: 'Y-m-d', newformat:'Y-m-d'} },
                    { name: 'TipoPagoNombre',    width: 70, align: 'center', editable: true, sortable: true },
                    { name: 'ReciboNumero',      width: 90, align: 'center', editable: true, sortable: true },
                    { name: 'TipoDocCliente',    width: 50, align: 'center', editable: true, sortable: true },
                    { name: 'NumTipoDocCliente', width: 70, align: 'center', editable: true, sortable: true },
                    { name: 'NombreCliente',     width: 200, align: 'left', editable: true, sortable: true },
                    { name: 'BancoDesc',         width: 90, align: 'center', editable: true, sortable: true },
                    { name: 'NumeroCuenta',      width: 90, align: 'center', editable: true, sortable: true },
                    { name: 'MonedaDes',         width: 70, align: 'center', editable: true, sortable: true },
                    { name: 'Monto',             width: 70, align: 'right', editable: true, sortable: true },
                    { name: 'Saldo',             width: 70, align: 'right', editable: true, sortable: true },
                    { name: 'EstadoDesc',        width: 70, align: 'center', editable: true, sortable: true },

                    { name: 'details', width: 30, sortable: false, search: false, align: 'center',
                        formatter:function()
                        {
                            return "<span style='cursor:pointer;' class='ui-icon ui-icon-document' onclick='showView( $(this).parent().parent()[0].id );'></span>"
                        }
                    }
                ],
            viewrecords : true,
            height      : $(window).height()-200,
            width       : $(window).width() - 20,
            //width       : 600,
            //autowidth   : true,
            sortable    : true,
            multiSort   : true,
            //width: null,
            shrinkToFit : false,
            emptyrecords: "Nothing to display",
            //height      : 480,
            rowNum      : 100,
            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;
            if( newWidth <= 705 )
            {
                jqGridContent.jqGrid( "setGridWidth", newWidth, false );
            }
            else
            {
                jqGridContent.jqGrid( "setGridWidth", newWidth, true);
            }
        }
    );
    if( $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() <= 705 )
    {
        jqGridContent.jqGrid( "setGridWidth", $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() - 5, false );
        //jqGridContent.jqGrid( "setGridWidth", $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().height() - 270, false );
    }
    else
    {
        jqGridContent.jqGrid( "setGridWidth", $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() - 5, true);
    }
    setTimeout( "findControl();", 300 );
</script>

<?=crearFuentePopupIframe( array( "div_id"=>"dialog", "iframe_id"=>"myIframe", "popup_title"=>"Recibo", "modal"=>true ) )?>