@extends('layouts.app', ['activePage' => 'dashboard', 'menuParent' => 'dashboard', 'titlePage' => 'Dashboard SAT'])

@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-2">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="bg-white shadow rounded-lg p-4">
                    <div class="mb-3">
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">Accesos rápidos</h3>
                        <div id="tourAccesosRapidos" class="grid grid-cols-2 md:grid-cols-4 gap-2">
                            <a href="{{ route('descarga-sat.index') }}" class="bg-white border border-blue-200 hover:border-blue-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <div class="bg-blue-100 group-hover:bg-blue-200 rounded-full p-2 mb-2 transition-colors">
                                        <i class="material-icons text-blue-700 text-xl">cloud_download</i>
                                    </div>
                                    <h4 class="text-base font-semibold text-gray-700 mb-0.5">Descarga SAT</h4>
                                    <p class="text-sm text-gray-500">Iniciar nueva descarga</p>
                                </div>
                            </a>
                            <a href="{{ route('historial-descargas.index') }}" class="bg-white border border-green-200 hover:border-green-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <div class="bg-green-100 group-hover:bg-green-200 rounded-full p-2 mb-2 transition-colors">
                                        <i class="material-icons text-green-700 text-xl">history</i>
                                    </div>
                                    <h4 class="text-base font-semibold text-gray-700 mb-0.5">Historial</h4>
                                    <p class="text-sm text-gray-500">Revisa ejecuciones</p>
                                </div>
                            </a>

                            <a href="{{ route('descarga-xml.index') }}" class="bg-white border border-amber-200 hover:border-amber-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <div class="bg-amber-100 group-hover:bg-amber-200 rounded-full p-2 mb-2 transition-colors">
                                        <i class="material-icons text-amber-700 text-xl">analytics</i>
                                    </div>
                                    <h4 class="text-base font-semibold text-gray-700 mb-0.5">Consula CFDI</h4>
                                    <p class="text-sm text-gray-500">Visualiza tus CFDI´s</p>
                                </div>
                            </a>
                            <a href="{{ route('descarga-sat.index') }}#config" class="bg-white border border-purple-200 hover:border-purple-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <div class="bg-purple-100 group-hover:bg-purple-200 rounded-full p-2 mb-2 transition-colors">
                                        <i class="material-icons text-purple-700 text-xl">vpn_key</i>
                                    </div>
                                    <h4 class="text-base font-semibold text-gray-700 mb-0.5">Certificados FIEL</h4>
                                    <p class="text-sm text-gray-500">Configura credenciales</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div id="tourPeriodoSelector" class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-4">
                        <div>
                            <h2 class="text-lg font-semibold text-gray-800">Dashboard</h2>
                            <p class="text-sm text-gray-500">Periodo <span class="mes-label">{{ $mesNombre }} {{ $year }}</span></p>
                        </div>
                        <div class="flex flex-wrap items-center gap-2">
                            <label for="mes" class="text-sm text-gray-600">Mes:</label>
                            <select id="mes" class="border border-gray-300 rounded px-2 py-1 text-sm mb-1">
                                @for($i = 1; $i <= 12; $i++)
                                    <option value="{{ $i }}" {{ $selectedMonth == $i ? 'selected' : '' }}>
                                    {{ \Carbon\Carbon::create()->month($i)->locale('es')->monthName }}
                                    </option>
                                    @endfor
                            </select>
                            <label for="anio" class="text-sm text-gray-600 ml-2">Año:</label>
                            <select id="anio" class="border border-gray-300 rounded px-2 py-1 text-sm mb-1">
                                @for($y = date('Y'); $y >= date('Y') - 5; $y--)
                                <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>

                    <div id="tourKPIs" class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-blue-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-blue-100 p-2">
                                <i class="material-icons text-blue-500 text-2xl">cloud_sync</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">CFDI descargados</div>
                                <div id="kpiDescargados" class="mt-1 text-xl font-semibold text-blue-700">{{ number_format($descargaStats['descargados']) }}</div>
                                <div class="text-xs text-gray-400 mt-1">{{ $descargaStats['ejecuciones'] }} ejecuciones</div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-emerald-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-emerald-100 p-2">
                                <i class="material-icons text-emerald-500 text-2xl">assignment_turned_in</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Registros insertados</div>
                                <div id="kpiInsertados" class="mt-1 text-xl font-semibold text-emerald-700">{{ number_format($descargaStats['insertados']) }}</div>
                                <div id="kpiEjecuciones" class="text-xs text-gray-400 mt-1">{{ $descargaStats['ejecuciones'] }} ejecuciones</div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-red-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-red-100 p-2">
                                <i class="material-icons text-red-500 text-2xl">warning</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Errores detectados</div>
                                <div id="kpiErrores" class="mt-1 text-xl font-semibold text-red-700">{{ number_format($descargaStats['errores']) }}</div>
                                <div class="text-xs text-gray-400 mt-1">Incidencias del periodo</div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-amber-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-amber-100 p-2">
                                <i class="material-icons text-amber-500 text-2xl">speed</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Tasa de éxito</div>
                                <div id="kpiTasa" class="mt-1 text-xl font-semibold text-amber-700">{{ number_format($descargaStats['tasaExito'], 1) }}%</div>
                                <div class="text-xs text-gray-400 mt-1">Insertados vs errores</div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-3">
                        <div class="rounded-lg border border-gray-200 p-4 bg-white">
                            <h4 class="text-base font-semibold text-gray-700 mb-3 flex items-center gap-2">
                                <i class="material-icons text-blue-500">sync</i>
                                Monitoreo descargas
                            </h4>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-2 bg-blue-50 rounded">
                                    <span class="text-sm text-gray-600">Descargados</span>
                                    <span id="cardDescargados" class="text-lg font-bold text-blue-600">{{ number_format($descargaStats['descargados']) }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-green-50 rounded">
                                    <span class="text-sm text-gray-600">Insertados</span>
                                    <span id="cardInsertados" class="text-lg font-bold text-green-600">{{ number_format($descargaStats['insertados']) }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-red-50 rounded">
                                    <span class="text-sm text-gray-600">Errores</span>
                                    <span id="cardErrores" class="text-lg font-bold text-red-600">{{ number_format($descargaStats['errores']) }}</span>
                                </div>
                                <div class="pt-2 border-t flex items-center justify-between">
                                    <span class="text-xs text-gray-500">Última ejecución</span>
                                    <span id="cardUltimaEjecucion" class="text-sm font-bold text-gray-700">{{ $ultimaDescarga['fecha'] ?? 'Sin registros' }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-4 bg-white">
                            <h4 class="text-base font-semibold text-gray-700 mb-3 flex items-center gap-2">
                                <i class="material-icons text-purple-500">receipt_long</i>
                                Actividad CFDI
                            </h4>
                            <div class="space-y-3">
                                @foreach($facturaStats as $key => $detalle)
                                <div class="flex items-center justify-between p-2 {{ $loop->index % 2 === 0 ? 'bg-purple-50' : 'bg-gray-50' }} rounded">
                                    <div class="text-sm text-gray-600">{{ $detalle['label'] }}</div>
                                    <div class="text-right">
                                        <p id="factura-{{ $key }}-total" class="text-lg font-bold text-purple-600">{{ number_format($detalle['total']) }}</p>
                                        <p id="factura-{{ $key }}-monto" class="text-xs text-gray-500">$ {{ number_format($detalle['monto'], 2) }}</p>
                                    </div>
                                </div>
                                @endforeach
                                <div class="pt-2 border-t flex items-center justify-between">
                                    <span class="text-xs text-gray-500">Promedio mensual</span>
                                    <span id="facturaPromedio" class="text-sm font-bold text-purple-600">
                                        {{ number_format(array_sum(array_column($facturaStats, 'total'))) }} CFDI
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-4 bg-white">
                            <h4 class="text-base font-semibold text-gray-700 mb-3 flex items-center gap-2">
                                <i class="material-icons text-emerald-500">trending_up</i>
                                Indicadores globales
                            </h4>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-2 bg-emerald-50 rounded">
                                    <span class="text-sm text-gray-600">Facturas totales</span>
                                    <span id="globalFacturas" class="text-lg font-bold text-emerald-600">{{ number_format($globalResume['facturasTotales']) }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-blue-50 rounded">
                                    <span class="text-sm text-gray-600">Clientes</span>
                                    <span id="globalClientes" class="text-lg font-bold text-blue-600">{{ number_format($globalResume['clientes']) }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-yellow-50 rounded">
                                    <span class="text-sm text-gray-600">Proveedores</span>
                                    <span id="globalProveedores" class="text-lg font-bold text-yellow-600">{{ number_format($globalResume['proveedores']) }}</span>
                                </div>
                                <div class="pt-2 border-t flex items-center justify-between">
                                    <span class="text-xs text-gray-500">Descargas históricas</span>
                                    <span id="globalDescargas" class="text-sm font-bold text-gray-700">{{ number_format($globalResume['descargasAcumuladas']) }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-4 bg-white">
                            <h4 class="text-base font-semibold text-gray-700 mb-3 flex items-center gap-2">
                                <i class="material-icons text-gray-500">info</i>
                                Última ejecución
                            </h4>
                            <div class="space-y-3 text-sm text-gray-600" id="lastRunCard">
                                <p>Estado: <span id="lastDownloadStatus" class="font-semibold text-gray-800">{{ $ultimaDescarga['estatus'] ?? 'Sin descargas' }}</span></p>
                                <p>Tipo: <span id="lastDownloadType" class="font-semibold text-gray-800">{{ $ultimaDescarga['tipo'] ?? '---' }}</span></p>
                                <p>Fecha: <span id="lastDownloadDate" class="font-semibold text-gray-800">{{ $ultimaDescarga['fecha'] ?? '---' }}</span></p>
                                <p>Usuario: <span id="lastDownloadUser" class="font-semibold text-gray-800">{{ $ultimaDescarga['usuario'] ?? '---' }}</span></p>
                                <p id="lastDownloadTotals" class="text-xs text-gray-500">{{ isset($ultimaDescarga) ? number_format($ultimaDescarga['descargados']) . ' descargados / ' . number_format($ultimaDescarga['insertados']) . ' insertados' : 'Sin registros previos' }}</p>
                                <p id="lastDownloadErrors" class="text-xs text-red-500">{{ isset($ultimaDescarga) ? number_format($ultimaDescarga['errores']) . ' errores' : '' }}</p>
                            </div>
                        </div>
                    </div>

                    <div id="tourGraficas" class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="text-base font-semibold text-gray-700">Descargas vs inserciones</h4>
                                <i class="material-icons text-gray-400">bar_chart</i>
                            </div>
                            <div class="h-64">
                                <canvas id="chartDescargas"></canvas>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">Seguimiento diario del periodo seleccionado.</p>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="text-base font-semibold text-gray-700">Tendencia mensual de CFDI</h4>
                                <i class="material-icons text-gray-400">show_chart</i>
                            </div>
                            <div class="h-64">
                                <canvas id="chartFacturas"></canvas>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">Totales procesados en los últimos 12 meses.</p>
                        </div>
                    </div>

                    <div id="tourHistorial" class="rounded-lg border border-gray-200 p-4 mt-4">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="text-base font-semibold text-gray-700">Historial reciente</h4>
                            <span class="text-xs text-gray-500">Últimas 8 ejecuciones</span>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full text-sm">
                                <thead>
                                    <tr class="text-left text-gray-500">
                                        <th class="py-2">Fecha</th>
                                        <th class="py-2">Usuario</th>
                                        <th class="py-2">Tipo</th>
                                        <th class="py-2">Estado</th>
                                        <th class="py-2 text-right">Descargados</th>
                                        <th class="py-2 text-right">Insertados</th>
                                        <th class="py-2 text-right">Errores</th>
                                    </tr>
                                </thead>
                                <tbody id="timelineDescargas" class="divide-y divide-gray-100">
                                    @forelse($recentDownloads as $registro)
                                    <tr class="text-slate-700">
                                        <td class="py-2">{{ $registro['fecha'] ?? '---' }}</td>
                                        <td class="py-2">{{ $registro['usuario'] }}</td>
                                        <td class="py-2">{{ $registro['tipo'] }}</td>
                                        <td class="py-2">
                                            <span class="px-2 py-1 rounded-full text-xs font-semibold {{ $registro['estatus'] === 'Completado' ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-600' }}">
                                                {{ $registro['estatus'] }}
                                            </span>
                                        </td>
                                        <td class="py-2 text-right">{{ number_format($registro['descargados']) }}</td>
                                        <td class="py-2 text-right">{{ number_format($registro['insertados']) }}</td>
                                        <td class="py-2 text-right text-red-500">{{ number_format($registro['errores']) }}</td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-4 text-gray-500">Sin descargas registradas</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
<script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>
<script src="{{ asset('js/tours/manager.js') }}"></script>
<script src="{{ asset('js/tours/config.js') }}"></script>

@push('js')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const charts = {
        descargas: null,
        facturas: null
    };

    const formatNumber = (value) => {
        try {
            return new Intl.NumberFormat('es-MX').format(value || 0);
        } catch (e) {
            return value || 0;
        }
    };

    const formatCurrency = (value) => {
        try {
            return new Intl.NumberFormat('es-MX', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(value || 0);
        } catch (e) {
            return (value || 0).toFixed(2);
        }
    };

    const formatPercent = (value) => {
        const numeric = Number(value) || 0;
        return `${numeric.toFixed(1)}%`;
    };

    const buildDescargasChart = (series) => {
        const ctx = document.getElementById('chartDescargas');
        if (!ctx) return;

        const config = {
            type: 'bar',
            data: {
                labels: series.labels,
                datasets: [{
                        label: 'Descargados',
                        data: series.descargados,
                        backgroundColor: '#3b82f6',
                        borderRadius: 4
                    },
                    {
                        label: 'Insertados',
                        data: series.insertados,
                        backgroundColor: '#10b981',
                        borderRadius: 4
                    },
                    {
                        label: 'Errores',
                        data: series.errores,
                        backgroundColor: '#ef4444',
                        borderRadius: 4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: (value) => formatNumber(value)
                        }
                    }
                }
            }
        };

        if (!charts.descargas) {
            charts.descargas = new Chart(ctx.getContext('2d'), config);
        } else {
            charts.descargas.data.labels = series.labels;
            charts.descargas.data.datasets[0].data = series.descargados;
            charts.descargas.data.datasets[1].data = series.insertados;
            charts.descargas.data.datasets[2].data = series.errores;
            charts.descargas.update();
        }
    };

    const buildFacturasChart = (series) => {
        const ctx = document.getElementById('chartFacturas');
        if (!ctx) return;

        const config = {
            type: 'line',
            data: {
                labels: series.labels,
                datasets: [{
                    label: 'CFDI procesados',
                    data: series.totales,
                    borderColor: '#6366f1',
                    backgroundColor: 'rgba(99, 102, 241, 0.15)',
                    tension: 0.35,
                    borderWidth: 3,
                    pointRadius: 4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: (value) => formatNumber(value)
                        }
                    }
                }
            }
        };

        if (!charts.facturas) {
            charts.facturas = new Chart(ctx.getContext('2d'), config);
        } else {
            charts.facturas.data.labels = series.labels;
            charts.facturas.data.datasets[0].data = series.totales;
            charts.facturas.update();
        }
    };

    const renderRecentDownloads = (items) => {
        const $tbody = $('#timelineDescargas');
        if (!items || !items.length) {
            $tbody.html('<tr><td colspan="7" class="text-center py-4 text-gray-500">Sin descargas registradas</td></tr>');
            return;
        }

        const rows = items.map(item => {
            const badgeClass = item.estatus === 'Completado' ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-600';
            return `
                <tr class="text-slate-700">
                    <td class="py-2">${item.fecha || '---'}</td>
                    <td class="py-2">${item.usuario || 'Sistema'}</td>
                    <td class="py-2">${item.tipo || '---'}</td>
                    <td class="py-2"><span class="px-2 py-1 rounded-full text-xs font-semibold ${badgeClass}">${item.estatus}</span></td>
                    <td class="py-2 text-right">${formatNumber(item.descargados)}</td>
                    <td class="py-2 text-right">${formatNumber(item.insertados)}</td>
                    <td class="py-2 text-right text-red-500">${formatNumber(item.errores)}</td>
                </tr>`;
        }).join('');

        $tbody.html(rows);

        const quick = items.slice(0, 3).map(item => {
            const badgeClass = item.estatus === 'Completado' ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-600';
            return `
                <li class="flex items-center justify-between text-sm">
                    <div>
                        <p class="font-medium text-slate-800">${item.usuario || 'Sistema'}</p>
                        <p class="text-gray-500">${item.fecha || '---'}</p>
                    </div>
                    <span class="px-2 py-1 rounded-full text-xs font-semibold ${badgeClass}">${item.estatus}</span>
                </li>`;
        }).join('');
        $('#quickRuns').html(quick || '<li class="text-sm text-gray-500">Sin descargas recientes</li>');
    };

    const updateLastDownload = (info) => {
        if (!info) {
            $('#lastDownloadStatus').text('Sin descargas');
            $('#lastDownloadType').text('---');
            $('#lastDownloadDate').text('---');
            $('#lastDownloadUser').text('---');
            $('#lastDownloadTotals').text('Sin registros previos');
            $('#lastDownloadErrors').text('');
            return;
        }

        $('#lastDownloadStatus').text(info.estatus || '---');
        $('#lastDownloadType').text(info.tipo || '---');
        $('#lastDownloadDate').text(info.fecha || '---');
        $('#lastDownloadUser').text(info.usuario || 'Sistema');
        $('#lastDownloadTotals').text(`${formatNumber(info.descargados)} descargados / ${formatNumber(info.insertados)} insertados`);
        $('#lastDownloadErrors').text(`${formatNumber(info.errores)} errores`);
    };

    const updateDashboard = (data, yearLabel) => {
        const periodo = `${data.mesNombre} ${yearLabel || $('#anio').val()}`;
        $('.mes-label').text(periodo);

        $('#kpiDescargados').text(formatNumber(data.descargaStats.descargados));
        $('#kpiInsertados').text(formatNumber(data.descargaStats.insertados));
        $('#kpiErrores').text(formatNumber(data.descargaStats.errores));
        $('#kpiTasa').text(formatPercent(data.descargaStats.tasaExito));
        $('#kpiEjecuciones').text(`${formatNumber(data.descargaStats.ejecuciones)} ejecuciones`);
        $('#cardDescargados').text(formatNumber(data.descargaStats.descargados));
        $('#cardInsertados').text(formatNumber(data.descargaStats.insertados));
        $('#cardErrores').text(formatNumber(data.descargaStats.errores));
        const ultimaFecha = (data.ultimaDescarga && data.ultimaDescarga.fecha) ? data.ultimaDescarga.fecha : 'Sin registros';
        $('#cardUltimaEjecucion').text(ultimaFecha);

        Object.entries(data.facturaStats).forEach(([key, value]) => {
            $(`#factura-${key}-total`).text(formatNumber(value.total));
            $(`#factura-${key}-monto`).text(`$ ${formatCurrency(value.monto)}`);
        });

        $('#globalFacturas').text(formatNumber(data.globalResume.facturasTotales));
        $('#globalClientes').text(formatNumber(data.globalResume.clientes));
        $('#globalProveedores').text(formatNumber(data.globalResume.proveedores));
        $('#globalDescargas').text(formatNumber(data.globalResume.descargasAcumuladas));

        buildDescargasChart(data.descargaSeries);
        buildFacturasChart(data.facturaSeries);
        renderRecentDownloads(data.recentDownloads);
        updateLastDownload(data.ultimaDescarga);
    };

    const cargarDatos = () => {
        const mes = $('#mes').val();
        const year = $('#anio').val();
        $('.mes-label').text('Actualizando...');

        $.ajax({
            url: "{{ route('descarga-xml.getData') }}",
            method: 'POST',
            data: {
                mes,
                year,
                _token: '{{ csrf_token() }}'
            },
            success: (response) => {
                if (response.success) {
                    updateDashboard(response.data, year);
                }
            },
            error: () => {
                alert('No se pudieron cargar los datos del periodo.');
            }
        });
    };

    $(function() {
        buildDescargasChart(@json($descargaSeries));
        buildFacturasChart(@json($facturaSeries));
        renderRecentDownloads(@json($recentDownloads));
        updateLastDownload(@json($ultimaDescarga));

        $('#mes, #anio').on('change', cargarDatos);

        if (window.TourManager) {
            window.TourManager.start('descargaXmlHome');
        }
    });
</script>
@endpush