@extends('layouts.authenticated')

@section('title', 'Dashboard Manager')
@section('page-title', 'Dashboard Manager')

@section('page-content')
<div class="space-y-8 animate-fade-in pb-12">
    <!-- Welcome Header -->
    <div class="relative overflow-hidden rounded-3xl border border-slate-200/50 dark:border-slate-700/50 bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900 text-white shadow-lg p-6 sm:p-8">
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.15),transparent_40%)]"></div>
        <div class="absolute -right-10 -top-10 w-40 h-40 bg-blue-500/10 rounded-full blur-3xl"></div>
        
        <div class="relative flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div class="space-y-2">
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-blue-500/20 text-blue-300 border border-blue-500/30 uppercase tracking-wide">
                    <span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></span>
                    Dashboard Manajer
                </span>
                <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-white mt-1">Selamat Datang, {{ auth()->user()->name }}</h1>
                <p class="text-slate-400 text-sm max-w-xl">
                    @if($selectedBranchId && ($currentBranch = $activeBranches->firstWhere('id', $selectedBranchId)))
                        Menampilkan ringkasan data untuk cabang <span class="font-semibold text-white">{{ $currentBranch->name }}</span>.
                    @else
                        Menampilkan ringkasan data untuk seluruh cabang.
                    @endif
                </p>
            </div>

            <div class="flex flex-wrap items-center gap-3 shrink-0">
                <!-- Dropdown Pilihan Cabang (Global Filter Top) -->
                <form method="GET" action="{{ route('dashboard') }}" class="flex items-center gap-2">
                    @if($selectedCategoryId)
                        <input type="hidden" name="sales_category_id" value="{{ $selectedCategoryId }}">
                    @endif
                    @if($salesRange)
                        <input type="hidden" name="sales_range" value="{{ $salesRange }}">
                    @endif
                    
                    <div class="relative min-w-[210px]">
                        <select name="branch_id" onchange="this.form.submit()" class="w-full pl-9 pr-8 py-2.5 bg-slate-800/90 backdrop-blur-md border border-slate-700 rounded-2xl text-xs font-bold text-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all cursor-pointer shadow-inner">
                            <option value="" class="bg-slate-900 text-white">Semua Cabang</option>
                            @foreach($activeBranches as $b)
                            <option value="{{ $b->id }}" @selected($selectedBranchId === $b->id) class="bg-slate-900 text-white">{{ $b->name }}</option>
                            @endforeach
                        </select>
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-blue-400">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5m0 0h4m-4 0V11m0 0V5m0 6h4"></path>
                            </svg>
                        </div>
                    </div>
                </form>

                <div class="flex items-center gap-3 bg-white/5 backdrop-blur-md px-4 py-2.5 rounded-2xl border border-white/10">
                    <div class="w-8 h-8 rounded-xl bg-blue-600/20 flex items-center justify-center text-blue-400">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <div class="text-left">
                        <p class="text-[9px] text-slate-400 uppercase tracking-wider font-bold font-mono">Hari Ini</p>
                        <p class="text-xs font-bold text-white mt-0.5">{{ today()->locale('id')->translatedFormat('d F Y') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Section 1: Realtime Stats (All Branches + TOTAL) -->
    <div class="space-y-4">
        <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 flex items-center justify-center">
                <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
            </div>
            <div>
                <h3 class="text-base font-bold text-slate-900 dark:text-white">Realtime Hari Ini</h3>
                <p class="text-slate-500 dark:text-slate-400 text-xs mt-0.5">
                    @if($selectedBranchId && ($currentBranch = $activeBranches->firstWhere('id', $selectedBranchId)))
                        Performa stok dan penjualan hari ini untuk {{ $currentBranch->name }}
                    @else
                        Perbandingan performa stok dan penjualan hari ini antar cabang
                    @endif
                </p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Realtime Stock Chart -->
            <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm p-6">
                <h4 class="text-sm font-bold text-slate-800 dark:text-slate-200 mb-4 flex items-center gap-2">
                    <span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
                    Grafik Stok Realtime (Stok awal, Terjual, Sisa)
                </h4>
                <div class="h-80" x-data="realtimeStockChart({{ json_encode($realtimeData) }})" x-init="init()">
                    <canvas x-ref="chart"></canvas>
                </div>
            </div>

            <!-- Realtime Sales Chart -->
            <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm p-6">
                <h4 class="text-sm font-bold text-slate-800 dark:text-slate-200 mb-4 flex items-center gap-2">
                    <span class="w-2.5 h-2.5 rounded-full bg-indigo-500"></span>
                    Grafik Penjualan Realtime (Nominal Rupiah)
                </h4>
                <div class="h-80" x-data="realtimeSalesChart({{ json_encode($realtimeData) }})" x-init="init()">
                    <canvas x-ref="chart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Section 2: Historical & Filtering -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm p-6 space-y-6">
        <!-- Filter Header -->
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-slate-100 dark:border-slate-700/60 pb-6">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-orange-50 dark:bg-orange-950/40 text-orange-600 dark:text-orange-400 flex items-center justify-center">
                    <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-base font-bold text-slate-900 dark:text-white">History</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs mt-0.5">Riwayat tren stok dan penjualan berdasarkan periode dan kategori ({{ \Illuminate\Support\Str::title($label) }})</p>
                </div>
            </div>

            <!-- Dynamic Form Filter -->
            <form method="GET" action="{{ route('dashboard') }}" class="flex flex-col sm:flex-row items-center gap-3 w-full md:w-auto">
                <input type="hidden" name="branch_id" value="{{ $selectedBranchId }}">
                <div class="w-full sm:w-48">
                    <label for="sales_category_id" class="sr-only">Kategori</label>
                    <select id="sales_category_id" name="sales_category_id" onchange="this.form.submit()" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-xs font-semibold text-slate-700 dark:text-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all">
                        <option value="">Semua Kategori</option>
                        @foreach($categoriesList as $cat)
                        <option value="{{ $cat->id }}" @selected($selectedCategoryId === $cat->id)>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="w-full sm:w-48">
                    <label for="sales_range" class="sr-only">Periode</label>
                    <select id="sales_range" name="sales_range" onchange="this.form.submit()" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-xs font-semibold text-slate-700 dark:text-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all">
                        <option value="today" @selected($salesRange === 'today')>Hari Ini</option>
                        <option value="7d" @selected($salesRange === '7d')>7 Hari Terakhir</option>
                        <option value="30d" @selected($salesRange === '30d')>30 Hari Terakhir</option>
                        <option value="month" @selected($salesRange === 'month')>Bulan Ini</option>
                        <option value="year" @selected($salesRange === 'year')>Tahun Ini</option>
                    </select>
                </div>
            </form>
        </div>

        <!-- Historical Split Charts -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Historical Stock Chart -->
            <div>
                <h4 class="text-sm font-bold text-slate-800 dark:text-slate-200 mb-3 flex items-center gap-2">
                    <span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
                    Grafik Riwayat Stok (Stok awal, Terjual, Sisa)
                </h4>
                <div class="h-80" x-data="historyStockChart({{ json_encode($historyChartData) }})" x-init="init()">
                    <canvas x-ref="chart"></canvas>
                </div>
            </div>

            <!-- Historical Sales Chart -->
            <div>
                <h4 class="text-sm font-bold text-slate-800 dark:text-slate-200 mb-3 flex items-center gap-2">
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                    Grafik Riwayat Penjualan (Nominal Rupiah)
                </h4>
                <div class="h-80" x-data="historySalesChart({{ json_encode($historyChartData) }})" x-init="init()">
                    <canvas x-ref="chart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Section 3: Rankings Produk -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 10 Besar Produk Terbaik -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm overflow-hidden flex flex-col hover:shadow-md transition-shadow">
            <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700/80 bg-slate-50/50 dark:bg-slate-800/50">
                <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-lg bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400 flex items-center justify-center font-bold text-sm">#</div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900 dark:text-white">10 Besar Produk Terbaik (berdasarkan jumlah pax terjual)</h3>
                        <p class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">Peringkat produk dengan penjualan tertinggi dalam periode terpilih</p>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto flex-1">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50/70 dark:bg-slate-900/40 text-slate-500 dark:text-slate-400 border-b border-slate-100 dark:border-slate-800 font-semibold">
                        <tr>
                            <th class="px-5 py-3 w-10 text-center">No</th>
                            <th class="px-5 py-3">Nama Menu</th>
                            <th class="px-5 py-3">Mitra</th>
                            <th class="px-5 py-3 text-center">Jumlah Terjual</th>
                            <th class="px-5 py-3">Kategori</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60">
                        @forelse($bestProducts as $index => $item)
                        <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20 transition-colors">
                            <td class="px-5 py-3.5 text-slate-400 dark:text-slate-500 text-center font-semibold font-mono">{{ $index + 1 }}</td>
                            <td class="px-5 py-3.5 font-bold text-slate-800 dark:text-slate-100">{{ $item->product_name }}</td>
                            <td class="px-5 py-3.5 text-slate-600 dark:text-slate-400">{{ $item->partner_name ?? '-' }}</td>
                            <td class="px-5 py-3.5 text-emerald-600 dark:text-emerald-400 text-center font-extrabold font-mono">{{ number_format($item->total_qty) }} Pax</td>
                            <td class="px-5 py-3.5 text-slate-500 dark:text-slate-400 font-medium"><span class="px-2 py-0.5 bg-slate-100 dark:bg-slate-700 rounded text-[10px]">{{ $item->category_name ?? '-' }}</span></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-slate-400 dark:text-slate-500 font-medium">Belum ada data penjualan produk.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 10 Besar Produk Terbawah -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm overflow-hidden flex flex-col hover:shadow-md transition-shadow">
            <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700/80 bg-slate-50/50 dark:bg-slate-800/50">
                <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-lg bg-red-50 dark:bg-red-950/40 text-red-600 dark:text-red-400 flex items-center justify-center font-bold text-sm">#</div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900 dark:text-white">10 Besar Produk Terbawah (berdasarkan jumlah pax terjual)</h3>
                        <p class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">Peringkat produk dengan penjualan terendah dalam periode terpilih</p>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto flex-1">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50/70 dark:bg-slate-900/40 text-slate-500 dark:text-slate-400 border-b border-slate-100 dark:border-slate-800 font-semibold">
                        <tr>
                            <th class="px-5 py-3 w-10 text-center">No</th>
                            <th class="px-5 py-3">Nama Menu</th>
                            <th class="px-5 py-3">Mitra</th>
                            <th class="px-5 py-3 text-center">Jumlah Terjual</th>
                            <th class="px-5 py-3">Kategori</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60">
                        @forelse($worstProducts as $index => $item)
                        <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20 transition-colors">
                            <td class="px-5 py-3.5 text-slate-400 dark:text-slate-500 text-center font-semibold font-mono">{{ $index + 1 }}</td>
                            <td class="px-5 py-3.5 font-bold text-slate-800 dark:text-slate-100">{{ $item->product_name }}</td>
                            <td class="px-5 py-3.5 text-slate-600 dark:text-slate-400">{{ $item->partner_name ?? '-' }}</td>
                            <td class="px-5 py-3.5 text-red-600 dark:text-red-400 text-center font-extrabold font-mono">{{ number_format($item->total_qty) }} Pax</td>
                            <td class="px-5 py-3.5 text-slate-500 dark:text-slate-400 font-medium"><span class="px-2 py-0.5 bg-slate-100 dark:bg-slate-700 rounded text-[10px]">{{ $item->category_name ?? '-' }}</span></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-slate-400 dark:text-slate-500 font-medium">Belum ada data produk.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Section 4: Rankings Mitra -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 10 Besar Mitra Penjualan Terbaik -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm overflow-hidden flex flex-col hover:shadow-md transition-shadow">
            <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700/80 bg-slate-50/50 dark:bg-slate-800/50">
                <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-lg bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400 flex items-center justify-center font-bold text-sm">#</div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900 dark:text-white">10 Besar Mitra penjualan terbaik</h3>
                        <p class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">Peringkat mitra dengan total penjualan nominal tertinggi dalam periode terpilih</p>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto flex-1">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50/70 dark:bg-slate-900/40 text-slate-500 dark:text-slate-400 border-b border-slate-100 dark:border-slate-800 font-semibold">
                        <tr>
                            <th class="px-5 py-3 w-10 text-center">No</th>
                            <th class="px-5 py-3">Nama Mitra</th>
                            <th class="px-5 py-3 text-center">Jumlah produk</th>
                            <th class="px-5 py-3 text-right">Total penjualan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60">
                        @forelse($bestPartners as $index => $item)
                        <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20 transition-colors">
                            <td class="px-5 py-3.5 text-slate-400 dark:text-slate-500 text-center font-semibold font-mono">{{ $index + 1 }}</td>
                            <td class="px-5 py-3.5 font-bold text-slate-800 dark:text-slate-100">{{ $item->partner_name }}</td>
                            <td class="px-5 py-3.5 text-slate-600 dark:text-slate-300 text-center font-semibold">{{ number_format($item->total_qty) }} Pax</td>
                            <td class="px-5 py-3.5 text-emerald-600 dark:text-emerald-400 text-right font-extrabold font-mono">Rp {{ number_format($item->total_sales, 0, ',', '.') }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-12 text-center text-slate-400 dark:text-slate-500 font-medium">Belum ada data penjualan mitra.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 10 Besar Mitra Penjualan Terbawah -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm overflow-hidden flex flex-col hover:shadow-md transition-shadow">
            <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700/80 bg-slate-50/50 dark:bg-slate-800/50">
                <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-lg bg-red-50 dark:bg-red-950/40 text-red-600 dark:text-red-400 flex items-center justify-center font-bold text-sm">#</div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900 dark:text-white">10 Besar Mitra penjualan terbawah</h3>
                        <p class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">Peringkat mitra dengan total penjualan nominal terendah dalam periode terpilih</p>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto flex-1">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50/70 dark:bg-slate-900/40 text-slate-500 dark:text-slate-400 border-b border-slate-100 dark:border-slate-800 font-semibold">
                        <tr>
                            <th class="px-5 py-3 w-10 text-center">No</th>
                            <th class="px-5 py-3">Nama Mitra</th>
                            <th class="px-5 py-3 text-center">Jumlah produk</th>
                            <th class="px-5 py-3 text-right">Total penjualan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60">
                        @forelse($worstPartners as $index => $item)
                        <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20 transition-colors">
                            <td class="px-5 py-3.5 text-slate-400 dark:text-slate-500 text-center font-semibold font-mono">{{ $index + 1 }}</td>
                            <td class="px-5 py-3.5 font-bold text-slate-800 dark:text-slate-100">{{ $item->partner_name }}</td>
                            <td class="px-5 py-3.5 text-slate-600 dark:text-slate-300 text-center font-semibold">{{ number_format($item->total_qty) }} Pax</td>
                            <td class="px-5 py-3.5 text-red-600 dark:text-red-400 text-right font-extrabold font-mono">Rp {{ number_format($item->total_sales, 0, ',', '.') }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-12 text-center text-slate-400 dark:text-slate-500 font-medium">Belum ada data mitra.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Section 5: Rankings per Kategori -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 5 Besar Produk per Kategori Terbaik -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm overflow-hidden flex flex-col hover:shadow-md transition-shadow">
            <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700/80 bg-slate-50/50 dark:bg-slate-800/50">
                <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-lg bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400 flex items-center justify-center font-bold text-sm">#</div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900 dark:text-white">5 Besar produk terbaik per kategori</h3>
                        <p class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">Peringkat produk terlaris berdasarkan kategori terpilih</p>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto flex-1">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50/70 dark:bg-slate-900/40 text-slate-500 dark:text-slate-400 border-b border-slate-100 dark:border-slate-800 font-semibold">
                        <tr>
                            <th class="px-5 py-3 w-10 text-center">No</th>
                            <th class="px-5 py-3">Nama Menu</th>
                            <th class="px-5 py-3">Mitra</th>
                            <th class="px-5 py-3 text-center">Jumlah Terjual</th>
                            <th class="px-5 py-3">Kategori</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60">
                        @forelse($bestCategoryProducts as $index => $item)
                        <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20 transition-colors">
                            <td class="px-5 py-3.5 text-slate-400 dark:text-slate-500 text-center font-semibold font-mono">{{ $index + 1 }}</td>
                            <td class="px-5 py-3.5 font-bold text-slate-800 dark:text-slate-100">{{ $item->product_name }}</td>
                            <td class="px-5 py-3.5 text-slate-600 dark:text-slate-400">{{ $item->partner_name ?? '-' }}</td>
                            <td class="px-5 py-3.5 text-emerald-600 dark:text-emerald-400 text-center font-extrabold font-mono">{{ number_format($item->total_qty) }} Pax</td>
                            <td class="px-5 py-3.5 text-slate-500 dark:text-slate-400 font-medium"><span class="px-2 py-0.5 bg-slate-100 dark:bg-slate-700 rounded text-[10px]">{{ $item->category_name ?? '-' }}</span></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-slate-400 dark:text-slate-500 font-medium">Belum ada data produk untuk kategori ini.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 5 Besar Produk per Kategori Terbawah -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm overflow-hidden flex flex-col hover:shadow-md transition-shadow">
            <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700/80 bg-slate-50/50 dark:bg-slate-800/50">
                <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-lg bg-red-50 dark:bg-red-950/40 text-red-600 dark:text-red-400 flex items-center justify-center font-bold text-sm">#</div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900 dark:text-white">5 Besar produk terbawah per kategori</h3>
                        <p class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">Peringkat produk terendah berdasarkan kategori terpilih</p>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto flex-1">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50/70 dark:bg-slate-900/40 text-slate-500 dark:text-slate-400 border-b border-slate-100 dark:border-slate-800 font-semibold">
                        <tr>
                            <th class="px-5 py-3 w-10 text-center">No</th>
                            <th class="px-5 py-3">Nama Menu</th>
                            <th class="px-5 py-3">Mitra</th>
                            <th class="px-5 py-3 text-center">Jumlah Terjual</th>
                            <th class="px-5 py-3">Kategori</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60">
                        @forelse($worstCategoryProducts as $index => $item)
                        <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20 transition-colors">
                            <td class="px-5 py-3.5 text-slate-400 dark:text-slate-500 text-center font-semibold font-mono">{{ $index + 1 }}</td>
                            <td class="px-5 py-3.5 font-bold text-slate-800 dark:text-slate-100">{{ $item->product_name }}</td>
                            <td class="px-5 py-3.5 text-slate-600 dark:text-slate-400">{{ $item->partner_name ?? '-' }}</td>
                            <td class="px-5 py-3.5 text-red-600 dark:text-red-400 text-center font-extrabold font-mono">{{ number_format($item->total_qty) }} Pax</td>
                            <td class="px-5 py-3.5 text-slate-500 dark:text-slate-400 font-medium"><span class="px-2 py-0.5 bg-slate-100 dark:bg-slate-700 rounded text-[10px]">{{ $item->category_name ?? '-' }}</span></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-slate-400 dark:text-slate-500 font-medium">Belum ada data produk untuk kategori ini.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    // Custom plugin to draw values on top of bars
    const barLabelsPlugin = {
        id: 'barLabels',
        afterDatasetsDraw(chart, args, options) {
            const { ctx } = chart;
            ctx.save();
            chart.data.datasets.forEach((dataset, i) => {
                const meta = chart.getDatasetMeta(i);
                if (meta.type !== 'bar') return;
                
                const isCurrency = dataset.isCurrency || false;

                meta.data.forEach((bar, index) => {
                    const val = dataset.data[index];
                    if (val > 0) {
                        ctx.fillStyle = document.documentElement.classList.contains('dark') ? '#cbd5e1' : '#475569';
                        ctx.font = 'bold 9px sans-serif';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        
                        let formatted = isCurrency
                            ? (val >= 1000000 ? (val / 1000000).toLocaleString('id-ID', { maximumFractionDigits: 1 }) + ' Jt' : 'Rp ' + val.toLocaleString('id-ID'))
                            : val.toLocaleString('id-ID');
                        ctx.fillText(formatted, bar.x, bar.y - 2);
                    }
                });
            });
            ctx.restore();
        }
    };

    function realtimeStockChart(rawData) {
        return {
            chart: null,
            init() {
                if (!this.$refs.chart || typeof Chart === 'undefined') return;

                const existingChart = Chart.getChart(this.$refs.chart);
                if (existingChart) existingChart.destroy();

                const ctx = this.$refs.chart.getContext('2d');
                
                const labels = rawData.map(item => item.name);
                const stokAwal = rawData.map(item => item.stok_awal);
                const terjual = rawData.map(item => item.terjual);
                const sisa = rawData.map(item => item.sisa);

                this.chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'Stok awal',
                                data: stokAwal,
                                backgroundColor: '#3b82f6', // Blue
                                borderRadius: 6,
                            },
                            {
                                label: 'Terjual',
                                data: terjual,
                                backgroundColor: '#10b981', // Emerald
                                borderRadius: 6,
                            },
                            {
                                label: 'Sisa',
                                data: sisa,
                                backgroundColor: '#f59e0b', // Amber/Orange
                                borderRadius: 6,
                            }
                        ]
                    },
                    plugins: [barLabelsPlugin],
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                                labels: {
                                    font: { size: 11, weight: 'bold' },
                                    color: document.documentElement.classList.contains('dark') ? '#94a3b8' : '#475569'
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(15, 23, 42, 0.95)',
                                padding: 12,
                                cornerRadius: 12,
                                titleFont: { size: 12, weight: 'bold' },
                                bodyFont: { size: 11 },
                                callbacks: {
                                    label: function (context) {
                                        let label = context.dataset.label || '';
                                        let value = context.raw;
                                        return `${label}: ${value.toLocaleString('id-ID')} Pcs`;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Jumlah Stok (Pcs)',
                                    color: '#94a3b8',
                                    font: { size: 10, weight: 'bold' }
                                },
                                grid: {
                                    color: document.documentElement.classList.contains('dark') ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
                                },
                                ticks: {
                                    color: '#94a3b8',
                                    font: { size: 10 }
                                }
                            },
                            x: {
                                grid: { display: false },
                                ticks: {
                                    color: '#94a3b8',
                                    font: { size: 11, weight: 'bold' }
                                }
                            }
                        }
                    }
                });
            }
        };
    }

    function realtimeSalesChart(rawData) {
        return {
            chart: null,
            init() {
                if (!this.$refs.chart || typeof Chart === 'undefined') return;

                const existingChart = Chart.getChart(this.$refs.chart);
                if (existingChart) existingChart.destroy();

                const ctx = this.$refs.chart.getContext('2d');
                
                const labels = rawData.map(item => item.name);
                const penjualan = rawData.map(item => item.penjualan);

                this.chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'Penjualan',
                                data: penjualan,
                                backgroundColor: '#6366f1', // Indigo
                                borderRadius: 6,
                                isCurrency: true,
                            }
                        ]
                    },
                    plugins: [barLabelsPlugin],
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                                labels: {
                                    font: { size: 11, weight: 'bold' },
                                    color: document.documentElement.classList.contains('dark') ? '#94a3b8' : '#475569'
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(15, 23, 42, 0.95)',
                                padding: 12,
                                cornerRadius: 12,
                                titleFont: { size: 12, weight: 'bold' },
                                bodyFont: { size: 11 },
                                callbacks: {
                                    label: function (context) {
                                        let value = context.raw;
                                        return `Penjualan: Rp ${value.toLocaleString('id-ID')}`;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Nominal Penjualan (Rupiah)',
                                    color: '#94a3b8',
                                    font: { size: 10, weight: 'bold' }
                                },
                                grid: {
                                    color: document.documentElement.classList.contains('dark') ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
                                },
                                ticks: {
                                    color: '#94a3b8',
                                    font: { size: 10 },
                                    callback: function (value) {
                                        if (value >= 1000000) {
                                            return 'Rp ' + (value / 1000000).toLocaleString('id-ID') + ' Jt';
                                        }
                                        return 'Rp ' + value.toLocaleString('id-ID');
                                    }
                                }
                            },
                            x: {
                                grid: { display: false },
                                ticks: {
                                    color: '#94a3b8',
                                    font: { size: 11, weight: 'bold' }
                                }
                            }
                        }
                    }
                });
            }
        };
    }

    function historyStockChart(rawData) {
        return {
            chart: null,
            init() {
                if (!this.$refs.chart || typeof Chart === 'undefined') return;

                const existingChart = Chart.getChart(this.$refs.chart);
                if (existingChart) existingChart.destroy();

                const ctx = this.$refs.chart.getContext('2d');
                
                this.chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: rawData.labels,
                        datasets: [
                            {
                                label: 'Stok awal',
                                data: rawData.stok_awal,
                                borderColor: '#3b82f6', // Blue
                                backgroundColor: 'transparent',
                                borderWidth: 2.5,
                                tension: 0.35,
                                pointRadius: 3.5,
                                pointBackgroundColor: '#3b82f6',
                            },
                            {
                                label: 'Terjual',
                                data: rawData.terjual,
                                borderColor: '#10b981', // Emerald Green
                                backgroundColor: 'transparent',
                                borderWidth: 2.5,
                                tension: 0.35,
                                pointRadius: 3.5,
                                pointBackgroundColor: '#10b981',
                            },
                            {
                                label: 'Sisa',
                                data: rawData.sisa,
                                borderColor: '#f59e0b', // Amber
                                backgroundColor: 'transparent',
                                borderWidth: 2.5,
                                tension: 0.35,
                                pointRadius: 3.5,
                                pointBackgroundColor: '#f59e0b',
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                                labels: {
                                    font: { size: 11, weight: 'bold' },
                                    color: document.documentElement.classList.contains('dark') ? '#94a3b8' : '#475569'
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(15, 23, 42, 0.95)',
                                padding: 12,
                                cornerRadius: 12,
                                callbacks: {
                                    label: function (context) {
                                        let label = context.dataset.label || '';
                                        let value = context.raw;
                                        return `${label}: ${value.toLocaleString('id-ID')} Pcs`;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Jumlah Stok (Pcs)',
                                    color: '#94a3b8',
                                    font: { size: 10, weight: 'bold' }
                                },
                                grid: {
                                    color: document.documentElement.classList.contains('dark') ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
                                },
                                ticks: {
                                    color: '#94a3b8',
                                    font: { size: 10 }
                                }
                            },
                            x: {
                                grid: { display: false },
                                ticks: {
                                    color: '#94a3b8',
                                    font: { size: 10 }
                                }
                            }
                        }
                    }
                });
            }
        };
    }

    function historySalesChart(rawData) {
        return {
            chart: null,
            init() {
                if (!this.$refs.chart || typeof Chart === 'undefined') return;

                const existingChart = Chart.getChart(this.$refs.chart);
                if (existingChart) existingChart.destroy();

                const ctx = this.$refs.chart.getContext('2d');

                // Create gradient background
                const gradient = ctx.createLinearGradient(0, 0, 0, 300);
                gradient.addColorStop(0, 'rgba(16, 185, 129, 0.25)');
                gradient.addColorStop(1, 'rgba(16, 185, 129, 0.0)');
                
                this.chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: rawData.labels,
                        datasets: [
                            {
                                label: 'Penjualan',
                                data: rawData.penjualan,
                                borderColor: '#10b981', // Emerald Green
                                backgroundColor: gradient,
                                fill: true,
                                borderWidth: 3,
                                tension: 0.35,
                                pointRadius: 4,
                                pointBackgroundColor: '#10b981',
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                                labels: {
                                    font: { size: 11, weight: 'bold' },
                                    color: document.documentElement.classList.contains('dark') ? '#94a3b8' : '#475569'
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(15, 23, 42, 0.95)',
                                padding: 12,
                                cornerRadius: 12,
                                callbacks: {
                                    label: function (context) {
                                        let value = context.raw;
                                        return `Penjualan: Rp ${value.toLocaleString('id-ID')}`;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Penjualan (Rupiah)',
                                    color: '#94a3b8',
                                    font: { size: 10, weight: 'bold' }
                                },
                                grid: {
                                    color: document.documentElement.classList.contains('dark') ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
                                },
                                ticks: {
                                    color: '#94a3b8',
                                    font: { size: 10 },
                                    callback: function(value) {
                                        if (value >= 1000000) {
                                            return 'Rp ' + (value / 1000000).toLocaleString('id-ID') + ' Jt';
                                        }
                                        return 'Rp ' + value.toLocaleString('id-ID');
                                    }
                                }
                            },
                            x: {
                                grid: { display: false },
                                ticks: {
                                    color: '#94a3b8',
                                    font: { size: 10 }
                                }
                            }
                        }
                    }
                });
            }
        };
    }
</script>
@endpush