@extends('layouts.theme_selector')

@section('content')
<div class="container-fluid px-4">
    <div class="row mb-4 align-items-center">
        <div class="col-md-6">
            <div class="d-flex align-items-center">
                <a href="{{ route('EmisionMenu') }}"
                    class="btn btn-sm glass-brand-red rounded-circle me-3 shadow-sm border-0 d-flex align-items-center justify-content-center"
                    style="width: 35px; height: 35px;">
                    <i class="bi bi-chevron-left text-white"></i>
                </a>
                <div>
                    <h4 class="mb-0 fw-bold tracking-tight shadow-text theme-content-title">Gráficos de Emisión</h4>
                    <div class="text-muted small">Métricas y visualizaciones del área</div>
                </div>
            </div>
        </div>
    </div>

    {{-- FILTRO DE FECHAS --}}
    <div class="card glass-card border-0 shadow-sm mb-4">
        <div class="card-body py-3">
            <div class="d-flex flex-wrap align-items-end gap-3">
                <div>
                    <label for="filtro-fecha-desde" class="form-label small fw-semibold text-muted mb-1">Desde</label>
                    <input type="date" id="filtro-fecha-desde" class="form-control form-control-sm" style="min-width: 155px;">
                </div>
                <div>
                    <label for="filtro-fecha-hasta" class="form-label small fw-semibold text-muted mb-1">Hasta</label>
                    <input type="date" id="filtro-fecha-hasta" class="form-control form-control-sm" style="min-width: 155px;">
                </div>
                <div>
                    <button id="btn-aplicar-filtro" class="btn btn-sm glass-brand-red border-0 text-white px-3">
                        <i class="bi bi-funnel-fill me-1"></i> Aplicar
                    </button>
                    <button id="btn-reset-filtro" class="btn btn-sm btn-outline-secondary ms-2 px-3">
                        <i class="bi bi-arrow-counterclockwise me-1"></i> Mes actual
                    </button>
                </div>
                <div class="ms-auto text-muted small fst-italic" id="filtro-periodo-label"></div>
            </div>
        </div>
    </div>

    <!-- SECCIÓN: INSPECCIONES -->
    <h5 class="theme-content-title fw-bold mt-2 mb-3 border-bottom pb-2">
        Inspecciones — <span id="titulo-periodo">Mes Actual</span>
    </h5>
    <div class="row mb-4">
        <!-- KPI Inspecciones -->
        <div class="col-md-3 mb-3 mb-md-0">
            <div class="card glass-card border-0 shadow-sm h-100 border-start border-4 border-info">
                <div class="card-body d-flex flex-column justify-content-center">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="text-muted mb-0">Total Emisiones Nuevas (Robo)</h6>
                        <div class="icon-circle bg-info bg-opacity-10 text-info" style="width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
                            <i class="bi bi-shield-check"></i>
                        </div>
                    </div>
                    <h2 class="fw-bold theme-content-title mb-0 text-info" id="kpi-vigentes-robo">
                        <span class="spinner-border spinner-border-sm"></span>
                    </h2>
                    <div class="small text-muted mt-2">Sujetas a inspección</div>
                </div>
            </div>
        </div>

        <!-- Gráfico Comparativo Vigentes vs Inspeccionadas -->
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="card glass-card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3 pb-0">
                    <h6 class="fw-bold theme-content-title mb-0">Cobertura de Inspecciones</h6>
                </div>
                <div class="card-body d-flex justify-content-center align-items-center" style="height: 250px;">
                    <canvas id="chartComparativaInspecciones"></canvas>
                </div>
            </div>
        </div>

        <!-- Gráfico Desglose Estados -->
        <div class="col-md-5">
            <div class="card glass-card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3 pb-0">
                    <h6 class="fw-bold theme-content-title mb-0">Estados de Inspecciones</h6>
                </div>
                <div class="card-body d-flex justify-content-center align-items-center" style="height: 250px;">
                    <canvas id="chartEstadosInspecciones"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(function () {
        let chartComparativaIns;
        let chartEstadosIns;

        // ── Inicializar inputs con el primer día del mes actual y hoy ──
        const hoy = new Date();
        const primerDiaMes = new Date(hoy.getFullYear(), hoy.getMonth(), 1);

        function toInputDate(date) {
            return date.toISOString().split('T')[0];
        }

        $('#filtro-fecha-desde').val(toInputDate(primerDiaMes));
        $('#filtro-fecha-hasta').val(toInputDate(hoy));

        // ── Formateo amigable para la etiqueta de período ──
        function formatFechaLabel(str) {
            if (!str) return '';
            const [y, m, d] = str.split('-');
            return `${d}/${m}/${y}`;
        }

        function updatePeriodoLabel(desde, hasta) {
            const label = `${formatFechaLabel(desde)} – ${formatFechaLabel(hasta)}`;
            $('#filtro-periodo-label').text('Período: ' + label);

            const esMesActual =
                desde === toInputDate(primerDiaMes) && hasta === toInputDate(hoy);
            $('#titulo-periodo').text(esMesActual ? 'Mes Actual' : label);
        }

        // ── Charts ──
        function formatLabelsWithValues(labels, values) {
            return labels.map((label, index) => {
                const val = values[index];
                const formattedVal = new Intl.NumberFormat('es-AR').format(val || 0);
                return `${label} (${formattedVal})`;
            });
        }

        function initCharts() {
            const ctxCompIns = document.getElementById('chartComparativaInspecciones').getContext('2d');
            chartComparativaIns = new Chart(ctxCompIns, {
                type: 'pie',
                data: { labels: ['Inspeccionadas', 'Faltantes'], datasets: [] },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { position: 'bottom' } }
                }
            });

            const ctxEstIns = document.getElementById('chartEstadosInspecciones').getContext('2d');
            chartEstadosIns = new Chart(ctxEstIns, {
                type: 'doughnut',
                data: { labels: ['Aprobadas', 'Inspección sin auditar', 'Sin inspección', 'Rechazadas'], datasets: [] },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { position: 'right' } }
                }
            });
        }

        function loadData() {
            const desde = $('#filtro-fecha-desde').val();
            const hasta = $('#filtro-fecha-hasta').val();

            // Mostrar spinner mientras carga
            $('#kpi-vigentes-robo').html('<span class="spinner-border spinner-border-sm"></span>');

            updatePeriodoLabel(desde, hasta);

            $.ajax({
                url: '{{ route("Emision.InspeccionesStats") }}',
                type: 'GET',
                data: {
                    fecha_desde: desde,
                    fecha_hasta: hasta
                },
                success: function (response) {
                    if (response.success) {
                        $('#kpi-vigentes-robo').text(
                            new Intl.NumberFormat('es-AR').format(response.total_vigentes_robo)
                        );

                        const restoRobo = Math.max(0, response.total_vigentes_robo - response.total_inspeccionadas);
                        const compLabels = ['Inspeccionadas', 'Faltantes'];
                        const compData = [response.total_inspeccionadas, restoRobo];

                        chartComparativaIns.data.labels = formatLabelsWithValues(compLabels, compData);
                        chartComparativaIns.data.datasets = [{
                            data: compData,
                            backgroundColor: ['#2A9D8F', '#E9C46A'],
                            borderWidth: 1
                        }];
                        chartComparativaIns.update();

                        const estLabels = ['Aprobadas', 'Inspección sin auditar', 'Sin inspección', 'Rechazadas'];
                        const estData = [
                            response.inspecciones_stats.aprobadas,
                            response.inspecciones_stats.inspeccion_sin_auditar,
                            response.inspecciones_stats.sin_inspeccion,
                            response.inspecciones_stats.rechazadas
                        ];

                        chartEstadosIns.data.labels = formatLabelsWithValues(estLabels, estData);
                        chartEstadosIns.data.datasets = [{
                            data: estData,
                            backgroundColor: ['#2A9D8F', '#F4A261', '#E9C46A', '#E63946'],
                            borderWidth: 1
                        }];
                        chartEstadosIns.update();

                    } else {
                        console.error("Error in response:", response);
                        $('#kpi-vigentes-robo').text('Error');
                    }
                },
                error: function (err) {
                    console.error("Fetch error:", err);
                    $('#kpi-vigentes-robo').text('Error');
                }
            });
        }

        // ── Eventos ──
        $('#btn-aplicar-filtro').on('click', function () {
            const desde = $('#filtro-fecha-desde').val();
            const hasta = $('#filtro-fecha-hasta').val();
            if (!desde || !hasta) {
                alert('Por favor completá ambas fechas.');
                return;
            }
            if (desde > hasta) {
                alert('La fecha "Desde" no puede ser mayor que "Hasta".');
                return;
            }
            loadData();
        });

        $('#btn-reset-filtro').on('click', function () {
            $('#filtro-fecha-desde').val(toInputDate(primerDiaMes));
            $('#filtro-fecha-hasta').val(toInputDate(hoy));
            loadData();
        });

        // ── Carga inicial ──
        initCharts();
        loadData();
    });
</script>
@endpush