@push('css')
    <style>
        /* Estilos para los gráficos */
        #ventaVsMetaChart,
        #ventasAcumuladasChart,
        #ventasPorLiderChart,
        #ventasPorAsesorChart {
            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 Ventas
                    </h1>
                </div>
                <div class="col-auto">
                </div>
            </div>
        </div>
    </div>

    <!-- KPIs en una fila -->

    <div class="row align-items-center align-items-center">
        <!-- Fecha a la izquierda -->
        <div class="col-md-3 mb-6">
            <label class="form-label">Fecha: </label>
            <input type="text" id="dateRangePickerCobranza" class="form-control" wire:ignore>
        </div>

        <div class="col-md-6 ms-auto">
            <div class="row justify-content-end">
                <div class="col-md-4">
                    <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 Prima Riesgo Acumulada Vigente
                                    </h6>
                                    <span class="h4 mb-0" id="ventaAcumuladaNeta">
                                        {{ $ventaAcumuladaNeta }}
                                    </span>
                                </div>
                                <div class="col-auto">
                                    <span class="h4 fe fe-dollar-sign text-info mb-0"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <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 Prima Ahorro Acumulada Vigente
                                    </h6>
                                    <span class="h4 mb-0" id="ventaAcumuladaAhorro">
                                        {{ $ventaAcumuladaAhorro }}
                                    </span>
                                </div>
                                <div class="col-auto">
                                    <span class="h4 bi bi-piggy-bank text-primary mb-0"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                  <div class="col-md-4">
                    <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 Prima Total Acumulada Vigente
                                    </h6>
                                    <span class="h4 mb-0" id="ventaAcumuladaPrimaTotal">
                                        {{ $ventaAcumuladaNeta + $ventaAcumuladaAhorro }}
                                    </span>
                                </div>
                                <div class="col-auto">
                                    <span class="h4 bi bi-cash-coin text-primary mb-0"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div><!-- /.row justify-content-end -->
        </div>
    </div>

    <div class="row">
        <h4>Ventas del mes</h4>
        <div class="col-md-2">
            <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">
                                DXN
                            </h6>

                            <span class="h5 mb-0" id="ventaMesDxn">
                                {{ $ventaMesDxn }}
                            </span>

                        </div>
                        <div class="col-auto">

                            <i class="fas fa-file-invoice text-primary"></i>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <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">
                                TDC
                            </h6>

                            <span class="h5 mb-0" id="ventaMesTdc">
                                {{ $ventaMesTdc }}
                            </span>

                        </div>
                        <div class="col-auto">

                            <i class="fas fa-credit-card text-primary"></i>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <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">
                                Meta
                            </h6>
                            <span class="h5 mb-0" id="metaMes">
                                {{ $metaMes }}
                            </span>
                        </div>
                        <div class="col-auto">

                            <i class="fas fa-bullseye text-primary"></i>

                        </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" wire:click="$emit('showMe')" style="cursor: pointer;">

                            <h6 class="text-uppercase text-body-secondary mb-2">
                                Venta acumulada vigente
                            </h6>

                            <span class="h2 mb-0" id="ventaAcumuladaVigente">
                                {{ $ventaAcumuladaVigente }}
                            </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="ventaAcumuladaCancelada">
                                {{ $ventaAcumuladaCancelada }}
                            </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-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h4>Venta del mes</h4>
                    <canvas id="ventaVsMetaChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h4>Ventas Acumuladas</h4>
                    <canvas id="ventasAcumuladasChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h4>Ventas por Líder</h4>
                    <livewire:dashboard.ventas-lider-table />
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h4>Ventas por Asesor</h4>
                    <livewire:dashboard.ventas-asesor-table />
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            let lineChartInstance;
            let barChartInstance;

            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 formatNumber(number) {
                return number
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ','); // Agrega separadores de miles
            }

            function updateCharts(chartDataDough, barChartData, lineChartData) {
                if (lineChartInstance) {
                    lineChartInstance.destroy();
                }
                if (barChartInstance) {
                    barChartInstance.destroy();
                }

                barChartInstance = new Chart(document.getElementById("ventaVsMetaChart"), {
                    type: 'bar',
                    data: {
                        labels: ['Venta DXN', 'Venta Tarjeta', 'Meta'],
                        datasets: [{
                            label: 'Monto ($)',
                            data: [barChartData.ventaMesDxn, barChartData.ventaMesTdc, barChartData
                                .metaMes
                            ],
                            backgroundColor: ['#2C7BE5', '#00d97e', '#F1C40F'],
                            barThickness: 50,
                            maxBarThickness: 60
                        }]
                    },
                    options: {
                        responsive: true,
                        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
                                }
                            }
                        }
                    }
                });


                lineChartInstance = new Chart(document.getElementById("ventasAcumuladasChart"), {
                    type: 'line',
                    data: {
                        labels: lineChartData.labels,
                        datasets: [{
                                label: 'Vigentes',
                                data: lineChartData.vigentes,
                                borderColor: '#2C7BE5',
                                backgroundColor: 'rgba(44, 123, 229, 0.2)',
                                fill: true,
                            },
                            {
                                label: 'Canceladas',
                                data: lineChartData.canceladas,
                                borderColor: '#E74C3C',
                                backgroundColor: 'rgba(231, 76, 60, 0.2)',
                                fill: true,
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                        },
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: 'Meses'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: 'Monto ($)'
                                },
                                ticks: {
                                    stepSize: 100000,
                                    beginAtZero: true
                                }
                            }
                        }
                    }
                });
            }

            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('dateRangeChanged', fechaInicio, fechaFin);

            flatpickr("#dateRangePickerCobranza", {
                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('dateRangeChanged', fechaInicio, fechaFin);
                    }
                }
            });




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

                animateValueById('metaMes', 0, data.metaMes || 0, 1000, '$', '', true);
                animateValueById('ventaMesDxn', 0, data.ventaMesDxn || 0, 1000, '$', '', true);
                animateValueById('ventaMesTdc', 0, data.ventaMesTdc || 0, 1000, '$', '', true);
                animateValueById('ventaAcumuladaVigente', 0, data.ventaAcumuladaVigente || 0, 1000, '$', '',
                    true);
                animateValueById('ventaAcumuladaCancelada', 0, data.ventaAcumuladaCancelada || 0, 1000, '$',
                    '', true);
                animateValueById('ventaAcumuladaNeta', 0, data.ventaAcumuladaNeta || 0, 1000, '$', '',
                    true);
                animateValueById('ventaAcumuladaAhorro', 0, data.ventaAcumuladaAhorro || 0, 1000, '$',
                    '', true);

                animateValueById('ventaAcumuladaPrimaTotal', 0, data.ventaAcumuladaAhorro + data.ventaAcumuladaNeta  || 0, 1000, '$',
                    '', true);    

                updateCharts(data.chartDataDough || {}, data.barChartData || {}, data.lineChartData || {});
            });
        });
    </script>
</div>