@push('css')
    <style>
        #barChart {
            width: 100% !important;
            height: 300px !important;
        }
        .flex-end {
            width: 100%;
            display: flex;
            flex-direction: row-reverse;
            margin-bottom: 15px;
        }
    </style>
@endpush
<div>
    <div class="header">
        <div class="header-body">
            <div class="row align-items-center">
                <div class="col">
                    <!-- Title -->
                    <h1 class="header-title">
                        Domiciliada GNP
                    </h1>
                </div>
                <div class="col-auto">
                    <!--if (auth()->user()->can('cobranza.domiciliada.gnp.cargar'))-->
                        <button class="btn btn-primary lift" wire:click="$set('modalCobranza', true)">
                            Cargar cobranza domiciliada
                        </button>
                    <!--endif-->
                    <button class="btn btn-warning lift" onclick="startLoading()" wire:click="reporteReactivacion">
                            Reporte de reactivación
                    </button>
                    <button class="btn btn-danger lift" onclick="startLoading()" wire:click="reporteRechazoDefinitivo">
                            Reporte de rechazo definitivo
                    </button>
                </div>
            </div>
        </div>
    </div>

    <x-jet-dialog-modal wire:model="modalCobranza" maxWidth='sm'>
        <x-slot name="title">
            Cargar cobranza domiciliada GNP
        </x-slot>
        <x-slot name="content">
            
            @if(session()->has('message'))
                <div class="alert alert-success">{{ session('message') }}</div>
            @endif

            <label for="import" class="mt-2">Cargar archivo de cobranza domiciliada</label>
            <input type="file" class="form-control mt-2" accept=".xls, .xlsx" id="fileImport" wire:model="fileImport"
                name="import">
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" wire:click="$set('modalCobranza', false)">Cerrar</button>
                <button type="button" class="btn btn-success" id="btnUploadAltas"
                    {{ !$fileImport ? 'disabled' : '' }}
                    onclick="startLoading()" wire:click="import">
                    Importar
                </button>
            </div>
            @error('fileImport') <span class="error">{{ $message }}</span> @enderror
        </x-slot>
    </x-jet-dialog-modal>

    <div class="mt-4">
        <!-- Navegación de Tabs -->
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="graficas-tab" data-bs-toggle="tab" data-bs-target="#graficas-content" type="button" role="tab" aria-controls="graficas-content" aria-selected="true">
                    Gráficas
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="detalle-tab" data-bs-toggle="tab" data-bs-target="#detalle-content" type="button" role="tab" aria-controls="detalle-content" aria-selected="false">
                    Detalle
                </button>
            </li>
        </ul>

        <!-- Contenido de las Tabs -->
        <div class="tab-content mt-3" id="tab-content" wire:ignore>
            <!-- Tab de Gráficas -->
            <div class="tab-pane fade show active" id="graficas-content" role="tabpanel" aria-labelledby="graficas-tab">
                <div id="graficas">
                    <div class="row">
                        <div class="col-md-3 col-lg-3 mb-4">
                            <label class="form-label">Filtros: </label>
                            <input type="text" id="dateRangePickerCobranza" class="form-control" wire:ignore>
                        </div>
                        <div class="col-md-5 col-lg-5 mb-4"></div>
                        <div class="col-md-4 col-lg-4 mb-4 text-end">
                            @if ($lastRecord)
                                <label class="form-label">
                                    Última carga de archivo: {{ \Carbon\Carbon::parse($lastRecord)->format('d/m/Y H:i') }}
                                </label>
                            @else
                                <label class="form-label">No hay registros.</label>
                            @endif
                        </div>
                    </div>
                    <div class="row">
                        <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">
                                                Prima Total Cobrada
                                            </h6>

                                            <span class="h2 mb-0" id="primaTotalCobrada">
                                                {{ $primaTotalCobrada }}
                                            </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-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">
                                                Prima Total No Cobrada
                                            </h6>

                                            <span class="h2 mb-0" id="primaTotalNoCobrada">
                                                {{ $primaTotalNoCobrada }}
                                            </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-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">
                                                Recibos Cobrados
                                            </h6>

                                            <span class="h2 mb-0" id="recibosCobrados">
                                                {{ $recibosCobrados }}
                                            </span>

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

                                            <span class="h2 fe fe-box text-success mb-0"></span>

                                        </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">
                                                Recibos No Cobrados
                                            </h6>

                                            <span class="h2 mb-0" id="recibosNoCobrados">
                                                {{ $recibosNoCobrados }}
                                            </span>

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

                                            <span class="h2 fe fe-box text-danger 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">Efectividad Cobranza</h6>
                                            <span class="h2 mb-0" id="efectividadCobranza">
                                                {{ $efectividadCobranza }}
                                            </span>

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

                                            <span class="h2 fe fe-trending-up text-primary mb-0"></span>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-md-6 col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h2 class="card-title">Primas Cobradas</h2>
                                    </div>
                                    <div class="col" wire:ignore>
                                        <div class="chart">
                                            <canvas class="chart-canvas" id="generalChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col col-md-2 col-lg-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">
                                                Rechazos Definitivos
                                            </h6>

                                            <span class="h2 mb-0" id="rechazosDefinitivos">
                                                {{ $rechazosDefinitivos }}
                                            </span>

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

                                            <span class="h2 fe fe-x-circle text-danger mb-0"></span>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <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">
                                                Rechazos Recuperables
                                            </h6>

                                            <span class="h2 mb-0" id="rechazosRecuperables">
                                                {{ $rechazosRecuperables }}
                                            </span>

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

                                            <span class="h2 fe fe-refresh-cw text-secondary mb-0"></span>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <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">
                                                Primas Despagos
                                            </h6>

                                            <span class="h2 mb-0" id="primaDespago">
                                                {{ $primaDespago }}
                                            </span>

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

                                            <span class="h2 fe fe-trending-down text-danger mb-0"></span>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col col-md-4 col-lg-4">
                            <div class="card">
                                <div class="card-body">
                                    <h2 class="card-title">Efectividad Cobranza</h2>
                                    <div class="col" wire:ignore>
                                        <canvas id="doughnutChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-md-6 col-lg-6 d-flex">
                            <div class="card w-100">
                                <div class="card-body">
                                    <h2 class="card-title">Efectividad de Cobranza Mensual</h2>
                                    <div class="col" wire:ignore>
                                        <canvas id="barChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col col-md-6 col-lg-6 d-flex">
                            <div class="card w-100">
                                <div class="card-body">
                                    <h2 class="card-title">Top Asesor Efectividad Cobranza</h2>
                                    <livewire:cobranza.top-asesores-table />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab de Detalle -->
            <div class="tab-pane fade" id="detalle-content" role="tabpanel" aria-labelledby="detalle-tab">
                <div id="detalle">
                    <div class="flex-end">
                        <button onclick="Livewire.emit('exportarExcel')" class="btn btn-success">
                            Exportar a Excel
                        </button>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <livewire:cobranza.cobranza-table />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="graficas">
        
    </div>


    <script>
        $(document).ready(function() {

            let doughnutChartInstance;
            let generalChartInstance;
            let barChartInstance;

            function animateValueById(id, start, end, duration, prefix = '', suffix = '', decimals = true) {
                const element = document.getElementById(id);
                if (!element) 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, chartData, barChartData) {
                if (doughnutChartInstance) {
                    doughnutChartInstance.destroy();

                }
                if (generalChartInstance) {
                    generalChartInstance.destroy();
                }
                if (barChartInstance) {
                    barChartInstance.destroy();
                }

                doughnutChartInstance = new Chart('doughnutChart', {
                    type: 'doughnut',
                    data: {
                        labels: ['Pagado', 'Pendiente', 'Cancelado'],
                        datasets: [{
                            data: chartDataDough,
                            backgroundColor: ['#0D3973', '#A6C5F7', '#D2DDEC']
                        }]
                    }
                });

                generalChartInstance = new Chart('generalChart', {
                    type: 'bar',
                    options: {
                        plugins: {
                            legend: {
                                display: true, // Activa la leyenda
                                position: 'bottom', // Coloca la leyenda abajo del gráfico
                                labels: {
                                    usePointStyle: true, // Indicadores estilizados
                                    boxWidth: 15 // Tamaño del indicador de color
                                }
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        // Formato de cantidad con separación de miles
                                        const value = context.raw || 0;
                                        return `$${formatNumber(value)}`;
                                    },
                                    labelColor: function(context) {
                                        // Define el color del indicador en el tooltip
                                        return {
                                            backgroundColor: context.dataset.backgroundColor,
                                            borderColor: context.dataset.backgroundColor
                                        };
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                ticks: {
                                    maxRotation: 0,
                                    minRotation: 0 // Evita la rotación de etiquetas en el eje X
                                }
                            },
                            y: {
                                ticks: {
                                    stepSize: 100,
                                    callback: function(value) {
                                        // Agrega separación de miles en el eje Y
                                        var valor = '$' + value.toLocaleString('es-MX');
                                        return valor;
                                    }
                                }
                            }
                        }
                    },
                    data: {
                        labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                        datasets: [
                            {
                                label: 'Primas Cobradas',
                                data: chartData.cobradas,
                                backgroundColor: '#0D3973'
                            },
                            {
                                label: 'Primas No Cobradas',
                                data: chartData.noCobradas,
                                backgroundColor: '#A6C5F7'
                            }
                        ]
                    }
                });

                barChartInstance = new Chart('barChart', {
                    type: 'line',
                    options: {
                        scales: {
                            y: {
                                ticks: {
                                    stepSize: 10, // Ajusta el tamaño del paso en el eje Y si usas porcentajes
                                    callback: function(value) {
                                        return value + '%'; // Muestra valores como porcentaje
                                    }
                                }
                            }
                        }
                    },
                    data: {
                        labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                        datasets: [{
                            label: 'Efectividad de Cobranza',
                            data: barChartData,
                            borderColor: '#0D3973',
                            backgroundColor: 'rgba(0, 102, 252, 0.09)',
                            fill: true
                        }]
                    }
                });

            }

            //updateCharts();

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

            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("updateDashboardValues", (data) => {
                animateValueById('primaTotalCobrada', 0, data.primaTotalCobrada, 1000, '$', '', true);
                animateValueById('primaTotalNoCobrada', 0, data.primaTotalNoCobrada, 1000, '$', '', true);
                animateValueById('efectividadCobranza', 0, data.efectividadCobranza, 1000, '', '%', true);
                animateValueById('primaDespago', 0, data.primaDespago, 1000, '$', '', true);
                animateValueById('recibosCobrados', 0, data.recibosCobrados, 1000, '', '', false);
                animateValueById('recibosNoCobrados', 0, data.recibosNoCobrados, 1000, '', '', false);
                animateValueById('rechazosDefinitivos', 0, data.rechazosDefinitivos, 1000, '', '', false);
                animateValueById('rechazosRecuperables', 0, data.rechazosRecuperables, 1000, '', '', false);
                updateCharts(data.chartDataDough, data.chartData, data.barChartData);
            });

            const atrFormatFecha = {
                allowInput: true,
                dateFormat: "d/m/Y",
                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("#table-filter-fecha_movimiento", {
                ...atrFormatFecha,
                mode: "range",
            });

        });
    </script>

    <script>
        function startLoading() {
            Swal.fire({
                title: 'Cargando...',
                text: 'Espere mientras se realiza la operación.',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
        }
        document.addEventListener("livewire:load", function () {
            Livewire.on('success', (message) => {
                setTimeout(() => {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: message, // Recibe el mensaje del evento
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                }, 500);
            });

            Livewire.on('importSuccess', () => {
                setTimeout(() => {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: 'Archivo importado correctamente.',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                }, 500);
            });

            Livewire.on('importError', (message) => {
                setTimeout(() => {
                    Swal.fire({
                        title: 'Error en la Importación',
                        text: message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
            }, 500);
            });
        });
    </script>

    <script>
        window.addEventListener('excelListo', () => {
            Swal.fire({
                title: '¡Exportación completada!',
                text: 'Tu archivo Excel está listo para descargar.',
                icon: 'success',
                confirmButtonText: 'OK',
                timer: 3000,
                timerProgressBar: true
            });
        });
    </script>

</div>