<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - Ryll Store</title>
    <link rel="icon" type="image/webp" href="{{ asset('images/ryll.webp') }}">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .font-orbitron { font-family: 'Orbitron', sans-serif; }
        body { 
            background: linear-gradient(135deg, #000000 0%, #0a0a1f 50%, #000000 100%);
            background-attachment: fixed;
        }
        
        /* Glass Card with Glow */
        .glass-card {
            background: rgba(17, 24, 39, 0.7);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(34, 211, 238, 0.2);
            transition: all 0.3s ease;
        }
        
        .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 40px rgba(6, 182, 212, 0.4);
            border-color: rgba(34, 211, 238, 0.5);
        }
        
        /* Nav Link */
        .nav-link { 
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .nav-link::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 3px;
            background: linear-gradient(to bottom, #06b6d4, #3b82f6);
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }
        
        .nav-link:hover::before,
        .nav-link.active::before {
            transform: scaleY(1);
        }
        
        .nav-link:hover {
            background: rgba(6, 182, 212, 0.1);
            padding-left: 1.2rem;
        }
        
        .nav-link.active {
            background: linear-gradient(90deg, rgba(6, 182, 212, 0.2) 0%, transparent 100%);
            color: #06b6d4;
            font-weight: 600;
        }
        
        /* Stat Number Animation */
        @keyframes countUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .stat-number {
            animation: countUp 0.6s ease-out;
        }
        
        /* Table Row Hover */
        tbody tr {
    transition: background 0.2s ease;
}

tbody tr:hover {
    background: rgba(6, 182, 212, 0.08);
}

tbody td:first-child {
    position: relative;
}

tbody tr:hover td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, #06b6d4, #3b82f6);
    border-radius: 2px;
}

        
        /* Status Badge Pulse */
        .status-badge {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }
        
        /* Glow Effect */
        .glow-cyan {
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
        }
        
        .glow-green {
            box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
        }
        
        .glow-yellow {
            box-shadow: 0 0 20px rgba(234, 179, 8, 0.5);
        }
        
        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #1a1a2e; }
        ::-webkit-scrollbar-thumb { 
            background: linear-gradient(to bottom, #06b6d4, #3b82f6);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover { background: #06b6d4; }
        
        /* Sidebar Animation */
        .sidebar-enter {
            animation: slideIn 0.3s ease-out;
        }
        
        @keyframes slideIn {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        /* Loading Shimmer */
        @keyframes shimmer {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
        }
        
        .shimmer {
            background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent);
            background-size: 1000px 100%;
            animation: shimmer 2s infinite;
        }
        
        [x-cloak] { display: none !important; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>
<body class="text-white" x-data="{ sidebarOpen: window.innerWidth >= 1024 }" 
      x-init="window.addEventListener('resize', () => { sidebarOpen = window.innerWidth >= 1024; })">

    <!-- Top Navbar -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-xl border-b border-cyan-500/30">
        <div class="px-4 h-16 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <button @click="sidebarOpen = !sidebarOpen" 
                        class="text-cyan-400 hover:text-cyan-300 transition-all hover:scale-110">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            <a href="/" class="flex items-center gap-3">
                <img src="{{ asset('images/ryll.webp') }}" alt="RYLL STORE" class="h-12 w-auto">
                <span class="text-xl font-bold font-orbitron hidden md:block">RYLL STORE</span>
            </a>
            </div>
            
            <div class="flex items-center gap-4">
                <!-- User Menu -->
                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open" 
                            class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-800/50 transition-all group">
                        <div class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-full flex items-center justify-center shadow-lg group-hover:shadow-cyan-500/50 transition-shadow">
                            <span class="text-sm font-bold">{{ Auth::check() ? substr(Auth::user()->name, 0, 1) : 'A' }}</span>
                        </div>
    <div class="hidden md:block text-left">
    <p class="text-sm font-semibold text-white">
        {{ Auth::user()->name }}
    </p>
    <p class="text-xs text-cyan-400">
        {{ ucfirst(Auth::user()->role) }}
    </p>
</div>
                        <i class="fas fa-chevron-down text-xs text-gray-400 transform group-hover:rotate-180 transition-transform"></i>
                    </button>
                    
                    <div x-show="open" @click.away="open = false" x-transition x-cloak
                         class="absolute right-0 mt-2 w-48 bg-gray-800/95 backdrop-blur-xl rounded-xl shadow-2xl border border-cyan-500/30 py-2 overflow-hidden">
                        <a href="{{ route('account.profile') }}" class="w-full text-left px-4 py-2.5 text-sm text-gray-300 hover:bg-cyan-500/20 hover:text-cyan-400 transition-all flex items-center gap-2">
                            <i class="fas fa-user"></i>
                            <span>Profile</span>
                        </a>
                        <hr class="my-2 border-gray-700">
                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="w-full text-left px-4 py-2.5 text-sm text-red-400 hover:bg-red-500/20 transition-all flex items-center gap-2">
                                <i class="fas fa-sign-out-alt"></i>
                                <span>Logout</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Sidebar -->
    <aside x-show="sidebarOpen" x-transition
           class="sidebar-enter fixed left-0 top-16 bottom-0 w-64 bg-gray-900/95 backdrop-blur-xl border-r border-cyan-500/30 z-40 overflow-y-auto">
        <nav class="p-4 space-y-2">
            <a href="{{ route('account.dashboard') }}" class="nav-link active flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300">
                <i class="fas fa-chart-line w-5 text-cyan-400"></i>
                <span class="font-medium">Dashboard</span>
            </a>
            <a href="{{ route('account.products.index') }}" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300">
                <i class="fas fa-gamepad w-5 text-purple-400"></i>
                <span class="font-medium">Products</span>
            </a>
            <a href="{{ route('account.categories.index') }}" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300">
                <i class="fas fa-folder w-5 text-yellow-400"></i>
                <span class="font-medium">Categories</span>
            </a>
            <a href="{{ route('account.reviews.index') }}" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300">
                <i class="fas fa-star w-5 text-yellow-400"></i>
                <span class="font-medium">Manage Reviews</span>
            </a>
            <a href="{{ route('account.vouchers.index') }}" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 hover:bg-cyan-500/20 transition">
            <i class="fas fa-ticket w-5 text-purple-400"></i>
            <span class="font-medium">Manage Vouchers</span>
            </a>
 @if(Auth::user()->role === 'admin')
    <a href="{{ route('account.users.index') }}" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition">
        <i class="fas fa-users-cog"></i>
        <span>User Management</span>
    </a>
@endif
            <hr class="my-4 border-gray-800">
            <a href="{{ route('home') }}" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300">
                <i class="fas fa-store w-5 text-green-400"></i>
                <span class="font-medium">Back to Store</span>
            </a>
        </nav>
        
        <!-- API Balance Card -->
        <div class="p-4 mx-4 mb-4 bg-gradient-to-br from-cyan-900/40 to-blue-900/40 rounded-xl border border-cyan-500/30 shadow-lg hover:shadow-cyan-500/30 transition-shadow">
            <div class="flex items-center gap-2 mb-2">
                <i class="fas fa-wallet text-cyan-400"></i>
                <p class="text-xs text-gray-400">API Balance</p>
            </div>
            <p class="text-2xl font-bold text-cyan-400 font-orbitron">Rp {{ number_format($apiBalance ?? 0, 0, ',', '.') }}</p>
            <button class="mt-3 text-xs text-cyan-400 hover:text-cyan-300 transition-colors flex items-center gap-2">
                <i class="fas fa-sync-alt"></i>
                <span>Refresh</span>
            </button>
        </div>
    </aside>

    <!-- Main Content -->
    <main :class="sidebarOpen ? 'lg:ml-64' : 'lg:ml-0'" class="pt-16 transition-all duration-300 min-h-screen">
        <div class="p-4 md:p-8">
            <!-- Welcome Section -->
 <div class="mb-8">
    <h2 class="text-3xl md:text-4xl font-bold text-white mb-2">
        Wilujeng Sumping, 
        <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600">
            {{ Auth::user()->name }}
        </span>! 👋
    </h2>
    <p class="text-gray-400">Pantau kabeh transaksi jeung daptar pesanan anjeun didieu.</p>
</div>

            <!-- Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <!-- Total Transaksi -->
                <div class="glass-card p-6 rounded-2xl border-l-4 border-l-cyan-500 relative overflow-hidden group">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-cyan-500/10 rounded-full blur-3xl group-hover:scale-150 transition-transform duration-500"></div>
                    <div class="relative z-10">
                        <div class="flex items-center justify-between mb-4">
                            <p class="text-gray-400 text-xs uppercase tracking-widest font-semibold">Total Transaksi</p>
                            <div class="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i class="fas fa-shopping-cart text-cyan-400 text-xl"></i>
                            </div>
                        </div>
                        <h3 class="text-4xl font-bold font-orbitron text-white mb-2 stat-number">{{ $today->total_transactions ?? 0 }}</h3>
                        <p class="text-xs text-gray-500 flex items-center gap-2">
                            <i class="fas fa-clock"></i>
                            <span>All Time</span>
                        </p>
                    </div>
                </div>

                <!-- Transaksi Pending -->
                <div class="glass-card p-6 rounded-2xl border-l-4 border-l-yellow-500 relative overflow-hidden group">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-yellow-500/10 rounded-full blur-3xl group-hover:scale-150 transition-transform duration-500"></div>
                    <div class="relative z-10">
                        <div class="flex items-center justify-between mb-4">
                            <p class="text-gray-400 text-xs uppercase tracking-widest font-semibold">Pending</p>
                            <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i class="fas fa-clock text-yellow-400 text-xl"></i>
                            </div>
                        </div>
                        <h3 class="text-4xl font-bold font-orbitron text-white mb-2 stat-number">{{ $today->pending_count ?? 0 }}</h3>
                        <p class="text-xs text-yellow-400 flex items-center gap-2">
                            <i class="fas fa-exclamation-circle"></i>
                            <span>Perlu diproses</span>
                        </p>
                    </div>
                </div>

                <!-- Total Revenue -->
                <div class="glass-card p-6 rounded-2xl border-l-4 border-l-green-500 relative overflow-hidden group">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-green-500/10 rounded-full blur-3xl group-hover:scale-150 transition-transform duration-500"></div>
                    <div class="relative z-10">
                        <div class="flex items-center justify-between mb-4">
                            <p class="text-gray-400 text-xs uppercase tracking-widest font-semibold">Revenue</p>
                            <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i class="fas fa-dollar-sign text-green-400 text-xl"></i>
                            </div>
                        </div>
                        <h3 class="text-2xl md:text-3xl font-bold font-orbitron text-white mb-2 stat-number">Rp {{ number_format($today->revenue ?? 0, 0, ',', '.') }}</h3>
                        <p class="text-xs text-green-400 flex items-center gap-2">
                            <i class="fas fa-arrow-up"></i>
                            <span>Profit: Rp {{ number_format($today->profit ?? 0, 0, ',', '.') }}</span>
                        </p>
                    </div>
                </div>
            </div>
<!-- Revenue Chart (7 Days) -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    
    <!-- Revenue Chart -->
    <div class="glass-card p-6 rounded-2xl">
        <div class="flex items-center justify-between mb-6">
            <h4 class="font-bold text-cyan-400 font-orbitron uppercase tracking-wider flex items-center gap-3">
                <i class="fas fa-chart-line"></i>
                <span>Revenue (7 Hari)</span>
            </h4>
            <button onclick="window.location.reload()" class="text-xs text-cyan-400 hover:text-cyan-300 transition">
                <i class="fas fa-sync-alt"></i>
            </button>
        </div>
        
        <!-- ✅ FIXED: Wrap canvas in fixed height container -->
        <div style="position: relative; height: 250px; width: 100%;">
            <canvas id="revenueChart"></canvas>
        </div>
    </div>
    
    <!-- Top Products -->
    <div class="glass-card p-6 rounded-2xl">
        <div class="flex items-center justify-between mb-6">
            <h4 class="font-bold text-cyan-400 font-orbitron uppercase tracking-wider flex items-center gap-3">
                <i class="fas fa-trophy"></i>
                <span>Top Products</span>
            </h4>
            <span class="text-xs text-gray-500">This Month</span>
        </div>
        
        <div class="space-y-3 max-h-[250px] overflow-y-auto pr-2">
            @forelse($topProducts ?? [] as $index => $product)
            <div class="flex items-center gap-3 p-3 bg-gray-800/30 rounded-lg hover:bg-gray-800/50 transition">
                <div class="w-8 h-8 bg-gradient-to-br 
                    @if($index === 0) from-yellow-500 to-yellow-600
                    @elseif($index === 1) from-gray-400 to-gray-500
                    @elseif($index === 2) from-orange-600 to-orange-700
                    @else from-cyan-500 to-blue-600
                    @endif
                    rounded-lg flex items-center justify-center font-bold text-sm shadow-lg flex-shrink-0">
                    {{ $index + 1 }}
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-semibold text-white truncate">{{ $product->product_name }}</p>
                    <p class="text-xs text-gray-400">{{ $product->total_orders }} orders</p>
                </div>
                <div class="text-right flex-shrink-0">
                    <p class="text-xs font-bold text-cyan-400">
                        Rp {{ number_format($product->total_revenue, 0, ',', '.') }}
                    </p>
                </div>
            </div>
            @empty
            <div class="text-center py-8 text-gray-500">
                <i class="fas fa-box-open text-4xl mb-2 opacity-50"></i>
                <p class="text-sm">Belum ada data</p>
            </div>
            @endforelse
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
    <a href="{{ route('account.products.index') }}" 
       class="glass-card p-4 rounded-xl hover:scale-105 transition-transform group text-center">
        <div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mx-auto mb-3 group-hover:bg-purple-500/30 transition">
            <i class="fas fa-box text-purple-400 text-xl"></i>
        </div>
        <p class="text-sm font-semibold text-white">Kelola Produk</p>
    </a>
    
    <a href="{{ route('account.categories.index') }}" 
       class="glass-card p-4 rounded-xl hover:scale-105 transition-transform group text-center">
        <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center mx-auto mb-3 group-hover:bg-yellow-500/30 transition">
            <i class="fas fa-folder text-yellow-400 text-xl"></i>
        </div>
        <p class="text-sm font-semibold text-white">Kategori</p>
    </a>
    
    <a href="{{ route('account.vouchers.index') }}" 
       class="glass-card p-4 rounded-xl hover:scale-105 transition-transform group text-center">
        <div class="w-12 h-12 bg-pink-500/20 rounded-xl flex items-center justify-center mx-auto mb-3 group-hover:bg-pink-500/30 transition">
            <i class="fas fa-ticket text-pink-400 text-xl"></i>
        </div>
        <p class="text-sm font-semibold text-white">Voucher</p>
    </a>
    
    <button onclick="window.location.reload()" 
            class="glass-card p-4 rounded-xl hover:scale-105 transition-transform group text-center">
        <div class="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center mx-auto mb-3 group-hover:bg-cyan-500/30 transition">
            <i class="fas fa-sync-alt text-cyan-400 text-xl"></i>
        </div>
        <p class="text-sm font-semibold text-white">Refresh</p>
    </button>
</div>

            <!-- Recent Transactions -->
            <div class="glass-card rounded-2xl overflow-hidden">
                <div class="p-6 border-b border-gray-800/50 bg-gradient-to-r from-gray-900/50 to-transparent">
                    <div class="flex items-center justify-between">
                        <h4 class="font-bold text-cyan-400 font-orbitron uppercase tracking-wider flex items-center gap-3 text-lg">
                            <i class="fas fa-history"></i>
                            <span>Riwayat Transaksi Terakhir</span>
                        </h4>
                        <span class="text-xs text-cyan-400 px-3 py-1 bg-cyan-500/10 rounded-full">
                            {{ count($recentTransactions ?? []) }} Transactions
                        </span>
                    </div>
                </div>
                
<div class="overflow-x-auto">
        <table class="w-full table-fixed border-collapse">

            <!-- 🔒 KUNCI LEBAR KOLOM -->
            <colgroup>
                <col class="w-[18%]">  <!-- Invoice -->
                <col class="w-[37%]">  <!-- Produk -->
                <col class="w-[15%]">  <!-- Harga -->
                <col class="w-[12%]">  <!-- Status -->
                <col class="w-[18%]">  <!-- Tanggal -->
            </colgroup>

            <!-- HEADER -->
            <thead class="bg-gray-800/50 text-gray-400 uppercase text-xs tracking-widest">
                <tr>
                    <th class="px-4 py-4 text-left font-bold border-r border-gray-700">
                        Invoice
                    </th>
                    <th class="px-4 py-4 text-left font-bold border-r border-gray-700">
                        Produk
                    </th>
                    <th class="px-4 py-4 text-right font-bold border-r border-gray-700">
                        Harga
                    </th>
                    <th class="px-4 py-4 text-center font-bold border-r border-gray-700">
                        Status
                    </th>
                    <th class="px-4 py-4 text-right font-bold">
                        Tanggal
                    </th>
                </tr>
            </thead>

            <!-- BODY -->
            <tbody class="divide-y divide-gray-800/50">
                @foreach($recentTransactions as $transaction)
                <tr class="hover:bg-gray-800/30 transition-all">

                    <!-- INVOICE -->
                    <td class="px-4 py-4 border-r border-gray-700/50">
                        <code
                            class="block text-xs text-cyan-400 bg-cyan-500/10 px-2 py-1 rounded truncate"
                            title="{{ $transaction->invoice_number }}">
                            {{ $transaction->invoice_number }}
                        </code>
                    </td>

                    <!-- PRODUK -->
                    <td class="px-4 py-4 border-r border-gray-700/50">
                        <div class="text-sm text-white leading-snug line-clamp-2">
                            {{ $transaction->product_name }}
                        </div>
                    </td>

                    <!-- HARGA -->
                    <td class="px-4 py-4 text-right border-r border-gray-700/50 whitespace-nowrap">
                        <span class="font-semibold text-white text-sm">
                            Rp {{ number_format($transaction->total_amount,0,',','.') }}
                        </span>
                    </td>

                    <!-- STATUS -->
                    <td class="px-4 py-4 text-center border-r border-gray-700/50">
                        @if($transaction->payment_status === 'UNPAID')
                            <span class="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-lg text-xs font-bold">
                                Pending
                            </span>
                        @elseif($transaction->payment_status === 'PAID')
                            <span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-lg text-xs font-bold">
                                Success
                            </span>
                        @else
                            <span class="px-3 py-1 bg-red-500/20 text-red-400 rounded-lg text-xs font-bold">
                                Expired
                            </span>
                        @endif
                    </td>

                    <!-- TANGGAL -->
                    <td class="px-4 py-4 text-right text-xs text-gray-400 whitespace-nowrap">
                        {{ \Carbon\Carbon::parse($transaction->created_at)->format('d M Y, H:i') }}
                    </td>

                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
            </div>
        </div>
    </main>
<script>
// ✅ REVENUE CHART (FIXED - PROPER JSON ESCAPING)
const ctx = document.getElementById('revenueChart');
if (ctx) {
    try {
        // Parse JSON data safely
        const chartLabels = {!! json_encode($chartLabels ?? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']) !!};
        const chartData = {!! json_encode($chartData ?? [0, 0, 0, 0, 0, 0, 0]) !!};
        
        console.log('Chart Labels:', chartLabels);
        console.log('Chart Data:', chartData);
        
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartLabels,
                datasets: [{
                    label: 'Revenue',
                    data: chartData,
                    borderColor: 'rgb(6, 182, 212)',
                    backgroundColor: 'rgba(6, 182, 212, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: 'rgb(6, 182, 212)',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    borderWidth: 3,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                plugins: {
                    legend: { 
                        display: false 
                    },
                    tooltip: {
                        enabled: true,
                        backgroundColor: 'rgba(17, 24, 39, 0.95)',
                        titleColor: '#06b6d4',
                        titleFont: {
                            size: 14,
                            weight: 'bold'
                        },
                        bodyColor: '#fff',
                        bodyFont: {
                            size: 13
                        },
                        borderColor: '#06b6d4',
                        borderWidth: 1,
                        padding: 12,
                        displayColors: false,
                        callbacks: {
                            label: function(context) {
                                let value = context.parsed.y;
                                if (value >= 1000000) {
                                    return 'Rp ' + (value / 1000000).toFixed(2) + 'M';
                                } else if (value >= 1000) {
                                    return 'Rp ' + (value / 1000).toFixed(0) + 'K';
                                }
                                return 'Rp ' + value.toLocaleString('id-ID');
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            color: '#9ca3af',
                            font: {
                                size: 11
                            },
                            callback: function(value) {
                                if (value >= 1000000) {
                                    return 'Rp ' + (value / 1000000).toFixed(1) + 'M';
                                } else if (value >= 1000) {
                                    return 'Rp ' + (value / 1000).toFixed(0) + 'K';
                                }
                                return 'Rp ' + value;
                            }
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.05)',
                            drawBorder: false,
                        }
                    },
                    x: {
                        ticks: { 
                            color: '#9ca3af',
                            font: {
                                size: 11
                            }
                        },
                        grid: {
                            display: false,
                            drawBorder: false,
                        }
                    }
                },
                animation: {
                    duration: 750,
                    easing: 'easeOutQuart'
                }
            }
        });
        
        console.log('✅ Chart loaded successfully');
        
    } catch (error) {
        console.error('❌ Chart error:', error);
        
        // Show error in chart container
        const container = ctx.parentElement;
        container.innerHTML = '<div class="flex items-center justify-center h-full text-red-400"><i class="fas fa-exclamation-triangle mr-2"></i><span>Failed to load chart</span></div>';
    }
}
</script>
</body>
</html>