<?php
$query_date = date('Y-m-d');
$date = new DateTime($query_date);
$date->modify('first day of this month');
$firstdayMonth = $date->format('m/d/Y');
$date->modify('last day of this month');
$lastdayMonth = $date->format('m/d/Y'); 
$currentMonth = date('m'); // Mes actual en formato MM
$currentYear = date('Y'); // Año actual en formato YYYY

?>



<!-- Estados por sucursal -->
<div class="box-body">
    <div class="box box-primary">
        <div class="box-header">
            <div class="pull-right box-tools">
                <!-- <button type="button" class="btn btn-primary btn-sm daterangeEstadoStore pull-right" data-toggle="tooltip"
                    title="Date range"><i class="fa fa-calendar"></i></button> -->
            </div>
            <i class="fa fa-line-chart"></i>
            <h3 class="box-title">
                <?php echo $_translator->_getTranslation('Estado de sucursales'); ?>
            </h3>

        </div>
        <div class="box-body">
            <div class="col-lg-6"></div>
            <div class="col-lg-2 col-xs-12">
                <div class="form-group">
                    <label for="year-select">Año</label>
                    <select id="year-select" class="form-control">                       
                    </select>
                </div>
            </div>
            <div class="col-lg-2 col-xs-12">
                <div class="form-group">
                    <label for="month-select">Mes</label>
                    <select id="month-select" class="form-control">
                        <option value="01">Enero</option>
                        <option value="02">Febrero</option>
                        <option value="03">Marzo</option>
                        <option value="04">Abril</option>
                        <option value="05">Mayo</option>
                        <option value="06">Junio</option>
                        <option value="07">Julio</option>
                        <option value="08">Agosto</option>
                        <option value="09">Septiembre</option>
                        <option value="10">Octubre</option>
                        <option value="11">Noviembre</option>
                        <option value="12">Diciembre</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-2 col-xs-12" style="padding: 25px;">
                <!-- Botón para aplicar la selección -->
                <button id="applyDate" class="btn btn-primary">Aplicar</button>
            </div>




            <div class="col-lg-4 col-xs-12">

                <table id="tbl_estado_store" class="table">
                    <caption class="text-center"></caption>
                    <thead>
                        <tr>
                            <th class="text-center">
                                <?php echo $_translator->_getTranslation('Sucursal'); ?>
                            </th>
                            <th class="text-right">
                                <?php echo $_translator->_getTranslation('Total venta'); ?>
                            </th>
                            <th class="text-right">
                                <?php echo $_translator->_getTranslation('Total gastos'); ?>
                            </th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div id="chart_sales_and_gastos" class="col-lg-8 col-xs-12">
                <canvas id="canvas_chart_estado_store"></canvas>
            </div>
        </div>
    </div>
</div>
<!-- END  -->
<!-- SALES -->
<div class="box-body">
    <div class="box box-primary">
        <div class="box-header">
            <div class="pull-right box-tools">
                <button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip"
                    title="Date range"><i class="fa fa-calendar"></i></button>
            </div>
            <i class="fa fa-line-chart"></i>
            <h3 class="box-title">
                <?php echo $_translator->_getTranslation('Ventas'); ?>
            </h3>
        </div>
        <div class="box-body">
            <div class="col-lg-4 col-xs-12">
                <table id="tbl_sales" class="table">
                    <caption class="text-center"></caption>
                    <thead>
                        <tr>
                            <th class="text-center">
                                <?php echo $_translator->_getTranslation('Sucursal'); ?>
                            </th>
                            <th class="text-right">
                                <?php echo $_translator->_getTranslation('Total'); ?>
                            </th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div id="chart_sales" class="col-lg-8 col-xs-12">
                <canvas id="canvas_chart_sales"></canvas>
            </div>
        </div>
    </div>
</div>
<!-- END SALES -->
<!-- FACTURAS / SALDOS -->
<div class="box-body">
    <div class="box box-primary">
        <div class="box-header">
            <div class="pull-right box-tools">
                <button type="button" class="btn btn-primary btn-sm daterangeFacturas pull-right"
                    data-toggle="tooltip" title="Date range"><i class="fa fa-calendar"></i></button>
            </div>
            <i class="fa fa-cart-arrow-down"></i>
            <h3 class="box-title">
                <?php echo $_translator->_getTranslation('Facturas por sucursal'); ?>
            </h3>
        </div>
        <div class="box-body">
            <div class="col-lg-4 col-xs-12">
                <table id="tbl_facturas" class="table">
                    <caption class="text-center"></caption>
                    <thead>
                        <tr>
                            <th class="text-center">
                                <?php echo $_translator->_getTranslation('Sucursal'); ?>
                            </th>
                            <th class="text-center">
                                <?php echo $_translator->_getTranslation('Saldo Pagado'); ?>
                            </th>
                            <th class="text-right">
                                <?php echo $_translator->_getTranslation('Saldo Pendiente'); ?>
                            </th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div id="chart_facturas" class="col-lg-8 col-xs-12">
                <canvas id="canvas_facturas"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- END FACTURAS / SALDOS -->
<!-- SPECIAL ORDERS -->
<div class="box-body">
    <div class="box box-primary">
        <div class="box-header">
            <div class="pull-right box-tools">
                <button type="button" class="btn btn-primary btn-sm daterange_special_orders pull-right"
                    data-toggle="tooltip" title="Date range"><i class="fa fa-calendar"></i></button>
            </div>
            <i class="fa fa-birthday-cake"></i>
            <h3 class="box-title">
                <?php echo $_translator->_getTranslation('Pedidos especiales'); ?>
            </h3>
        </div>
        <div class="box-body">
            <div class="col-lg-4 col-xs-12">
                <table id="tbl_special_orders" class="table">
                    <caption class="text-center"></caption>
                    <thead>
                        <tr>
                            <th class="text-center">
                                <?php echo $_translator->_getTranslation('Sucursal'); ?>
                            </th>
                            <th class="text-center">
                                <?php echo $_translator->_getTranslation('Pedidos'); ?>
                            </th>
                            <th class="text-right">
                                <?php echo $_translator->_getTranslation('Total ventas'); ?>
                            </th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div id="chart_special_orders" class="col-lg-8 col-xs-12">
                <canvas id="canvas_chart_special_orders"></canvas>
            </div>
        </div>
    </div>
</div>


<!-- Trafico And MERMAS -->
<div class="box-body">
    <div class="box box-primary">
        <div class="box-header">
            <div class="pull-right box-tools">
            </div>
            <i class="fa fa-line-chart"></i>
            <h3 class="box-title">
                <?php echo $_translator->_getTranslation('Graficas'); ?>
            </h3>
        </div>
        <div class="box-body">
            <div id="chart_mermas" class="col-lg-6 col-xs-12">
                <button type="button" class="btn btn-primary btn-sm daterangeMermas pull-right" data-toggle="tooltip"
                    title="Date range"><i class="fa fa-calendar"></i></button>
                <canvas id="canvas_chart_mermas"></canvas>
            </div>
            <div id="chart_trafico" class="col-lg-6 col-xs-6">
                <button type="button" class="btn btn-primary btn-sm daterangeTrafico pull-right" data-toggle="tooltip"
                    title="Date range"><i class="fa fa-calendar"></i></button>
                <canvas id="canvas_chart_trafico"></canvas>
            </div>

        </div>
    </div>
</div>
<!-- END TRAFICO AND MERMAS -->
<style>
    .hide-day td.off,
    .hide-day td.available {
        pointer-events: none;
        /* Evitar que los días sean seleccionados */
        color: transparent;
        /* Ocultar los números de los días */
    }

    .hide-day td.off,
    .hide-day td.available:hover {
        background-color: transparent !important;
        /* Evitar hover en los días */
    }
</style>
<script>
    $(document).ready(function() {

        var currentYear = new Date().getFullYear();

        // Seleccionar el dropdown de años
        var yearSelect = document.getElementById('year-select');

        // Generar los años dinámicamente (el actual y los tres anteriores)
        for (var i = 0; i < 4; i++) {
            var yearOption = document.createElement('option');
            yearOption.value = currentYear - i;
            yearOption.text = currentYear - i;
            yearSelect.appendChild(yearOption);
        }
        $("#month-select").val('<?php echo $currentMonth ?>');

        _salesChart('<?php echo $firstdayMonth ?>', '<?php echo $lastdayMonth ?>');
        _specialOrdersChart('<?php echo $firstdayMonth ?>', '<?php echo $lastdayMonth ?>');
        _salesChartFacturas('<?php echo $firstdayMonth ?>', '<?php echo $lastdayMonth ?>');
           _EstadoStoreChart('<?php echo $currentMonth ?>', '<?php echo $currentYear ?>');


        //_TraficoChart('<?php echo $firstdayMonth ?>','<?php echo $lastdayMonth ?>');
        //_MermasChart('<?php echo $firstdayMonth ?>','<?php echo $lastdayMonth ?>');            
    });
</script>