@push('css')
    <style>
        /* Estilos para los gráficos */
        #comisionesMes,
        #comisionesMesChart {
            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 Metas
                    </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="dateRangePickerMeta" 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">
                                        Meta asesor
                                    </h6>
                                    <span class="h4 mb-0" id="metaMesAsesor">
                                        {{ $metaMesAsesor }}
                                    </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">
                                        Meta coordinador
                                    </h6>
                                    <span class="h4 mb-0" id="metaMesCoordinador">
                                        {{ $metaMesCoordinador }}
                                    </span>
                                </div>
                                <div class="col-auto">
                                    <span class="h4 fe fe-dollar-sign 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">
                                        Meta gerente
                                    </h6>
                                    <span class="h4 mb-0" id="metaMesGerente">
                                        {{ $metaMesGerente }}
                                    </span>
                                </div>
                                <div class="col-auto">
                                    <span class="h4 fe fe-dollar-sign text-primary mb-0"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div><!-- /.row justify-content-end -->
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h4>Comisiones del mes</h4>
                    <canvas id="comisionesMes"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h4>Comisiones por mes</h4>
                    <canvas id="comisionesMesChart"></canvas>
                </div>
            </div>
        </div>
    </div>
     <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-body">
                    <h4>Detalle Metas</h4>
                    <livewire:dashboard.metas-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 updateCharts(chartDataDough, barChartData, lineChartData) {
                if (lineChartInstance) {
                    lineChartInstance.destroy();
                }
                if (barChartInstance) {
                    barChartInstance.destroy();
                }          
                // BAR
                barChartInstance = new Chart(document.getElementById("comisionesMes"), {
                    type: 'bar',
                    data: {
                        labels: barChartData.labels,
                        datasets: [{
                            label: 'Monto ($)',
                            data: barChartData.data, // [metaGerente, metaCoordinador, metaAsesor]
                            backgroundColor: ['#2C7BE5', '#A6C5F7', '#2C7BE5','#A6C5F7','#2C7BE5','#A6C5F7']
                        }]
                    },
                    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("comisionesMesChart"), {
                    type: 'line',
                    data: {
                        labels: lineChartData.labels, // 12 meses
                        datasets: [
                            {
                                label: 'Gerente',
                                data: lineChartData.gerente,
                                borderColor: '#2C7BE5',
                                backgroundColor: 'rgba(44,123,229,0.15)',
                                fill: true,
                                tension: 0.2
                            },
                            {
                                label: 'Coordinador',
                                data: lineChartData.coordinador,
                                borderColor: '#00d97e',
                                backgroundColor: 'rgba(0,217,126,0.15)',
                                fill: true,
                                tension: 0.2
                            },
                            {
                                label: 'Asesor',
                                data: lineChartData.asesor,
                                borderColor: '#6f42c1',
                                backgroundColor: 'rgba(111,66,193,0.15)',
                                fill: true,
                                tension: 0.2
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top'
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false
                            }
                        },
                        interaction: {
                            mode: 'index',
                            intersect: false
                        },
                        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('dateRangeChangedMetas', fechaInicio, fechaFin);

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

            Livewire.on("updateDashboardValuesMetas", (data) => {
                animateValueById('metaMesAsesor', 0, data.metaMesAsesor || 0, 1000, '$', '', true);
                animateValueById('metaMesCoordinador', 0, data.metaMesCoordinador || 0, 1000, '$', '',
                    true);
                animateValueById('metaMesGerente', 0, data.metaMesGerente || 0, 1000, '$', '', true);
                updateCharts(data.chartDataDough || {}, data.barChartData || {}, data.lineChartData || {});
            });
        });
    </script>
</div>