@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('GerenciaMenu') }}"
                        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">Estado Actual de la Compañía
                        </h4>
                        <div class="text-muted small">Pólizas Vigentes, Cuotas Impagas y Rechazos</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <!-- Removed toggle filter button -->
            </div>
        </div>

        <form id="formFiltros">
            <!-- SECCIÓN: PÓLIZAS VIGENTES -->
            <div class="row mb-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label fw-bold text-muted mb-1">Sección Global (Rama)</label>
                    <select class="form-select form-select-sm glass-input" id="seccion" name="seccion"
                        onchange="loadData()">
                        @foreach ($secciones as $sec)
                            <option value="{{ $sec->IdSeccion }}" {{ $sec->IdSeccion == 14 ? 'selected' : '' }}>
                                {{ $sec->Descripcion }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="row mb-5">
                <!-- Contador Vigentes -->
                <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-success">
                        <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 Vigentes</h6>
                                <div class="icon-circle bg-success bg-opacity-10 text-success">
                                    <i class="bi bi-shield-check"></i>
                                </div>
                            </div>
                            <h2 class="fw-bold theme-content-title mb-0 text-success" id="kpi-vigentes">
                                <span class="spinner-border spinner-border-sm"></span>
                            </h2>
                            <div class="small text-muted mt-2">Cumplen condiciones de cobertura</div>
                        </div>
                    </div>
                </div>

                <!-- Gráfico Vigentes -->
                <div class="col-md-9">
                    <div class="card glass-card border-0 shadow-sm h-100">
                        <div
                            class="card-header bg-transparent border-0 pt-3 pb-0 d-flex flex-column flex-md-row justify-content-between align-items-md-center w-100">
                            <h6 class="fw-bold theme-content-title mb-2 mb-md-0">Distribución de Pólizas Vigentes</h6>
                            <div class="d-flex gap-2 flex-wrap justify-content-end">
                                <!-- Toggle Dimension -->
                                <div class="btn-group btn-group-sm mb-1" role="group" id="dimensionTools">
                                    <input type="radio" class="btn-check" name="btnDimension" id="btnDimCob"
                                        autocomplete="off" value="cobertura" checked>
                                    <label class="btn btn-outline-primary" for="btnDimCob">Cobertura</label>

                                    <input type="radio" class="btn-check" name="btnDimension" id="btnDimPago"
                                        autocomplete="off" value="tipo_de_pago">
                                    <label class="btn btn-outline-primary" for="btnDimPago">Tipo de Pago</label>

                                    <input type="radio" class="btn-check" name="btnDimension" id="btnDimOrg"
                                        autocomplete="off" value="organizador">
                                    <label class="btn btn-outline-primary" for="btnDimOrg">Organizador (Top 15)</label>

                                    <input type="radio" class="btn-check" name="btnDimension" id="btnDimEst"
                                        autocomplete="off" value="estado">
                                    <label class="btn btn-outline-primary" for="btnDimEst">Estado de Poliza</label>
                                </div>

                                <!-- Toggle Chart Type -->
                                <div class="btn-group btn-group-sm mb-1" role="group" id="chartTypeTools">
                                    <input type="radio" class="btn-check" name="btnChartType" id="btnTypePie"
                                        autocomplete="off" value="doughnut" checked>
                                    <label class="btn btn-outline-secondary" for="btnTypePie"><i
                                            class="bi bi-pie-chart"></i></label>

                                    <input type="radio" class="btn-check" name="btnChartType" id="btnTypeBar"
                                        autocomplete="off" value="bar">
                                    <label class="btn btn-outline-secondary" for="btnTypeBar"><i
                                            class="bi bi-bar-chart"></i></label>
                                </div>
                            </div>
                        </div>
                        <div class="card-body d-flex justify-content-center align-items-center" style="height: 350px;">
                            <canvas id="chartVigentes"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SECCIÓN: CUOTAS VENCIDAS -->
            <div class="row align-items-end mb-3 mt-4">
                <div class="col-md-2">
                    <label class="form-label fw-bold text-muted mb-1">Días Desde</label>
                    <input type="number" class="form-control form-control-sm glass-input" id="diasDesde" name="diasDesde"
                        value="1">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold text-muted mb-1">Días Hasta</label>
                    <input type="number" class="form-control form-control-sm glass-input" id="diasHasta" name="diasHasta"
                        value="3">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-sm btn-brand-red w-100 shadow-sm glass-btn"
                        onclick="loadData()">Actualizar Cuotas</button>
                </div>
            </div>

            <div class="row mb-5">
                <!-- Contador Cuotas -->
                <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-warning">
                        <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">Cuotas Vencidas (Impagas)</h6>
                                <div class="icon-circle bg-warning bg-opacity-10 text-warning">
                                    <i class="bi bi-calendar-x"></i>
                                </div>
                            </div>
                            <h2 class="fw-bold theme-content-title mb-0 text-warning" id="kpi-cuotas">--</h2>
                            <div class="small text-muted mt-2"><span id="kpi-importe-cuotas">$0</span> Importe Total
                                Estimado</div>
                        </div>
                    </div>
                </div>

                <!-- Gráfico Cuotas -->
                <div class="col-md-9">
                    <div class="card glass-card border-0 shadow-sm h-100">
                        <div
                            class="card-header bg-transparent border-0 pt-3 pb-0 d-flex justify-content-between align-items-center w-100">
                            <h6 class="fw-bold theme-content-title mb-0">Distribución por Organizador (Top 15)</h6>
                        </div>
                        <div class="card-body d-flex justify-content-center align-items-center" style="height: 350px;">
                            <canvas id="chartCuotas"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SECCIÓN: RECHAZOS -->
            <h5 class="theme-content-title fw-bold mt-5 mb-3 border-bottom pb-2">Rechazos Automáticos (Mes Actual)</h5>
            <div class="row mb-4">
                <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-danger">
                        <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">Rechazos Totales</h6>
                                <div class="icon-circle bg-danger bg-opacity-10 text-danger">
                                    <i class="bi bi-credit-card-2-front"></i>
                                </div>
                            </div>
                            <h2 class="fw-bold theme-content-title mb-0 text-danger" id="kpi-rechazos">--</h2>
                            <div class="small text-muted mt-2">Mes en vigencia</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="card glass-card border-0 shadow-sm h-100">
                        <div
                            class="card-header bg-transparent border-0 pt-3 pb-0 d-flex flex-column flex-md-row justify-content-between align-items-md-center w-100">
                            <h6 class="fw-bold theme-content-title mb-2 mb-md-0">Distribución de Rechazos</h6>
                            <div class="d-flex gap-2 flex-wrap justify-content-end">
                                <!-- Toggle Dimension -->
                                <div class="btn-group btn-group-sm mb-1" role="group" id="rechazosDimensionTools">
                                    <input type="radio" class="btn-check" name="btnDimensionRechazos" id="btnDimEntidad"
                                        autocomplete="off" value="entidad" checked>
                                    <label class="btn btn-outline-danger" for="btnDimEntidad">Entidad</label>

                                    <input type="radio" class="btn-check" name="btnDimensionRechazos" id="btnDimMotivo"
                                        autocomplete="off" value="motivo">
                                    <label class="btn btn-outline-danger" for="btnDimMotivo">Motivo (Top 15)</label>
                                </div>
                            </div>
                        </div>
                        <div class="card-body d-flex justify-content-center align-items-center" style="height: 350px;">
                            <canvas id="chartRechazos"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <!-- SECCIÓN: INSPECCIONES -->
            <h5 class="theme-content-title fw-bold mt-5 mb-3 border-bottom pb-2">Inspecciones (Mes Actual)</h5>
            <div class="row mb-5">
                <!-- 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">
                                    <i class="bi bi-shield-check"></i>
                                </div>
                            </div>
                            <h2 class="fw-bold theme-content-title mb-0 text-info" id="kpi-vigentes-robo">--</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>
        </form>

    </div>
@endsection

@push('scripts')
    <style>
        .icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        let chartVigentes;
        let chartCuotas;
        let chartRechazos;
        let chartComparativaIns;
        let chartEstadosIns;

        let dashboardData = null; // Store fetched data locally
        let currentDimension = 'cobertura';
        let currentChartType = 'doughnut';

        // Rechazos
        let currentDimensionRechazos = 'entidad';

        const chartColors = [
            '#457B9D', '#E63946', '#F4A261', '#2A9D8F', '#E9C46A',
            '#F07167', '#0081A7', '#00AFB9', '#FDFCDC', '#FED9B7',
            '#1D3557', '#9A8C98', '#C9ADA7', '#A8DADC', '#264653'
        ];

        function initCharts() {
            const ctxVigentes = document.getElementById('chartVigentes').getContext('2d');
            chartVigentes = new Chart(ctxVigentes, {
                type: currentChartType,
                data: { labels: [], datasets: [] },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'right' }
                    }
                }
            });

            const ctxCuotas = document.getElementById('chartCuotas').getContext('2d');
            chartCuotas = new Chart(ctxCuotas, {
                type: 'bar',
                data: { labels: [], datasets: [] },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });

            const ctxRechazos = document.getElementById('chartRechazos').getContext('2d');
            chartRechazos = new Chart(ctxRechazos, {
                type: 'doughnut',
                data: { labels: [], datasets: [] },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'right' }
                    }
                }
            });

            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', 'Pendientes', 'Rechazadas'], datasets: [] },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'right' }
                    }
                }
            });
        }

        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 updateChartWithLocalData() {
            try {
                if (!dashboardData || !dashboardData.agrupaciones) return;

                const grouped = dashboardData.agrupaciones[currentDimension];
                if (!grouped) {
                    console.error("Missing dimension data for:", currentDimension);
                    return;
                }

                // Re-create chart completely to apply type change gracefully
                if (chartVigentes) {
                    chartVigentes.destroy();
                }

                const ctx = document.getElementById('chartVigentes').getContext('2d');

                let chartOptions = {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: currentChartType === 'bar' ? 'top' : 'right' }
                    }
                };

                if (currentChartType === 'bar') {
                    chartOptions.scales = {
                        y: { beginAtZero: true }
                    };
                }

                chartVigentes = new Chart(ctx, {
                    type: currentChartType,
                    data: {
                        labels: formatLabelsWithValues(grouped.labels, grouped.data),
                        datasets: [{
                            label: 'Cantidad de Pólizas',
                            data: grouped.data,
                            backgroundColor: chartColors,
                            borderWidth: 1
                        }]
                    },
                    options: chartOptions
                });
            } catch (e) {
                console.error("Error drawing chart:", e);
                alert("Hubo un error al redibujar el gráfico: " + e.message);
            }
        }

        function updateChartRechazosLocalData() {
            try {
                if (!dashboardData || !dashboardData.rechazos || !dashboardData.rechazos.agrupaciones) return;

                const grouped = dashboardData.rechazos.agrupaciones[currentDimensionRechazos];
                if (!grouped) {
                    console.warn("No data for rechazos dimension:", currentDimensionRechazos);
                    return;
                }

                if (chartRechazos) {
                    chartRechazos.destroy();
                }

                const ctx = document.getElementById('chartRechazos').getContext('2d');
                chartRechazos = new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: formatLabelsWithValues(grouped.labels, grouped.data),
                        datasets: [{
                            label: 'Rechazos',
                            data: grouped.data,
                            backgroundColor: chartColors,
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { position: 'right' }
                        }
                    }
                });
            } catch (e) {
                console.error("Chart rechazos error:", e);
            }
        }

        function loadData() {
            window.showLoading();

            $.ajax({
                url: '{{ route("GerenciaEstado") }}',
                type: 'GET',
                data: $('#formFiltros').serialize(),
                success: function (response) {
                    if (response.success) {
                        dashboardData = response;

                        // Update KPI Vigentes
                        $('#kpi-vigentes').text(
                            new Intl.NumberFormat('es-AR').format(response.total_vigentes)
                        );

                        // Update KPI Cuotas
                        $('#kpi-cuotas').text(
                            new Intl.NumberFormat('es-AR').format(response.cuotas.total)
                        );
                        $('#kpi-importe-cuotas').text(
                            '$ ' + new Intl.NumberFormat('es-AR', { maximumFractionDigits: 0 }).format(response.cuotas.importe_total)
                        );

                        // Update KPI Rechazos
                        $('#kpi-rechazos').text(
                            new Intl.NumberFormat('es-AR').format(response.rechazos.total)
                        );

                        // Update KPI Robo
                        $('#kpi-vigentes-robo').text(
                            new Intl.NumberFormat('es-AR').format(response.total_vigentes_robo)
                        );

                        // Render Chart Vigentes
                        updateChartWithLocalData();

                        // Render Chart Rechazos
                        updateChartRechazosLocalData();

                        // Render Chart Cuotas
                        if (response.cuotas.agrupaciones && response.cuotas.agrupaciones.organizador) {
                            const labels = response.cuotas.agrupaciones.organizador.labels;
                            const data = response.cuotas.agrupaciones.organizador.data;
                            chartCuotas.data.labels = formatLabelsWithValues(labels, data);
                            chartCuotas.data.datasets = [{
                                label: 'Cantidad de Cuotas Vencidas',
                                data: data,
                                backgroundColor: '#E63946',
                                borderRadius: 4,
                                borderWidth: 1
                            }];
                            chartCuotas.update();
                        }

                        // Render Chart Comparativa Inspecciones (Inspeccionadas vs Resto de 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();

                        // Render Chart Estados Inspecciones
                        const estLabels = ['Aprobadas', 'Pendientes', 'Rechazadas'];
                        const estData = [
                            response.inspecciones_stats.aprobadas,
                            response.inspecciones_stats.pendientes,
                            response.inspecciones_stats.rechazadas
                        ];

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

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

        // Toggle Event Listeners
        $('input[name="btnDimension"]').change(function () {
            currentDimension = $(this).val();
            updateChartWithLocalData();
        });

        $('input[name="btnChartType"]').change(function () {
            currentChartType = $(this).val();
            updateChartWithLocalData();
        });

        $('input[name="btnDimensionRechazos"]').change(function () {
            currentDimensionRechazos = $(this).val();
            updateChartRechazosLocalData();
        });

        document.addEventListener('DOMContentLoaded', function () {
            initCharts();
            loadData();
        });
    </script>
@endpush