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

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

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

showView = function( Id )
{
    $( '#myIframe' ).attr( 'src', '<?=buildUrl( 'transporte/showdevol', "TipoProc=nvo&IdProyecto=" )?>' + Id );
    $( '#dialog' ).dialog( 'open' );
}

aprobacionDespacho = function( Id )
{
    var s_param_ajax = "TipoProceso/DE/IdMovimientoSerie/" + Id;
    $( '#myIframe4' ).attr( 'src', '<?=buildUrl( 'transporte/aprobGuiaRem' )?>' + s_param_ajax );
    $( '#dialog4' ).dialog( 'open' );
}

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

mostrarDocumentoCotizacion= function( Id )
{
    //var s_param_ajax = "readonly/1/OrdNum/" + Id;
	var s_param_ajax = "readonly/1/i_Id/" + Id;
    $( '#myIframe4' ).attr( 'src', '<?=buildUrlComplet( 'vta.php/cot/detailVta' )?>' + s_param_ajax );
    $( '#dialog4' ).dialog( 'open' );
}

closeWindow = function()
{
    $( '#dialog' ).dialog( 'close' );
    $( '#dialog4' ).dialog( 'close' );
}

/*
realizarDevolucion = function( id_guia )
{
	location.href='<?=buildUrl( "transporte/addeditdevol", "TipoProc=nvo&GuiaId=" )?>' + id_guia;
}
*/

realizarDevolucionPopup = function( id )
{
    $( '#myIframe4' ).attr( 'src', '<?=buildUrl( 'transporte/addeditdevol', "TipoProc=nvo&IdProyecto=" )?>' + id );
    $( '#dialog4' ).dialog( 'open' );
}

redirectFunction = function( link )
{
    window.open( link, "_BLANK" )
}
</script>

<script>
    var jqGridContent = $( "#jqGrid" );
    jqGridContent.jqGrid
    (
        {
            url         : 'nothing',
            mtype       : "POST",
            datatype    : "json",
            //editurl     : 'edicionData.php',                        
            colNames    : [ 'Id', 'Proyecto', 'Doc Cliente', 'Cliente', /*'Cotizacion',*/ 'F.Descpacho', 'Estado', 'Nro Devol', 'Cant Despacho', 'Cant Devuelto', 'Por Devol', 'Usuario',  '', '' ],
            colModel    : 
                          [
                            { name: 'IdProyecto',       width: 0, align: 'center', hidden: true, hidedlg: false, editrules : { required: true }, key: true },
                            { name: 'NombreProyecto',   width: 130, align: 'center', editable: true, sortable: false },
                            { name: 'ClienteNroDocu',   width: 90, align: 'center', editable: true, sortable: false },
                            { name: 'ClienteNombre',    width: 200, align: 'center', editable: true, sortable:  false },
                            /*{
                                name: 'OrdenNum', width: 90, align: 'center', editable: true, sortable:  false,
                                formatter: function( cellvalue, options, rowObject )
                                {
                                    var o_Data = arguments[2];
                                    return  "<span style='color:blue;text-decoration: underline;cursor:pointer;' originalValue='" + cellvalue + "' onclick='mostrarDocumentoCotizacion(\""+o_Data.OrdenId+"\");'>" + cellvalue + "</span>";
                                } 
                            },*/
                            { name: 'FechaInicioDespacho',   width: 90, align: 'center', editable: true, sortable:  false, formatter: 'date', formatoptions: { newformat: 'Y-m-d' } },
                            { name: 'DevolucionEstadoDesc',  width: 90,  align: 'center', editable: true, sortable: false },
                            { name: 'NumeroDevolucionesCab', width: 90,  align: 'center', editable: true, sortable: false },
                            { name: 'CantidadDespachado',    width: 90,  align: 'center', editable: true, sortable: false },
                            { name: 'CantidadDevuelto',      width: 90,  align: 'center', editable: true, sortable: false },
                            { name: 'CantidadPorDevolver',   width: 90,  align: 'center', editable: true, sortable: false },
                            { name: 'UsuarioCreacion',       width: 90,  align: 'center', editable: true, sortable: false },
                            { 
                                name: 'details', width: 25, sortable: false, search: false, align: 'center',
                                formatter:function()
                                {
                                	var o_Data = arguments[2];
                                    return "<span style='cursor:pointer; margin: 0 auto;' class='ui-icon ui-icon-document' title='' onclick='showView(\""+o_Data.IdProyecto+"\");'></span>"
                                }
                            },
                            { 
                                name: 'print', width: 25, sortable: false, search: false, align: 'center',
                                formatter:function()
                                {
                                    var o_Data = arguments[2];
                                    return "<span style='cursor:pointer; margin: 0 auto;' class='ui-icon ui-icon-gear' title='' onclick='realizarDevolucionPopup(\""+o_Data.IdProyecto+"\");'></span>"
                                }
                            }
                          ],
            viewrecords : true,
            height      : $( window ).height()-200, 
            width       : $( window ).width() - 17,
            //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"
            onCellSelect: function( rowid, iCol, cellcontent )
            {
                //otra manera de realizar un evento por columnas
                if( iCol == 2 ) //Codigo del Item
                {
                    var a_ids = explode( "_", rowid );
                    console.log( arguments );
                    console.log( a_ids[0] );
                    //showView( a_ids[0], a_ids[1], '1' );
                }
            },
            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
    (
        function()
        {
            findControl();
            //$( "#jqGrid" ).parents( 'div.ui-jqgrid-bdiv' ).css( "height", ($(window).height()-180) );
        },
        300
    );
</script>
<?=crearFuentePopupIframe( array( "div_id"=>"dialog", "iframe_id"=>"myIframe", "popup_title"=>"Documento Resumen", "modal"=>true ) )?>
<?=crearFuentePopupIframe( array( "div_id"=>"dialog4", "iframe_id"=>"myIframe4", "popup_title"=>"Registro de Devolucion", "modal"=>true ) )?>