@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">Rendimiento Comercial</h4>
                        <div class="text-muted small">Análisis de Ventas y Emisión por Canal y Jerarquía</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros (Siempre Visibles) -->
    <div class="card glass-card border-0 shadow-sm mb-4" id="filtrosPanel">
        <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-4">
                    <label class="form-label small text-muted mb-1">Rama / Sección</label>
                    <select class="form-select form-select-sm glass-input select2-multiple" id="rama" name="rama[]"
                        multiple="multiple">
                        <option value="0" {{ (is_array($rama) && in_array(0, $rama)) || $rama == 0 ? 'selected' : '' }}>Todas
                        </option>
                        @foreach($secciones as $sec)
                            <option value="{{ $sec->IdSeccion }}" {{ (is_array($rama) && in_array($sec->IdSeccion, $rama)) ? 'selected' : '' }}>
                                {{ $sec->Descripcion }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-sm-2">
                    <label class="form-label small text-muted mb-1">&nbsp;</label>
                    <button type="button" id="btnAplicarFiltros" class="btn btn-sm btn-brand-red w-100 shadow-sm glass-btn"
                        onclick="loadData()">Aplicar Filtros</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loading-overlay" style="display: none;">
        <div class="spinner-container">
            <div class="spinner-border text-brand-red" role="status">
                <span class="visually-hidden">Cargando...</span>
            </div>
            <h5 class="fw-bold text-white">Actualizando Datos...</h5>
        </div>
    </div>

    <!-- KPIs -->
    <div class="row mb-4">
        <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">Total Pólizas Emitidas</h6>
                        <div class="icon-circle bg-success bg-opacity-10 text-success">
                            <i class="bi bi-file-earmark-check"></i>
                        </div>
                    </div>
                    <h3 class="fw-bold theme-content-title mb-0" id="kpi-polizas">--</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">Total Prima Emitida</h6>
                        <div class="icon-circle bg-primary bg-opacity-10 text-primary">
                            <i class="bi bi-currency-dollar"></i>
                        </div>
                    </div>
                    <h3 class="fw-bold theme-content-title mb-0" id="kpi-prima">$ --</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">Mejor Canal</h6>
                        <div class="icon-circle bg-warning bg-opacity-10 text-warning">
                            <i class="bi bi-trophy"></i>
                        </div>
                    </div>
                    <h3 class="fw-bold theme-content-title mb-0 fs-5" id="kpi-canal">--</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">Renovaciones</h6>
                        <div class="icon-circle bg-info bg-opacity-10 text-info">
                            <i class="bi bi-arrow-repeat"></i>
                        </div>
                    </div>
                    <h3 class="fw-bold theme-content-title mb-0" id="kpi-renovaciones">--</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 1 -->
    <div class="row mb-4">
        <div class="col-md-8">
            <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">Emisiones en el tiempo</h6>
                </div>
                <div class="card-body">
                    <canvas id="chartEvolucion" height="80"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <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 por Rama</h6>
                </div>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <canvas id="chartRamas" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Row -->
    <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 por Jerarquía / Productor</h6>
                    <div>
                        <button class="btn btn-sm btn-outline-secondary glass-btn"><i class="bi bi-download"></i>
                            Excel</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered align-middle" id="tablaRanking">
                            <thead>
                                <tr>
                                    <th>Canal / Tipo</th>
                                    <th>Codigo</th>
                                    <th>Rama</th>
                                    <th class="text-center">Nuevas</th>
                                    <th class="text-center">Renov.</th>
                                    <th class="text-end">Prima Emitida</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-4">
                                        Cargando datos...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
@endsection

@push('styles')
    <style>
        .icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .select2-container--default .select2-selection--multiple {
            background-color: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 8px !important;
            color: white !important;
            min-height: 31px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #1D3557 !important;
            border: none !important;
            color: white !important;
            border-radius: 4px !important;
            padding-left: 5px !important;
        }

        .select2-dropdown {
            background-color: #1a1a1a !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: white !important;
        }

        .select2-results__option--highlighted[aria-selected] {
            background-color: #E63946 !important;
            color: white !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
            color: rgba(255, 255, 255, 0.5) !important;
        }

        .select2-container--default .select2-search--inline .select2-search__field {
            color: white !important;
        }

        /* Specific fixes for choices icons and to prevent accumulation */
        .select2-container .select2-selection--multiple .select2-selection__choice__remove {
            color: #E63946 !important;
            margin-right: 5px !important;
            border: none !important;
            position: relative !important;
            display: inline-block !important;
        }

        /* Hide ALL but one remove icon per choice */
        .select2-selection__choice__remove~.select2-selection__choice__remove {
            display: none !important;
        }

        .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
            background: rgba(230, 57, 70, 0.1) !important;
            color: #d63031 !important;
        }

        /* Ensure global clear is hidden or well-placed */
        .select2-container .select2-selection--multiple .select2-selection__clear {
            display: none !important;
        }

        /* Badge types */
        .badge-pas {
            background-color: rgba(230, 57, 70, 0.1) !important;
            color: #E63946 !important;
            border: 1px solid rgba(230, 57, 70, 0.2);
        }

        .badge-org {
            background-color: rgba(69, 123, 157, 0.1) !important;
            color: #a8dadc !important;
            border: 1px solid rgba(69, 123, 157, 0.2);
        }

        /* Loading Overlay */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .spinner-container {
            text-align: center;
            color: white;
        }

        .spinner-container .spinner-border {
            width: 3rem;
            height: 3rem;
            margin-bottom: 1rem;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/es.min.js"></script>
    <script>
        let chartEvolucion, chartRamas, tablaRanking;

        $(document).ready(function () {
            initSelect2();
        });

        function initSelect2() {
            const $rama = $('.select2-multiple');
            if ($rama.hasClass("select2-hidden-accessible")) {
                $rama.select2('destroy');
            }
            $rama.select2({
                placeholder: "Seleccione secciones",
                allowClear: false,
                width: '100%',
                language: 'es'
            });
        }

        function initCharts() {
            const ctxEvolucion = document.getElementById('chartEvolucion').getContext('2d');
            chartEvolucion = new Chart(ctxEvolucion, {
                type: 'line',
                data: { labels: [], datasets: [] },
                options: {
                    responsive: true,
                    plugins: { legend: { position: 'top' } },
                    scales: { y: { beginAtZero: true } }
                }
            });

            const ctxRamas = document.getElementById('chartRamas').getContext('2d');
            chartRamas = new Chart(ctxRamas, {
                type: 'doughnut',
                data: { labels: [], datasets: [] },
                options: {
                    responsive: true,
                    plugins: { legend: { position: 'bottom' } },
                    cutout: '70%'
                }
            });
        }

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

        function loadData() {
            const $btn = $('#btnAplicarFiltros');
            const $overlay = $('#loading-overlay');
            const originalText = "Aplicar Filtros";

            $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');
            $overlay.fadeIn(200);

            $.ajax({
                url: '{{ route("GerenciaRendimientoComercial") }}',
                type: 'GET',
                data: $('#formFiltros').serialize(),
                success: function (response) {
                    $('#kpi-polizas').text(response.kpi.polizas);

                    $('#kpi-prima').text(formatMoney(response.kpi.prima));
                    $('#kpi-canal').text(response.kpi.mejor_canal);
                    $('#kpi-renovaciones').text(response.kpi.renovaciones);

                    const colors = ['#1D3557', '#E63946', '#457B9D', '#A8DADC', '#F1FAEE', '#FFB703', '#FB8500'];

                    chartEvolucion.data.labels = response.evolucion.labels;
                    chartEvolucion.data.datasets = response.evolucion.series.map((s, index) => {
                        return {
                            label: s.rama,
                            data: s.data,
                            borderColor: colors[index % colors.length],
                            backgroundColor: colors[index % colors.length] + '1A', // 10% opacity
                            tension: 0.4,
                            fill: true
                        };
                    });
                    chartEvolucion.update();

                    chartRamas.data.labels = response.ramas.labels;
                    chartRamas.data.datasets = [{
                        data: response.ramas.data,
                        backgroundColor: colors.slice(0, response.ramas.labels.length),
                        borderWidth: 0
                    }];
                    chartRamas.update();

                    let tbody = '';
                    if (response.ranking && response.ranking.length > 0) {
                        response.ranking.forEach(row => {
                            const badgeClass = row.canal === 'ORG' ? 'badge-org' : 'badge-pas';
                            tbody += `
                                                                        <tr>
                                                                            <td><span class="badge ${badgeClass}">${row.canal}</span></td>
                                                                            <td class="fw-bold">${row.codigo}</td>
                                                                            <td>${row.rama}</td>
                                                                            <td class="text-center">${row.nuevas}</td>
                                                                            <td class="text-center">${row.renov}</td>
                                                                            <td class="text-end fw-bold text-primary" data-order="${row.prima}">${formatMoney(row.prima)}</td>
                                                                        </tr>
                                                                `;
                        });
                    } else {
                        tbody = '<tr><td colspan="6" class="text-center text-muted py-4">No se encontraron datos para el período</td></tr>';
                    }

                    // Destroy DataTables if it exists
                    if ($.fn.DataTable.isDataTable('#tablaRanking')) {
                        $('#tablaRanking').DataTable().destroy();
                    }

                    $('#tablaRanking tbody').html(tbody);

                    // Re-initialize DataTables
                    tablaRanking = $('#tablaRanking').DataTable({
                        pageLength: 10,
                        lengthMenu: [5, 10, 25, 50],
                        order: [[5, "desc"]],
                        language: {
                            url: "//cdn.datatables.net/plug-ins/1.11.4/i18n/es_es.json"
                        },
                        dom: '<"row my-2 justify-content-around"<"col text-left"B><"col mx-auto tableFinder"f>> t <"row mt-3"<"col-md-5 mx-auto"p>> '
                    });
                },
                complete: function () {
                    $btn.prop('disabled', false).text(originalText);
                    $('#loading-overlay').fadeOut(200);
                },
                error: function (xhr) {
                    $btn.prop('disabled', false).text(originalText);
                    console.error(xhr.responseText);
                    alert("Error al cargar los datos. Verifique la consola o el formato de las secciones.");
                }
            });
        }



        document.addEventListener('DOMContentLoaded', function () {
            initCharts();
            loadData();


        });
    </script>
@endpush

@include('layouts/datatable')