@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
    <!-- Clean Welcome Header -->
    <div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-6 border-b border-gray-100 pb-8">
        <div class="space-y-1">
            <nav class="flex mb-2" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-2 text-[10px] font-bold uppercase tracking-wider">
                    <li><a href="{{ route('admin.dashboard') }}" class="text-gray-400 hover:text-brand transition-colors">Admin</a></li>
                    <li><i class="fas fa-chevron-right text-gray-300 text-[8px]"></i></li>
                    <li class="text-brand">Dashboard</li>
                </ol>
            </nav>
            <h1 class="text-3xl font-black text-gray-900 tracking-tight flex items-center">
                Dashboard Overview
            </h1>
            <p class="text-gray-500 font-medium text-sm">Welcome back! Here's what's happening with your store today.</p>
        </div>
        <div class="flex items-center gap-3">
            <button class="px-5 py-3 bg-emerald-600 !bg-brand text-white !text-white rounded-xl text-xs font-bold shadow-md shadow-brand/20 hover:bg-emerald-700 hover:!bg-brand/90 transition-all flex items-center group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40">
                <i class="fas fa-download mr-2 text-white/90"></i>
                Export Report
            </button>
            <a href="{{ route('admin.products.create') }}" class="inline-flex items-center px-6 py-3 bg-emerald-600 !bg-brand text-white !text-white text-xs font-bold rounded-xl shadow-lg shadow-brand/20 hover:bg-emerald-700 hover:!bg-brand/90 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40">
                <i class="fas fa-plus mr-2"></i>
                Add Product
            </a>
        </div>
    </div>

    <!-- Primary Stats -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Total Revenue (Paid) -->
        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 group">
            <div class="flex justify-between items-start mb-4">
                <div class="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i class="fas fa-wallet text-brand text-lg"></i>
                </div>
                <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-lg">
                    Paid
                </span>
            </div>
            <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Total Revenue</p>
            <h3 class="text-2xl font-black text-gray-900">{{ $currencySymbol }}{{ number_format($totalRevenue, 2) }}</h3>
        </div>

        <!-- Total Orders -->
        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 group">
            <div class="flex justify-between items-start mb-4">
                <div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i class="fas fa-shopping-cart text-blue-500 text-lg"></i>
                </div>
                <span class="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-lg">
                    {{ $todayOrders }} Today
                </span>
            </div>
            <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Total Orders</p>
            <h3 class="text-2xl font-black text-gray-900">{{ number_format($totalOrders) }}</h3>
        </div>

        <!-- Total Products -->
        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 group">
            <div class="flex justify-between items-start mb-4">
                <div class="w-12 h-12 bg-amber-50 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i class="fas fa-boxes text-amber-500 text-lg"></i>
                </div>
                <span class="text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-lg">
                    {{ $activeProducts }} Active
                </span>
            </div>
            <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Total Products</p>
            <h3 class="text-2xl font-black text-gray-900">{{ number_format($totalProducts) }}</h3>
        </div>

        <!-- Total Customers -->
        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 group">
            <div class="flex justify-between items-start mb-4">
                <div class="w-12 h-12 bg-purple-50 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i class="fas fa-users text-purple-500 text-lg"></i>
                </div>
                <span class="text-[10px] font-bold text-purple-600 bg-purple-50 px-2 py-1 rounded-lg">
                    {{ $todayNewCustomers }} Today
                </span>
            </div>
            <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Total Customers</p>
            <h3 class="text-2xl font-black text-gray-900">{{ number_format($totalCustomers) }}</h3>
        </div>
    </div>

    <!-- Today Overview -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Today Visitors</p>
                <h3 class="text-2xl font-black text-gray-900">{{ number_format($todayVisitors) }}</h3>
            </div>
            <div class="w-10 h-10 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500">
                <i class="fas fa-chart-line"></i>
            </div>
        </div>
        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Today Revenue</p>
                <h3 class="text-2xl font-black text-gray-900">{{ $currencySymbol }}{{ number_format($todayRevenue, 2) }}</h3>
            </div>
            <div class="w-10 h-10 rounded-2xl bg-emerald-50 flex items-center justify-center text-emerald-500">
                <i class="fas fa-sack-dollar"></i>
            </div>
        </div>
        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Today New Customers</p>
                <h3 class="text-2xl font-black text-gray-900">{{ number_format($todayNewCustomers) }}</h3>
            </div>
            <div class="w-10 h-10 rounded-2xl bg-purple-50 flex items-center justify-center text-purple-500">
                <i class="fas fa-user-plus"></i>
            </div>
        </div>
        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Today Processing Orders</p>
                <h3 class="text-2xl font-black text-gray-900">{{ number_format($todayProcessing) }}</h3>
            </div>
            <div class="w-10 h-10 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-500">
                <i class="fas fa-spinner"></i>
            </div>
        </div>
    </div>

    <!-- Order & Payment Status -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <span class="h-8 w-8 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-500">
                        <i class="fas fa-clock"></i>
                    </span>
                    <div>
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Pending Orders</p>
                        <h3 class="text-xl font-black text-gray-900">{{ number_format($pendingOrders) }}</h3>
                    </div>
                </div>
                <span class="text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-lg">Orders</span>
            </div>
        </div>

        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <span class="h-8 w-8 rounded-2xl bg-emerald-50 flex items-center justify-center text-emerald-500">
                        <i class="fas fa-truck"></i>
                    </span>
                    <div>
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Delivered Orders</p>
                        <h3 class="text-xl font-black text-gray-900">{{ number_format($deliveredOrders) }}</h3>
                    </div>
                </div>
                <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-lg">Orders</span>
            </div>
        </div>

        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <span class="h-8 w-8 rounded-2xl bg-rose-50 flex items-center justify-center text-rose-500">
                        <i class="fas fa-money-bill-wave"></i>
                    </span>
                    <div>
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Pending Amount</p>
                        <h3 class="text-xl font-black text-gray-900">{{ $currencySymbol }}{{ number_format($pendingAmount, 2) }}</h3>
                    </div>
                </div>
                <span class="text-[10px] font-bold text-rose-600 bg-rose-50 px-2 py-1 rounded-lg">Unpaid</span>
            </div>
        </div>

        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <span class="h-8 w-8 rounded-2xl bg-emerald-50 flex items-center justify-center text-emerald-600">
                        <i class="fas fa-check-circle"></i>
                    </span>
                    <div>
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Paid Amount</p>
                        <h3 class="text-xl font-black text-gray-900">{{ $currencySymbol }}{{ number_format($paidAmount, 2) }}</h3>
                    </div>
                </div>
                <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-lg">Paid</span>
            </div>
        </div>
        <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <span class="h-8 w-8 rounded-2xl bg-indigo-50 flex items-center justify-center text-indigo-600">
                        <i class="fas fa-user-check"></i>
                    </span>
                    <div>
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Total Visitors</p>
                        <h3 class="text-xl font-black text-gray-900">{{ number_format($totalVisitors) }}</h3>
                    </div>
                </div>
                <span class="text-[10px] font-bold text-indigo-600 bg-indigo-50 px-2 py-1 rounded-lg">Unique</span>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        <!-- Revenue & Visitor Analytics -->
        <div class="lg:col-span-2 grid grid-cols-1 xl:grid-cols-2 gap-6">
            <!-- Revenue Performance -->
            <div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-sm">
                <div class="flex items-center justify-between mb-8">
                    <div>
                        <h3 class="text-lg font-black text-gray-900 tracking-tight">Revenue Performance</h3>
                        <p class="text-gray-400 text-xs font-bold uppercase tracking-wider">Last 7 days revenue & avg order</p>
                    </div>
                    <div class="flex bg-gray-50 p-1 rounded-xl">
                        <button class="px-4 py-2 bg-white text-gray-900 text-[10px] font-bold uppercase rounded-lg shadow-sm border border-gray-100">7 Days</button>
                        <button class="px-4 py-2 text-gray-400 text-[10px] font-bold uppercase hover:text-gray-600 transition-colors">Coming Soon</button>
                    </div>
                </div>
                <div class="h-[260px] w-full">
                    <canvas id="revenueChart"></canvas>
                </div>
            </div>

            <!-- Visitor Analytics -->
            <div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-sm">
                <div class="flex items-center justify-between mb-8">
                    <div>
                        <h3 class="text-lg font-black text-gray-900 tracking-tight">Visitor Analytics</h3>
                        <p class="text-gray-400 text-xs font-bold uppercase tracking-wider">Store visits (last 7 days)</p>
                    </div>
                    <div class="flex bg-indigo-50 text-indigo-600 text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-lg items-center gap-2">
                        <span class="h-2 w-2 rounded-full bg-indigo-500"></span>
                        Live Trend
                    </div>
                </div>
                <div class="h-[260px] w-full mb-6">
                    <canvas id="visitorChart"></canvas>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 border-t border-gray-50 pt-4">
                    <div class="flex items-center justify-between px-4 py-3 rounded-2xl bg-gray-50/60">
                        <div>
                            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Today Visitors</p>
                            <p class="text-lg font-black text-gray-900">{{ number_format($todayVisitors) }}</p>
                        </div>
                        <span class="inline-flex items-center justify-center h-8 w-8 rounded-2xl bg-indigo-50 text-indigo-600">
                            <i class="fas fa-wifi"></i>
                        </span>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3 rounded-2xl bg-gray-50/60">
                        <div>
                            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Last 7 Days Visits</p>
                            <p class="text-lg font-black text-gray-900">{{ number_format($last7Visitors) }}</p>
                        </div>
                        <span class="inline-flex items-center justify-center h-8 w-8 rounded-2xl bg-emerald-50 text-emerald-600">
                            <i class="fas fa-chart-line"></i>
                        </span>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3 rounded-2xl bg-gray-50/60">
                        <div>
                            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Peak Day</p>
                            <p class="text-xs font-semibold text-gray-900">{{ $peakVisitorsLabel }}</p>
                            <p class="text-xs font-bold text-emerald-600">{{ number_format($peakVisitors) }} visitors</p>
                        </div>
                        <span class="inline-flex items-center justify-center h-8 w-8 rounded-2xl bg-amber-50 text-amber-500">
                            <i class="fas fa-bolt"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Inventory Pulse -->
        <div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-sm flex flex-col">
            <div class="mb-8">
                <h3 class="text-lg font-black text-gray-900 tracking-tight">Inventory Pulse</h3>
                <p class="text-gray-400 text-xs font-bold uppercase tracking-wider">Stock distribution</p>
            </div>
            
            <div class="relative h-56 w-56 mx-auto mb-8">
                <canvas id="categoryChart"></canvas>
                <div class="absolute inset-0 flex items-center justify-center flex-col pointer-events-none">
                    <span class="text-3xl font-black text-gray-900 tracking-tighter">{{ $totalProducts }}</span>
                    <span class="text-[9px] text-gray-400 uppercase font-bold tracking-widest">Total SKU</span>
                </div>
            </div>

            <div class="space-y-3 mt-auto">
                <div class="flex items-center justify-between p-4 rounded-2xl bg-gray-50/50 hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <div class="w-2 h-2 rounded-full bg-brand"></div>
                        <span class="text-[10px] font-bold text-gray-600 uppercase tracking-wider">Categories</span>
                    </div>
                    <span class="text-xs font-bold text-gray-900">{{ $totalCategories }}</span>
                </div>
                <div class="flex items-center justify-between p-4 rounded-2xl bg-gray-50/50 hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <div class="w-2 h-2 rounded-full bg-zinc-900"></div>
                        <span class="text-[10px] font-bold text-gray-600 uppercase tracking-wider">Sub Categories</span>
                    </div>
                    <span class="text-xs font-bold text-gray-900">{{ $totalSubCategories }}</span>
                </div>
                <div class="flex items-center justify-between p-4 rounded-2xl bg-red-50 border border-red-100">
                    <div class="flex items-center gap-3">
                        <div class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
                        <span class="text-[10px] font-bold text-red-600 uppercase tracking-wider">Low Stock</span>
                    </div>
                    <span class="text-xs font-bold text-red-600">{{ $lowStockProducts }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Orders Table -->
    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden">
        <div class="p-8 border-b border-gray-50 flex justify-between items-center">
            <div>
                <h3 class="text-lg font-black text-gray-900 tracking-tight">Recent Orders</h3>
                <p class="text-gray-400 text-xs font-bold uppercase tracking-wider">Latest store transactions</p>
            </div>
            <a href="{{ route('admin.orders.index') }}" class="text-[10px] font-bold text-brand uppercase tracking-widest hover:translate-x-1 transition-all flex items-center gap-2">
                View All Orders
                <i class="fas fa-arrow-right text-[8px]"></i>
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50/50">
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider">Order ID</th>
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider">Customer</th>
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider">Date</th>
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider">Status</th>
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider text-right">Amount</th>
                        <th class="px-8 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-wider text-center">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($recentOrders as $order)
                    <tr class="hover:bg-gray-50/30 transition-colors">
                        <td class="px-8 py-5">
                            <span class="text-xs font-bold text-gray-900">#{{ $order->id }}</span>
                        </td>
                        <td class="px-8 py-5">
                            <div class="flex items-center gap-3">
                                <div class="h-8 w-8 rounded-lg bg-gray-100 flex items-center justify-center text-[10px] font-bold text-gray-500 border border-gray-200">
                                    {{ substr($order->user->name ?? 'G', 0, 1) }}
                                </div>
                                <span class="text-xs font-semibold text-gray-900">{{ $order->user->name ?? 'Guest' }}</span>
                            </div>
                        </td>
                        <td class="px-8 py-5 text-xs text-gray-500">{{ $order->created_at->format('M d, Y') }}</td>
                        <td class="px-8 py-5">
                            @php
                                $statusClass = match($order->status) {
                                    'delivered' => 'bg-emerald-50 text-emerald-600 border-emerald-100',
                                    'processing' => 'bg-blue-50 text-blue-600 border-blue-100',
                                    'pending' => 'bg-amber-50 text-amber-600 border-amber-100',
                                    'cancelled' => 'bg-red-50 text-red-600 border-red-100',
                                    default => 'bg-gray-50 text-gray-600 border-gray-100',
                                };
                            @endphp
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-[9px] font-bold uppercase tracking-wider {{ $statusClass }} border">
                                {{ $order->status }}
                            </span>
                        </td>
                        <td class="px-8 py-5 text-right">
                            <span class="text-sm font-black text-gray-900">{{ $currencySymbol }}{{ number_format($order->total, 2) }}</span>
                        </td>
                        <td class="px-8 py-5 text-center">
                            <a href="{{ route('admin.orders.show', $order->id) }}" class="inline-flex h-8 w-8 items-center justify-center text-gray-400 hover:text-brand hover:bg-brand/5 rounded-lg transition-all">
                                <i class="fas fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-8 py-16 text-center">
                            <div class="flex flex-col items-center gap-3">
                                <i class="fas fa-inbox text-3xl text-gray-200"></i>
                                <p class="text-gray-400 text-xs font-bold uppercase tracking-wider">No recent orders</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Chart Logic -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const revenueLabels = @json($chartLabels);
            const revenueData = @json($chartRevenue);
            const visitData = @json($chartVisits);
            const avgOrderData = @json($chartAvgOrder);

            const ctxRev = document.getElementById('revenueChart').getContext('2d');
            const revenueGradient = ctxRev.createLinearGradient(0, 0, 0, 350);
            revenueGradient.addColorStop(0, 'rgba(59, 183, 126, 0.1)');
            revenueGradient.addColorStop(1, 'rgba(59, 183, 126, 0)');

            new Chart(ctxRev, {
                type: 'line',
                data: {
                    labels: revenueLabels,
                    datasets: [
                        {
                            label: 'Revenue',
                            data: revenueData,
                            borderColor: '#3BB77E',
                            backgroundColor: revenueGradient,
                            borderWidth: 3,
                            pointBackgroundColor: '#ffffff',
                            pointBorderColor: '#3BB77E',
                            pointBorderWidth: 2,
                            pointRadius: 4,
                            pointHoverRadius: 6,
                            fill: true,
                            tension: 0.4
                        },
                        {
                            label: 'Avg Order Value',
                            data: avgOrderData,
                            borderColor: '#F59E0B',
                            borderWidth: 2,
                            pointBackgroundColor: '#ffffff',
                            pointBorderColor: '#F59E0B',
                            pointBorderWidth: 2,
                            pointRadius: 3,
                            pointHoverRadius: 5,
                            fill: false,
                            tension: 0.4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: true },
                        tooltip: {
                            backgroundColor: '#1A1A1A',
                            padding: 12,
                            cornerRadius: 12,
                            titleFont: { size: 10, weight: 'bold' },
                            bodyFont: { size: 12, weight: 'bold' },
                            displayColors: true,
                            callbacks: {
                                label: function(context) {
                                    return '{{ $currencySymbol }}' + context.parsed.y.toLocaleString();
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: {
                                color: '#9CA3AF',
                                font: { size: 10, weight: '600' }
                            }
                        },
                        y: {
                            border: { display: false },
                            grid: { color: '#F3F4F6' },
                            ticks: {
                                color: '#9CA3AF',
                                font: { size: 10, weight: '600' },
                                callback: function(value) {
                                    if (value >= 1000) return '{{ $currencySymbol }}' + (value / 1000) + 'k';
                                    return '{{ $currencySymbol }}' + value;
                                }
                            }
                        }
                    }
                }
            });

            const ctxVisit = document.getElementById('visitorChart').getContext('2d');
            new Chart(ctxVisit, {
                type: 'line',
                data: {
                    labels: revenueLabels,
                    datasets: [
                        {
                            label: 'Store Visits',
                            data: visitData,
                            borderColor: '#6366F1',
                            borderWidth: 3,
                            pointBackgroundColor: '#ffffff',
                            pointBorderColor: '#6366F1',
                            pointBorderWidth: 2,
                            pointRadius: 4,
                            pointHoverRadius: 6,
                            fill: false,
                            tension: 0.4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: true },
                        tooltip: {
                            backgroundColor: '#1A1A1A',
                            padding: 12,
                            cornerRadius: 12,
                            titleFont: { size: 10, weight: 'bold' },
                            bodyFont: { size: 12, weight: 'bold' },
                            displayColors: true,
                            callbacks: {
                                label: function(context) {
                                    return context.parsed.y.toLocaleString() + ' visits';
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: {
                                color: '#9CA3AF',
                                font: { size: 10, weight: '600' }
                            }
                        },
                        y: {
                            border: { display: false },
                            grid: { color: '#F3F4F6' },
                            ticks: {
                                color: '#9CA3AF',
                                font: { size: 10, weight: '600' },
                                callback: function(value) {
                                    return value + ' visits';
                                }
                            }
                        }
                    }
                }
            });

            const ctxCat = document.getElementById('categoryChart').getContext('2d');
            new Chart(ctxCat, {
                type: 'doughnut',
                data: {
                    labels: ['Active', 'Low Stock', 'Out of Stock'],
                    datasets: [{
                        data: [{{ $activeProducts }}, {{ $lowStockProducts }}, {{ $totalProducts - $activeProducts }}],
                        backgroundColor: ['#3BB77E', '#F59E0B', '#EF4444'],
                        borderWidth: 0,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '80%',
                    plugins: {
                        legend: { display: false }
                    }
                }
            });
        });
    </script>
@endsection
