@push('css')
    <style>
        .form-check-input:checked {
            background-color: #0D3973 !important;
            border-color: #0D3973 !important;
        }

        .form-check-input {
            background-color: #B9B9B9 !important;
            border-color: #B9B9B9 !important;
        }

        .form-check-input:focus {
            box-shadow: 0 0 0 0.1rem rgba(13, 57, 115, 0.25);
        }

        /* #barChart {
                                                                        width: 100% !important;
                                                                        height: 300px !important;
                                                                    }
                                                                    .flex-end {
                                                                        width: 100%;
                                                                        display: flex;
                                                                        flex-direction: row-reverse;
                                                                        margin-bottom: 15px;
                                                                    } */
    </style>
@endpush
<x-app-layout>
    <div class="main-content">
        @can('dashboard.ver')
            <!-- HEADER -->
            @livewire('dashboard.header')

            <!-- CARDS -->
            <div class="container-fluid mt-n6">
                @livewire('dashboard.cards')
                @livewire('dashboard.charts')
            </div>
        @endcan
    </div>
    <script>
        $(document).ready(function() {
            let chartInstance
            let chartInstance2

            $('.nav-item.toggles').click(function(e) {
                e.preventDefault();

                var texto = $(this).find('h5.header-pretitle').text().trim().toLowerCase();

                var tipo = 'empty';

                if (texto === 'total') tipo = 'total_emision';
                else if (texto === 'domiciliado') tipo = 'total_domiciliado';
                else if (texto === 'dxn') tipo = 'total_dxn';

                $('#total_emision, #total_domiciliado, #total_dxn').hide();
                $('#' + tipo).show();

            });


            Livewire.on('updateCards', ({
                primaGeneral,
                primaDomiciliado,
                primaDxn,
                efectividadCobranza,
            }) => {
                // Cards
                document.getElementById('prima_total').textContent = primaGeneral;
                document.getElementById('prima_domiciliada').textContent = primaDomiciliado;
                document.getElementById('prima_dxn').textContent = primaDxn;
                document.getElementById('efectividad_cobranza').textContent = efectividadCobranza + '%';

                const progressBar = document.querySelector('.progress-bar');
                progressBar.style.width = efectividadCobranza + '%';
                progressBar.setAttribute('aria-valuenow', efectividadCobranza);
            })

            Livewire.on('updateValues', ({
                labels,
                dataGeneral,
                dataDomiciliado,
                dataDxn,
                totalGeneral,
                totalDomiciliado,
                totalDxn,

            }) => {

                // Tabs 
                document.getElementById('total_emision').textContent = '$ ' + formatNumber(totalGeneral);
                document.getElementById('total_domiciliado').textContent = '$ ' + formatNumber(
                    totalDomiciliado);
                document.getElementById('total_dxn').textContent = '$ ' + formatNumber(totalDxn);

                // destruye el gráfico anterior si existe
                /*    if (chartInstance) chartInstance.destroy();

                   const ctx = document.getElementById('emisionChart').getContext('2d');
                   chartInstance = new Chart(ctx, {
                       type: "line",
                       data: {
                           labels: labels,
                           datasets: [{
                                   label: 'Total',
                                   data: dataGeneral,
                                   yAxisID: "yAxisOne",
                                   borderColor: "#0d3973",
                                   backgroundColor: "transparent",
                                   tension: 0.4
                               },
                               {
                                   label: 'Domiciliado',
                                   data: dataDomiciliado,
                                   yAxisID: "yAxisOne",
                                   borderColor: "#0d3973",
                                   backgroundColor: "transparent",
                                   tension: 0.4,
                                   hidden: true
                               },
                               {
                                   label: 'DxN',
                                   data: dataDxn,
                                   yAxisID: "yAxisOne",
                                   borderColor: "#0d3973",
                                   backgroundColor: "transparent",
                                   tension: 0.4,
                                   hidden: true
                               }
                           ]
                       },
                       options: {
                           scales: {
                               yAxisOne: {
                                   display: "auto",
                                   grid: {
                                       color: "#2C7BE5"
                                   },
                                   ticks: {
                                       stepSize: 50000
                                   }
                               },
                               yAxisTwo: {
                                   display: "auto",
                                   grid: {
                                       color: "#A6C5F7"
                                   },
                                   ticks: {
                                       stepSize: 50000
                                   }
                               }
                           }
                       }
                   }); */
            });

            Livewire.on('updateChartsBar', ({
                cobradas,
                cobradasDxn,
                data
            }) => {
                const cty = document.getElementById('example2Chart').getContext('2d');
                console.log(data);
                chartInstance2?.destroy();

                chartInstance2 = new Chart(cty, {
                    type: "bar",
                    data: {
                        labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep',
                            'Oct', 'Nov', 'Dic'
                        ],
                        datasets: [{
                                label: " Domiciliada",
                                data: cobradas,
                                backgroundColor: "#0D3973"
                            },
                            {
                                label: "DxN",
                                data: cobradasDxn,
                                backgroundColor: "#d2ddec",
                            }
                        ]
                    },
                    options: {
                        scales: {
                            y: {
                                ticks: {
                                    stepSize: 50000
                                }
                            }
                        },
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const value = context.raw || 0;
                                        return `$${formatNumber(value)}`;
                                    },
                                    labelColor: function(context) {
                                        return {
                                            backgroundColor: context.dataset.backgroundColor,
                                            borderColor: context.dataset.backgroundColor
                                        };
                                    }
                                }
                            }
                        }
                    }
                });

                // Limpiar tabla y podio antes de rellenar
                const rankingList = document.getElementById("rankingList");
                rankingList.innerHTML = "";
                const podioContainer = document.getElementById("podio");
                podioContainer.innerHTML = "";

                // Verificar si hay datos
                if (!data || data.length === 0) {
                    const li = document.createElement("li");
                    li.innerText = "No hay datos disponibles";
                    li.style.textAlign = "center";
                    li.style.padding = "100px";
                    rankingList.appendChild(li);

                    const mensajePodio = document.createElement("div");
                    mensajePodio.innerText = "No hay datos disponibles";
                    mensajePodio.style.textAlign = "center";
                    mensajePodio.style.width = "100%";
                    mensajePodio.style.padding = "100px";
                    mensajePodio.style.color = "#555";
                    podioContainer.appendChild(mensajePodio);

                    return; // salir del script si no hay datos
                }

                // --- Mostrar loading en lista mientras se procesan ---
                const loading = document.createElement("li");
                loading.innerText = "Cargando...";
                loading.style.textAlign = "center";
                loading.style.padding = "10px";
                rankingList.appendChild(loading);

                // Ordenar todos los colaboradores
                const ranking = [...data].sort((a, b) => b.total_prima - a.total_prima);

                // Top 3 para el podio
                const top3 = ranking.slice(0, 3);

                // Resto para la lista
                const others = ranking.slice(3);

                setTimeout(() => {
                    rankingList.innerHTML = ""; // quitar loading

                    others.forEach((item, index) => {
                        const li = document.createElement("li");
                        li.style.display = "flex";
                        li.style.justifyContent = "space-between";
                        li.style.alignItems = "center";
                        li.style.padding = "10px 8px";
                        li.style.borderBottom = "1px solid #eee";
                        li.style.fontSize = "14px";
                        li.style.opacity = "0"; // start hidden
                        li.style.transition = "opacity 0.5s ease";

                        // Contenedor izquierda (posición + nombre + prima)
                        const left = document.createElement("div");
                        left.style.display = "flex";
                        left.style.flexDirection = "column";

                        const title = document.createElement("div");
                        title.style.fontWeight = "bold";
                        title.innerText = `${index + 4}  - ${item.nombre_completo}`;

                        const prima = document.createElement("div");
                        prima.style.color = "#aaa";
                        prima.innerText = item.total_prima.toLocaleString('es-MX', {
                            style: 'currency',
                            currency: 'MXN'
                        });

                        left.appendChild(title);
                        left.appendChild(prima);

                        // Columna derecha (solicitudes)
                        const solicitudes = document.createElement("div");
                        solicitudes.style.fontWeight = "bold";
                        solicitudes.innerText =
                            `${item.total_solicitudes} póliza${item.total_solicitudes > 1 ? 's' : ''}`;

                        li.appendChild(left);
                        li.appendChild(solicitudes);

                        rankingList.appendChild(li);

                        // Animación fade-in escalonada
                        setTimeout(() => {
                            li.style.opacity = "1";
                        }, index * 100);
                    });
                }, 300); // delay

                // --- PODIO ---
                const maxPrima = Math.max(...top3.map(p => p.total_prima));
                const colors = ['#f2620f', '#0D3973', '#f2620f'];
                const posiciones = [top3[1], top3[0], top3[2]];
                const podioAlturas = [160, 220, 150];

                podioContainer.style.position = "relative";

                posiciones.forEach((item, index) => {
                    const height = podioAlturas[index];

                    // Contenedor con altura fija
                    const contenedor = document.createElement("div");
                    contenedor.style.display = "flex";
                    contenedor.style.flexDirection = "column";
                    contenedor.style.alignItems = "center";
                    contenedor.style.width = "140px";
                    contenedor.style.height = "220px"; // altura fija del podio
                    contenedor.style.justifyContent = "flex-end"; // alinea la barra abajo

                    // Barra animada
                    const div = document.createElement("div");
                    div.style.width = "100%";
                    div.style.background = colors[index];
                    div.style.borderRadius = "8px 8px 0 0";
                    div.style.height = "0px";
                    div.style.display = "flex";
                    div.style.flexDirection = "column";
                    div.style.justifyContent = "flex-end";
                    div.style.alignItems = "center";
                    div.style.color = "#fff";
                    div.style.position = "relative";
                    div.style.paddingBottom = "10px";
                    div.style.transition = "height 1s ease-out";

                    // Contenido de la barra
                    const medalla = ['2', '1', '3'][index];
                    const lugar = document.createElement("div");
                    lugar.style.fontSize = "40px";
                    lugar.style.fontWeight = "bold";
                    lugar.style.marginTop = "0px";
                    lugar.style.marginBottom = "4px";
                    lugar.innerText = medalla;

                    const solicitudes = document.createElement("div");
                    solicitudes.style.fontWeight = "bold";
                    solicitudes.style.fontSize = "20px";
                    solicitudes.style.marginBottom = "4px";
                    solicitudes.innerText = `${item.total_solicitudes}`;

                    const valor = document.createElement("div");
                    valor.style.padding = "5px";
                    valor.style.borderRadius = "8px";
                    valor.innerText = item.total_prima.toLocaleString('es-MX', {
                        style: 'currency',
                        currency: 'MXN'
                    });

                    div.appendChild(lugar);
                    div.appendChild(solicitudes);
                    div.appendChild(valor);

                    contenedor.appendChild(div);

                    const nombre = document.createElement("div");
                    nombre.style.fontWeight = "bold";
                    nombre.style.fontSize = "12px";
                    nombre.style.marginTop = "8px";
                    nombre.style.textAlign = "center";
                    nombre.style.whiteSpace = "normal";
                    nombre.style.wordBreak = "break-word";
                    nombre.style.maxWidth = "120px";
                    nombre.innerText = item.nombre_completo.length > 20 ?
                        item.nombre_completo.slice(0, 20) + "…" :
                        item.nombre_completo;

                    contenedor.appendChild(nombre);
                    podioContainer.appendChild(contenedor);

                    // Animación barra
                    setTimeout(() => {
                        div.style.height = `${height}px`;
                    }, index * 300);
                });


            });

            function formatNumber(value) {
                return value.toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            Livewire.on('updateChartsPie', ({
                ventasDomiciliado,
                ventasDxn
            }) => {
                const ctx = document.getElementById('example3Chart').getContext('2d');

                if (window.chartInstance3) chartInstance3.destroy();

                window.chartInstance3 = new Chart(ctx, {
                    type: "doughnut",
                    data: {
                        labels: ["Domiciliado", "DxN"],
                        datasets: [{
                            data: [ventasDomiciliado, ventasDxn],
                            backgroundColor: ["#0D3973", "#D2DDEC"]
                        }]
                    }
                });
            });

            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, 1);
            let lastDayLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);

            // Convertir a formato d/m/Y que usa flatpickr
            function formatDateDMY(date) {
                const d = date.getDate().toString().padStart(2, '0');
                const m = (date.getMonth() + 1).toString().padStart(2, '0');
                const y = date.getFullYear();
                return `${d}/${m}/${y}`;
            }

            let fechaInicio = formatDateDMY(firstDayLastMonth);
            let fechaFin = formatDateDMY(lastDayLastMonth);

            Livewire.emit('dateRangeChanged',
                firstDayLastMonth.toISOString().split('T')[0],
                lastDayLastMonth.toISOString().split('T')[0]
            );

            flatpickr("#dateRangeDashboard", {
                mode: "range",
                dateFormat: "d/m/Y",
                minDate: '01/01/2013',
                locale,
                defaultDate: [fechaInicio, fechaFin],
                onChange: function(selectedDates, dateStr, instance) {
                    // flatpickr usa " to " con espacios para separar fechas
                    if (dateStr.includes(' to ')) {
                        instance.element.value = dateStr.replace(' to ', ' hasta ');
                    } else {
                        instance.element.value = dateStr;
                    }

                    if (selectedDates.length === 2) {
                        let fechaInicioISO = selectedDates[0].toISOString().split('T')[0];
                        let fechaFinISO = selectedDates[1].toISOString().split('T')[0];

                        Livewire.emit('dateRangeChanged', fechaInicioISO, fechaFinISO);
                    }
                },
                onReady: function(selectedDates, dateStr, instance) {
                    if (dateStr.includes(' to ')) {
                        instance.element.value = dateStr.replace(' to ', ' hasta ');
                    }
                }
            });


        });
    </script>
</x-app-layout>