@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">Retención de Cartera</h4>
                        <div class="text-muted small">Evolución, Caídas y Persistencia</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 Periodo
                </button>
            </div>
        </div>

        <!-- Filtros -->
        <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-4">
                        <label class="form-label small text-muted mb-1">Desde</label>
                        <input type="month" class="form-control form-control-sm glass-input" id="fechaDesde"
                            name="fechaDesde" value="{{ date('Y-m', strtotime($desde)) }}">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small text-muted mb-1">Hasta</label>
                        <input type="month" class="form-control form-control-sm glass-input" id="fechaHasta"
                            name="fechaHasta" value="{{ date('Y-m', strtotime($hasta)) }}">
                    </div>
                    <div class="col-sm-4">
                        <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">Analizar
                            Tendencia</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-success">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="text-muted mb-0">Tasa de Retención (Global)</h6>
                            <div class="icon-circle bg-success bg-opacity-10 text-success">
                                <i class="bi bi-shield-check"></i>
                            </div>
                        </div>
                        <h3 class="fw-bold theme-content-title mb-0 text-success" id="kpi-retencion">--</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">Promedio Caídas/Mes</h6>
                            <div class="icon-circle bg-danger bg-opacity-10 text-danger">
                                <i class="bi bi-graph-down-arrow"></i>
                            </div>
                        </div>
                        <h3 class="fw-bold theme-content-title mb-0" id="kpi-caida">--</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">Motivo de Baja Principal</h6>
                            <div class="icon-circle bg-warning bg-opacity-10 text-warning">
                                <i class="bi bi-exclamation-triangle"></i>
                            </div>
                        </div>
                        <h3 class="fw-bold theme-content-title mb-0 fs-6" id="kpi-motivo">--</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">Vida Media Estimada</h6>
                            <div class="icon-circle bg-info bg-opacity-10 text-info">
                                <i class="bi bi-hourglass-split"></i>
                            </div>
                        </div>
                        <h3 class="fw-bold theme-content-title mb-0" id="kpi-vida">--</h3>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="row mb-4">
            <div class="col-md-7">
                <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">Evolución: Cartera Activa vs Anulaciones</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="chartCartera" height="100"></canvas>
                    </div>
                </div>
            </div>
            <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">Distribución de Motivos de Baja</h6>
                    </div>
                    <div class="card-body d-flex justify-content-center align-items-center">
                        <canvas id="chartMotivos" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 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">Persistencia por Canal (Productores/Agencias)</h6>
                        <button class="btn btn-sm btn-outline-secondary glass-btn"><i class="bi bi-download"></i>
                            CSV</button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle glass-table" id="tablaRetencion">
                                <thead>
                                    <tr>
                                        <th>Canal</th>
                                        <th>Nombre / Entidad</th>
                                        <th class="text-center">Cartera Activa</th>
                                        <th class="text-center">Pólizas Caídas</th>
                                        <th class="text-end">Tasa de Retención</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="5" class="text-center text-muted py-4">Analizando 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;
        }

        .badge-retencion-alta {
            background-color: rgba(25, 135, 84, 0.2);
            color: #198754;
        }

        .badge-retencion-media {
            background-color: rgba(255, 193, 7, 0.2);
            color: #ffc107;
        }

        .badge-retencion-baja {
            background-color: rgba(220, 53, 69, 0.2);
            color: #dc3545;
        }
    </style>
    <script>
        let chartCartera, chartMotivos;

        function initCharts() {
            const ctxCartera = document.getElementById('chartCartera').getContext('2d');
            chartCartera = new Chart(ctxCartera, {
                type: 'line',
                data: { labels: [], datasets: [] },
                options: {
                    responsive: true,
                    plugins: { legend: { position: 'top' } },
                    scales: {
                        y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Vigentes' } },
                        y1: { type: 'linear', display: true, position: 'right', grid: { drawOnChartArea: false }, title: { display: true, text: 'Anuladas' } }
                    }
                }
            });

            const ctxMotivos = document.getElementById('chartMotivos').getContext('2d');
            chartMotivos = new Chart(ctxMotivos, {
                type: 'pie',
                data: { labels: [], datasets: [] },
                options: { responsive: true, plugins: { legend: { position: 'right' } } }
            });
        }

        function formatNumber(amount) {
            return new Intl.NumberFormat('es-AR').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("GerenciaRetencion") }}',
                type: 'GET',
                data: $('#formFiltros').serialize(),
                success: function (response) {
                    // KPIs
                    $('#kpi-retencion').text(response.kpi.tasa_retencion);
                    $('#kpi-caida').text(response.kpi.caida_mes);
                    $('#kpi-motivo').text(response.kpi.motivo_principal);
                    $('#kpi-vida').text(response.kpi.vida_media);

                    // Chart Cartera
                    chartCartera.data.labels = response.cartera_activa.labels;
                    chartCartera.data.datasets = [
                        {
                            label: 'Pólizas Vigentes',
                            data: response.cartera_activa.vigentes,
                            borderColor: '#2A9D8F',
                            backgroundColor: 'rgba(42, 157, 143, 0.1)',
                            fill: true,
                            yAxisID: 'y'
                        },
                        {
                            label: 'Anulaciones/Caídas',
                            data: response.cartera_activa.anuladas,
                            borderColor: '#E76F51',
                            type: 'bar',
                            backgroundColor: 'rgba(231, 111, 81, 0.7)',
                            yAxisID: 'y1'
                        }
                    ];
                    chartCartera.update();

                    // Chart Motivos
                    chartMotivos.data.labels = response.motivos_baja.labels;
                    chartMotivos.data.datasets = [{
                        data: response.motivos_baja.data,
                        backgroundColor: ['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51']
                    }];
                    chartMotivos.update();

                    // Table
                    let tbody = '';
                    response.ranking_retencion.forEach(row => {
                        let tasaFloat = parseFloat(row.tasa);
                        let badgeClass = tasaFloat >= 85 ? 'badge-retencion-alta' : (tasaFloat >= 70 ? 'badge-retencion-media' : 'badge-retencion-baja');

                        tbody += `
                <tr>
                  <td><span class="badge bg-secondary bg-opacity-10 text-secondary">${row.canal}</span></td>
                  <td class="fw-bold">${row.nombre}</td>
                  <td class="text-center">${formatNumber(row.vigentes)}</td>
                  <td class="text-center text-danger">${formatNumber(row.caidas)}</td>
                  <td class="text-end fw-bold"><span class="badge ${badgeClass} fs-6">${row.tasa}</span></td>
                </tr>
              `;
                    });
                    $('#tablaRetencion tbody').html(tbody);
                },
                complete: function () {
                    btn.prop('disabled', false).text(originalText);
                    $('#filtrosPanel').slideUp();
                }
            });
        }

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

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