@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <div class="d-flex flex-wrap align-items-center justify-content-between">
        <h1 class="font-condensed mb-2">Dashboard</h1>
        <div class="mb-2">
            <form method="GET" class="d-flex align-items-center gap-2">
                <label class="me-2 mb-0 text-muted small">Range</label>
                <select name="range" class="form-control form-control-sm" onchange="this.form.submit()">
                    @php $r = $range ?? '30d'; @endphp
                    <option value="7d" {{ $r==='7d'?'selected':'' }}>Last 7 days</option>
                    <option value="30d" {{ $r==='30d'?'selected':'' }}>Last 30 days</option>
                    <option value="90d" {{ $r==='90d'?'selected':'' }}>Last 90 days</option>
                    <option value="ytd" {{ $r==='ytd'?'selected':'' }}>Year to date</option>
                </select>
            </form>
        </div>
    </div>
@endsection

@section('content')
<div class="row dashboard-row">
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-info">
            <div class="inner">
                <h3>{{ number_format($activeCases) }}</h3>
                <p>Active Cases</p>
            </div>
            <div class="icon">
                <i class="fas fa-briefcase"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-success">
            <div class="inner">
                <h3>{{ number_format($clientsCount) }}</h3>
                <p>Clients</p>
            </div>
            <div class="icon">
                <i class="fas fa-users"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-warning">
            <div class="inner">
                <h3>{{ number_format($tasksDueCount) }}</h3>
                <p>Tasks Due</p>
            </div>
            <div class="icon">
                <i class="fas fa-tasks"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-danger">
            <div class="inner">
                <h3>{{ number_format($overdueInvoices) }}</h3>
                <p>Overdue Invoices</p>
            </div>
            <div class="icon">
                <i class="fas fa-file-invoice-dollar"></i>
            </div>
        </div>
    </div>
</div>

<div class="row dashboard-row">
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-primary">
            <div class="inner">
                <h3>{{ number_format($upcomingCourtCount) }}</h3>
                <p>Upcoming Court Dates (30d)</p>
            </div>
            <div class="icon">
                <i class="fas fa-gavel"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-secondary">
            <div class="inner">
                <h3>{{ number_format($unreadCommunications) }}</h3>
                <p>Unread Communications</p>
            </div>
            <div class="icon">
                <i class="fas fa-envelope"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-indigo">
            <div class="inner">
                <h3>{{ number_format($overdueTasksCount) }}</h3>
                <p>Overdue Tasks</p>
            </div>
            <div class="icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-teal">
            <div class="inner">
                <h3>{{ number_format($hoursThisWeek, 1) }}</h3>
                <p>Hours Logged (This Week)</p>
            </div>
            <div class="icon">
                <i class="fas fa-clock"></i>
            </div>
        </div>
    </div>
</div>

<div class="row dashboard-row">
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-light border">
            <div class="inner">
                <h3>{{ number_format($newClientsRange) }}</h3>
                <p>New Clients (range)</p>
            </div>
            <div class="icon"><i class="fas fa-user-plus"></i></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-light border">
            <div class="inner">
                <h3>{{ number_format($newCasesRange) }}</h3>
                <p>New Cases (range)</p>
            </div>
            <div class="icon"><i class="fas fa-briefcase"></i></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-light border">
            <div class="inner">
                <h3>{{ number_format($docsRange) }}</h3>
                <p>Documents Added (range)</p>
            </div>
            <div class="icon"><i class="fas fa-file-alt"></i></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box small-box-modern bg-light border">
            <div class="inner">
                <h3>{{ number_format($commsRange) }}</h3>
                <p>Communications (range)</p>
            </div>
            <div class="icon"><i class="fas fa-comments"></i></div>
        </div>
    </div>
    
    <div class="col-12">
        <div class="card">
            <div class="card-body py-2 d-flex flex-wrap gap-2">
                <a href="{{ route('cases.create') }}" class="btn btn-sm btn-primary"><i class="fas fa-plus me-1"></i> New Case</a>
                <a href="{{ route('clients.create') }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-user-plus me-1"></i> New Client</a>
                <a href="{{ route('tasks.create') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-plus me-1"></i> New Task</a>
                <a href="{{ route('invoices.create-memo') }}" class="btn btn-sm btn-outline-success"><i class="fas fa-file-invoice-dollar me-1"></i> New Invoice</a>
                <a href="{{ route('communications.index') }}" class="btn btn-sm btn-outline-info"><i class="fas fa-envelope me-1"></i> Communications</a>
            </div>
        </div>
    </div>
</div>

<div class="dashboard-two-cols mt-3">
    <!-- Left column: Financial / Profitability -->
    <div class="dashboard-col col-financial">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-chart-bar"></i> Invoice by Status</h3></div>
            <div class="card-body">
                <div class="chart-canvas"><canvas id="invoiceStatusChart" height="200"></canvas></div>
                <div class="chart-fallback mt-2">
                    @php $isL = $invoiceStatusChart['labels'] ?? []; $isD = $invoiceStatusChart['data'] ?? []; @endphp
                    @if(!empty($isL))
                        <ul class="list-unstyled mb-0 small">
                            @foreach($isL as $i=>$lbl)
                                <li><span class="badge" style="background:#6b7280">{{ $lbl }}</span> — Rp {{ number_format((float)($isD[$i] ?? 0), 0, ',', '.') }}</li>
                            @endforeach
                        </ul>
                    @else
                        <div class="text-muted small">No data</div>
                    @endif
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-layer-group"></i> A/R Aging</h3></div>
            <div class="card-body">
                <div class="chart-canvas"><canvas id="arAgingChart" height="200"></canvas></div>
                <div class="chart-fallback mt-2">
                    @php $arL = $arAgingChart['labels'] ?? []; $arD = $arAgingChart['data'] ?? []; @endphp
                    @if(!empty($arL))
                        <ul class="list-unstyled mb-0 small">
                            @foreach($arL as $i=>$lbl)
                                <li>{{ $lbl }} — Rp {{ number_format((float)($arD[$i] ?? 0), 0, ',', '.') }}</li>
                            @endforeach
                        </ul>
                    @else
                        <div class="text-muted small">No data</div>
                    @endif
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-wave-square"></i> Invoicing Trend (6 months)</h3></div>
            <div class="card-body">
                <div class="chart-canvas"><canvas id="invoiceTrendChart" height="120"></canvas></div>
                <div class="chart-fallback mt-2">
                    @php $itL = $invoiceTrendChart['labels'] ?? []; $itD = $invoiceTrendChart['data'] ?? []; @endphp
                    @if(!empty($itL))
                        <div class="row row-cols-2 row-cols-lg-3 g-2 small">
                            @foreach($itL as $i=>$lbl)
                                <div class="col"><span class="text-muted">{{ $lbl }}</span> — Rp {{ number_format((float)($itD[$i] ?? 0), 0, ',', '.') }}</div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-muted small">No data</div>
                    @endif
                </div>
            </div>
        </div>

        <div class="card dashboard-table-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-file-invoice-dollar"></i> Recent Invoices</h3>
                <div class="card-header-actions"><a href="{{ route('invoices.index') }}">View all</a></div>
            </div>
            <div class="dashboard-table-container">
                <table class="table table-modern">
                    <thead>
                        <tr>
                            <th class="text-nowrap">#</th>
                            <th>Client</th>
                            <th>Case</th>
                            <th class="text-nowrap">Total</th>
                            <th class="text-nowrap">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentInvoices as $invoice)
                        <tr>
                            <td class="text-nowrap"><strong>{{ $invoice->invoice_number }}</strong></td>
                            <td title="{{ $invoice->client?->name }}">{{ Str::limit($invoice->client?->name ?? 'N/A', 40) }}</td>
                            <td title="{{ $invoice->case?->title }}">{{ Str::limit($invoice->case?->title, 60) }}</td>
                            <td class="text-nowrap"><strong>Rp {{ number_format((float)($invoice->total_amount ?? 0), 0, ',', '.') }}</strong></td>
                            <td class="text-nowrap"><span class="badge {{ $invoice->status === 'paid' ? 'badge-status-active' : ($invoice->status === 'pending' ? 'badge-status-pending' : 'badge-status-intake') }}">{{ ucfirst($invoice->status) }}</span></td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-muted text-center py-3">No recent invoices</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Right column: Non-financial / Case management -->
    <div class="dashboard-col col-nonfinancial">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-chart-pie"></i> Case Status</h3></div>
            <div class="card-body">
                <div class="chart-canvas"><canvas id="caseStatusChart" height="200"></canvas></div>
                <div class="chart-fallback mt-2">
                    @php $csL = $caseStatusChart['labels'] ?? []; $csD = $caseStatusChart['data'] ?? []; @endphp
                    @if(!empty($csL))
                        <ul class="list-unstyled mb-0 small">
                            @foreach($csL as $i=>$lbl)
                                <li><span class="badge" style="background:#6b7280">{{ $lbl }}</span> — {{ number_format((int)($csD[$i] ?? 0)) }}</li>
                            @endforeach
                        </ul>
                    @else
                        <div class="text-muted small">No data</div>
                    @endif
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-user-clock"></i> Team Hours (This Week)</h3></div>
            <div class="card-body">
                <div class="chart-canvas"><canvas id="teamHoursChart" height="120"></canvas></div>
                <div class="chart-fallback mt-2">
                    @php $thL = $teamHoursChart['labels'] ?? []; $thD = $teamHoursChart['data'] ?? []; @endphp
                    @if(!empty($thL))
                        <ul class="list-unstyled mb-0 small">
                            @foreach($thL as $i=>$lbl)
                                <li>{{ $lbl }} — {{ number_format((float)($thD[$i] ?? 0), 1) }} h</li>
                            @endforeach
                        </ul>
                    @else
                        <div class="text-muted small">No data</div>
                    @endif
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-envelope-open-text"></i> Communications (30d)</h3></div>
            <div class="card-body">
                <div class="chart-canvas"><canvas id="commTypeChart" height="120"></canvas></div>
                <div class="chart-fallback mt-2">
                    @php $ctL = $commTypeChart['labels'] ?? []; $ctD = $commTypeChart['data'] ?? []; @endphp
                    @if(!empty($ctL))
                        <ul class="list-inline mb-0 small">
                            @foreach($ctL as $i=>$lbl)
                                <li class="list-inline-item me-3"><span class="badge" style="background:#6b7280">{{ $lbl }}</span> {{ number_format((int)($ctD[$i] ?? 0)) }}</li>
                            @endforeach
                        </ul>
                    @else
                        <div class="text-muted small">No data</div>
                    @endif
                </div>
            </div>
        </div>

        <div class="card dashboard-table-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-folder-open"></i> Recent Cases</h3>
                <div class="card-header-actions"><a href="{{ route('cases.index') }}">View all</a></div>
            </div>
            <div class="dashboard-table-container">
                <table class="table table-modern">
                    <thead>
                        <tr>
                            <th class="text-nowrap">Case #</th>
                            <th>Title</th>
                            <th>Client</th>
                            <th class="text-nowrap">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentCases as $case)
                        <tr>
                            <td class="text-nowrap"><a href="{{ route('cases.show', $case) }}" class="text-body">{{ $case->case_number }}</a></td>
                            <td><a href="{{ route('cases.show', $case) }}" class="text-body">{{ Str::limit($case->title, 60) }}</a></td>
                            <td>{{ $case->client ? $case->client->name : 'N/A' }}</td>
                            <td class="text-nowrap">
                                <span class="badge {{ $case->status === 'Active' ? 'badge-status-active' : ($case->status === 'Pending' ? 'badge-status-pending' : 'badge-status-intake') }}">
                                    {{ $case->status }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-3">No recent cases found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card dashboard-table-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-calendar-day"></i> Upcoming Court Dates</h3>
                <div class="card-header-actions"><a href="{{ route('court-dates.index') }}">View all</a></div>
            </div>
            <div class="dashboard-table-container">
                <table class="table table-modern">
                    <thead>
                        <tr>
                            <th class="text-nowrap">Date</th>
                            <th>Court</th>
                            <th>Case</th>
                            <th class="text-nowrap">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($nextCourtDates as $cd)
                        <tr>
                            <td class="text-nowrap">{{ optional($cd->scheduled_date)->format('M d, H:i') }}</td>
                            <td>{{ Str::limit($cd->court_name, 40) }}</td>
                            <td title="{{ $cd->case?->title }}">{{ Str::limit($cd->case?->title, 60) }}</td>
                            <td class="text-nowrap"><span class="badge {{ ($cd->status === 'completed') ? 'badge-status-active' : 'badge-status-pending' }}">{{ ucfirst($cd->status ?? 'scheduled') }}</span></td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-muted text-center py-3">No upcoming court dates</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card dashboard-table-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-tasks"></i> Recent Tasks</h3>
                <div class="card-header-actions"><a href="{{ route('tasks.index') }}">View all</a></div>
            </div>
            <div class="dashboard-table-container">
                <table class="table table-modern">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Case</th>
                            <th>Assignee</th>
                            <th class="text-nowrap">Due</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentTasks as $t)
                        <tr>
                            <td title="{{ $t->title }}"><a href="{{ route('tasks.show', $t) }}" class="text-body">{{ Str::limit($t->title, 50) }}</a></td>
                            <td title="{{ $t->case?->title }}">{{ Str::limit($t->case?->title, 40) }}</td>
                            <td title="{{ $t->assignee?->name }}">{{ $t->assignee?->name ?? 'Unassigned' }}</td>
                            <td class="text-nowrap">
                                @php
                                    $dueBadge = 'badge-due-future';
                                    if ($t->due_date && $t->due_date->isPast()) $dueBadge = 'badge-due-overdue';
                                    elseif ($t->due_date && $t->due_date->isBefore(now()->addDays(3))) $dueBadge = 'badge-due-soon';
                                @endphp
                                <span class="badge {{ $dueBadge }}">{{ optional($t->due_date)->format('M d') ?? '-' }}</span>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-muted text-center py-3">No recent tasks</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card dashboard-table-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-file-alt"></i> Recent Documents</h3>
                <div class="card-header-actions"><a href="{{ route('documents.index') }}">View all</a></div>
            </div>
            <div class="dashboard-table-container">
                <table class="table table-modern">
                    <thead>
                        <tr>
                            <th>Filename</th>
                            <th>Case</th>
                            <th class="text-nowrap">Uploaded By</th>
                            <th class="text-nowrap">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentDocuments as $doc)
                        <tr>
                            <td><a href="{{ route('documents.index') }}" class="text-body">{{ Str::limit($doc->original_filename ?? $doc->filename, 60) }}</a></td>
                            <td title="{{ $doc->case?->title }}">{{ Str::limit($doc->case?->title, 50) }}</td>
                            <td class="text-nowrap">{{ $doc->uploader?->name ?? '-' }}</td>
                            <td class="text-nowrap">{{ optional($doc->created_at)->format('M d') }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-muted text-center py-3">No recent documents</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card dashboard-table-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-comments"></i> Recent Communications</h3>
                <div class="card-header-actions"><a href="{{ route('communications.index') }}">View all</a></div>
            </div>
            <div class="dashboard-table-container">
                <table class="table table-modern">
                    <thead>
                        <tr>
                            <th>Subject</th>
                            <th>Case</th>
                            <th class="text-nowrap">Type</th>
                            <th class="text-nowrap">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentCommunications as $c)
                        <tr>
                            <td><a href="{{ route('communications.index') }}" class="text-body">{{ Str::limit($c->subject ?? Str::limit(strip_tags($c->content), 50), 60) }}</a></td>
                            <td title="{{ $c->case?->title }}">{{ Str::limit($c->case?->title, 50) }}</td>
                            <td class="text-nowrap">
                                @php
                                    $commClass = match($c->communication_type) {
                                        'email' => 'badge-comm-email',
                                        'call' => 'badge-comm-call',
                                        'meeting' => 'badge-comm-meeting',
                                        'message' => 'badge-comm-message',
                                        default => 'badge-comm-other'
                                    };
                                @endphp
                                <span class="badge {{ $commClass }}">{{ ucfirst($c->communication_type) }}</span>
                            </td>
                            <td class="text-nowrap">{{ optional($c->communication_date)->format('M d, H:i') }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-muted text-center py-3">No recent communications</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<style>
    /* Two independent columns with responsive stacking */
    .dashboard-two-cols{ display:flex; gap:1.25rem; align-items:flex-start; }
    .dashboard-two-cols .dashboard-col{ flex:1 1 0; min-width:0; }
    .dashboard-two-cols .dashboard-col > .card{ margin-bottom:1.25rem; }
    /* Mobile: stack columns */
    @media (max-width: 991.98px){ .dashboard-two-cols{ flex-direction:column; } }

    .small-box-modern{ position:relative; overflow:hidden; }
    .small-box-modern .icon{ opacity:.35; }
    .dashboard-table-card .card-header{ display:flex; align-items:center; justify-content:space-between; }
    .dashboard-row + .dashboard-row{ margin-top: .75rem; }
    .table-modern th, .table-modern td{ vertical-align: middle; }
    .badge-status-active{ background:#16a34a; }
    .badge-status-pending{ background:#f59e0b; }
    .badge-status-intake{ background:#64748b; }
    .badge-comm-email{ background:#2563eb; }
    .badge-comm-call{ background:#0ea5e9; }
    .badge-comm-meeting{ background:#7c3aed; }
    .badge-comm-message{ background:#059669; }
    .badge-comm-other{ background:#6b7280; }
    .badge-due-overdue{ background:#ef4444; }
    .badge-due-soon{ background:#f59e0b; }
    .badge-due-future{ background:#10b981; }
    /* Charts: show fallback by default, hide canvas until ready */
    .chart-fallback{ display:block; }
    .chart-canvas{ display:none; }
</style>
@endpush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    (function(){
        const fmtCurrency = (v)=> new Intl.NumberFormat('id-ID', { style:'currency', currency:'IDR', maximumFractionDigits:0 }).format(v||0);
        const pal = ['#0ea5e9','#8b5cf6','#22c55e','#f59e0b','#ef4444','#14b8a6','#f43f5e','#64748b'];
        const datasets = {
            cs: @json($caseStatusChart),
            isC: @json($invoiceStatusChart),
            ar: @json($arAgingChart),
            th: @json($teamHoursChart),
            ct: @json($commTypeChart),
            it: @json($invoiceTrendChart),
        };

        function hasChart(){ return typeof Chart !== 'undefined' && (Chart?.defaults || Chart?.helpers); }
        function loadScript(src){ return new Promise((resolve)=>{ const s=document.createElement('script'); s.src=src; s.async=true; s.onload=resolve; s.onerror=resolve; document.head.appendChild(s); }); }
        function noData(el){ if(!el) return; const body = el.closest('.card-body'); if(!body) return; const fb = body.querySelector('.chart-fallback'); const cc = el.closest('.chart-canvas')||el; if(fb){ fb.style.display='block'; } if(cc){ cc.style.display='none'; } }
        function hasData(el){ if(!el) return; const body = el.closest('.card-body'); if(!body) return; const fb = body.querySelector('.chart-fallback'); const cc = el.closest('.chart-canvas')||el; if(fb){ fb.style.display='none'; } if(cc){ cc.style.display='block'; } }

        function sum(arr){ try { return (arr||[]).reduce((a,b)=>a+(+b||0),0);} catch(e){return 0;} }
            function chartMajor(){ try { return parseInt((Chart.version||'2').split('.')[0],10)||2; } catch(e){ return 2; } }
            function optsCommon(){ const maj = chartMajor(); return { maj, isV2: maj<3, isV3p: maj>=3 }; }
            function legendBottom(){ const o = optsCommon(); return o.isV2 ? { legend:{ display:true, position:'bottom' } } : { plugins:{ legend:{ position:'bottom' } } }; }
            function legendNone(){ const o = optsCommon(); return o.isV2 ? { legend:{ display:false } } : { plugins:{ legend:{ display:false } } }; }
            function tooltipCurrency(){ const o = optsCommon();
                if (o.isV2) return { tooltips:{ callbacks:{ label: function(tooltipItem, data){ const v = tooltipItem.yLabel || 0; return fmtCurrency(v); } } } };
                return { plugins:{ tooltip:{ callbacks:{ label:(ctx)=> fmtCurrency(ctx.raw) } } } };
            }
            function scaleCurrencyY(){ const o = optsCommon();
                if (o.isV2) return { scales:{ yAxes:[{ ticks:{ callback:(v)=> fmtCurrency(v) } }] } };
                return { scales:{ y:{ ticks:{ callback:(v)=> fmtCurrency(v) } } } };
            }
            function mergeOptions(){
                const res = {};
                for (const src of arguments){ if (!src) continue; for (const k in src){ if (src.hasOwnProperty(k)) res[k]=src[k]; } }
                return res;
            }
            function initCharts(){
            try {
                const el1 = document.getElementById('caseStatusChart');
    if (el1 && datasets.cs?.labels?.length && sum(datasets.cs.data)>0) { hasData(el1); new Chart(el1, { type:'doughnut', data:{ labels: datasets.cs.labels, datasets:[{ data: datasets.cs.data, backgroundColor: pal }] }, options: mergeOptions(legendBottom()) }); } else noData(el1);

                const el2 = document.getElementById('invoiceStatusChart');
    if (el2 && datasets.isC?.labels?.length && sum(datasets.isC.data)>0) { hasData(el2); new Chart(el2, { type:'bar', data:{ labels: datasets.isC.labels, datasets:[{ data: datasets.isC.data, backgroundColor: pal[0] }] }, options: mergeOptions(legendNone(), tooltipCurrency(), scaleCurrencyY()) }); } else noData(el2);

                const el3 = document.getElementById('arAgingChart');
    if (el3 && datasets.ar?.labels?.length && sum(datasets.ar.data)>0) { hasData(el3); new Chart(el3, { type:'bar', data:{ labels: datasets.ar.labels, datasets:[{ data: datasets.ar.data, backgroundColor: pal.slice(3,7) }] }, options: mergeOptions(legendNone(), tooltipCurrency(), scaleCurrencyY()) }); } else noData(el3);

                const el4 = document.getElementById('invoiceTrendChart');
    if (el4 && datasets.it?.labels?.length && sum(datasets.it.data)>0) { hasData(el4); new Chart(el4, { type:'line', data:{ labels: datasets.it.labels, datasets:[{ data: datasets.it.data, borderColor: pal[1], backgroundColor: 'rgba(139,92,246,.15)', fill:true, tension:.3 }] }, options: mergeOptions(legendNone(), tooltipCurrency(), scaleCurrencyY()) }); } else noData(el4);

                const el5 = document.getElementById('teamHoursChart');
    if (el5 && datasets.th?.labels?.length && sum(datasets.th.data)>0) { hasData(el5); new Chart(el5, { type:'bar', data:{ labels: datasets.th.labels, datasets:[{ data: datasets.th.data, backgroundColor: pal[2] }] }, options: mergeOptions(legendNone(), scaleCurrencyY()) }); } else noData(el5);

                const el6 = document.getElementById('commTypeChart');
    if (el6 && datasets.ct?.labels?.length && sum(datasets.ct.data)>0) { hasData(el6); new Chart(el6, { type:'bar', data:{ labels: datasets.ct.labels, datasets:[{ data: datasets.ct.data, backgroundColor: pal[4] }] }, options: mergeOptions(legendNone()) }); } else noData(el6);
            } catch (e) { console.error('Chart init error', e); }
        }

        function ready(fn){ if(document.readyState!=='loading') fn(); else document.addEventListener('DOMContentLoaded', fn); }
            ready(async function(){
                if (hasChart()) return initCharts();
                await loadScript('https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js');
                if (hasChart()) return initCharts();
                await loadScript('https://unpkg.com/chart.js@4.4.0/dist/chart.umd.js');
                if (hasChart()) return initCharts();
                // try older global provided by AdminLTE plugin
                await loadScript('//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js');
                if (hasChart()) return initCharts();
            // As a last resort, mark all as no data
            ['caseStatusChart','invoiceStatusChart','arAgingChart','invoiceTrendChart','teamHoursChart','commTypeChart'].forEach(id=> noData(document.getElementById(id)));
        });
    })();
</script>
@endpush