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

<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;
    } */   

}

/* TABLA RESPONSIVA */

/*body {
    font-family: monospace;
}

.container {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}*/


/* .table {
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    table-layout: fixed;
}

.table caption {
    font-size: 28px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 8px 0px;
}

.table tr {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
}

.table th, .table td {
    font-size: 16px;
    padding: 8px;
    text-align: center;
}

.table thead th{ 
    text-transform: uppercase;
    background-color: #ddd;
}

.table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.table tbody td:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 600px) {
    .table {
        border: 0px;
    }
    .table caption {
        font-size: 22px;
    }
    .table thead {
        display: none;
    }
    .table tr {
        margin-bottom: 8px;
        border-bottom: 4px solid #ddd;
        display: block;
    }
    .table th, .table td {
        font-size: 12px;
    }
    .table td {
        display: block;
        border-bottom: 1px solid #ddd;
        text-align: right;
    }
    .table  td:last-child {
        border-bottom: 0px;
    }
    .table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        float: left;
    }
} */

/* FIN DE TABLA RESPONSIVA */

</style>

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

    <?php
        if (isset($data['categorias'])) {
            echo "let categoriasGeneral = " . json_encode($data['categorias']) . ";";
        } else {
            echo "let categoriasGeneral = [];";
        };
    ?>

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 ">
        <strong>Reportes Cliente </strong></span>
    </div>    

    <div class="card-header border-default fw-bold">
        <p><strong id='nombreCliente'></strong></span></p>
        <p><strong id='direccionCliente'></strong></span></p>
        <div id='area_estadocliente'></div>
    </div>

    </BR>
        <div class="col-12 mt-1 mb-1 d-flex d-print-none">
            <select id="yearCharts" class="form-control form-control-sm align-middle" style='max-width:100px;'>
                <?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="iniciarReportes()"><i class="fas fa-sync-alt"></i> Actualizar</button>
        </div>
    </BR>

    <!-- INICIA CONTENEDOR DE PESTAÑAS -->
    <nav>
    <!-- <div class="nav nav-tabs d-flex d-sm-none" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active p-1 px-2" id="nav-home-tab"     data-toggle="tab" href="#nav-home"     role="tab" aria-controls="nav-home"     aria-selected="true"><span style='font-size:0.8em;'>Ventas</span></a>
            <a class="nav-item nav-link p-1 px-2"        id="nav-profile-tab"  data-toggle="tab" href="#nav-profile"  role="tab" aria-controls="nav-profile"  aria-selected="false"><span style='font-size:0.8em;'>Productos</span></a>
            <a class="nav-item nav-link p-1 px-2"        id="nav-contact-tab"  data-toggle="tab" href="#nav-contact"  role="tab" aria-controls="nav-contact"  aria-selected="false"><span style='font-size:0.8em;'>Visitas</span></a>
            <a class="nav-item nav-link p-1 px-2"        id="nav-pagos-tab"    data-toggle="tab" href="#nav-pagos"    role="tab" aria-controls="nav-pagos"    aria-selected="false"><span style='font-size:0.8em;'>Pagos</span></a>
            <a class="nav-item nav-link p-1 px-2"        id="nav-facturas-tab" data-toggle="tab" href="#nav-facturas" role="tab" aria-controls="nav-facturas" aria-selected="false"><span style='font-size:0.8em;'>Facturas</span></a>
    </div> -->
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active px-2 px-sm-3" id="nav-home-tab"     data-toggle="tab" href="#nav-home"     role="tab" aria-controls="nav-home"     aria-selected="true"><span class='d-none d-sm-inline'>Ventas</span><span style='font-size:0.8em;' class='d-inline d-sm-none'>Ventas</span></a>
            <a class="nav-item nav-link px-2 px-sm-3"        id="nav-profile-tab"  data-toggle="tab" href="#nav-profile"  role="tab" aria-controls="nav-profile"  aria-selected="false"><span class='d-none d-sm-inline'>Productos</span><span style='font-size:0.8em;' class='d-inline d-sm-none'>Productos</span></a>
            <a class="nav-item nav-link px-2 px-sm-3"        id="nav-contact-tab"  data-toggle="tab" href="#nav-contact"  role="tab" aria-controls="nav-contact"  aria-selected="false"><span class='d-none d-sm-inline'>Visitas</span><span style='font-size:0.8em;' class='d-inline d-sm-none'>Visitas</span></a>
            <a class="nav-item nav-link px-2 px-sm-3"        id="nav-pagos-tab"    data-toggle="tab" href="#nav-pagos"    role="tab" aria-controls="nav-pagos"    aria-selected="false"><span class='d-none d-sm-inline'>Pagos</span><span style='font-size:0.8em;' class='d-inline d-sm-none'>Pagos</span></a>
            <a class="nav-item nav-link px-2 px-sm-3"        id="nav-facturas-tab" data-toggle="tab" href="#nav-facturas" role="tab" aria-controls="nav-facturas" aria-selected="false"><span class='d-none d-sm-inline'>Facturas</span><span style='font-size:0.8em;' class='d-inline d-sm-none'>Facturas</span></a>
    </div>
    
    </nav>


    <div class="tab-content" id="nav-tabContent">
    
    <!-- INICIA PESTAÑA DE GRAFIOS DE VENTAS -->
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

            <div class="card-body">
                <div class="row">


                    <div class='d-block d-lg-flex flex-row w-100'>
                        <div class='p-3 chartwidth'>
                            <h5 class='bg-primary p-2 pl-2'><i class="fas fa-chart-pie"></i> <span class='ml-1 mr-3'>Ventas por Mes</span></h5>
                            <div class="chart">
                                <canvas id="comparacionVentas" height="200" style="height: 200px;"></canvas>
                            </div>
                        </div>
                        <div class='p-3 chartwidth'>
                            <h5 class='bg-primary p-2 pl-2'><i class="fas fa-chart-pie"></i> <span class='ml-1 mr-3'>Pagos por Mes</span></h5>
                            <div class="chart">
                                <canvas id="comparacionPagos" height="200" style="height: 200px;"></canvas>
                            </div>
                        </div>
                        <div class='p-3 chartwidth'>
                            <h5 class='bg-danger p-2 pl-2'><i class="fas fa-line-chart"></i> <span class='ml-1 mr-3'>Ventas y Pagos por Mes</span></h5>
                            <div class="chart">
                                <canvas id="comparacionVentasPagos" height="200" style="height: 200px;"></canvas>
                            </div>
                        </div>                
                    </div>

                    <div class="col-12 col-lg-4 p-3">
                        <table class='table table-sm table-striped'>
                            <thead class="thead-dark">
                                <tr class=''>
                                    <th scope="col" class='d-table-cell d-md-none pl-2'>VENTAS/PAGOS</th>
                                    <th scope="col" class='d-none d-md-table-cell'>MES</th>
                                    <th scope="col" class='text-right d-none d-md-table-cell'>VENTAS</th>
                                    <th scope="col" class='text-right d-none d-md-table-cell'>PAGOS</th>
                                </tr>
                            </thead>
                            <tbody id='reportetable'></tbody>
                        </table>
                    </div>

                </div>        
            </div>
    </div>
                            
    <!-- INICIA PESTAÑA DE DETALLE DE PRODUCTOS Y LINEAS -->
     <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">

        <div class="card-body">
            <div class="row">
                <div class="col-12 col-lg-4" id='tablaCategorias'></div>
                <div class="col-12 col-lg-8" id='tablaProductos'></div>
            </div>        
        </div>
    </div>

    <!-- INICIA PESTAÑA DE DETALLE DE PAGOS -->
     <div class="tab-pane fade2" id="nav-pagos" role="tabpanel" aria-labelledby="nav-pagos-tab">
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                        
                            <div class="form-group d-flex">
                                <div class='d-block d-sm-flex' style='width:90%;'>
                                    <input type="date" class="form-control d-block form-control-sm" id="fechaPagosInit" onchange="select_fecha_pagos()">
                                    <input type="date" class="form-control d-block form-control-sm" id="fechaPagosEnd" onchange="select_fecha_pagos()">
                                    <select class="form-control form-control-sm" id="tiposPagos" onchange="filtrarReportesPagos()"></select>
                                </div>
                                <button class='btn btn-sm btn-success d-block' onclick="limpiar_fechas_pagos()" style='max-height:32px;'><i class="fas fa-trash-alt"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id='tablaPagos'></div>  
                </div>
            </div>        
        </div>
    </div>

    <!-- INICIA PESTAÑA DE DETALLE DE FACTURAS -->
     <div class="tab-pane fade" id="nav-facturas" role="tabpanel" aria-labelledby="nav-facturas-tab">
        <div class="card-body">
            <div class="row">
                <div class="col-12 col-lg-6">

                    <div class="form-group d-flex">
                        <div class='d-block d-sm-flex' style='width:90%;'>
                            <input type="date" class="form-control d-block form-control-sm" id="fechaFacturasInit" onchange="select_fecha_facturas()">
                            <input type="date" class="form-control d-block form-control-sm" id="fechaFacturasEnd" onchange="select_fecha_facturas()">
                        </div>
                        <button class='btn btn-sm btn-success d-block' onclick="limpiar_fechas_facturas()" style='max-height:32px;'><i class="fas fa-trash-alt"></i></button>
                    </div>
                    <div id='tablaFacturas'></div>                
                </div>
            </div>        
        </div>
    </div>

    <!-- INICIA PESTAÑA DE DETALLE HISTORIAL DE VISITAS -->
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
            <div class="card-body">
                <div class="row">
                    <div class="col-12 col-lg-6">

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

                        <!--
                        <div class='chartwidth'>
                            <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="comparacionVisitas" height="300" style="height: 300px;"></canvas>
                            </div>
                        </div>
                        -->
                       
                    </div>
                    <div class="col-6 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>
    </div>
    </div>

</div>


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