@push('css')
    <style>
      
      
        #barChartAcumuladoCartera {
            width: 100% !important;
            height: 300px !important;
        }

        .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">
                        Resumen Cartera
                    </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="dateRangePickerCartera" class="form-control" wire:ignore placeholder="Selecciona rango">
        </div>
    </div>
    <div class="row d-flex justify-content-between align-items-center" id="values">
        <div class="col-md-3">
            <div class="card" wire:click="$emit('showMe')" style="cursor: pointer;">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <h6 class="text-uppercase text-body-secondary mb-2">Venta acumulada vigente</h6>
                            <span class="h2 mb-0" id="ventaAcumuladaVigenteCartera">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">Venta acumulada cancelada</h6>
                            <span class="h2 mb-0" id="ventaAcumuladaCanceladaCartera">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">Pólizas Vigentes</h6>
                            <span class="h2 mb-0" id="conteoVigentesCartera">0</span>
                        </div>
                        <div class="col-auto">
                            <span class="h2 fe fe-check-circle 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">Pólizas Canceladas</h6>
                            <span class="h2 mb-0" id="conteoCanceladasCartera">0</span>
                        </div>
                        <div class="col-auto">
                            <span class="h2 fe fe-x-circle text-danger mb-0"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="row">
        <div class="col-md-12 mb-4" id="tabsCartera">
            <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 mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-uppercase text-body-secondary mb-2">Acumulado Vigente vs Canceladas</h6>
                    <canvas id="barChartAcumuladoCartera"></canvas>
                </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="carteraTabNav" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="vigentes-tab" data-bs-toggle="tab" data-bs-target="#vigentes" type="button" role="tab" aria-controls="vigentes" aria-selected="true">
                                Vigentes
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="canceladas-tab" data-bs-toggle="tab" data-bs-target="#canceladas" type="button" role="tab" aria-controls="canceladas" aria-selected="false">
                                Canceladas
                            </button>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content mt-3" id="carteraTabContent">
                        <div class="tab-pane fade show active" id="vigentes" role="tabpanel" aria-labelledby="vigentes-tab">
                            <livewire:dashboard.vigentes-acumuladas-table />
                        </div>
                        <div class="tab-pane fade" id="canceladas" role="tabpanel" aria-labelledby="canceladas-tab">
                            <livewire:dashboard.canceladas-acumuladas-table />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {

            Livewire.on('importError', (message) => {
                setTimeout(() => {
                    Swal.fire({
                        title: 'Sin datos por exportar',
                        text: message,
                        icon: 'info',
                        showConfirmButton: false,
                        timer: 2500,
                        timerProgressBar: true
                    });
                }, 500);
            });

            let vsInstanceCartera;

            function updateChartsCartera(barChartAcumuladoCartera) {
                if (vsInstanceCartera) {
                    vsInstanceCartera.destroy();
                }
                let labels = ['Vigentes', 'Canceladas'];
                let data = [0, 0];
                if (barChartAcumuladoCartera && Array.isArray(barChartAcumuladoCartera.labels) && Array.isArray(barChartAcumuladoCartera.data)) {
                    labels = barChartAcumuladoCartera.labels;
                    data = barChartAcumuladoCartera.data.map(x => isNaN(Number(x)) ? 0 : Number(x));
                }
                vsInstanceCartera = new Chart(document.getElementById("barChartAcumuladoCartera"), {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Monto ($)',
                            data: data,
                            backgroundColor: ['#2C7BE5', '#E74C3C'],
                            barThickness: 50,
                            maxBarThickness: 60
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: ''
                                },
                                barPercentage: 0.8,
                                categoryPercentage: 2
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: 'Monto ($)'
                                },
                                ticks: {
                                    stepSize: 100000,
                                    beginAtZero: true
                                }
                            }
                        }
                    }
                });
            }

            // 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'],
                },
            };

            flatpickr("#dateRangePickerCartera", {
                mode: "range",
                locale,
                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('dateRangeChangedCartera', fechaInicio, fechaFin);
                    }
                }
            });

            Livewire.on("updateDashboardValuesCartera", (data) => {
                generarTabsCartera(data.ventasPorDependencia);
                animateValueById('ventaAcumuladaVigenteCartera', 0, data.ventaAcumuladaVigenteCartera || 0, 1000, '$', '', true);
                animateValueById('ventaAcumuladaCanceladaCartera', 0, data.ventaAcumuladaCanceladaCartera || 0, 1000, '$', '', true);
                animateValueById('conteoVigentesCartera', 0, data.conteoVigentesCartera || 0, 1000, '', '', false);
                animateValueById('conteoCanceladasCartera', 0, data.conteoCanceladasCartera || 0, 1000, '', '', false);
                updateChartsCartera(data.barChartAcumuladoCartera || {});
            });
        });

        // 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);
        }

            function generarTabsCartera(datos) {
                     console.log(datos);
            const tabList = document.getElementById("tabList");
            const tabContents = document.getElementById("carteraTabContentCard");
            const valuesContainer = document.getElementById('values');

            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;
            }

            // Obtener las columnas/cards que están en #values para reutilizarlas
            const cardCols = valuesContainer ? Array.from(valuesContainer.querySelectorAll('.col-md-3')) : [];

            datos.forEach((item, index) => {
                const tabId = (item.dependencia || `dep-${index}`).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="ventaNetaVigente-${index}"> ${item.venta_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="ventaNetaCancelada-${index}">${item.venta_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">Pólizas vigentes</h6>
                    <span class="h2 mb-0" id="conteoVigente-${index}">${item.conteo_vigentes}</span>
                </div>
                <div class="col-auto">
                    <span class="h2 fe fe-check-circle 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">Pólizas canceladas</h6>
                    <span class="h2 mb-0" id="conteoCancelada-${index}">${item.conteo_canceladas}</span>
                </div>
                <div class="col-auto">
                    <span class="h2 fe fe-x-circle text-danger mb-0"></span>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
        `;
                tabContents.appendChild(contentDiv);
                animateValueById(`ventaNetaVigente-${index}`, 0, item.venta_vigente, 1000, '$');
                animateValueById(`ventaNetaCancelada-${index}`, 0, item.venta_cancelada, 1000, '$');
                animateValueById(`conteoVigente-${index}`, 0, item.conteo_vigentes || 0, 1000, '', '', false);
                animateValueById(`conteoCancelada-${index}`, 0, item.conteo_canceladas || 0, 1000, '', '', false);

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