@extends('admin.layout.master')

@section('content')
<main>
    <div class="ecommerce-stats-area">
        <div class="row">
            <div class="col-md-6">
                <span class="sub-title">Fecha Inicio</span>
                <input type="date" id="fechaInicio">
            </div>
            <div class="col-md-6">
                <span class="sub-title">Fecha Fin</span>
                <input type="date" id="fechaFin">
            </div>
        </div>
    </div>

    <div class="row mt-6">
        <div class="col-lg-6 col-md-12">
            <div class="card mb-30">
                <div class="card-header">
                    <h3>Evolución Diaria de Registrados</h3>
                </div>
                <div class="card-body">
                    <canvas id="graficaRegistrados"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card mb-30">
                <div class="card-header">
                    <h3>Evolución Diaria de Ventas</h3>
                </div>
                <div class="card-body">
                    <canvas id="graficaVentas"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-6">
        <div class="col-lg-6 col-md-12">
            <div class="card mb-30">
                <div class="card-header">
                    <h3>Evolución de la Cantidad de Accesos Diarios</h3>
                </div>
                <div class="card-body">
                    <canvas id="graficaAccesos"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card mb-30">
                <div class="card-header">
                    <h3>Monto Vendido Diario</h3>
                </div>
                <div class="card-body">
                    <canvas id="graficaMontoVendido"></canvas>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script>
    // Variables para almacenar instancias de gráficos
    let chartRegistrados, chartVentas, chartAccesos, chartMontoVendido;

    document.getElementById('fechaInicio').addEventListener('change', cargarGraficos);
    document.getElementById('fechaFin').addEventListener('change', cargarGraficos);

    // Configurar las fechas por defecto
    function setDefaultDates() {
        const fecha = new Date();
        const primerDiaMes = new Date(fecha.getFullYear(), fecha.getMonth(), 1);
        const hoy = fecha.toISOString().split('T')[0]; // Fecha actual en formato 'YYYY-MM-DD'

        // Asignar los valores por defecto a los inputs de fecha
        document.getElementById('fechaInicio').value = primerDiaMes.toISOString().split('T')[0];
        document.getElementById('fechaFin').value = hoy;
    }

    // Cargar los gráficos al iniciar
    function cargarGraficos() {
        const fechaInicio = document.getElementById('fechaInicio').value;
        const fechaFin = document.getElementById('fechaFin').value;

        if (fechaInicio && fechaFin) {
            fetchData('/api/evolucion/registrados', fechaInicio, fechaFin, 'graficaRegistrados', chartRegistrados, (newChart) => chartRegistrados = newChart);
            fetchData('/api/evolucion/ventas', fechaInicio, fechaFin, 'graficaVentas', chartVentas, (newChart) => chartVentas = newChart);
            fetchData('/api/evolucion/accesos', fechaInicio, fechaFin, 'graficaAccesos', chartAccesos, (newChart) => chartAccesos = newChart);
            fetchData('/api/evolucion/monto-vendido', fechaInicio, fechaFin, 'graficaMontoVendido', chartMontoVendido, (newChart) => chartMontoVendido = newChart);
        }
    }

    function fetchData(url, fechaInicio, fechaFin, canvasId, existingChart, callback) {
        fetch(`${url}?fechaInicio=${fechaInicio}&fechaFin=${fechaFin}`)
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById(canvasId).getContext('2d');

                // Destruir el gráfico existente si existe
                if (existingChart) {
                    existingChart.destroy();
                }

                // Crear un nuevo gráfico y asignarlo a la variable de instancia
                const newChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: data.label,
                            data: data.values,
                            borderColor: '#da291c',
                            backgroundColor: '#da291c',
                            pointBorderColor: '#da291c',
                            pointBackgroundColor: '#da291c',
                            pointBorderWidth: 2,
                            fill: false,
                        }]
                    },
                    options: {
                        plugins: {
                            datalabels: {
                                anchor: 'end',
                                align: 'top',
                                formatter: (value) => value,
                                font: {
                                    weight: 'bold'
                                },
                                color: '#000000'
                            }
                        },
                        scales: {
                            x: {
                                type: 'time',
                                time: {
                                    unit: 'day',
                                    displayFormats: {
                                        day: 'yyyy-MM-dd'
                                    }
                                },
                                title: {
                                    display: true,
                                    text: 'Fecha'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: data.label
                                }
                            }
                        }
                    },
                    plugins: [ChartDataLabels]
                });

                // Guardar el nuevo gráfico en la variable global
                callback(newChart);
            });
    }

    // Ejecutar al cargar la página
    document.addEventListener('DOMContentLoaded', function() {
        setDefaultDates();
        cargarGraficos(); // Cargar gráficos con las fechas por defecto
    });
</script>
@endsection