<div class="row page-titles">
    <div class="col-md-5 col-8 align-self-center">
        <h4 class="m-b-0 m-t-0">Cuadros Estadisticos</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="<?php echo URL; ?>ajuste" class="link">Inicio</a></li>
            <li class="breadcrumb-item active">Estadistica</li>
        </ol>
    </div>
</div>
<?php
    date_default_timezone_set($_SESSION["zona_horaria"]);
    setlocale(LC_ALL,"es_ES@euro","es_ES","esp");
    $fecha = date("d-m-Y h:i A");
    $fechaa = date("d-m-Y 07:00");
?>
<input type="hidden" id="moneda" value="<?php echo Session::get('moneda'); ?>"/>
<input type="hidden" id="bloqueo" value="<?php echo Session::get('bloqueo'); ?>"/>
<div class="row">
    <div class="col-sm-12">
        <div class="card card-outline-primary">
            <div class="card-body">
                <h4 class="card-title">FILTRO GENERAL</h4>
                <div class="form-row align-items-end pt-2">
                    <div class="form-group col-lg-3 col-md-6">
                        <label for="fecha_ini_est">Desde</label>
                        <input type="date" name="fecha_ini_est" id="fecha_ini_est" class="form-control">
                    </div>
                    <div class="form-group col-lg-3 col-md-6">
                        <label for="fecha_fin_est">Hasta</label>
                        <input type="date" name="fecha_fin_est" id="fecha_fin_est" class="form-control">
                    </div>
                    <div class="form-group col-lg-3 col-md-6">
                        <button type="button" class="btn btn-info btn-block" id="btn-filtrar-estadistica">Aplicar rango</button>
                    </div>
                    <div class="form-group col-lg-3 col-md-6">
                        <button type="button" class="btn btn-outline-secondary btn-block" id="btn-estadistica-mes-actual">Mes actual</button>
                    </div>
                </div>
                <small class="text-muted d-block" id="estadistica_rango_texto">Selecciona un rango para actualizar todos los graficos.</small>
            </div>
        </div>
    </div>

    <div class="col-sm-12 col-lg-12">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <div class="card card-outline-primary">
                    <div class="card-body">
                        <h4 class="card-title">VENTAS POR DIA</h4>
                        <small class="text-muted d-block mb-3">Evolucion diaria dentro del rango seleccionado para revisar picos, caidas y comportamiento fecha por fecha.</small>
                        <div class="text-center">
                            <canvas id="chart9" height="120" style="display: block; width: 940px; height: 260px;" width="940" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-success">
                    <div class="card-body">
                        <h4 class="card-title">VENTAS POR DIA DE SEMANA</h4>
                        <small class="text-muted d-block mb-3">Acumulado del rango agrupado por dia de la semana para detectar los dias mas fuertes.</small>
                        <div class="text-center">
                            <canvas id="chart3" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-success">
                    <div class="card-body">
                        <h4 class="card-title">VENTAS POR MESES</h4>
                        <small class="text-muted d-block mb-3">Tendencia de los ultimos 12 meses usando la fecha final del filtro como referencia.</small>
                        <div class="text-center">
                            <canvas id="chart4" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-info">
                    <div class="card-body">
                        <h4 class="card-title">COMPRAS vs VENTAS</h4>
                        <small class="text-muted d-block mb-3">Comparativo mensual del rango activo para controlar si las compras acompanian el crecimiento de ventas.</small>
                        <div class="text-center">
                            <canvas id="chart2" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-success">
                    <div class="card-body">
                        <h4 class="card-title">VENTAS POR CANAL</h4>
                        <div class="pt-3">
                            <small class="text-muted d-block mb-3">Distribucion de ventas de salon, llevar y delivery dentro del rango activo.</small>
                            <canvas id="chart5" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-danger">
                    <div class="card-body">
                        <h4 class="card-title">DELIVERY POR DIA</h4>
                        <small class="text-muted d-block mb-3">Comportamiento diario del canal delivery para detectar fechas y picos de despacho.</small>
                        <div class="text-center">
                            <canvas id="chart10" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-success">
                    <div class="card-body">
                        <h4 class="card-title">PEDIDOS POR DELIVERY</h4>
                        <small class="text-muted d-block mb-3">Agrupado por repartidor o canal del rango seleccionado.</small>
                        <div class="text-center">
                            <canvas id="chart6" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-warning">
                    <div class="card-body">
                        <h4 class="card-title">VENTAS POR MEDIO DE PAGO</h4>
                        <small class="text-muted d-block mb-3">Suma real por efectivo, tarjeta, Yape, Plin y transferencia, incluyendo ventas mixtas.</small>
                        <div class="text-center">
                            <canvas id="chart8" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-info">
                    <div class="card-body">
                        <h4 class="card-title">VENTAS POR TIPO DE DOCUMENTO</h4>
                        <small class="text-muted d-block mb-3">Distribucion de ventas y operaciones por boleta, factura, nota de venta u otros documentos.</small>
                        <div class="text-center">
                            <canvas id="chart7" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-success">
                    <div class="card-body">
                        <h4 class="card-title">VENTAS POR MOZOS</h4>
                        <div class="floating-labels pt-3">
                            <div class="form-row mb-2">
                                <div class="form-group col-lg-12 col-md-12">
                                    <label for="mozos_tipo">Mostrar por:</label>
                                    <select name="mozos_tipo" id="mozos_tipo" class="form-control">
                                        <option value="1">PEDIDOS ATENDIDOS</option>
                                        <option value="2">TOTAL DE VENTAS</option>
                                    </select>
                                </div>
                            </div>
                            <small class="text-muted d-block mb-3">Usa el rango general para filtrar el ranking de mozos.</small>
                            <canvas id="chart1" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-info">
                    <div class="card-body">
                        <h4 class="card-title">TOP CLIENTES</h4>
                        <small class="text-muted d-block mb-3">Clientes con mayor consumo acumulado en el rango, junto con su frecuencia de compra.</small>
                        <div class="text-center">
                            <canvas id="chart13" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-success">
                    <div class="card-body">
                        <h4 class="card-title">TOP PLATOS</h4>
                        <small class="text-muted d-block mb-3">Ranking de platos por cantidad vendida dentro del rango activo.</small>
                        <div class="text-center">
                            <canvas id="chart11" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6">
                <div class="card card-outline-primary">
                    <div class="card-body">
                        <h4 class="card-title">TOP PRODUCTOS</h4>
                        <small class="text-muted d-block mb-3">Ranking de bebidas y productos por cantidad vendida dentro del rango activo.</small>
                        <div class="text-center">
                            <canvas id="chart12" height="235" style="display: block; width: 470px; height: 235px;" width="470" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
