<?php include "Views/templates/headernomenu.php"; ?>
<?php
        list($zoom, $lat,$long)=explode('|',$data['cliente']['coord_ultimavisita']);
?>
<style>
.chartwidth {
    width:33.3%;
}

@media (max-width: 991.98px) { 
    .chartwidth { width:100%; }
}

@media print {
    .shadow-lg { box-shadow:none !important; }
    .d-print-none { box-shadow:none !important; }
    .chartwidth { width:100%; }

    /*canvas {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: 200px!important;
        width: 100%!important;
    } */   

}
</style>

<script>
    <?php
        if(isset($data['idcliente'])) { echo "let idcliente={$data['idcliente']}"; } else { echo "let idcliente=false"; }
    ?>

function beforePrint () {
  for (const id in Chart.instances) {
    Chart.instances[id].resize()
  }
}

if (window.matchMedia) {
  let mediaQueryList = window.matchMedia('print')
  mediaQueryList.addListener((mql) => {
    if (mql.matches) {
      beforePrint()
    }
  })
}

window.onbeforeprint = beforePrint

</script>

<div class="card shadow-lg" >
    <div class="card-header border-default fw-bold ">
        HISTORIAL DE VISITAS</br><strong id='nombreCliente'><?=$data['cliente']['codigo']?> - <?=$data['cliente']['nombre']?></strong></span></br>
        <button class="btn btn-link" type="button" onclick="ActualizarPin(<?=(float)$lat?>,<?=(float)$long?>);"><i class="fas fa-map-marker-alt"></i></button>
        <?=$data['cliente']['coord_ultimavisita']?></br><strong id=''></strong></span>
    </div>    
    <div class="card-body">
        <div class="row">
            <div class="col-12 form-inline mb-1 d-print-none">
                <select id="yearCharts" class="form-control form-control-sm align-middle">
                    <?php
                    $fecha = date('Y');
                    for ($i = 2021; $i <= $fecha; $i++) { ?>
                    <option value="<?php echo $i; ?>" <?php echo ($i == $fecha) ? 'selected' : ''; ?>><?php echo $i; ?></option>
                    <?php } ?>
                </select>
                <button class='btn btn-success btn-sm ml-2' onclick="actualizarGraficoVisitasMesCliente()"><i class="fas fa-sync-alt"></i> Actualizar</button>
            </div>

            <div class="col-12 col-lg-6 pt-3 pb-3">


            </div>

        </div>
        <div class="row">
            <div class="col-12 col-lg-6">

                <table class="table table-dark table-striped mb-4">
                    <thead>
                    <tr>
                        <th>Fecha</th>
                        <th>Visita</th>
                        <th>Venta</th>
                        <th>Cobro</th>        
                    </tr>
                    </thead>
                    <tbody id='reportetablevisitas'></tbody>
                </table>            

                <div class='chartwidth2'>
                    <h5 class='bg-primary p-2 pl-2'><i class="fas fa-chart-pie"></i> <span class='ml-1 mr-3'>Visitas por Mes</span></h5>
                    <div class="chart">
                        <canvas id="comparacionVentas" height="200" style="height: 200px;"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div id="map" style="min-width: 500px; height: 400px;">mapa</div>
            </div>
        </div>        
    </div>
</div>

<?php
        list($zoom, $lat,$long)=explode('|',$data['cliente']['coord_ultimavisita']);
        echo 'let zoom='.(float)$zoom.';';
        echo 'let lat='.(float)$lat.';';
        echo 'let long='.(float)$long.';';
?>

<script>
async function initMap(selected) {
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( "marker", );
    infowindow = new google.maps.InfoWindow();



   
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(15.70814815256062, -90.3196639157081),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapId: "4504f8b37365c3d01",
    });    

    pin = new PinElement({
          borderColor: "#fff",
          background: "#f60",
          glyphColor: "#fff",
      });

    marker = new AdvancedMarkerElement({
        map,
        position: { lat: lat, lng: long },
        content: pin.element,
    });

    /*google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent('tester');
          infowindow.open(map, marker);
        }
    })(marker, i));*/

}

function ActualizarPin(mlat,mlong)
{
    marker.position = { lat: mlat, lng: mlong };
}

var i,infowindow, map, markerViewBorder,pinGlyph;    
var marker=false;
var pin=false;
var pinButton=false;

<?php
        echo 'var zoom='.(float)$zoom.';';
        echo 'var lat='.(float)$lat.';';
        echo 'var long='.(float)$long.';';
?>

document.addEventListener('DOMContentLoaded', function(){
    initMap(false);
})

</script>


<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyAGLvq2vssITcoQofAZ5EH00Pg7a4Hzzx8", v: "weekly"});</script>

<?php include "Views/templates/footernomenu.php"; ?>

