document.getElementById("filtro_list").style.display ="none";
consultar();
//Consultar all
function dataTable(){
        let pe= permiso;
        let u = username;
        $.ajax({
            url: 'back-end/guias.php',
            type: 'GET',
            data:{u},
            success: function(response){
            let o = JSON.parse(response);
                $('#list_guias').dataTable( {
                    retrieve: true,
                    searchable: false,
                    data : o,
                    columns: [
                        {"data" : "guia"}, 
                        {"data" : "estado"},
                        {"data" : "division"},
                        {"data" : "vehiculo"},
                        {"data" : "cliente"},
                        {"data" : "pedido"},
                        {"data" : "telefono"},
                        {"data" : "fecha"}                              
                    ],
                    "language": {
                        url: "lib/js/es.json"
                    }
                });
            
            }
        })
}
function consultar(){
    $(document).ready(function(){
        if ( $.fn.dataTable.isDataTable( '#list_guias' ) ) {
            table = $('#list_guias').DataTable();
            table.destroy();
            dataTable();
        }else{
            dataTable();
        }
    })
}
//Filtros
function filtro(){
    if(document.getElementById("info_list").className=='col-md-12'){
        document.getElementById("filtro_list").style.display ="block";
        document.getElementById("filtro_list").className = "col-md-3";
        document.getElementById("info_list").className = "col-md-9";
    }else{
        document.getElementById("filtro_list").style.display ="none";
        document.getElementById("filtro_list").className = "";
        document.getElementById("info_list").className = "col-md-12";
    }
}
function aplicar_filtro(){
    if ( $.fn.dataTable.isDataTable( '#list_guias' ) ) {
        table = $('#list_guias').DataTable();
        table.destroy();
    }
    const postData = {
        filtro: 'SI',
        desde: $('#desde').val(),
        hasta: $('#hasta').val(),
        guia: $('#nro_guia_fil').val(),
        pedido: $('#cod_ped_fil').val(),
        estado: $('#estado_fil').val(),
        vehiculo: $('#vehiculo_fil').val()
    }
    $.ajax({
        url: 'back-end/guias.php',
        type: 'GET',
        data:postData,
        success: function(response){
            console.log(response)
        let f = JSON.parse(response);
        console.log(f)
            $('#list_guias').dataTable( {
                retrieve: true,
                data : f,
                columns: [
                    {"data" : "guia"}, 
                    {"data" : "estado"},
                    {"data" : "division"},
                    {"data" : "vehiculo"},
                    {"data" : "cliente"},
                    {"data" : "pedido"},
                    {"data" : "telefono"},
                    {"data" : "fecha"}                            
                ],
                "language": {
                    url: "lib/js/es.json"
                }
            });
        
        }
    })
}

//Registras Nueva Guia
function registrar(){
    let u = username;
    let error=''; var template='';
    let cod_cliente = $('#cod_cliente').val();
    let nom_cliente = $('#nom_cliente').val().toUpperCase();
    let tel_cliente = $('#tel_cliente').val();
    let email_cliente = $('#email_cliente').val();
    let dir_cliente = $('#dir_cliente').val().toUpperCase();
    let ped_cliente = $('#ped_cliente').val();
    let persona_ref = $('#persona_ref').val().toUpperCase();
    let telefono_ref = $('#telefono_ref').val();
    let detalles = $('#detalles').val();
    if(cod_cliente==''){error+="<i class='fas fa-arrow-circle-right '></i> Campo Codigo Cliente<br>";}
    if(nom_cliente==''){error+="<i class='fas fa-arrow-circle-right '></i> Campo Nombre Cliente<br>";}
    if(tel_cliente==''){error+="<i class='fas fa-arrow-circle-right '></i> Campo Telefono Cliente<br>";}
    if(dir_cliente==''){error+="<i class='fas fa-arrow-circle-right '></i> Campo Direccion Cliente<br>";}
    if(ped_cliente==''){error+="<i class='fas fa-arrow-circle-right '></i> Campo Pedido Cliente<br>";}
    if(persona_ref==''){error+="<i class='fas fa-arrow-circle-right '></i> Campo Persona Referencia<br>";}
    if(telefono_ref==''){error+="<i class='fas fa-arrow-circle-right '></i> Campo Telefono Referencia<br>";}
    if(error != ''){
        template +=`
        <div class="alert alert-danger" role="alert" id="alerta_add">
            <strong><i class='fas fa-times-circle'></i> Error! Faltan los siguiente datos</strong><br>${error}
        </div>`;
        $('#result_guia').html(template);  
        $('#alerta_add').delay(3000).fadeOut("slow");
    }else{
        const postData = {
            cod_cliente: cod_cliente,
            nom_cliente: nom_cliente,
            tel_cliente: tel_cliente,
            email_cliente: email_cliente,
            dir_cliente: dir_cliente,
            ped_cliente: ped_cliente,
            persona_ref: persona_ref,
            telefono_ref: telefono_ref,
            detalles: detalles,
            usuario_reg:u
        };
        
        $.post('back-end/guias.php', postData, function(response){
            consultar();
            $('#form_guia').trigger('reset');
            $('#resultado').html(response); 
            $('#nueva_guia').modal("hide");
            $('#alerta_add').delay(3000).fadeOut("slow");
        });
    }


}

//Consultar Detalles
function detalles(id){
    let id_guia = id; 
    
    $.ajax({
        url: 'back-end/guias.php',
        type: 'GET',
        data: {id_guia},
        success:function(response){
            const data = JSON.parse(response);
            let soporte = 'https://logitrackapp.systemsolutions.com.co/ver_foto.php?guia='+data.guia;
            let fechaact = 'https://logitrackapp.systemsolutions.com.co/back-end/guias.php?actualiza_fecha=0&cod_guia='+data.guia;
            nro_guia = data.guia;
            $('#nro_guia').html(data.guia);
            $('#nom_cli').html(data.cliente)
            $('#cod_cli').html(data.cod_cliente)
            $('#tel_cli').html(data.tel_cliente)
            $('#dir_cli').html(data.direccion)
            $('#ped_cli').html(data.pedido)
            $('#per_ref').html(data.persona_ref)
            $('#tel_ref').html(data.tel_ref)
            document.getElementById('f1').setAttribute('href', soporte);
            document.getElementById('btnip6').setAttribute('href', fechaact);
           
           var latitudReal = parseFloat(data.latitud),
            longitudReal = parseFloat(data.longitud);

            //Generamos el mapa que muestre y cual será el punto central
            var map = new google.maps.Map(document.getElementById('Mapa'), {
            center: {
                lat: latitudReal,
                lng: longitudReal
            },
            zoom: 14
            });
            var icona = {
                url: "img/icon-abierto1.png",
                scaledSize: new google.maps.Size(50, 50)
            };
            var markerPosicionReal = new google.maps.Marker({
                position: {
                lat: latitudReal,
                lng: longitudReal
                },
                icon: icona
            });
            markerPosicionReal.setMap(map);
            map.setCenter(markerPosicionReal.getPosition());
      
            const infowindow = new google.maps.InfoWindow({
            //content: "<b>Gua:" + markerPosicionReal.getPosition() + "</b>",
            content: "<b>Guia Nro: " + nro_guia + "</b>",
            });
            google.maps.event.addListener(markerPosicionReal, "click", () => {
                infowindow.open(map, markerPosicionReal);
            });
        }
    });
    var idg = id_guia;
    $.ajax({
        url: 'back-end/guias.php',
        type: 'GET',
        data:{idg},
        success:function(response){
            const datas = JSON.parse(response);
            let template = '';
            datas.forEach(data =>{
                template +=`
                <li>
                    <div class="timeline-time">
                        <span class="date">${data.fecha}</span>
                    </div>
                    <div class="timeline-icon">
                        <a href="javascript:;">&nbsp;</a>
                    </div>
                    <div class="timeline-body bg-secondary text-white">
                        <div class="timeline-content">
                            <p class="lead">${data.proceso} <i class="fa fa-user"></i> ${data.usuario}</p>
                        </div>
                    </div>
                </li>
                `
            });
            $('#time_line').html(template);
        }
    });
    
}

//Rango de Fechas
var cb = function(start, end, label) {
    //console.log('FUNC: cb',start.toISOString(), end.toISOString(), label);
    $('#desde').val(start.format('YYYY/MM/DD'))
    $('#hasta').val(end.format('YYYY/MM/DD'))
    $('#reportrange span').html(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));
    
 }

 var ranges = {
       'Hoy': [moment(), moment()],
       'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Ultimos 7 Dias': [moment().subtract(6, 'days'), moment()],
       'Ultimos 15 Dias': [moment().subtract(14, 'days'), moment()],
       'Ultimos 30 Dias': [moment().subtract(29, 'days'), moment()],
       'Este Mes': [moment().startOf('month'), moment().endOf('month')],
       'Mes Anterior': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    };

 var optionSet3 = {
    startDate: moment().subtract(30, 'days'),
    endDate: moment(),
    opens: 'left',
    showRangeInputsOnCustomRangeOnly: true,
    ranges: ranges
 };
 //$('#reportrange span').html(moment().format('DD/MM/YYYY') + ' - ' );
 $('#reportrange').daterangepicker(optionSet3, cb);
