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

<style type="text/css">
.buttonpr.micro 
{
    margin: 0 0 0.5rem 0;
    padding: 0.25em 0.25rem;
    font-size: 0.6rem;
    font-weight: bold;
    line-height: 1;
    color: #ffffff; 
}

.buttonpr.success 
{
    background-color: #619518;
    /*color: #0a0a0a;*/
}

.buttonpr.alert 
{
    background-color: #BE3047;
    /*color: #fefefe;*/
}

.buttonpr 
{
    display: inherit;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    font-family: inherit;
    padding: 0.85em 1em;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    font-size: 0.9rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    background-color: #0078EB;
    color: #fefefe;
}
</style>

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

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

massiveProcess = function()
{
    x = confirm( "Esta seguro de realizar el proceso Masivo?" );
    if( x )
    {
        /*
        blockContent( 'form1' );
        blockContent( 'gbox_jqGrid' );
        var str_serialize = $( 'form' ).serialize();    
        executeAjaxJson
        (
            "<?php echo buildUrl( 'cpe/procesoMasivo' ) ?>",
            str_serialize,
            function( o_json )
            {
                pr( o_json );
                unBlockContent( 'form1' );
                unBlockContent( 'gbox_jqGrid' );
                if( o_json.error )
                {
                    alert( o_json.mensaje_error );
                }
                findControl();
            }
        );
        */

        $( "#myIframe2" ).html( "" );

        var str_serialize = $( 'form' ).serialize();
        $( '#myIframe2' ).attr( 'src', '<?=buildUrl( 'cpe/procesoMasivo' )?>?' + str_serialize );
        $( '#dialog2' ).dialog( 'open' );
    }
}

procesarDocumento = function( i_Id )
{
    $( '#myIframe' ).attr( 'src', '<?=buildUrl( 'cpe/procAPISunat', 'id=' )?>' + i_Id );
    $( '#dialog' ).dialog( 'open' );
}

redirectFunction = function( link )
{
    window.open( link, "_BLANK" )
}

viewDetail = function( tipo, compa, num )
{
    $( '#myIframe2' ).attr( 'src', '<?=buildUrl( 'pro/view', 's_TipoProc=shw&i_Id=' )?>' + tipo + "_" + compa + "_" + num );
    $( '#dialog2' ).dialog( 'open' );
}

mostrarDocumentoReferencia = function( Id )
{
    var s_param_ajax = "s_TipoProc/shw/IdNumDoc/" + Id;
    $( '#myIframe2' ).attr( 'src', '<?=buildUrlComplet( 'vta.php/pro/detailVta' )?>' + s_param_ajax );
    $( '#dialog2' ).dialog( 'open' );
}

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

<script>
    var jqGridContent = $( "#jqGrid" );
    jqGridContent.jqGrid
    (
        {
            url         : '<?=buildUrl( 'cot/index' )?>',
            mtype       : "POST",
            datatype    : "json",
            editurl     : 'edicionData.php',
            colNames    : [ 'Id', 'Tipo', 'NumDoc', 'Emision', 'Cliente', 'Moneda', 'Total', 'EstadoWeb', 'EstadoCPE', 'Sunat', 'ANU', '', '', '', '' ],
            colModel    : 
                        [
                            { name: 'FactElecId',          width: 0, align: 'center', hidden: true, hidedlg: false, editrules : { required: true }, key: true },
                            { name: 'TipoComprobanteDesc', width: 100, align: 'center', editable: true, sortable: true },
                            { 
                                name: 'SerieNumero',       width: 110, align: 'center', editable: true, sortable: false,
                                formatter:function( rs, o_grid, o_data, type )
                                {
                                    return "<a href='javascript:void(0);' onclick=mostrarDocumentoReferencia('"+o_data.FactElecId+"') style='text-decoration: underline;color: blue;'>"+o_data.SerieNumero+"</a>";
                                }
                            },
                            { name: 'FechaDocumentoRec',   width: 90, align: 'center', editable: true, sortable: false },
                            { name: 'ClienteNom',          width: 230,  align: 'left', editable: true, sortable: false },
                            { name: 'MonedaDesc',          width: 60,  align: 'center', editable: true, sortable: false },
                            { name: 'MontoTotal',          width: 80,  align: 'right', editable: true, sortable: false },
                            { name: 'EstadoWebDesc',       width: 70,  align: 'center', editable: true, sortable: false },
                            { name: 'EstadoDesc',          width: 70,  align: 'center', editable: true, sortable: false },
                            { name: 'AceptadaxSunat',      width: 25,  align: 'center', editable: false, sortable: false },
                            { name: 'AnuAceptadaPorSunat', width: 35,  align: 'center', editable: false, sortable: false },

                            { 
                                name: 'pdf', width: 30, align: 'center', sortable: false, search: false, 
                                formatter:function( rs, o_grid, o_data, type )
                                {
                                    if( o_data.PDFResult )
                                    {
                                        return "<label class='buttonpr micro alert' onclick=redirectFunction('"+o_data.PDFResult+"')>PDF</label>";
                                    }
                                    else
                                    {
                                        return "";
                                    }
                                }
                            },

                            { 
                                name: 'xml', width: 30, align: 'center', sortable: false, search: false, 
                                formatter:function( rs, o_grid, o_data, type )
                                {
                                    if( o_data.XMLResult )
                                    {
                                        return "<label class='buttonpr micro success' onclick=redirectFunction('"+o_data.XMLResult+"') >XML</label>"
                                    }
                                    else
                                    {
                                        return "";
                                    }
                                }
                            },

                            { 
                                name: 'cdr', width: 30, align: 'center', sortable: false, search: false, 
                                formatter:function( rs, o_grid, o_data, type )
                                {
                                    if( o_data.CDRResult )
                                    {
                                        return "<label class='buttonpr micro' onclick=redirectFunction('"+o_data.CDRResult+"')>CDR</label>"
                                    }
                                    else
                                    {
                                        return "";
                                    }
                                }
                            },

                            { 
                                name: 'details', width: 20, align: 'center', sortable: false, search: false, 
                                formatter:function()
                                {
                                    return "<span style='cursor:pointer; margin: 0 auto;' class='ui-icon ui-icon-gear' title='Procesar Documento' onclick='procesarDocumento( $(this).parent().parent()[0].id );'></span>"
                                }
                            }
                        ],
            viewrecords : true,
            height      : $(window).height()-205, 
            width       : $(window).width() - 14,
            //width       : 600,
            autowidth   : true,
            sortable    : true,
            multiSort   : true,
            //width: null,
            //shrinkToFit: false,
            emptyrecords: "No se encontro registros",
            //height      : 480,
            rowNum      : 100,
            rownumbers  : true, // show row numbers
            //multiselect : true,//SELECCION MULTIPLE
            pager       : "#jqGridPager",
            //caption     : "Products / Category Primary Grid View"

            shrinkToFit : false,
            forceFit:true,
            
            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() - 20, false );
    }
    else
    {
        jqGridContent.jqGrid( "setGridWidth", $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() - 20, true);
    }

    setTimeout( "findControl();", 500 );
</script>

<?=crearFuentePopupIframe( array( "div_id"=>"dialog", "iframe_id"=>"myIframe", "popup_title"=>"", "popup_width"=>"800", "popup_height"=>"600", "modal" => true ) )?>
<?=crearFuentePopupIframe( array( "div_id"=>"dialog2", "iframe_id"=>"myIframe2", "popup_title"=>"", "modal" => true ) )?>
<?=crearFuentePopupIframe( array( "div_id"=>"dialog3", "iframe_id"=>"myIframe3", "popup_title"=>"", "modal" => true ) )?>