@extends('layouts.authenticated')

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

@section('page-content')
<div class="space-y-6 animate-fade-in pb-12">
    <!-- Hero 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-indigo-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(99,102,241,0.15),transparent_40%)]"></div>
        <div class="absolute -right-10 -top-10 w-40 h-40 bg-indigo-500/10 rounded-full blur-3xl"></div>
        <div class="absolute -left-10 -bottom-10 w-40 h-40 bg-emerald-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-indigo-500/20 text-indigo-300 border border-indigo-500/30 uppercase tracking-wide">
                    <span class="w-1.5 h-1.5 rounded-full bg-indigo-400 animate-pulse"></span>
                    Mitra Abba Bento
                </span>
                <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-white mt-1">{{ $partnerName }}</h1>
                <p class="text-slate-400 text-sm max-w-xl">Selamat datang kembali! Berikut adalah ringkasan penjualan, riwayat pendapatan, dan analisis stok produk Anda hari ini.</p>
            </div>
            <div class="flex items-center gap-3 bg-white/5 backdrop-blur-md px-4 py-3 rounded-2xl border border-white/10 shrink-0 self-start md:self-auto">
                <div class="w-10 h-10 rounded-xl bg-indigo-600/20 flex items-center justify-center text-indigo-400">
                    <svg class="w-5 h-5" 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-[10px] text-slate-400 uppercase tracking-wider font-bold">Tanggal Hari Ini</p>
                    <p class="text-sm font-bold text-white mt-0.5">{{ today()->locale('id')->translatedFormat('d F Y') }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Grid Layout: Ringkasan Hari Ini & Data Hari Ini -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- Left Side: Ringkasan Hari Ini -->
        <div class="xl:col-span-1">
            <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm p-6 h-full flex flex-col justify-between">
                <div>
                    <div class="flex items-center gap-2 mb-6">
                        <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="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>
                        <h3 class="text-base font-bold text-slate-900 dark:text-white">Ringkasan Hari Ini</h3>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-3.5 bg-slate-50 dark:bg-slate-900/40 rounded-2xl border border-slate-100 dark:border-slate-800/60 hover:scale-[1.01] transition-transform duration-200">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 flex items-center justify-center">
                                    <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="M12 4v16m8-8H4"></path>
                                    </svg>
                                </div>
                                <span class="text-sm text-slate-600 dark:text-slate-400 font-medium">Stok Masuk</span>
                            </div>
                            <span class="text-base font-bold text-slate-900 dark:text-white">{{ number_format($todayTotals['stock_in'], 0, ',', '.') }}</span>
                        </div>

                        <div class="flex items-center justify-between p-3.5 bg-emerald-50/50 dark:bg-emerald-950/10 rounded-2xl border border-emerald-100/50 dark:border-emerald-900/20 hover:scale-[1.01] transition-transform duration-200">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-xl bg-emerald-100/60 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
                                    <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                                    </svg>
                                </div>
                                <span class="text-sm text-emerald-800 dark:text-emerald-400 font-semibold">Stok Terjual</span>
                            </div>
                            <span class="text-base font-bold text-emerald-600 dark:text-emerald-400">{{ number_format($todayTotals['stock_sold'], 0, ',', '.') }}</span>
                        </div>

                        <div class="flex items-center justify-between p-3.5 bg-blue-50/50 dark:bg-blue-950/10 rounded-2xl border border-blue-100/50 dark:border-blue-900/20 hover:scale-[1.01] transition-transform duration-200">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-xl bg-blue-100/60 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center">
                                    <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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                                    </svg>
                                </div>
                                <span class="text-sm text-blue-800 dark:text-blue-400 font-semibold">Stok Tersedia</span>
                            </div>
                            <span class="text-base font-bold text-blue-600 dark:text-blue-400">{{ number_format($todayTotals['stock_remaining'], 0, ',', '.') }}</span>
                        </div>
                    </div>
                </div>

                <div class="mt-6 p-4 bg-gradient-to-br from-rose-500 to-red-600 text-white rounded-2xl shadow-sm border border-red-500/10 hover:scale-[1.01] transition-all duration-200">
                    <span class="text-xs text-white/80 font-bold uppercase tracking-wider">Total Pendapatan Bersih</span>
                    <h2 class="text-2xl font-black mt-1">Rp {{ number_format($todayTotals['revenue'], 0, ',', '.') }}</h2>
                    <p class="text-[10px] text-white/70 mt-1.5">*Sudah dipotong persentase fee/bagi hasil mitra</p>
                </div>
            </div>
        </div>

        <!-- Right Side: Data Hari Ini (Table) -->
        <div class="xl:col-span-2">
            <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 shadow-sm overflow-hidden h-full flex flex-col">
                <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700/80 flex justify-between items-center bg-slate-50/50 dark:bg-slate-800/50 shrink-0">
                    <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-base font-bold text-slate-900 dark:text-white">Data Hari Ini</h3>
                    </div>
                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700 dark:text-emerald-400 border border-emerald-200/40">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping"></span>
                        Live
                    </span>
                </div>
                <div class="overflow-x-auto flex-1">
                    <table class="w-full text-left">
                        <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">
                            <tr>
                                <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider w-12 text-center">No</th>
                                <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider">Nama Menu</th>
                                <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-center">Stok Masuk</th>
                                <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-center">Terjual</th>
                                <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-center">Sisa</th>
                                <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-right">Pendapatan</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60">
                            @forelse($todayMenuData as $index => $item)
                            <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400 dark:text-slate-500 text-center font-semibold font-mono">{{ $index + 1 }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-slate-800 dark:text-slate-100">{{ $item['name'] }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-300 text-center font-medium">{{ number_format($item['stock_in'], 0, ',', '.') }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400 text-center font-extrabold">{{ number_format($item['stock_sold'], 0, ',', '.') }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 dark:text-blue-400 text-center font-extrabold">{{ number_format($item['stock_remaining'], 0, ',', '.') }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-slate-800 dark:text-slate-100 text-right font-mono">Rp {{ number_format($item['revenue'], 0, ',', '.') }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="px-6 py-16 text-center text-sm text-slate-400 dark:text-slate-500 font-medium">
                                    Belum ada data menu untuk hari ini.
                                </td>
                            </tr>
                            @endforelse
                            @if($todayMenuData->isNotEmpty())
                            <tr class="bg-slate-50/50 dark:bg-slate-900/20 font-bold border-t border-slate-200 dark:border-slate-700/80">
                                <td colspan="2" class="px-6 py-4.5 text-sm text-slate-900 dark:text-white text-right">Total</td>
                                <td class="px-6 py-4.5 text-sm text-slate-900 dark:text-white text-center">{{ number_format($todayTotals['stock_in'], 0, ',', '.') }}</td>
                                <td class="px-6 py-4.5 text-sm text-emerald-600 dark:text-emerald-400 text-center">{{ number_format($todayTotals['stock_sold'], 0, ',', '.') }}</td>
                                <td class="px-6 py-4.5 text-sm text-blue-600 dark:text-blue-400 text-center">{{ number_format($todayTotals['stock_remaining'], 0, ',', '.') }}</td>
                                <td class="px-6 py-4.5 text-sm text-rose-600 dark:text-rose-400 text-right font-mono">Rp {{ number_format($todayTotals['revenue'], 0, ',', '.') }}</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Grid Layout: History Pendapatan & History Menu Terlaris (Side-by-Side) -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- History Pendapatan -->
        <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">
            <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-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-950/40 text-indigo-600 dark:text-indigo-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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-base font-bold text-slate-900 dark:text-white">History Pendapatan</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-[10px] mt-0.5">Tren riwayat stok dan pendapatan 7 hari terakhir</p>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <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">
                        <tr>
                            <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider w-24">Tanggal</th>
                            <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider">Hari</th>
                            <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-center">Masuk</th>
                            <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-center">Terjual</th>
                            <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-right">Pendapatan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60">
                        @foreach($historyData as $day)
                        <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-semibold font-mono">{{ $day['date_label'] }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400 font-medium">{{ $day['day_name'] }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-300 text-center font-medium">{{ number_format($day['stock_in'], 0, ',', '.') }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400 text-center font-bold">{{ number_format($day['stock_sold'], 0, ',', '.') }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-slate-800 dark:text-slate-100 text-right font-mono">Rp {{ number_format($day['revenue'], 0, ',', '.') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- History Menu Terlaris -->
        <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">
            <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-8 h-8 rounded-lg bg-rose-50 dark:bg-rose-950/40 text-rose-600 dark:text-rose-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="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-base font-bold text-slate-900 dark:text-white">Menu Terlaris</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-[10px] mt-0.5">Top 5 produk Anda dengan penjualan tertinggi</p>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto flex-1">
                <table class="w-full text-left">
                    <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">
                        <tr>
                            <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider w-12 text-center">No</th>
                            <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider">Nama Menu</th>
                            <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-center">Terjual</th>
                            <th class="px-6 py-3.5 text-xs font-bold uppercase tracking-wider text-right">Pendapatan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60">
                        @forelse($bestSellingProducts as $index => $prod)
                        <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400 dark:text-slate-500 text-center font-semibold font-mono">{{ $index + 1 }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-slate-800 dark:text-slate-100">{{ $prod->name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400 text-center font-bold font-mono">{{ number_format($prod->total_qty, 0, ',', '.') }} Pcs</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-slate-800 dark:text-slate-100 text-right font-mono">Rp {{ number_format($prod->total_revenue, 0, ',', '.') }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-16 text-center text-sm text-slate-400 dark:text-slate-500 font-medium">
                                Belum ada riwayat penjualan produk.
                            </td>
                        </tr>
                        @endforelse
                        @if($bestSellingProducts->isNotEmpty())
                        <tr class="bg-slate-50/50 dark:bg-slate-900/20 font-bold border-t border-slate-200 dark:border-slate-700/80">
                            <td colspan="2" class="px-6 py-4.5 text-sm text-slate-900 dark:text-white text-right">Total</td>
                            <td class="px-6 py-4.5 text-sm text-emerald-600 dark:text-emerald-400 text-center font-mono">{{ number_format($bestSellingTotals['qty'], 0, ',', '.') }} Pcs</td>
                            <td class="px-6 py-4.5 text-sm text-rose-600 dark:text-rose-400 text-right font-mono">Rp {{ number_format($bestSellingTotals['revenue'], 0, ',', '.') }}</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Sales Chart -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200/70 dark:border-slate-700/70 p-6 shadow-sm">
        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6">
            <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="M7 12l3-3 3 3 4-4M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-base font-bold text-slate-900 dark:text-white">Grafik Tren Penjualan</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-[10px] mt-0.5">
                        Periode aktif: {{ \Illuminate\Support\Str::title($salesRangeLabel ?? '7 hari terakhir') }}
                    </p>
                </div>
            </div>
            <form method="GET" action="{{ route('dashboard') }}" class="shrink-0">
                <label for="sales_range" class="sr-only">Periode grafik</label>
                <select id="sales_range"
                        name="sales_range"
                        onchange="this.form.submit()"
                        class="w-full sm:w-56 px-3.5 py-2 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-xl text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                    <option value="today" @selected(($salesRange ?? '7d') === 'today')>Hari ini</option>
                    <option value="7d" @selected(($salesRange ?? '7d') === '7d')>7 hari terakhir</option>
                    <option value="30d" @selected(($salesRange ?? '7d') === '30d')>30 hari terakhir</option>
                    <option value="month" @selected(($salesRange ?? '7d') === 'month')>Bulan ini</option>
                    <option value="year" @selected(($salesRange ?? '7d') === 'year')>Tahun ini</option>
                </select>
            </form>
        </div>
        <div x-data="salesChart({{ json_encode($salesData) }})" x-init="init()" class="h-72">
            <canvas x-ref="chart"></canvas>
        </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>
    function salesChart(data) {
        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 = data.map(item => item.label);
                const values = data.map(item => item.total);

                this.chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Penjualan',
                            data: values,
                            borderColor: '#2563eb',
                            backgroundColor: 'rgba(37, 99, 235, 0.06)',
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4,
                            pointRadius: 4,
                            pointHoverRadius: 6,
                            pointBackgroundColor: '#2563eb',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                backgroundColor: 'rgba(15, 23, 42, 0.9)',
                                padding: 12,
                                titleFont: { size: 12, weight: 'bold' },
                                bodyFont: { size: 12 },
                                borderColor: 'rgba(255, 255, 255, 0.1)',
                                borderWidth: 1,
                                cornerRadius: 10,
                                displayColors: false,
                                callbacks: {
                                    label: (context) => `Rp ${context.parsed.y.toLocaleString('id-ID')}`
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)',
                                    drawBorder: false,
                                },
                                ticks: {
                                    color: '#94a3b8',
                                    font: { size: 10 },
                                    callback: (value) => `Rp ${value.toLocaleString('id-ID')}`
                                }
                            },
                            x: {
                                grid: { display: false },
                                ticks: {
                                    color: '#94a3b8',
                                    font: { size: 10 }
                                }
                            }
                        }
                    }
                });
            },
            destroy() {
                if (this.chart) {
                    this.chart.destroy();
                    this.chart = null;
                }
            }
        }
    }
</script>
@endpush