@extends('layouts.portal')

@section('title', 'Admin Dashboard — Abu Dhabi Auto Care')

@section('content')
<div class="space-y-8">
    
    <!-- Top Greeting & Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black text-white tracking-tight">Workshop Operations Dashboard</h1>
            <p class="text-xs text-slate-400 mt-1">
                Real-time overview of active vehicle painting, body repairs, quotes, and delivery schedules in Mussafah M11.
            </p>
        </div>
        <div class="flex items-center space-x-3">
            <a href="{{ route('admin.orders.create') }}" class="px-4 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs shadow-lg shadow-sky-600/30 transition flex items-center">
                <svg class="w-4 h-4 mr-1.5" 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>
                New Work Order
            </a>
            <a href="{{ route('admin.orders') }}" class="px-4 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold border border-slate-700 transition">
                All Orders
            </a>
        </div>
    </div>

    <!-- Accurate Dashboard Metric Cards (2 in-line on mobile, clickable links) -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
        <!-- Card 1: Total Orders -->
        <a href="{{ route('admin.orders') }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-sky-500/50 hover:shadow-lg transition block group">
            <div class="flex items-center justify-between">
                <span class="text-xs font-semibold text-slate-400 group-hover:text-sky-300 transition">Total Orders</span>
                <span class="p-1.5 sm:p-2 rounded-lg bg-sky-500/10 text-sky-400 group-hover:bg-sky-500 group-hover:text-white transition">
                    <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
                </span>
            </div>
            <div class="text-xl sm:text-2xl font-black text-white mt-2 group-hover:text-sky-400 transition">{{ $totalOrders }}</div>
            <span class="text-[10px] sm:text-[11px] text-slate-500 mt-1 block truncate">All registered jobs ➔</span>
        </a>

        <!-- Card 2: Active in Workshop -->
        <a href="{{ route('admin.orders', ['status' => 'in_progress']) }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-amber-500/50 hover:shadow-lg transition block group">
            <div class="flex items-center justify-between">
                <span class="text-xs font-semibold text-slate-400 group-hover:text-amber-300 transition">In Workshop</span>
                <span class="p-1.5 sm:p-2 rounded-lg bg-amber-500/10 text-amber-400 group-hover:bg-amber-500 group-hover:text-white transition">
                    <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 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                </span>
            </div>
            <div class="text-xl sm:text-2xl font-black text-amber-400 mt-2">{{ $activeInWorkshop }}</div>
            <span class="text-[10px] sm:text-[11px] text-slate-500 mt-1 block truncate">Booth, prep & sanding ➔</span>
        </a>

        <!-- Card 3: Ready for Delivery -->
        <a href="{{ route('admin.orders', ['status' => 'ready_for_delivery']) }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-emerald-500/50 hover:shadow-lg transition block group">
            <div class="flex items-center justify-between">
                <span class="text-xs font-semibold text-slate-400 group-hover:text-emerald-300 transition">Ready for Handover</span>
                <span class="p-1.5 sm:p-2 rounded-lg bg-emerald-500/10 text-emerald-400 group-hover:bg-emerald-500 group-hover:text-white transition">
                    <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="M5 13l4 4L19 7"></path></svg>
                </span>
            </div>
            <div class="text-xl sm:text-2xl font-black text-emerald-400 mt-2">{{ $readyForDelivery }}</div>
            <span class="text-[10px] sm:text-[11px] text-slate-500 mt-1 block truncate">Passed QC & ready ➔</span>
        </a>

        <!-- Card 4: Total Revenue -->
        <a href="{{ route('admin.orders', ['status' => 'completed']) }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-purple-500/50 hover:shadow-lg transition block group">
            <div class="flex items-center justify-between">
                <span class="text-xs font-semibold text-slate-400 group-hover:text-purple-300 transition">Collected Revenue</span>
                <span class="p-1.5 sm:p-2 rounded-lg bg-purple-500/10 text-purple-400 group-hover:bg-purple-500 group-hover:text-white transition">
                    <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 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>
                </span>
            </div>
            <div class="text-lg sm:text-2xl font-black text-purple-400 mt-2">AED {{ number_format($totalRevenue) }}</div>
            <span class="text-[10px] sm:text-[11px] text-slate-500 mt-1 block truncate">{{ $completedOrders }} completed jobs ➔</span>
        </a>
    </div>

    <!-- Workshop Bay Capacity Live Status Meter -->
    <div class="p-6 rounded-2xl bg-gradient-to-r from-slate-900 via-slate-900 to-sky-950/40 border border-slate-800 shadow-xl">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="space-y-1">
                <div class="flex items-center space-x-2">
                    <span class="relative flex h-2.5 w-2.5">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
                    </span>
                    <h3 class="text-sm font-bold text-white uppercase tracking-wider">Mussafah M11 Workshop Bay Capacity</h3>
                </div>
                <p class="text-xs text-slate-400">
                    Real-time spray booth, prep bay, sanding rack, and curing oven slot allocations.
                </p>
            </div>
            <div class="flex items-center space-x-6">
                <div class="text-right">
                    <span class="text-xs text-slate-400 block font-medium">Bays In Active Use</span>
                    <span class="text-lg font-black text-white font-mono">{{ $occupiedBays }} / {{ $totalBays }} Bays</span>
                </div>
                <div class="text-right">
                    <span class="text-xs text-slate-400 block font-medium">Bay Utilization</span>
                    <span class="text-lg font-black text-amber-400 font-mono">{{ $capacityPercent }}%</span>
                </div>
            </div>
        </div>
        <div class="mt-4 w-full bg-slate-800 rounded-full h-3.5 overflow-hidden p-0.5 border border-slate-700">
            <div class="h-full rounded-full transition-all duration-700 bg-gradient-to-r from-sky-500 via-amber-500 to-rose-500" style="width: {{ max(10, $capacityPercent) }}%"></div>
        </div>
        <div class="mt-3 flex items-center justify-between text-[11px] text-slate-400">
            <span>Bay 1-3: Sanding & Primer</span>
            <span>Bay 4-6: Italian Spray Booths (Active)</span>
            <span>Bay 7-8: Baking Oven & Curing</span>
            <span>Bay 9-10: Quality Control & Detailing</span>
        </div>
    </div>

    <!-- Graphics & Visual Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Chart 1: Monthly Revenue Trend Area Chart -->
        <div class="lg:col-span-2 p-5 rounded-2xl bg-slate-900 border border-slate-800 shadow-xl">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-sm font-bold text-white flex items-center">
                        <svg class="w-4 h-4 mr-2 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                        Revenue Growth & Monthly Bookings (AED)
                    </h3>
                    <p class="text-xs text-slate-400">Automotive refinishing, color changes, and body repairs</p>
                </div>
                <span class="px-2.5 py-1 rounded bg-sky-500/10 text-sky-400 text-xs font-bold border border-sky-500/20">Monthly Trajectory</span>
            </div>
            <div class="h-64 relative">
                <canvas id="revenueChart"></canvas>
            </div>
        </div>

        <!-- Chart 2: Garage Stage Distribution Donut Chart -->
        <div class="p-5 rounded-2xl bg-slate-900 border border-slate-800 shadow-xl flex flex-col justify-between">
            <div class="flex items-center justify-between mb-2">
                <div>
                    <h3 class="text-sm font-bold text-white flex items-center">
                        <svg class="w-4 h-4 mr-2 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path></svg>
                        Work Order Stages
                    </h3>
                    <p class="text-xs text-slate-400">Live breakdown of garage pipeline</p>
                </div>
            </div>
            <div class="h-56 relative flex items-center justify-center">
                <canvas id="stageChart"></canvas>
            </div>
            <div class="text-[11px] text-center text-slate-400 pt-2 border-t border-slate-800">
                Total pipeline tracked: <strong class="text-white">{{ $totalOrders }} vehicles</strong>
            </div>
        </div>
    </div>

    <!-- Chart 3: Vehicle Category Breakdown -->
    <div class="p-5 rounded-2xl bg-slate-900 border border-slate-800 shadow-xl">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-sm font-bold text-white flex items-center">
                    <svg class="w-4 h-4 mr-2 text-purple-400" 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>
                    Vehicle Category Volume in Abu Dhabi
                </h3>
                <p class="text-xs text-slate-400">Distribution across Sedan (AED 1,299), Luxury, SUV (AED 1,599), and Sports categories</p>
            </div>
            <span class="text-xs text-slate-400 font-mono">Category Analysis</span>
        </div>
        <div class="h-48 relative">
            <canvas id="categoryChart"></canvas>
        </div>
    </div>

    <!-- Middle: Recent Orders with Quick Status Changer -->
    <div class="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden shadow-xl">
        <div class="p-5 border-b border-slate-800 flex items-center justify-between">
            <div>
                <h2 class="text-sm font-bold text-white">Recent Vehicle Work Orders</h2>
                <p class="text-xs text-slate-400">Click any order to view details or change its live workshop stage</p>
            </div>
            <a href="{{ route('admin.orders') }}" class="text-xs text-sky-400 hover:underline font-semibold">View All Orders ➔</a>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-xs text-left">
                <thead class="bg-slate-950/60 border-b border-slate-800 text-slate-400 uppercase font-bold">
                    <tr>
                        <th class="px-5 py-3.5">Order #</th>
                        <th class="px-5 py-3.5">Client & Contact</th>
                        <th class="px-5 py-3.5">Vehicle</th>
                        <th class="px-5 py-3.5">Service Requested</th>
                        <th class="px-5 py-3.5">Live Stage Status</th>
                        <th class="px-5 py-3.5">Est. Price</th>
                        <th class="px-5 py-3.5 text-right">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/80 text-slate-300">
                    @foreach($recentOrders as $order)
                        <tr class="hover:bg-slate-800/40 transition">
                            <td class="px-5 py-4 font-mono font-bold text-sky-400">
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="hover:underline">
                                    {{ $order->order_number }}
                                </a>
                            </td>
                            <td class="px-5 py-4">
                                <div class="font-bold text-white">{{ $order->client->name }}</div>
                                <div class="text-[11px] text-slate-400">{{ $order->client->phone }}</div>
                            </td>
                            <td class="px-5 py-4">
                                <div class="font-semibold text-slate-200">{{ $order->vehicle_make }} {{ $order->vehicle_model }}</div>
                                <div class="text-[11px] text-slate-400">{{ $order->vehicle_category }} • {{ $order->vehicle_plate ?: 'No plate' }}</div>
                            </td>
                            <td class="px-5 py-4">
                                <span class="font-medium text-slate-300">{{ $order->service_title }}</span>
                            </td>
                            <td class="px-5 py-4">
                                <span class="px-2.5 py-1 rounded text-[11px] font-bold uppercase {{ $order->status_badge_class }}">
                                    {{ $order->status_label }}
                                </span>
                            </td>
                            <td class="px-5 py-4 font-extrabold text-amber-400">
                                AED {{ number_format($order->final_cost ?: $order->estimated_cost) }}
                            </td>
                            <td class="px-5 py-4 text-right">
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="px-3 py-1.5 rounded-lg bg-sky-600/20 text-sky-400 hover:bg-sky-600 hover:text-white border border-sky-500/30 text-xs font-bold transition">
                                    Change Status
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Quick Navigation Shortcuts -->
    <!-- Quick Navigation Shortcuts (2 in-line on mobile) -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
        <a href="{{ route('admin.services.create') }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-sky-500/40 transition group">
            <div class="w-8 h-8 rounded-lg bg-sky-500/10 text-sky-400 flex items-center justify-center font-bold text-sm mb-2 border border-sky-500/20">
                <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"/></svg>
            </div>
            <h3 class="text-xs sm:text-sm font-bold text-white group-hover:text-sky-300">Add Service</h3>
            <p class="text-[10px] sm:text-xs text-slate-400 mt-1 line-clamp-2">Create services, upload photos, set vehicle package rates.</p>
        </a>
        <a href="{{ route('admin.media.index') }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-emerald-500/40 transition group">
            <div class="w-8 h-8 rounded-lg bg-emerald-500/10 text-emerald-400 flex items-center justify-center font-bold text-sm mb-2 border border-emerald-500/20">
                <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <h3 class="text-xs sm:text-sm font-bold text-white group-hover:text-emerald-300">Media Library</h3>
            <p class="text-[10px] sm:text-xs text-slate-400 mt-1 line-clamp-2">Multi-image drag & drop upload in all formats.</p>
        </a>
        <a href="{{ route('admin.clients') }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-purple-500/40 transition group">
            <div class="w-8 h-8 rounded-lg bg-purple-500/10 text-purple-400 flex items-center justify-center font-bold text-sm mb-2 border border-purple-500/20">
                <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
            </div>
            <h3 class="text-xs sm:text-sm font-bold text-white group-hover:text-purple-300">Clients ({{ $totalClients }})</h3>
            <p class="text-[10px] sm:text-xs text-slate-400 mt-1 line-clamp-2">Customer profiles, repair logs & WhatsApp links.</p>
        </a>
        <a href="{{ route('admin.settings') }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-amber-500/40 transition group">
            <div class="w-8 h-8 rounded-lg bg-amber-500/10 text-amber-400 flex items-center justify-center font-bold text-sm mb-2 border border-amber-500/20">
                <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            </div>
            <h3 class="text-xs sm:text-sm font-bold text-white group-hover:text-amber-300">Settings</h3>
            <p class="text-[10px] sm:text-xs text-slate-400 mt-1 line-clamp-2">General identity, video, SEO & WhatsApp alerts.</p>
        </a>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const initCharts = () => {
        if (typeof Chart === 'undefined') {
            setTimeout(initCharts, 100);
            return;
        }

        // 1. Revenue Chart
        const revCtx = document.getElementById('revenueChart');
        if (revCtx) {
            new Chart(revCtx, {
                type: 'line',
                data: {
                    labels: {!! json_encode($chartRevenueLabels) !!},
                    datasets: [{
                        label: 'Gross Workshop Revenue (AED)',
                        data: {!! json_encode($chartRevenueData) !!},
                        borderColor: '#0284c7',
                        backgroundColor: 'rgba(2, 132, 199, 0.15)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.35,
                        pointBackgroundColor: '#38bdf8',
                        pointBorderColor: '#0f172a',
                        pointBorderWidth: 2,
                        pointRadius: 5,
                        pointHoverRadius: 7
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return 'AED ' + context.parsed.y.toLocaleString();
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: { color: 'rgba(51, 65, 85, 0.3)' },
                            ticks: { color: '#94a3b8', font: { size: 11 } }
                        },
                        y: {
                            grid: { color: 'rgba(51, 65, 85, 0.3)' },
                            ticks: {
                                color: '#94a3b8',
                                font: { size: 11 },
                                callback: function(value) { return 'AED ' + (value / 1000) + 'k'; }
                            }
                        }
                    }
                }
            });
        }

        // 2. Stage Doughnut Chart
        const stageCtx = document.getElementById('stageChart');
        if (stageCtx) {
            new Chart(stageCtx, {
                type: 'doughnut',
                data: {
                    labels: {!! json_encode($chartStageLabels) !!},
                    datasets: [{
                        data: {!! json_encode($chartStageCounts) !!},
                        backgroundColor: [
                            '#f59e0b', // pending - amber
                            '#38bdf8', // confirmed - sky
                            '#6366f1', // picked up - indigo
                            '#eab308', // sanding - yellow
                            '#ec4899', // paint booth - pink
                            '#8b5cf6', // qc - purple
                            '#10b981', // ready - emerald
                            '#a855f7'  // completed - purple
                        ],
                        borderWidth: 2,
                        borderColor: '#0f172a'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                boxWidth: 10,
                                color: '#94a3b8',
                                font: { size: 9 },
                                padding: 8
                            }
                        }
                    },
                    cutout: '68%'
                }
            });
        }

        // 3. Category Bar Chart
        const catCtx = document.getElementById('categoryChart');
        if (catCtx) {
            new Chart(catCtx, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($chartCategoryLabels) !!},
                    datasets: [{
                        label: 'Vehicle Count',
                        data: {!! json_encode($chartCategoryCounts) !!},
                        backgroundColor: [
                            'rgba(14, 165, 233, 0.8)',
                            'rgba(168, 85, 247, 0.8)',
                            'rgba(245, 158, 11, 0.8)',
                            'rgba(239, 68, 68, 0.8)',
                            'rgba(16, 185, 129, 0.8)'
                        ],
                        borderRadius: 6,
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: { color: '#94a3b8', font: { size: 10 } }
                        },
                        y: {
                            grid: { color: 'rgba(51, 65, 85, 0.3)' },
                            ticks: { color: '#94a3b8', stepSize: 1 }
                        }
                    }
                }
            });
        }
    };

    initCharts();
});
</script>
@endsection