//Pasar la fecha
    var fecha = new Date(); //Fecha actual
    var mes = fecha.getMonth()+1; //obteniendo mes
    var dia = fecha.getDate(); //obteniendo dia
    var ano = fecha.getFullYear(); //obteniendo a単o
    if(dia<10)
        dia='0'+dia; //agrega cero si el menor de 10
    if(mes<10)
        mes='0'+mes //agrega cero si el menor de 10 f_exp_mat
        //console.log(ano+"-"+mes+"-"+dia)
        $('#f_desde').val(ano+"-"+mes+"-"+dia)
        $('#f_hasta').val(ano+"-"+mes+"-"+dia)

//Consultar Detalles
function inicio(){
 let desde = $('#f_desde').val();
 let hasta = $('#f_hasta').val();
    var t ='Cab';
    $.ajax({
        url: 'back-end/inicio.php',
        type: 'GET',
        data: {t,desde,hasta},
        success:function(response){
            const data = JSON.parse(response);
            $('#tasig').html(data.tasig);
            $('#tgest').html(data.tgest)
            $('#tpend').html(data.tpend)
            $('#cumpli').html(data.cumpli)
            document.getElementById("progreso_cumpli").style.width =data.cumpli+"%";
        }
    });  

    var du ='list', template = '';
    $.ajax({
        url: 'back-end/inicio.php',
        type: 'GET',
        data: {du,desde,hasta},
        success:function(response){
            const datas = JSON.parse(response);
            datas.forEach(data =>{
                template +=`
                <div class="card shadow mb-4">
                    <div class="card-header py-2">
                        <div class="row">
                            <div class="col-md-3">
                                <h6 class="m-0 font-weight-bold text-dark text-center">
                                    <i class="fa fa-user"></i> ${data.usuario} <br>
                                    <i class="fa fa-truck"></i> ${data.vehiculo}
                                </h6>
                            </div>
                            <div class="col-md-2 border-left-secondary">
                                <h6 class="m-0 font-weight-bold text-primary text-center">${data.tasig}<br><i class="fa fa-check"></i> Asignados</h6>
                            </div>
                            <div class="col-md-2 border-left-secondary">
                                <h6 class="m-0 font-weight-bold text-success text-center">${data.tgest}<br><i class="fa fa-edit"></i> Gestionados</h6>
                            </div>
                            <div class="col-md-4 border-left-secondary">
                                <h6 class="m-0 font-weight-bold text-info">Cumplimiento
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: ${data.cumpli}%;" aria-valuenow="${data.cumpli}" aria-valuemin="0" aria-valuemax="100">${data.cumpli}%</div>
                                    </div>
                                </h6>                        
                            </div>
                            <div class="col-md-1 text-center">
                                <a href="#" onclick="detalles('${data.username}','${data.vehiculo}')" class="btn btn-success btn-sm" title="Entrada" data-toggle="modal" data-target="#detalle_conductor"><i class="fas fa-search-plus" ></i></a>
                                
                            </div>
                        </div>
                        
                    </div>
                </div>
                `; 
            })
               
            $('#list_users').html(template);       
        }
       
    });
    

}
function mapa(){
    //Mapa
   var map = L.map('map').setView([4.6298165, -74.10081989999999], 13);
    
    var lat, lng, user='ALL';
    $.ajax({
        type: "GET",
        url: 'back-end/datos_ubicacion.php',
        data: {user},
        success: function(response){
            let os = JSON.parse(response);
            os.forEach(o =>{
                //var marker = L.marker(map.getCenter()).addTo(map)
               var lt = parseFloat(o.lat), ln = parseFloat(o.lng);
               var marker = L.marker([lt , ln]).addTo(map);
               marker.bindTooltip(o.user).openTooltip();
            });
            
       }
   });
}

function mapa_user(){
    //Mapa
   var map = L.map('map_user').setView([4.6298165, -74.10081989999999], 13), marker = L.marker(map.getCenter()).addTo(map);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    
    var lat, lng, user=$('#cod_conductor').val();
        $.ajax({
            type: "GET",
            url: 'back-end/datos_ubicacion.php',
            data: {user},
            success: function(response){
                let o = JSON.parse(response);
                   // console.log('Aqui va');
                    //var marker = L.marker(map.getCenter()).addTo(map)
                   var lt = parseFloat(o.lat), ln = parseFloat(o.lng);
                   var latlng= new L.LatLng(lt, ln);
                    marker.setLatLng(latlng);
                    map.setView(marker.getLatLng());
                    marker.bindPopup(o.user).openPopup();
                    //marker = L.marker([d.lat, d.lng]).addTo(map).bindPopup('ARIVERA').openPopup();
           }
       });
    
    setInterval(function(){
        var lat, lng, user=$('#cod_conductor').val();
        $.ajax({
            type: "GET",
            url: 'back-end/datos_ubicacion.php',
            data: {user},
            success: function(response){
                let o = JSON.parse(response);
                   // console.log('Aqui va');
                    //var marker = L.marker(map.getCenter()).addTo(map)
                   var lt = parseFloat(o.lat), ln = parseFloat(o.lng);
                   var latlng= new L.LatLng(lt, ln);
                    marker.setLatLng(latlng);
                    map.setView(marker.getLatLng());
                    marker.bindPopup(o.user).openPopup();
                    //marker = L.marker([d.lat, d.lng]).addTo(map).bindPopup('ARIVERA').openPopup();
           }
       });
    }, 5000);
    
}

function detalles(user, vehiculo){
    var u = user, v = vehiculo, template ='', indice = 0;
    let desde = $('#f_desde').val();
    let hasta = $('#f_hasta').val();
    $('#det').html(v +'/'+u);
    $.ajax({
        url: 'back-end/inicio.php',
        type: 'GET',
        data: {u,desde,hasta},
        success:function(response){
            const datas = JSON.parse(response);
            datas.forEach(data =>{
                if(indice==0){
                    console.log(data)
                    detalle_guia(data.id)
                }
                template+=`
                <a href="#" onclick="detalle_guia(${data.id})">
                    <div class="card border-left-success mb-2">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <div class="text-xs font-weight-bold text-uppercase">
                                        ${data.guia}<br> ${data.pedido}
                                    </div>
                                </div>
                                <div class="col text-right">
                                    ${data.estado}
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                ` 
                indice = 1   
            })
            $('#list_guias').html(template);      
        }
        
    });
}

function detalle_guia(id){
    let id_guia = id; 
    $.ajax({
        url: 'back-end/guias.php',
        type: 'GET',
        data: {id_guia},
        success:function(response){
            const data = JSON.parse(response);
            nro_guia = data.guia;
            $('#nroguia').html(nro_guia)
            $('#cliente').html(data.cliente)
            $('#cod_cliente').html(data.pedido)
            $('#dire').html(data.direccion)
            $('#f_entrega').html(data.fecha_entrega)
            document.getElementById('f1').setAttribute('href', data.foto1);
            
            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('map_guia'), {
            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);
            });
            
            //console.log(data)
        }
    });

}

function aplicar_filtros(){
    inicio();
    $("#fecha_filtro").modal("hide");
}

