@push('css')
    <style>
        .kpi-card {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .kpi-card h3 {
            margin: 0;
        }
    </style>
@endpush

<div>
    <div class="header">
        <div class="header-body">
            <div class="row align-items-center">
                <div class="col">
                    <!-- Title -->
                    <h1 class="header-title">
                        Tablero VIDA
                    </h1>
                </div>
                <div class="col-auto">
                </div>
            </div>
        </div>
    </div>

    <!-- KPIs en una fila -->
    <div class="row m-4">
        <div class="col-md-3">
            <label class="form-label">Fecha: </label>
            <input type="text" id="dateRangePickerResumen" class="form-control" wire:ignore>
        </div>
    </div>
    <h4>Generales</h4>
    <div class="row d-flex justify-content-between align-items-center">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <h6 class="text-uppercase text-body-secondary mb-2">Prima neta vigente</h6>
                            <span class="h2 mb-0" id="primaNetaVigente">0</span>
                        </div>
                        <div class="col-auto">
                            <span class="h2 fe fe-dollar-sign text-success mb-0"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <h6 class="text-uppercase text-body-secondary mb-2">Prima neta cancelada</h6>
                            <span class="h2 mb-0" id="primaNetaCancelada">0</span>
                        </div>
                        <div class="col-auto">
                            <span class="h2 fe fe-dollar-sign text-danger mb-0"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <h6 class="text-uppercase text-body-secondary mb-2">Prima ahorro vigente</h6>
                            <span class="h2 mb-0" id="primaAhorroVigente">0</span>
                        </div>
                        <div class="col-auto">
                            <span class="h2 fe fe-dollar-sign text-success mb-0"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <h6 class="text-uppercase text-body-secondary mb-2">Prima ahorro canceladas</h6>
                            <span class="h2 mb-0" id="primaAhorroCancelada">0</span>
                        </div>
                        <div class="col-auto">
                            <span class="h2 fe fe-dollar-sign text-danger mb-0"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 mb-4" id="tabs">
            <h4>Por dependencia</h4>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" id="tabList" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="snte-tab" data-bs-toggle="tab" data-bs-target="#snte"
                        type="button" role="tab" aria-controls="snte" aria-selected="true">
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="salud-tab" data-bs-toggle="tab" data-bs-target="#salud" type="button"
                        role="tab" aria-controls="salud" aria-selected="false">
                    </button>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content mt-3" id="carteraTabContentCard" id="tabContents">
                <div class="tab-pane fade show active" id="snte" role="tabpanel" aria-labelledby="snte-tab">
                </div>
                <div class="tab-pane fade" id="salud" role="tabpanel" aria-labelledby="salud-tab">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-body">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" id="carteraTabNav2" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="vigentes-tab2" data-bs-toggle="tab" data-bs-target="#vigentes2" type="button" role="tab" aria-controls="vigentes2" aria-selected="true">
                                Venta Nueva
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="canceladas-tab2" data-bs-toggle="tab" data-bs-target="#canceladas2" type="button" role="tab" aria-controls="canceladas2" aria-selected="false">
                                Canceladas
                            </button>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content mt-3" id="carteraTabContent2">
                        <div class="tab-pane fade show active" id="vigentes2" role="tabpanel" aria-labelledby="vigentes-tab2">
                            <livewire:dashboard.ventas-mes-table />
                        </div>
                        <div class="tab-pane fade" id="canceladas2" role="tabpanel" aria-labelledby="canceladas-tab2">
                            <livewire:dashboard.canceladas-mes-table />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {

            // Cambia el id y evento del picker para Cartera
            const locale = {
                firstDayOfWeek: 1,
                weekdays: {
                    shorthand: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
                    longhand: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                },
                months: {
                    shorthand: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov',
                        'Dic'
                    ],
                    longhand: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto',
                        'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
                    ],
                },
            };

            let today = new Date();
            let firstDayLastMonth = new Date(today.getFullYear(), today.getMonth(), 1);
            let lastDayLastMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);

            let fechaInicio = firstDayLastMonth.toISOString().split('T')[0];
            let fechaFin = lastDayLastMonth.toISOString().split('T')[0];

            Livewire.emit('dateRangeChangedResumen', fechaInicio, fechaFin);
            

            flatpickr("#dateRangePickerResumen", {
                mode: "range",
                locale,
                defaultDate: [fechaInicio, fechaFin],
                onChange: function(selectedDates, dateStr, instance) {
                    instance.element.value = dateStr.replace('to', 'hasta');
                    if (selectedDates.length === 2) {
                        let fechaInicio = selectedDates[0].toISOString().split('T')[0];
                        let fechaFin = selectedDates[1].toISOString().split('T')[0];
                        Livewire.emit('dateRangeChangedResumen', fechaInicio, fechaFin);
                        console.log("Fecha inicio " + fechaInicio);
                        console.log("Fecha fin " + fechaFin);
                    }
                }
            });

            Livewire.on("updateResumenValues", (data) => {

                generarTabs(data.primaPorDependencia);

                animateValueById('primaNetaVigente', 0, data.primaNetaVigente || 0, 1000, '$', '', true);
                animateValueById('primaNetaCancelada', 0, data.primaNetaCancelada || 0, 1000, '$', '',
                    true);
                animateValueById('primaAhorroVigente', 0, data.primaAhorroVigente || 0, 1000, '$', '',
                    true);
                animateValueById('primaAhorroCancelada', 0, data.primaAhorroCancelada || 0, 1000, '$', '',
                    true);
            });
        });

        // Copia la función animateValueById para que esté disponible en este script
        function animateValueById(id, start, end, duration, prefix = '', suffix = '', decimals = true) {
            const element = document.getElementById(id);
            if (!element) {
                console.error(`Element with ID '${id}' not found.`);
                return;
            }
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                let value = progress * (end - start) + start;
                value = decimals ? value.toFixed(2) : Math.floor(value);
                element.innerHTML = prefix + Number(value).toLocaleString('en-US', {
                    minimumFractionDigits: decimals ? 2 : 0,
                    maximumFractionDigits: decimals ? 2 : 0
                }) + suffix;
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }

        const formatCurrency = (number) => {
            return new Intl.NumberFormat('es-MX', {
                style: 'currency',
                currency: 'MXN',
                minimumFractionDigits: 2,
            }).format(number);
        };


        function generarTabs(datos) {
            const tabList = document.getElementById("tabList");
            const tabContents = document.getElementById("carteraTabContentCard");

            tabList.innerHTML = "";
            tabContents.innerHTML = "";

            if (!Array.isArray(datos) || datos.length === 0) {
                // Mostrar mensaje si no hay información
                tabContents.innerHTML = `
            <div class="row justify-content-center align-items-center">
                <div class="col-md-6">
                    <div class=" text-center my-4">
                        No hay información para este periodo.
                    </div>
                </div>
            </div>
            `;
                return;
            }

            datos.forEach((item, index) => {
                const tabId = item.dependencia.toLowerCase().replace(/\s+/g, '-');
                const isActive = index === 0 ? "active" : "";
                const isShown = index === 0 ? "show active" : "";

                // Crear tab
                const li = document.createElement("li");
                li.classList.add("nav-item");
                li.role = "presentation";
                li.innerHTML = `
          <button class="nav-link ${isActive}" id="${tabId}-tab" data-bs-toggle="tab" data-bs-target="#${tabId}"
        type="button" role="tab" aria-controls="${tabId}" aria-selected="${index === 0}">
        ${item.dependencia}
          </button>
        `;
                tabList.appendChild(li);

                // Crear contenido
                const contentDiv = document.createElement("div");
                contentDiv.className = `tab-pane fade ${isShown}`;
                contentDiv.id = tabId;
                contentDiv.role = "tabpanel";
                contentDiv.setAttribute("aria-labelledby", tabId + "-tab");
                contentDiv.innerHTML = `
        <div class="row d-flex justify-content-between align-items-center">
        <div class="col-md-3">
            <div class="card">
            <div class="card-body">
                <div class="row align-items-center gx-0">
                <div class="col">
                    <h6 class="text-uppercase text-body-secondary mb-2">Prima neta vigente</h6>
                    <span class="h2 mb-0" id="primaNetaVigente-${index}"> ${item.prima_neta_vigente}</span>
                </div>
                <div class="col-auto">
                    <span class="h2 fe fe-dollar-sign text-success mb-0"></span>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
            <div class="card-body">
                <div class="row align-items-center gx-0">
                <div class="col">
                    <h6 class="text-uppercase text-body-secondary mb-2">Prima neta cancelada</h6>
                    <span class="h2 mb-0" id="primaNetaCancelada-${index}">${item.prima_neta_cancelada}</span>
                </div>
                <div class="col-auto">
                    <span class="h2 fe fe-dollar-sign text-danger mb-0"></span>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
            <div class="card-body">
                <div class="row align-items-center gx-0">
                <div class="col">
                    <h6 class="text-uppercase text-body-secondary mb-2">Prima ahorro vigente</h6>
                    <span class="h2 mb-0" id="primaAhorroVigente-${index}">${item.prima_ahorro_vigente}</span>
                </div>
                <div class="col-auto">
                    <span class="h2 fe fe-dollar-sign text-success mb-0"></span>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
            <div class="card-body">
                <div class="row align-items-center gx-0">
                <div class="col">
                    <h6 class="text-uppercase text-body-secondary mb-2">Prima ahorro canceladas</h6>
                    <span class="h2 mb-0" id="primaAhorroCancelada-${index}">${item.prima_ahorro_cancelada}</span>
                </div>
                <div class="col-auto">
                    <span class="h2 fe fe-dollar-sign text-danger mb-0"></span>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
        `;
                tabContents.appendChild(contentDiv);
                animateValueById(`primaNetaVigente-${index}`, 0, item.prima_neta_vigente, 1000, '$');
                animateValueById(`primaNetaCancelada-${index}`, 0, item.prima_neta_cancelada, 1000, '$');
                animateValueById(`primaAhorroVigente-${index}`, 0, item.prima_ahorro_vigente, 1000, '$');
                animateValueById(`primaAhorroCancelada-${index}`, 0, item.prima_ahorro_cancelada, 1000, '$');

            });
        }
    </script>
</div>