@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">Siniestralidad y
                            Rentabilidad</h4>
                        <div class="text-muted small">Riesgo por Zona y Canal de Venta</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <button class="btn btn-brand-blue glass-btn px-4 shadow-sm" onclick="filtrarDatos()">
                    <i class="bi bi-funnel me-1"></i> Filtrar Análisis
                </button>
            </div>
        </div>

        <!-- Filtros (Ocultos por defecto) -->
        <div class="card glass-card border-0 shadow-sm mb-4" id="filtrosPanel" style="display: none;">
            <div class="card-body">
                <form id="formFiltros" class="row gx-3 gy-2 align-items-center">
                    <div class="col-sm-3">
                        <label class="form-label small text-muted mb-1">Desde</label>
                        <input type="date" class="form-control form-control-sm glass-input" id="fechaDesde"
                            name="fechaDesde" value="{{ $desde }}">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-label small text-muted mb-1">Hasta</label>
                        <input type="date" class="form-control form-control-sm glass-input" id="fechaHasta"
                            name="fechaHasta" value="{{ $hasta }}">
                    </div>
                    <div class="col-sm-3">
                        <label class="form-label small text-muted mb-1">Zona / Provincia</label>
                        <select class="form-select form-select-sm glass-input" id="zona" name="zona">
                            <option value="todas">Todas las zonas</option>
                            <option value="caba" selected>C.A.B.A</option>
                            <option value="gba_norte">GBA Norte</option>
                            <option value="gba_sur">GBA Sur</option>
                            <option value="gba_oeste">GBA Oeste</option>
                            <option value="interior">Interior del País</option>
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <label class="form-label small text-muted mb-1">&nbsp;</label>
                        <button type="button" class="btn btn-sm btn-brand-red w-100 shadow-sm glass-btn">Aplicar
                            Filtros</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- KPIs -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card glass-card border-0 shadow-sm h-100 border-start border-4 border-danger">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="text-muted mb-0">Frecuencia Siniestral</h6>
                            <div class="icon-circle bg-danger bg-opacity-10 text-danger">
                                <i class="bi bi-activity"></i>
                            </div>
                        </div>
                        <h3 class="fw-bold theme-content-title mb-0 text-danger" id="kpi-frecuencia">--</h3>
                        <div class="small text-muted mt-1">Siniestros / Pólizas Expo</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card glass-card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="text-muted mb-0">Ratio Combinado</h6>
                            <div class="icon-circle bg-warning bg-opacity-10 text-warning">
                                <i class="bi bi-percent"></i>
                            </div>
                        </div>
                        <h3 class="fw-bold theme-content-title mb-0" id="kpi-ratio">--</h3>
                        <div class="small text-muted mt-1">Costo Total / Prima Emitida</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card glass-card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="text-muted mb-0">Monto Liquidado Estim.</h6>
                            <div class="icon-circle bg-primary bg-opacity-10 text-primary">
                                <i class="bi bi-cash-stack"></i>
                            </div>
                        </div>
                        <h3 class="fw-bold theme-content-title mb-0 fs-5" id="kpi-monto">$--</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card glass-card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="text-muted mb-0">Peor Zona (Frecuencia)</h6>
                            <div class="icon-circle bg-dark bg-opacity-10 text-dark">
                                <i class="bi bi-geo-alt-fill"></i>
                            </div>
                        </div>
                        <h3 class="fw-bold theme-content-title mb-0" id="kpi-zona">--</h3>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 1: Small Charts -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card glass-card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0 pt-3 pb-0">
                        <h6 class="fw-bold theme-content-title mb-0">Siniestros por Tipo</h6>
                    </div>
                    <div class="card-body d-flex justify-content-center align-items-center" style="height: 300px;">
                        <canvas id="chartTipos"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card glass-card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0 pt-3 pb-0">
                        <h6 class="fw-bold theme-content-title mb-0">Top 5 Productores (Siniestros)</h6>
                    </div>
                    <div class="card-body d-flex align-items-center justify-content-center" style="height: 300px;">
                        <canvas id="chartProductores"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 2: Large Chart -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card glass-card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0 pt-3 pb-0">
                        <h6 class="fw-bold theme-content-title mb-0">Evolución de Egresos vs Ingresos</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="chartEvolucion" height="60"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 3: Table -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card glass-card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0 pt-3 d-flex justify-content-between align-items-center">
                        <h6 class="fw-bold theme-content-title mb-0">Ranking de Productores con mayor riesgo</h6>
                        <div>
                            <button class="btn btn-sm btn-outline-secondary glass-btn">
                                <i class="bi bi-download"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle glass-table" id="tablaRiesgo">
                                <thead class="small text-muted text-uppercase">
                                    <tr>
                                        <th>Tipo</th>
                                        <th>Cód.</th>
                                        <th>Nombre</th>
                                        <th>Zona</th>
                                        <th class="text-center">Denun.</th>
                                        <th class="text-center">Ratio</th>
                                        <th class="text-end">Costo</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-4">
                                            <div class="spinner-border spinner-border-sm me-2"></div>
                                            Obteniendo datos...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

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

        function initCharts() {
            const ctxEvolucion = document.getElementById('chartEvolucion').getContext('2d');
            chartEvolucion = new Chart(ctxEvolucion, {
                type: 'bar',
                data: { labels: [], datasets: [] },
                options: {
                    responsive: true,
                    plugins: { 
                        legend: { position: 'top' }, 
                        tooltip: { 
                            callbacks: { 
                                label: function (context) { 
                                    return context.dataset.label + ': ' + formatMoney(context.raw); 
                                } 
                            } 
                        } 
                    },
                    scales: { y: { beginAtZero: true } }
                }
            });

            const ctxTipos = document.getElementById('chartTipos').getContext('2d');
            chartTipos = new Chart(ctxTipos, {
                type: 'polarArea',
                data: { labels: [], datasets: [] },
                options: {
                    responsive: true,
                    plugins: { legend: { position: 'bottom' } }
                }
            });

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

        function formatMoney(amount) {
            return '$ ' + new Intl.NumberFormat('es-AR', { maximumFractionDigits: 0 }).format(amount);
        }

        function loadData() {
            const btn = $('#formFiltros button');
            const originalText = btn.text();
            btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');

            $.ajax({
                url: '{{ route("GerenciaSiniestralidad") }}',
                type: 'GET',
                data: $('#formFiltros').serialize(),
                success: function (response) {
                    // Update KPIs
                    $('#kpi-frecuencia').text(response.kpi.frecuencia);
                    $('#kpi-ratio').text(response.kpi.ratio_combinado);
                    $('#kpi-monto').text(formatMoney(response.kpi.monto_liquidado));
                    $('#kpi-zona').text(response.kpi.peor_zona);

                    // Update Evolucion Chart
                    chartEvolucion.data.labels = response.evolucion_siniestros.labels;
                    chartEvolucion.data.datasets = [
                        {
                            label: 'Ingresos Premium (Millones)',
                            data: response.evolucion_siniestros.ingresos,
                            backgroundColor: 'rgba(69, 123, 157, 0.6)',
                            borderColor: '#457B9D',
                            borderWidth: 1
                        },
                        {
                            label: 'Costo Siniestros (Millones)',
                            data: response.evolucion_siniestros.egresos,
                            backgroundColor: 'rgba(230, 57, 70, 0.7)',
                            borderColor: '#E63946',
                            borderWidth: 1
                        }
                    ];
                    chartEvolucion.update();

                    // Update Tipos Chart
                    chartTipos.data.labels = response.tipos.labels;
                    chartTipos.data.datasets = [{
                        data: response.tipos.data,
                        backgroundColor: ['#E63946', '#F4A261', '#E9C46A', '#264653'],
                    }];
                    chartTipos.update();

                    // Update Productores Chart
                    if (response.productores_top) {
                        chartProductores.data.labels = response.productores_top.labels;
                        chartProductores.data.datasets = [{
                            label: 'Denuncias',
                            data: response.productores_top.data,
                            backgroundColor: 'rgba(230, 57, 70, 0.7)',
                            borderRadius: 5
                        }];
                        chartProductores.update();
                    }

                    // Update Table
                    let tbody = '';
                    if (response.ranking_riesgo && response.ranking_riesgo.length > 0) {
                        response.ranking_riesgo.forEach(row => {
                            let ratioVal = parseFloat(row.ratio);
                            let badgeClass = ratioVal > 15 ? 'bg-danger' : (ratioVal > 5 ? 'bg-warning' : 'bg-success');
                            tbody += `
                        <tr>
                          <td><span class="badge bg-secondary bg-opacity-10 text-secondary small">${row.entidad}</span></td>
                          <td class="small font-monospace">${row.codigo}</td>
                          <td class="fw-bold small">${row.nombre}</td>
                          <td class="small">${row.zona}</td>
                          <td class="text-center fw-bold text-danger">${row.denuncias}</td>
                          <td class="text-center"><span class="badge ${badgeClass}">${row.ratio}</span></td>
                          <td class="text-end fw-bold text-dark">${formatMoney(row.costo)}</td>
                        </tr>
                      `;
                        });
                    } else {
                        tbody = '<tr><td colspan="7" class="text-center text-muted py-4">Sin datos de ranking</td></tr>';
                    }
                    $('#tablaRiesgo tbody').html(tbody);
                },
                complete: function () {
                    btn.prop('disabled', false).text(originalText);
                    $('#filtrosPanel').slideUp();
                    window.hideLoading();
                }
            });
        }

        function filtrarDatos() { $('#filtrosPanel').slideToggle(); }

        document.addEventListener('DOMContentLoaded', function () {
            initCharts();
            window.showLoading();
            loadData();
            $('#formFiltros button').click(function () { loadData(); });
        });
    </script>
@endpush