@extends('layouts.layouts')
@section('title', 'Reportes de Recargas')

@section('styles')
    <style>
        .container-wrapper {
            padding: 48px 0;
        }

        .container-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .card {
            background-color: #fff;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-radius: 8px;
            padding: 24px;
        }

        .section-title {
            font-size: 1.125rem;
            font-weight: 700;
            margin-bottom: 16px;
        }

        .info-text {
            margin-bottom: 24px;
            color: #4b5563;
        }

        .btn-download-alertas {
            padding: 12px 24px;
            background-color: #dc2626;
            color: #fff;
            font-weight: 700;
            border-radius: 8px;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-decoration: none;
        }

        .btn-download-alertas:hover {
            background-color: #b91c1c;
        }

        .form-group-flex {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
        }

        @media (min-width: 768px) {
            .form-group-flex {
                flex-direction: row;
            }
        }

        .form-label {
            width: 100%;
            font-weight: 500;
            color: #374151;
        }

        @media (min-width: 768px) {
            .form-label {
                width: auto;
            }
        }

        .form-select,
        .form-input {
            flex: 1;
            width: 100%;
            border-radius: 6px;
            border: 1px solid #d1d5db;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            padding: 8px 12px;
        }

        .custom-range-fields {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        @media (min-width: 768px) {
            .custom-range-fields {
                flex-direction: row;
            }
        }

        .chart-container {
            background-color: #f3f4f6;
            padding: 24px;
            border-radius: 8px;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
        }

        .btn-download-reporte {
            padding: 12px 24px;
            background-color: #2563eb;
            color: #fff;
            font-weight: 700;
            border-radius: 8px;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: none;
            cursor: pointer;
        }

        .btn-download-reporte:hover {
            background-color: #1d4ed8;
        }

        .hidden {
            display: none;
        }

        .space-y-4>*:not(:last-child) {
            margin-bottom: 16px;
        }

        .flex.justify-end {
            display: flex;
            justify-content: flex-end;
        }
        /* ESTILOS PARA LA NUEVA SECCIÓN DE FILTRO POR PLACA/CEDULA */
        .radio-group-flex {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
        }

        .radio-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .search-input-container {
            flex: 1;
            width: 100%;
        }
        
        .radio-input-group {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 16px;
        }

        .input-hidden {
            display: none;
        }
    </style>
@endsection

@section('mainPage')
    <div class="container-wrapper">
        <div class="container-content">
            {{-- Sección de Descarga de Alertas --}}
            <div class="card">
                <h3 class="section-title">Historial de Alertas</h3>
                <p class="info-text">
                    Haz clic en el botón para descargar un archivo de Excel con el registro completo de todas las alertas de
                    posible fraude detectadas por el sistema.
                </p>
                <a href="{{ route('reportes.export.alertas-fraude') }}" class="btn-download-alertas">
                    Descargar Reporte de Alertas
                </a>
            </div>

            {{-- Sección de la Gráfica y Filtros para la Gráfica --}}
            <div class="card">
                <h3 class="section-title">Gráfico de Consumo por Tipo de Combustible</h3>
                <div class="form-group-flex">
                    <label for="rango" class="form-label">Rango de fechas:</label>
                    <div class="form-select-container">
                        <select id="rango" class="form-select">
                            <option value="hoy" selected>Día de hoy</option>
                            <option value="15-dias">Últimos 15 días</option>
                            <option value="mes">Último mes</option>
                            <option value="personalizado">Rango personalizado</option>
                        </select>
                    </div>
                    <div id="custom-range" class="hidden custom-range-fields">
                        <input type="date" id="fecha-inicio" class="form-input" placeholder="Fecha inicio">
                        <input type="date" id="fecha-fin" class="form-input" placeholder="Fecha fin">
                    </div>
                </div>

                <div class="form-group-flex">
                    <label for="estacion_id" class="form-label">Filtrar por Estación:</label>
                    <div class="form-select-container">
                        <select id="estacion_id" class="form-select">
                            <option value="">Todas las estaciones</option>
                            @foreach ($estaciones as $estacion)
                                <option value="{{ $estacion->id }}">{{ $estacion->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="chart-container">
                    <canvas id="recargasChart" data-api-url="{{ route('reportes.data') }}"></canvas>
                </div>
            </div>

            {{-- Sección de la Gráfica de Placas/Cédulas y Filtros (LÓGICA ACTUALIZADA) --}}
            <div class="card">
                <h3 class="section-title">Historial de Recargas de un Vehículo Específico</h3>
                <p class="info-text">
                    Ingresa la **placa** del vehículo o la **cédula** para ver el historial
                    detallado de recargas (litros) en el rango de fechas seleccionado.
                </p>

                <div class="form-group-flex" style="flex-direction: column; align-items: stretch; gap: 16px;">
                    {{-- Selector de Tipo de Búsqueda (Placa o Cédula) --}}
                    <div class="radio-input-group">
                        <div class="radio-option">
                            <input type="radio" id="search_by_placa" name="search_type" value="placa" checked>
                            <label for="search_by_placa" class="form-label" style="width: auto; margin: 0;">Buscar por
                                **Placa**</label>
                        </div>
                        <div class="radio-option">
                            <input type="radio" id="search_by_cedula" name="search_type" value="cedula">
                            <label for="search_by_cedula" class="form-label" style="width: auto; margin: 0;">Buscar por
                                **Cédula**</label>
                        </div>
                    </div>

                    {{-- Campo de Placa --}}
                    <div id="placa-field-container" class="search-input-container">
                        <label for="placa_input" class="form-label">Placa del Vehículo:</label>
                        <input type="text" id="placa_input" class="form-input" placeholder="Ej: AG0G96R" value=""
                            required>
                    </div>

                    {{-- Campo de Cédula (Inicia oculto) --}}
                    <div id="cedula-field-container" class="search-input-container input-hidden">
                        <label for="cedula_input" class="form-label">Cédula del Conductor/Propietario:</label>
                        <input type="text" id="cedula_input" class="form-input" placeholder="Ej: 12345678" value=""
                            required>
                    </div>

                    {{-- Filtro de Rango de Fechas (se mantiene) --}}
                    <div class="form-group-flex" style="gap: 16px;">
                        <label for="placa_rango" class="form-label">Rango de fechas:</label>
                        <div class="form-select-container">
                            <select id="placa_rango" class="form-select">
                                <option value="15-dias" selected>Últimos 15 días</option>
                                <option value="mes">Último mes</option>
                                <option value="personalizado">Rango personalizado</option>
                            </select>
                        </div>
                    </div>

                    <div id="placa-custom-range" class="hidden custom-range-fields">
                        <input type="date" id="placa-fecha-inicio" class="form-input" placeholder="Fecha inicio">
                        <input type="date" id="placa-fecha-fin" class="form-input" placeholder="Fecha fin">
                    </div>
                </div>

                <div class="chart-container">
                    <canvas id="placasChart" data-api-url="{{ route('reportes.data.placas') }}"></canvas>
                </div>
            </div>

            {{-- Sección de Descarga de Reporte de Recargas (NUEVO) --}}
            <div class="card">
                <h3 class="section-title">Reporte Detallado de Recargas</h3>
                <p class="info-text">
                    Selecciona un rango de fechas y una estación para descargar un informe detallado de todas las recargas
                    de vehículos.
                </p>

                <form action="{{ route('reportes.export.recargas') }}" method="GET" class="space-y-4">
                    <div class="form-group-flex">
                        <label for="reporte_rango" class="form-label">Rango de fechas:</label>
                        <div class="form-select-container">
                            <select id="reporte_rango" name="rango" class="form-select">
                                <option value="hoy">Día de hoy</option>
                                <option value="15-dias">Últimos 15 días</option>
                                <option value="mes">Último mes</option>
                                <option value="personalizado">Rango personalizado</option>
                            </select>
                        </div>
                        <div id="reporte-custom-range" class="hidden custom-range-fields">
                            <input type="date" id="reporte-fecha-inicio" name="fecha_inicio" class="form-input"
                                placeholder="Fecha inicio">
                            <input type="date" id="reporte-fecha-fin" name="fecha_fin" class="form-input"
                                placeholder="Fecha fin">
                        </div>
                    </div>

                    <div class="form-group-flex">
                        <label for="reporte_estacion_id" class="form-label">Filtrar por Estación:</label>
                        <div class="form-select-container">
                            <select id="reporte_estacion_id" name="estacion_id" class="form-select">
                                <option value="">Todas las estaciones</option>
                                @foreach ($estaciones as $estacion)
                                    <option value="{{ $estacion->id }}">{{ $estacion->nombre }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="flex justify-end">
                        <button type="submit" class="btn-download-reporte">
                            Descargar Reporte
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <script>
        Chart.register(ChartDataLabels);

        document.addEventListener('DOMContentLoaded', function() {
            console.log('✅ DOM cargado. Inicializando script.');

            // Elementos para el gráfico (originales)
            const rangoSelect = document.getElementById('rango');
            const customRangeDiv = document.getElementById('custom-range');
            const fechaInicioInput = document.getElementById('fecha-inicio');
            const fechaFinInput = document.getElementById('fecha-fin');
            const chartCanvas = document.getElementById('recargasChart');
            const estacionSelect = document.getElementById('estacion_id');

            // Elementos para el nuevo formulario de descarga
            const reporteRangoSelect = document.getElementById('reporte_rango');
            const reporteCustomRangeDiv = document.getElementById('reporte-custom-range');

            // Lógica de visibilidad del rango personalizado para el formulario de descarga
            function toggleReporteCustomRange() {
                reporteCustomRangeDiv.classList.toggle('hidden', reporteRangoSelect.value !== 'personalizado');
            }
            reporteRangoSelect.addEventListener('change', toggleReporteCustomRange);
            toggleReporteCustomRange(); // Llamada inicial para ocultar si no es "personalizado"

            const apiUrl = chartCanvas.dataset.apiUrl;

            let chartInstance;

            function toggleCustomRange() {
                console.log('🔧 Cambiando rango de selección.');
                customRangeDiv.classList.toggle('hidden', rangoSelect.value !== 'personalizado');
            }

            async function fetchChartData(rango, fechaInicio = null, fechaFin = null, estacionId = null) {
                console.log('🚀 Realizando fetch con rango:', rango, 'Inicio:', fechaInicio, 'Fin:', fechaFin,
                    'Estación:', estacionId);
                let params = new URLSearchParams();

                if (rango === 'personalizado' && fechaInicio && fechaFin) {
                    params.append('fecha_inicio', fechaInicio);
                    params.append('fecha_fin', fechaFin);
                } else if (rango) {
                    params.append('rango', rango);
                }

                if (estacionId) {
                    params.append('estacion_id', estacionId);
                }

                try {
                    const response = await fetch(`${apiUrl}?${params.toString()}`);
                    const data = await response.json();
                    console.log('👍 Datos recibidos de la API:', data);
                    return data;
                } catch (error) {
                    console.error('❌ Error al obtener los datos del gráfico:', error);
                    return null;
                }
            }

            async function updateChart() {
                console.log('⚙️ Función updateChart llamada.');
                const rango = rangoSelect.value;
                const fechaInicio = fechaInicioInput.value;
                const fechaFin = fechaFinInput.value;
                const estacionId = estacionSelect.value;

                const chartData = await fetchChartData(rango, fechaInicio, fechaFin, estacionId);
                if (!chartData || !chartData.labels || chartData.labels.length === 0) {
                    console.log('⚠️ No hay datos o la respuesta es inválida.');
                    if (chartInstance) {
                        chartInstance.destroy();
                    }
                    const ctx = chartCanvas.getContext('2d');
                    ctx.clearRect(0, 0, chartCanvas.width, chartCanvas.height);
                    ctx.font = '20px Arial';
                    ctx.textAlign = 'center';
                    ctx.fillText('No hay datos disponibles para el rango seleccionado.', chartCanvas.width / 2,
                        chartCanvas.height / 2);
                    return;
                }

                console.log('📈 Actualizando el gráfico con los datos recibidos.');
                if (chartInstance) {
                    chartInstance.destroy();
                }

                chartInstance = new Chart(chartCanvas, {
                    type: 'line',
                    data: chartData,
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: 'Litros de Combustible Recargados por Día'
                            },
                            // El tooltip sigue funcionando con hover, pero ahora solo para valores > 0
                            tooltip: {
                                enabled: true,
                                callbacks: {
                                    filter: function(tooltipItem) {
                                        return tooltipItem.raw > 0;
                                    }
                                }
                            },
                            // 🎉 Este es el código que mostrará los valores de forma permanente.
                            datalabels: {
                                // Posición de la etiqueta: en la parte superior del punto
                                align: 'left',
                                anchor: 'start',
                                clamp: true,
                                // Lógica de visualización: solo si el valor es mayor a 0
                                display: function(context) {
                                    return context.dataset.data[context.dataIndex] > 0;
                                },
                                // Formato de la etiqueta: añade 'L' al final
                                formatter: function(value, context) {
                                    return value + ' L';
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Litros'
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: 'Fecha'
                                }
                            }
                        }
                    }
                });
            }

            // --- Elementos y Lógica para el Gráfico de Historial por Placa/Cédula (ACTUALIZADO) ---
            const placaRangoSelect = document.getElementById('placa_rango');
            const placaCustomRangeDiv = document.getElementById('placa-custom-range');
            const placaFechaInicioInput = document.getElementById('placa-fecha-inicio');
            const placaFechaFinInput = document.getElementById('placa-fecha-fin');
            const placaChartCanvas = document.getElementById('placasChart');
            const placaApiUrl = placaChartCanvas.dataset.apiUrl;

            // Elementos de búsqueda
            const searchTypeRadios = document.querySelectorAll('input[name="search_type"]');
            const placaInput = document.getElementById('placa_input');
            const cedulaInput = document.getElementById('cedula_input');
            const placaFieldContainer = document.getElementById('placa-field-container');
            const cedulaFieldContainer = document.getElementById('cedula-field-container');


            let placaChartInstance;

            function togglePlacaCustomRange() {
                placaCustomRangeDiv.classList.toggle('hidden', placaRangoSelect.value !== 'personalizado');
            }

            // NUEVA FUNCIÓN: Muestra/Oculta los campos de entrada según el radio seleccionado
            function toggleSearchTypeInput() {
                const selectedType = document.querySelector('input[name="search_type"]:checked').value;
                console.log('🔧 Tipo de búsqueda seleccionado:', selectedType);

                if (selectedType === 'placa') {
                    placaFieldContainer.classList.remove('input-hidden');
                    cedulaFieldContainer.classList.add('input-hidden');
                    cedulaInput.value = ''; // Limpiar el otro campo
                } else {
                    placaFieldContainer.classList.add('input-hidden');
                    cedulaFieldContainer.classList.remove('input-hidden');
                    placaInput.value = ''; // Limpiar el otro campo
                }
                updatePlacasChart(); // Intentar actualizar el gráfico con el nuevo criterio
            }


            // FUNCIÓN ACTUALIZADA: Recopila el valor de búsqueda correcto y lo envía con el nombre de parámetro único.
            async function fetchPlacaChartData(rango, fechaInicio = null, fechaFin = null) {
                const selectedType = document.querySelector('input[name="search_type"]:checked').value;
                let searchValue = '';

                if (selectedType === 'placa') {
                    searchValue = placaInput.value.trim().toUpperCase();
                } else if (selectedType === 'cedula') {
                    searchValue = cedulaInput.value.trim();
                }

                if (!searchValue) {
                    console.log('⚠️ Valor de búsqueda vacío, no se realiza la solicitud.');
                    return null;
                }

                console.log(`🚀 Realizando fetch de Historial por ${selectedType}: ${searchValue}`);
                let params = new URLSearchParams();
                
                // 💥 CORRECCIÓN: Usamos el nombre de parámetro ÚNICO que el controlador espera.
                params.append('placa_o_cedula', searchValue); 

                if (rango === 'personalizado' && fechaInicio && fechaFin) {
                    params.append('fecha_inicio', fechaInicio);
                    params.append('fecha_fin', fechaFin);
                } else if (rango) {
                    params.append('rango', rango);
                }

                try {
                    const response = await fetch(`${placaApiUrl}?${params.toString()}`);
                    const data = await response.json();
                    console.log('👍 Datos de Historial recibidos de la API:', data);
                    return data;
                } catch (error) {
                    console.error('❌ Error al obtener los datos del historial:', error);
                    return null;
                }
            }


            async function updatePlacasChart() {
                console.log('⚙️ Función updatePlacasChart llamada.');
                
                const selectedType = document.querySelector('input[name="search_type"]:checked').value;
                const searchValue = selectedType === 'placa' 
                    ? placaInput.value.trim().toUpperCase() 
                    : cedulaInput.value.trim();

                const rango = placaRangoSelect.value;
                const fechaInicio = placaFechaInicioInput.value;
                const fechaFin = placaFechaFinInput.value;

                if (!searchValue) {
                    // Limpiar el gráfico si no hay valor de búsqueda
                    if (placaChartInstance) {
                        placaChartInstance.destroy();
                    }
                    const ctx = placaChartCanvas.getContext('2d');
                    ctx.clearRect(0, 0, placaChartCanvas.width, placaChartCanvas.height);
                    ctx.font = '20px Arial';
                    ctx.textAlign = 'center';
                    ctx.fillText(`Ingrese una ${selectedType} para ver su historial de recargas.`, placaChartCanvas
                        .width / 2, placaChartCanvas.height / 2);
                    return;
                }


                const chartData = await fetchPlacaChartData(rango, fechaInicio, fechaFin);

                if (!chartData || !chartData.labels || chartData.labels.length === 0) {
                    console.log('⚠️ No hay datos de recargas para el criterio o rango seleccionado.');
                    if (placaChartInstance) {
                        placaChartInstance.destroy();
                    }
                    // Mostrar mensaje de no datos
                    const ctx = placaChartCanvas.getContext('2d');
                    ctx.clearRect(0, 0, placaChartCanvas.width, placaChartCanvas.height);
                    ctx.font = '20px Arial';
                    ctx.textAlign = 'center';
                    ctx.fillText(`No hay datos de recargas para ${selectedType}: ${searchValue} en el rango seleccionado.`,
                        placaChartCanvas.width / 2, placaChartCanvas.height / 2);
                    return;
                }

                console.log('📈 Actualizando el gráfico de placas/cédulas con los datos recibidos.');
                if (placaChartInstance) {
                    placaChartInstance.destroy();
                }
                
                // Determinar el título del gráfico
                const chartTitle = selectedType === 'placa'
                    ? `Historial de Recargas (Litros) para la Placa: ${searchValue}`
                    : `Historial de Recargas (Litros) para la Cédula: ${searchValue}`;

                placaChartInstance = new Chart(placaChartCanvas, {
                    type: 'line', 
                    data: chartData,
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                                display: false, // Solo un dataset, no es necesaria la leyenda
                            },
                            title: {
                                display: true,
                                text: chartTitle // Título dinámico
                            },
                            datalabels: {
                                align: 'top',
                                anchor: 'end',
                                formatter: (value) => value + ' L',
                                display: (context) => context.dataset.data[context.dataIndex] > 0,
                                color: '#000',
                                font: {
                                    weight: 'bold'
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Litros Recargados'
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: 'Fecha'
                                }
                            }
                        }
                    }
                });
            }

            // Event Listeners para el Gráfico de Historial
            
            // Listener para los radio buttons (cambio de modo Placa/Cédula)
            searchTypeRadios.forEach(radio => {
                radio.addEventListener('change', toggleSearchTypeInput);
            });

            placaRangoSelect.addEventListener('change', () => {
                togglePlacaCustomRange();
                updatePlacasChart();
            });

            // Listener para el input de placa
            placaInput.addEventListener('change', updatePlacasChart);
            placaInput.addEventListener('keyup', (e) => {
                if (e.key === 'Enter') {
                    updatePlacasChart();
                }
            });
            
            // NUEVO: Listener para el input de cédula
            cedulaInput.addEventListener('change', updatePlacasChart);
            cedulaInput.addEventListener('keyup', (e) => {
                if (e.key === 'Enter') {
                    updatePlacasChart();
                }
            });

            placaFechaInicioInput.addEventListener('change', () => {
                if (placaRangoSelect.value === 'personalizado') {
                    updatePlacasChart();
                }
            });
            placaFechaFinInput.addEventListener('change', () => {
                if (placaRangoSelect.value === 'personalizado') {
                    updatePlacasChart();
                }
            });

            // Inicializar el nuevo gráfico (mostrar mensaje pidiendo placa/cédula)
            togglePlacaCustomRange();
            toggleSearchTypeInput(); // Inicializar la visibilidad del campo (placa por defecto)

            // Event Listeners para el Gráfico de Consumo General
            rangoSelect.addEventListener('change', () => {
                toggleCustomRange();
                updateChart();
            });

            fechaInicioInput.addEventListener('change', () => {
                if (rangoSelect.value === 'personalizado') {
                    updateChart();
                }
            });
            fechaFinInput.addEventListener('change', () => {
                if (rangoSelect.value === 'personalizado') {
                    updateChart();
                }
            });

            estacionSelect.addEventListener('change', updateChart);

            // Cargar el gráfico inicial al cargar la página
            updateChart();
        });
    </script>
@endsection