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

}
</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'></strong></span></br>
        <button class="btn btn-link" type="button" onclick="btnVervisitaCli(${row['id']});"><i class="fas fa-map-marker-alt"></i></button>
        955424554444|54644848648</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="iniciarReportes()"><i class="fas fa-sync-alt"></i> Actualizar</button>
            </div>

            <div class="col-12 col-lg-4 p-3">

                <table class="table table-dark table-striped">
                    <thead>
                    <tr>
                        <th>Fecha</th>
                        <th>Visita</th>
                        <th>Venta</th>
                        <th>Cobro</th>        
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>03-01-2025</td>
                        <td><button class="btn btn-link" type="button" onclick="btnVervisitaCli(${row['id']});"><i class="fas fa-map-marker-alt"></i></button>16282668721|1121212  °</td>
                        <td>Q. 3,5487.00</td>
                        <td>Q. 4,000.00</td>
                    </tr>
                    <tr>
                        <td>04-02-2025</td>
                        <td><button class="btn btn-link" type="button" onclick="btnVervisitaCli(${row['id']});"><i class="fas fa-map-marker-alt"></i></button>16282668721|1121212  °</td>
                        <td>Q. 3,5487.00</td>
                        <td>Q. 4,000.00</td>
                    </tr>
                    <tr>
                        <td>05-03-2025</td>
                        <td><button class="btn btn-link" type="button" onclick="btnVervisitaCli(${row['id']});"><i class="fas fa-map-marker-alt"></i></button>16282668721|1121212  °</td>
                        <td>Q. 3,5487.00</td>
                        <td>Q. 4,000.00</td>
                    </tr>
                    <tr>
                        <td>02-04-2025</td>
                        <td><button class="btn btn-link" type="button" onclick="btnVervisitaCli(${row['id']});"><i class="fas fa-map-marker-alt"></i></button>16282668721|1121212  °</td>
                        <td>Q. 3,5487.00</td>
                        <td>Q. 4,000.00</td>
                    </tr>
                    <tr>
                        <td>18-04-2025</td>
                        <td><button class="btn btn-link" type="button" onclick="btnVervisitaCli(${row['id']});"><i class="fas fa-map-marker-alt"></i></button>16282668721|1121212  °</td>
                        <td>Q. 3,5487.00</td>
                        <td>Q. 4,000.00</td>
                    </tr>
                    <tr>
                        <td>01-05-2025</td>
                        <td><button class="btn btn-link" type="button" onclick="btnVervisitaCli(${row['id']});"><i class="fas fa-map-marker-alt"></i></button>16282668721|1121212  °</td>
                        <td>Q. 3,5487.00</td>
                        <td>Q. 4,000.00</td>
                    </tr>
                    <tr>
                        <td>01-06-2025</td>
                        <td><button class="btn btn-link" type="button" onclick="btnVervisitaCli(${row['id']});"><i class="fas fa-map-marker-alt"></i></button>16282668721|1121212  °</td>
                        <td>Q. 3,5487.00</td>
                        <td>Q. 4,000.00</td>
                    </tr>
                    <tr>
                        <td>01-07-2025</td>
                        <td><button class="btn btn-link" type="button" onclick="btnVervisitaCli(${row['id']});"><i class="fas fa-map-marker-alt"></i></button>16282668721|1121212  °</td>
                        <td>Q. 3,5487.00</td>
                        <td>Q. 4,000.00</td>
                    </tr>

                    </tbody>
                </table>



            </div>

            <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>

        </div>        
    </div>
</div>

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