{{-- New-Unity ERP | resources/views/dashboard.blade.php | v2.4 | 27/07/2026 --}}
{{-- v2.4 — Título limpio: "Dashboard" + breadcrumb "Unity ERP / Dashboard".                  --}}
{{-- v2.3 — Sección 1 (saludo) eliminada: saludo vive ahora en app-header.blade.php.          --}}
{{--         Botón Actualizar + timestamp movidos junto al page-title.                         --}}
{{-- v2.2 — Header simplificado: removidos fecha y empresa (info redundante con app-header). --}}
{{-- v2.1 — Fix dona: canvas en wrapper cuadrado 185×185 + responsive:true/maintainAspectRatio --}}
{{--         :false. Leyenda acotada con overflow-y:auto. Card-body h-260 sin desbordamiento. --}}
{{-- v2.0 — KPI cards rediseñados: icono izq FA, número+label der, colores suaves por valor. --}}
{{--         Fix gráficas: @push → @section (layout usa @yield), guard typeof Chart,        --}}
{{--         wrapper window.addEventListener('load'). Icono Stock Crítico → link correcto.  --}}
{{-- v1.0 — Dashboard inteligente: KPIs reales, gráficas Chart.js, tablas operativas por rol. --}}

@extends('layouts.vertical', ['pageTitle' => __('dashboard.title')])

@section('page-title')
    @include('layouts.partials/app-pagetitle', [
        'pageTitle'     => __('dashboard.title'),
        'pageSubTitle1' => 'Unity ERP',
    ])
@endsection

@section('content')

{{-- ══ SECCIÓN 1 — KPI Cards ═══════════════════════════════════════════════════ --}}
{{-- Toolbar: timestamp + refresh alineados a la derecha antes de los cards       --}}
<div class="d-flex justify-content-end align-items-center gap-2 mb-2">
    <span class="text-muted fs-xs" id="lastUpdateTime">
        <i class="fal fa-clock me-1"></i>{{ __('dashboard.last-update') }}: {{ $now->format('H:i') }}
    </span>
    <button type="button" id="refreshBtn" class="btn btn-sm btn-outline-secondary"
            onclick="refreshDashboard()">
        <i class="fal fa-sync-alt me-1"></i>{{ __('dashboard.refresh') }}
    </button>
</div>

{{-- ══ KPI Cards ════════════════════════════════════════════════════════════════ --}}
{{-- Estilos calculados en PHP: bg suave, borde, color de icono/número/label    --}}
@php
    $kpiStyle = function (bool $active, string $bg, string $bd, string $iconC, string $numC, string $lblC): array {
        return [
            'bg'   => $active ? $bg    : '#f8f9fa',
            'bd'   => $active ? $bd    : 'rgba(0,0,0,.07)',
            'icon' => $active ? $iconC : '#adb5bd',
            'num'  => $active ? $numC  : '#495057',
            'lbl'  => $active ? $lblC  : '#6c757d',
        ];
    };
    $kpiVentas = $kpiStyle(($ventasHoy  ?? 0) > 0,          'rgba(25,135,84,.10)',  'rgba(25,135,84,.25)',  '#198754', '#0f5132', '#1a7a47');
    $kpiOvs    = $kpiStyle(($ovsPendientes ?? 0) > 0,        'rgba(255,193,7,.15)',  'rgba(255,193,7,.40)',  '#cc9700', '#664d03', '#7a5a03');
    $kpiEnt    = $kpiStyle(($entregasPendientes ?? 0) > 0,   'rgba(13,110,253,.10)', 'rgba(13,110,253,.25)', '#0d6efd', '#084298', '#084298');
    $kpiStock  = $kpiStyle(($stockCritico  ?? 0) > 0,        'rgba(220,53,69,.10)',  'rgba(220,53,69,.25)',  '#dc3545', '#842029', '#842029');
    $kpiMrp    = $kpiStyle(($mrpPendientes ?? 0) > 0,        'rgba(253,126,20,.10)', 'rgba(253,126,20,.25)', '#fd7e14', '#7c3200', '#7c3200');
    $kpiCxc    = $kpiStyle(($cxcVencida   ?? 0) > 0,        'rgba(220,53,69,.10)',  'rgba(220,53,69,.25)',  '#dc3545', '#842029', '#842029');
@endphp

<div class="row g-2 mb-g">

    @can('sales.access')

    {{-- Ventas Hoy --}}
    <div class="col-6 col-md-4 col-xl-2">
        <a href="{{ route('sales.orders.index') }}" class="text-decoration-none">
            <div class="card border h-100"
                 style="background:{{ $kpiVentas['bg'] }};border-color:{{ $kpiVentas['bd'] }}!important;">
                <div class="card-body d-flex align-items-center gap-3 py-3 px-3">
                    <div class="flex-shrink-0">
                        <i class="fal fa-dollar-sign fa-2x" style="color:{{ $kpiVentas['icon'] }};"></i>
                    </div>
                    <div class="flex-grow-1 min-w-0">
                        <div class="fw-bold lh-1 text-truncate" style="font-size:1.25rem;color:{{ $kpiVentas['num'] }};">
                            ${{ number_format($ventasHoy ?? 0, 0) }}
                        </div>
                        <div class="fs-xs mt-1" style="color:{{ $kpiVentas['lbl'] }};">
                            {{ __('dashboard.sales-today') }}
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    {{-- OVs Pendientes --}}
    <div class="col-6 col-md-4 col-xl-2">
        <a href="{{ route('sales.orders.index') }}?status=open" class="text-decoration-none">
            <div class="card border h-100"
                 style="background:{{ $kpiOvs['bg'] }};border-color:{{ $kpiOvs['bd'] }}!important;">
                <div class="card-body d-flex align-items-center gap-3 py-3 px-3">
                    <div class="flex-shrink-0">
                        <i class="fal fa-file-alt fa-2x" style="color:{{ $kpiOvs['icon'] }};"></i>
                    </div>
                    <div class="flex-grow-1 min-w-0">
                        <div class="fw-bold lh-1" style="font-size:1.5rem;color:{{ $kpiOvs['num'] }};">
                            {{ $ovsPendientes ?? 0 }}
                        </div>
                        <div class="fs-xs mt-1" style="color:{{ $kpiOvs['lbl'] }};">
                            {{ __('dashboard.pending-orders') }}
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    @endcan

    @can('warehouse.picking')
    {{-- Entregas Pendientes --}}
    <div class="col-6 col-md-4 col-xl-2">
        <a href="{{ route('deliveries.index') }}" class="text-decoration-none">
            <div class="card border h-100"
                 style="background:{{ $kpiEnt['bg'] }};border-color:{{ $kpiEnt['bd'] }}!important;">
                <div class="card-body d-flex align-items-center gap-3 py-3 px-3">
                    <div class="flex-shrink-0">
                        <i class="fal fa-truck fa-2x" style="color:{{ $kpiEnt['icon'] }};"></i>
                    </div>
                    <div class="flex-grow-1 min-w-0">
                        <div class="fw-bold lh-1" style="font-size:1.5rem;color:{{ $kpiEnt['num'] }};">
                            {{ $entregasPendientes ?? 0 }}
                        </div>
                        <div class="fs-xs mt-1" style="color:{{ $kpiEnt['lbl'] }};">
                            {{ __('dashboard.pending-deliveries') }}
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    @endcan

    @can('warehouse.access')
    {{-- Stock Crítico --}}
    <div class="col-6 col-md-4 col-xl-2">
        <a href="{{ route('warehouse.inventory.stock-overview') }}" class="text-decoration-none">
            <div class="card border h-100"
                 style="background:{{ $kpiStock['bg'] }};border-color:{{ $kpiStock['bd'] }}!important;">
                <div class="card-body d-flex align-items-center gap-3 py-3 px-3">
                    <div class="flex-shrink-0">
                        <i class="fal fa-exclamation-triangle fa-2x" style="color:{{ $kpiStock['icon'] }};"></i>
                    </div>
                    <div class="flex-grow-1 min-w-0">
                        <div class="fw-bold lh-1" style="font-size:1.5rem;color:{{ $kpiStock['num'] }};">
                            {{ $stockCritico ?? 0 }}
                        </div>
                        <div class="fs-xs mt-1" style="color:{{ $kpiStock['lbl'] }};">
                            {{ __('dashboard.critical-stock') }}
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    @endcan

    @can('purchases.access')
    {{-- MRP Pendientes --}}
    <div class="col-6 col-md-4 col-xl-2">
        <a href="{{ route('warehouse.proposals.index') }}" class="text-decoration-none">
            <div class="card border h-100"
                 style="background:{{ $kpiMrp['bg'] }};border-color:{{ $kpiMrp['bd'] }}!important;">
                <div class="card-body d-flex align-items-center gap-3 py-3 px-3">
                    <div class="flex-shrink-0">
                        <i class="fal fa-sitemap fa-2x" style="color:{{ $kpiMrp['icon'] }};"></i>
                    </div>
                    <div class="flex-grow-1 min-w-0">
                        <div class="fw-bold lh-1" style="font-size:1.5rem;color:{{ $kpiMrp['num'] }};">
                            {{ $mrpPendientes ?? 0 }}
                        </div>
                        <div class="fs-xs mt-1" style="color:{{ $kpiMrp['lbl'] }};">
                            {{ __('dashboard.pending-mrp') }}
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    @endcan

    @can('finance.access')
    {{-- CxC Vencida --}}
    <div class="col-6 col-md-4 col-xl-2">
        <a href="{{ route('ar.index') }}" class="text-decoration-none">
            <div class="card border h-100"
                 style="background:{{ $kpiCxc['bg'] }};border-color:{{ $kpiCxc['bd'] }}!important;">
                <div class="card-body d-flex align-items-center gap-3 py-3 px-3">
                    <div class="flex-shrink-0">
                        <i class="fal fa-credit-card fa-2x" style="color:{{ $kpiCxc['icon'] }};"></i>
                    </div>
                    <div class="flex-grow-1 min-w-0">
                        <div class="fw-bold lh-1 text-truncate" style="font-size:1.15rem;color:{{ $kpiCxc['num'] }};">
                            ${{ number_format($cxcVencida ?? 0, 0) }}
                        </div>
                        <div class="fs-xs mt-1" style="color:{{ $kpiCxc['lbl'] }};">
                            {{ __('dashboard.overdue-cxc') }}
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    @endcan

</div>

{{-- ══ SECCIÓN 3 — Gráficas ════════════════════════════════════════════════════ --}}
@can('sales.access')
<div class="row g-2 mb-g">

    {{-- Gráfica de barras: Ventas 30 días --}}
    <div class="col-md-8">
        <div class="card shadow-0 h-100">
            <div class="card-header">
                <div class="card-title">
                    <i class="fal fa-chart-bar text-primary me-2"></i>
                    {{ __('dashboard.sales-last-30-days') }}
                </div>
            </div>
            <div class="card-body" style="position:relative;height:260px;">
                @php $allZero = empty(array_filter($chartData, fn($v) => $v > 0)); @endphp
                @if($allZero)
                <div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted">
                    <i class="fal fa-chart-bar" style="font-size:2.5rem;"></i>
                    <p class="mt-2 mb-0 fs-sm">{{ __('dashboard.no-data-available') }}</p>
                </div>
                @else
                <canvas id="chartVentas"></canvas>
                @endif
            </div>
        </div>
    </div>

    {{-- Gráfica de dona: Top 5 productos --}}
    <div class="col-md-4">
        <div class="card shadow-0 h-100">
            <div class="card-header">
                <div class="card-title">
                    <i class="fal fa-chart-pie text-success me-2"></i>
                    {{ __('dashboard.top-products') }}
                </div>
            </div>
            <div class="card-body d-flex flex-column p-2" style="height:260px;overflow:hidden;">
                @if($topProductos->isEmpty())
                    <div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted">
                        <i class="fal fa-chart-pie" style="font-size:2.5rem;"></i>
                        <p class="mt-2 mb-0 fs-sm">{{ __('dashboard.no-data-available') }}</p>
                    </div>
                @else
                    {{-- Wrapper cuadrado centrado: Chart.js lo llena con responsive:true --}}
                    <div class="d-flex justify-content-center" style="flex:0 0 auto;">
                        <div style="position:relative;width:185px;height:185px;">
                            <canvas id="chartTopProductos"></canvas>
                        </div>
                    </div>
                    {{-- Leyenda acotada: ocupa el espacio restante sin desbordarse --}}
                    <div id="topProductosLegend" class="mt-1 w-100"
                         style="font-size:.72rem;overflow-y:auto;flex:1 1 0;min-height:0;"></div>
                @endif
            </div>
        </div>
    </div>

</div>
@endcan

{{-- ══ SECCIÓN 4 — Tablas Operativas ══════════════════════════════════════════ --}}
<div class="row g-2 mb-g">

    {{-- Tabla 1: OVs Recientes --}}
    @can('sales.access')
    <div class="{{ $tableColClass }}">
        <div class="card shadow-0 h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div class="card-title mb-0">
                    <i class="fal fa-file-alt text-primary me-2"></i>
                    {{ __('dashboard.recent-orders') }}
                </div>
                <a href="{{ route('sales.orders.index') }}" class="btn btn-xs btn-outline-primary">
                    {{ __('dashboard.view-all') }}
                </a>
            </div>
            <div class="card-body p-0">
                @if($ovsRecientes->isEmpty())
                <div class="text-center text-muted py-4">
                    <i class="fal fa-inbox" style="font-size:2rem;"></i>
                    <p class="mt-2 mb-0 fs-sm">{{ __('dashboard.no-data-available') }}</p>
                </div>
                @else
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('dashboard.order-number') }}</th>
                                <th>{{ __('dashboard.customer') }}</th>
                                <th class="text-end">{{ __('dashboard.total') }}</th>
                                <th class="text-center">{{ __('dashboard.status') }}</th>
                                <th class="text-end">{{ __('dashboard.date') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($ovsRecientes as $ov)
                            <tr>
                                <td>
                                    <a href="{{ route('sales.orders.show', $ov) }}" class="fw-500 text-decoration-none">
                                        {{ $ov->folDisplay() }}
                                    </a>
                                </td>
                                <td class="text-truncate" style="max-width:120px;" title="{{ $ov->customer_name }}">
                                    {{ $ov->customer_name }}
                                </td>
                                <td class="text-end">${{ number_format($ov->total, 2) }}</td>
                                <td class="text-center">
                                    <span class="badge {{ $ov->statusBadge() }}" style="font-size:.65rem;">
                                        {{ $ov->statusLabel() }}
                                    </span>
                                </td>
                                <td class="text-end text-muted fs-xs">
                                    {{ $ov->created_at->format('d/m/y') }}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endcan

    {{-- Tabla 2: CxC Vencida --}}
    @can('finance.access')
    @can('finance.view')
    <div class="{{ $tableColClass }}">
        <div class="card shadow-0 h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div class="card-title mb-0">
                    <i class="fal fa-exclamation-circle text-danger me-2"></i>
                    {{ __('dashboard.overdue-invoices') }}
                </div>
                <a href="{{ route('ar.index') }}" class="btn btn-xs btn-outline-danger">
                    {{ __('dashboard.view-all') }}
                </a>
            </div>
            <div class="card-body p-0">
                @if($facturasVencidas->isEmpty())
                <div class="text-center text-muted py-4">
                    <i class="fal fa-check-circle text-success" style="font-size:2rem;"></i>
                    <p class="mt-2 mb-0 fs-sm">Sin facturas vencidas</p>
                </div>
                @else
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('dashboard.invoice') }}</th>
                                <th>{{ __('dashboard.customer') }}</th>
                                <th class="text-end">{{ __('dashboard.balance') }}</th>
                                <th class="text-center">{{ __('dashboard.overdue-days') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($facturasVencidas as $inv)
                            @php
                                $diasVencida = now()->startOfDay()->diffInDays(\Carbon\Carbon::parse($inv->expiration_date)->startOfDay());
                            @endphp
                            <tr>
                                <td>
                                    <a href="{{ route('ar.show', $inv) }}" class="fw-500 text-decoration-none">
                                        #{{ $inv->id }}
                                    </a>
                                </td>
                                <td class="text-truncate" style="max-width:120px;"
                                    title="{{ $inv->customer->commercial_name ?? '—' }}">
                                    {{ $inv->customer->commercial_name ?? '—' }}
                                </td>
                                <td class="text-end fw-500">
                                    ${{ number_format($inv->cxc_balance, 2) }}
                                </td>
                                <td class="text-center">
                                    <span class="badge {{ $diasVencida > 30 ? 'bg-danger' : 'bg-warning text-dark' }}">
                                        {{ $diasVencida }}d
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endcan
    @endcan

    {{-- Tabla 3: MRP Pendientes --}}
    @can('purchases.access')
    <div class="{{ $tableColClass }}">
        <div class="card shadow-0 h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div class="card-title mb-0">
                    <i class="fal fa-robot text-warning me-2"></i>
                    {{ __('dashboard.pending-mrp-list') }}
                </div>
                <a href="{{ route('warehouse.proposals.index') }}" class="btn btn-xs btn-outline-warning">
                    {{ __('dashboard.view-all') }}
                </a>
            </div>
            <div class="card-body p-0">
                @if($mrpLista->isEmpty())
                <div class="text-center text-muted py-4">
                    <i class="fal fa-check-circle text-success" style="font-size:2rem;"></i>
                    <p class="mt-2 mb-0 fs-sm">Sin MRP pendientes</p>
                </div>
                @else
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Pre-Orden</th>
                                <th>{{ __('dashboard.product') }}</th>
                                <th class="text-end">{{ __('dashboard.qty') }}</th>
                                <th>{{ __('dashboard.so-origin') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($mrpLista as $prop)
                            <tr>
                                <td>
                                    <a href="{{ route('warehouse.proposals.index') }}"
                                       class="text-decoration-none fw-500">
                                        {{ $prop->proposal_number }}
                                    </a>
                                    <span class="badge bg-warning text-dark ms-1" style="font-size:.6rem;">
                                        Pendiente
                                    </span>
                                </td>
                                <td class="text-truncate" style="max-width:130px;"
                                    title="{{ $prop->product->product_name ?? '—' }}">
                                    {{ $prop->product->product_name ?? '—' }}
                                </td>
                                <td class="text-end">
                                    {{ number_format($prop->quantity_needed, 0) }}
                                    <small class="text-muted">/{{ number_format($prop->quantity_available, 0) }}</small>
                                </td>
                                <td class="fs-xs text-muted">
                                    {{ $prop->sales_order_number ?? '—' }}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endcan

    {{-- Tabla 4: Recepciones Pendientes --}}
    @can('warehouse.receive')
    <div class="{{ $tableColClass }}">
        <div class="card shadow-0 h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div class="card-title mb-0">
                    <i class="fal fa-truck-loading text-info me-2"></i>
                    {{ __('dashboard.pending-receptions') }}
                </div>
                <a href="{{ route('warehouse.receptions.index') }}" class="btn btn-xs btn-outline-info">
                    {{ __('dashboard.view-all') }}
                </a>
            </div>
            <div class="card-body p-0">
                @if($recepcionesPendientes->isEmpty())
                <div class="text-center text-muted py-4">
                    <i class="fal fa-check-circle text-success" style="font-size:2rem;"></i>
                    <p class="mt-2 mb-0 fs-sm">Sin recepciones pendientes</p>
                </div>
                @else
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('dashboard.reception') }}</th>
                                <th>OC Origen</th>
                                <th class="text-center">{{ __('dashboard.status') }}</th>
                                <th class="text-end">{{ __('dashboard.date') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recepcionesPendientes as $rec)
                            <tr>
                                <td class="fw-500">{{ $rec->reception_number }}</td>
                                <td class="text-muted fs-xs">
                                    {{ $rec->purchase_order_number ?? '—' }}
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-{{ $rec->status_color }}" style="font-size:.65rem;">
                                        {{ $rec->status_label }}
                                    </span>
                                </td>
                                <td class="text-end text-muted fs-xs">
                                    {{ $rec->created_at->format('d/m/y') }}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endcan

</div>

@endsection

{{-- ══ SCRIPTS — Chart.js ═══════════════════════════════════════════════════════════════ --}}
{{-- NOTA: el layout usa @yield('scripts') (no @stack), por eso se usa @section aquí.    --}}
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
window.addEventListener('load', function () {

    // Guard: si Chart.js no cargó (CDN inaccesible), salir silenciosamente
    if (typeof Chart === 'undefined') { return; }

    @can('sales.access')

    var isDark     = document.documentElement.getAttribute('data-theme') === 'dark' ||
                     window.matchMedia('(prefers-color-scheme: dark)').matches;
    var gridColor  = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';
    var labelColor = isDark ? '#adb5bd' : '#6c757d';

    // ── Gráfica de barras: Ventas 30 días ─────────────────────────────────
    var ctxVentas = document.getElementById('chartVentas');
    if (ctxVentas) {
        new Chart(ctxVentas, {
            type: 'bar',
            data: {
                labels:   {!! json_encode($chartLabels) !!},
                datasets: [{
                    label:           '{{ __('dashboard.sales-today') }}',
                    data:            {!! json_encode($chartData) !!},
                    backgroundColor: 'rgba(25, 135, 84, 0.7)',
                    borderColor:     '#198754',
                    borderWidth:     1,
                    borderRadius:    3,
                }]
            },
            options: {
                responsive:          true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function (ctx) {
                                return ' $' + ctx.raw.toLocaleString('es-MX', { minimumFractionDigits: 2 });
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid:  { color: gridColor },
                        ticks: { color: labelColor, font: { size: 10 }, maxTicksLimit: 10 }
                    },
                    y: {
                        grid:  { color: gridColor },
                        ticks: {
                            color: labelColor,
                            callback: function (v) {
                                return v >= 1000 ? '$' + (v / 1000).toFixed(0) + 'k' : '$' + v;
                            }
                        }
                    }
                }
            }
        });
    }

    // ── Gráfica de dona: Top 5 productos ─────────────────────────────────
    var ctxDona = document.getElementById('chartTopProductos');
    if (ctxDona) {
        @php
            $donaLabels = $topProductos->pluck('product_name')->map(fn ($n) => mb_substr($n, 0, 20))->toArray();
            $donaData   = $topProductos->pluck('total_amount')->map(fn ($v) => round($v, 2))->toArray();
        @endphp
        var donaColors = ['#198754', '#0d6efd', '#fd7e14', '#0dcaf0', '#6f42c1'];
        var donaLabels = {!! json_encode($donaLabels) !!};
        var donaData   = {!! json_encode($donaData)   !!};

        new Chart(ctxDona, {
            type: 'doughnut',
            data: {
                labels:   donaLabels,
                datasets: [{
                    data:            donaData,
                    backgroundColor: donaColors,
                    borderWidth:     2,
                    borderColor:     isDark ? '#1a1a2e' : '#fff',
                }]
            },
            options: {
                responsive:          true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function (ctx) {
                                return ' $' + ctx.raw.toLocaleString('es-MX', { minimumFractionDigits: 2 });
                            }
                        }
                    }
                },
                cutout: '65%',
            }
        });

        // Leyenda manual
        var legendEl = document.getElementById('topProductosLegend');
        if (legendEl) {
            var total = donaData.reduce(function (a, b) { return a + b; }, 0);
            var html  = '';
            donaLabels.forEach(function (lbl, i) {
                var pct = total > 0 ? (donaData[i] / total * 100).toFixed(1) : '0.0';
                html += '<div class="d-flex align-items-center mb-1">' +
                    '<span style="width:10px;height:10px;border-radius:50%;background:' + donaColors[i] +
                    ';flex-shrink:0;" class="me-1"></span>' +
                    '<span class="text-truncate flex-1" title="' + lbl + '">' + lbl + '</span>' +
                    '<span class="ms-1 fw-500">' + pct + '%</span>' +
                    '</div>';
            });
            legendEl.innerHTML = html;
        }
    }

    @endcan

}); // end window.addEventListener('load')

// ── Refresh del dashboard ─────────────────────────────────────────────────
function refreshDashboard() {
    var btn = document.getElementById('refreshBtn');
    if (!btn) return;
    btn.disabled = true;
    btn.innerHTML = '<i class="fal fa-spinner fa-spin me-1"></i>Actualizando...';

    var ov = document.createElement('div');
    ov.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#198754,#0d6efd,#198754);background-size:200%;animation:dashSlide 1s linear infinite;z-index:9999;';
    document.body.appendChild(ov);

    var style = document.createElement('style');
    style.textContent = '@keyframes dashSlide{0%{background-position:200%}100%{background-position:0%}}';
    document.head.appendChild(style);

    window.location.reload();
}
</script>
@endsection