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

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

<div class="card shadow-lg" >
    
    <div class="card-header border-default fw-bold ">
        Reportes Cliente<br/><strong id='nombreCliente'><?=$data['cliente']['codigo']?> - <?=$data['cliente']['nombre']?></strong></span>
    </div>    
    <div class="card-body">
        <div class="row">
            <div class="col-12 form-inline mb-3 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>
        <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>

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