<?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 ">
        Reportes Cliente <strong id='nombreCliente'></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='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=''>MES</th>
                            <th scope="col" class='text-right'>VENTAS</th>
                            <th scope="col" class='text-right'>PAGOS</th>
                        </tr>
                    </thead>
                    <tbody id='reportetable'></tbody>
                </table>
            </div>

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

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