@extends('header_nuevo_generico')
@section('main')
<style>
.inner-container {
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1200px) {
    .inner-container{
        min-width: 1024px;
        max-width: 1024px;        
    }
}
@media (min-width: 1366px) {
    .inner-container{
        min-width: 1320px;
        max-width: 1320px;
    }
}
@media (min-width: 1600px) {
    .inner-container{
        min-width: 1450px;
        max-width: 1450px;
    }
}
@media (min-width: 1920px) {
    .inner-container{
        min-width: 1690px;
        max-width: 1690px;
    }
}
</style>
<script type="text/javascript" src="{{ URL::asset('js/fancy/fancy.min.js') }}?v={{time()}}"> </script>

<div class="container-fluid mt-5 pt-5">
    <div class="row py-3">
        <div class="col-md-8 h3">Carga de documentación - Pendientes</div>
        <div class="col-md-4 text-end">
            <a href="/verifica-documentos-nuevo/verificacion_cliente" type="button" class="btn btn-sm btn-success" style="width:180px"><i class="fa fa-check"></i> Documentos verificados</a>
            <a href="/led/carga-documentacion-rechazados-backend" type="button" class="btn btn-sm btn-danger" style="width:180px"><i class="fa fa-times"></i> Documentos rechazados</a>            
        </div>
        
    </div>
    <div class="row" id="loading" style="display:none;">
        <div class="col-md-12 text-center">
            <img src="/images/loading.gif" alt="" class="" width="40px">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" id="tablaDocs" style="display:none;"></div>
    </div>
</div>

<form action="/led/new-carga-documentacion-detalle" id="frmDocs" name="frmDocs" method="post">
    {{csrf_field()}}
    <input type="hidden" name="doc_id" value="">
    <input type="hidden" name="tipo_doc" value="">
    <input type="hidden" name="integ_carga">
    <input type="hidden" name="integ_verif">
    <input type="hidden" name="integ_rech">
</form>
@endsection

@section('funcionesJS')
<script>

    var grid;

    // let estados_listo_iniciar = [
    //         { 'lista_para_iniciar':'W','color':'text-danger','icon': 'bi-exclamation-diamond-fill','title':'En espera' },
    //         { 'lista_para_iniciar':'L','color':'text-success','icon': 'bi-exclamation-diamond-fill','title':'Listo para iniciar' },
    //         { 'lista_para_iniciar':'N','color':'text-secondary','icon': 'bi-lock-fill','title':'No esta lista para iniciar' },
    //         { 'lista_para_iniciar':'A','color':'text-primary','icon': 'bi-play-fill','title':'Play' },
    //         { 'lista_para_iniciar':'U','color':'text-secondary','icon': 'bi-pause','title':'Pause' }
    //     ]

    $(document).ready(function() {
        $.ajax({
            method : 'post',
            url : '/led/carga-documentacion-pendientes',
            data : $('#frmDocs').serialize(),
            dataType : 'json',
            beforeSend : function() {
                $('#loading').show();
                $('#tablaDocs').html('');
            },
            success : function(response) {
                var docs = response.data;
                grid = new FancyGrid({
                    renderTo : 'tablaDocs',
                    height: 700,
                    cellHeight: 42,
                    theme: {
                        name: 'blue',
                    },
                    lang: {
                        paging: {
                            info: 'Página Actual [0] - [1] de [2]',
                            page: 'Página',
                            of: 'de [0]'
                        },
                    },
                    selModel: { type : 'rows', memory : true },
                    paging : true,
                    paging : {
                        pageSize: 50,
                        pageSizeData: [20,50,100],
                        barType: 'tbar'
                    },
                    data: docs,
                    columns: [
                        { 
                            type : 'string' , 
                            title : 'País' , 
                            index : 'icono_pais' , 
                            width : 110 , 
                            cellAlign : 'center', 
                            sortable : true , 
                            resizable : true , 
                            // filter : {header:true} , 
                            align : 'center' 
                        },
                        { type : 'string' , title : 'Cliente' , index : 'nombre_cliente' ,   width : 270,  cellAlign : 'left', sortable : true , resizable : true , filter : {header:true} , align : 'center' },
                        { type : 'string' , title : 'Familia' , index : 'nombre_familia' ,   width : 270,  cellAlign : 'left', sortable : true , resizable : true , filter : {header:true} , align : 'center' },
                        { type : 'string' , title : 'Contraparte' , index : 'nombre_persona' ,  width : 270, cellAlign : 'left', sortable : true , resizable : true , filter : {header:true} , align : 'center' },
                        { type : 'string' , title : 'ID' , index : 'identificacion' , width : 110 , cellAlign : 'center', sortable : true , resizable : true , filter : {header:true} , align : 'center'},    
                        { type : 'string' , title : 'Documento' , index : 'nombre_tipo_doc' , width : 395 , cellAlign : 'left', sortable : true , resizable : true , filter : {header:true} , align : 'center', flex: 1},    
                        { type : 'date' , format: {read:'d/m/Y',write:'d/m/Y'}, index:'fin_ejercicio', title : 'Fecha cierre' , width : 100 , cellAlign : 'center', sortable : true , resizable : true,align : 'center'}, 
                        { type : 'date' , format: {read:'d/m/Y',write:'d/m/Y'}, index:'creado', title : 'Fecha creación' , width : 100 , cellAlign : 'center', sortable : true , resizable : true,align : 'center'}, 
                        { type : 'date' , format: {read:'d/m/Y',write:'d/m/Y'}, index:'vencimiento_carga', title : 'Venc. Carga' , width : 80 , cellAlign : 'center', sortable : true , resizable : true,align : 'center'}, 
                        { type : 'string' , index:'informe', title : 'id Informe' , width : 80 , cellAlign : 'center', sortable : true , resizable : true,align : 'center'}, 
                        { type : 'string' , index:'nombre_estado_informe', title : 'Est. Informe' , width : 80 , cellAlign : 'center', sortable : true , resizable : true,align : 'center'}
                    ],
                    events : [{cellclick : function(grid, obj) {
                        selection = grid.getSelection();

                        $('#frmDocs [name="doc_id"]').val(selection[0].doc_id);
                        $('#frmDocs [name="tipo_doc"]').val(selection[0].tipo_doc);
                        $('#frmDocs [name="integ_carga"]').val(obj.data.integ_carga);
                        $('#frmDocs [name="integ_verif"]').val(obj.data.integ_verif);
                        $('#frmDocs [name="integ_rech"]').val(obj.data.integ_rech);
                        $('#frmDocs').submit();
                    }
                    }]
                });

                $('#loading').hide();
                $('#tablaDocs').show();
            }
        });
    });

</script>
@endsection