@extends('layouts.app')

@section('content')

<!-- HEADER: Page Title & Branch Filter -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8 border-b border-white/5 pb-8" style="margin-top: 1rem;">
    <div>
        <h1 class="text-3xl font-black text-white tracking-tight uppercase">{{ app()->getLocale() == 'ar' ? 'لوحة التحكم الرئيسية' : 'Main Dashboard' }}</h1>
        <p class="text-sm text-gray-500 mt-2 font-medium">{{ app()->getLocale() == 'ar' ? 'نظرة شاملة على أداء المكتب والأسطول' : 'Comprehensive view of office performance & fleet' }}</p>
    </div>
    <div class="flex items-center gap-4 bg-white/5 p-2 rounded-2xl border border-white/10" style="border-radius: 16px !important;">
        <div class="px-4 py-2 bg-[#d4af37] rounded-xl text-black font-black text-xs uppercase tracking-tighter" style="border-radius: 12px !important;">
            {{ now()->translatedFormat('d M Y') }}
        </div>
        <div class="h-6 w-px bg-white/10"></div>
        <div class="px-4">
            <select onchange="window.location.href='?branch_id=' + this.value" 
                    class="bg-transparent border-none text-gray-400 font-bold text-xs uppercase tracking-widest focus:ring-0 cursor-pointer p-0 appearance-none outline-none text-right">
                <option value="all" {{ ($selectedBranchId == 'all' || !$selectedBranchId) ? 'selected' : '' }} class="bg-[#111] text-white">
                    {{ app()->getLocale() == 'ar' ? 'جميع الفروع' : 'All Branches' }}
                </option>
                @foreach($branches as $branch)
                    <option value="{{ $branch->id }}" {{ $selectedBranchId == $branch->id ? 'selected' : '' }} class="bg-[#111] text-white">
                        {{ $branch->name }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>
</div>

<div class="space-y-8">
        @php
            $has_alerts = $document_alerts['expired'] > 0 || $document_alerts['expiring_soon'] > 0 || 
                          $insurance_alerts['expired'] > 0 || $insurance_alerts['expiring_soon'] > 0 ||
                          $rental_alerts['overdue'] > 0 || $expense_alerts['high_expenses'] > 0 ||
                          $maintenance_alerts['due'] > 0;
        @endphp

        @if($has_alerts)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
                <!-- 1. Vehicle Documents -->
                @if($document_alerts['expired'] > 0 || $document_alerts['expiring_soon'] > 0)
                    <a href="{{ route('admin.vehicle-documents.index') }}" class="flex flex-col p-5 bg-red-500/10 border border-red-500/20 rounded-2xl group hover:bg-red-500/20 transition-all">
                        <div class="flex items-center gap-3 mb-3">
                            <span class="p-2 bg-red-500/20 rounded-lg text-lg">📄</span>
                            <span class="text-sm font-bold text-red-400">{{ app()->getLocale() == 'ar' ? 'الاستمارة والفحص' : 'Docs & Inspection' }}</span>
                        </div>
                        <div class="space-y-1">
                            @if($document_alerts['expired'] > 0)
                                <div class="text-xs text-red-500/80">• {{ $document_alerts['expired'] }} {{ app()->getLocale() == 'ar' ? 'منتهية' : 'Expired' }}</div>
                            @endif
                            @if($document_alerts['expiring_soon'] > 0)
                                <div class="text-xs text-yellow-500/80">• {{ $document_alerts['expiring_soon'] }} {{ app()->getLocale() == 'ar' ? 'تنتهي قريباً' : 'Expiring Soon' }}</div>
                            @endif
                        </div>
                    </a>
                @endif

                <!-- 2. Insurance -->
                @if($insurance_alerts['expired'] > 0 || $insurance_alerts['expiring_soon'] > 0)
                    <a href="{{ route('admin.vehicle-insurances.index') }}" class="flex flex-col p-5 bg-blue-500/10 border border-blue-500/20 rounded-2xl group hover:bg-blue-500/20 transition-all">
                        <div class="flex items-center gap-3 mb-3">
                            <span class="p-2 bg-blue-500/20 rounded-lg text-lg">🛡️</span>
                            <span class="text-sm font-bold text-blue-400">{{ app()->getLocale() == 'ar' ? 'تأمين المركبات' : 'Vehicle Insurance' }}</span>
                        </div>
                        <div class="space-y-1">
                            @if($insurance_alerts['expired'] > 0)
                                <div class="text-xs text-red-500/80">• {{ $insurance_alerts['expired'] }} {{ app()->getLocale() == 'ar' ? 'منتهي' : 'Expired' }}</div>
                            @endif
                            @if($insurance_alerts['expiring_soon'] > 0)
                                <div class="text-xs text-yellow-500/80">• {{ $insurance_alerts['expiring_soon'] }} {{ app()->getLocale() == 'ar' ? 'ينتهي خلال شهر' : 'Expires in 30 days' }}</div>
                            @endif
                        </div>
                    </a>
                @endif

                <!-- 3. Maintenance -->
                @if($maintenance_alerts['due'] > 0)
                    <a href="{{ route('admin.maintenance.index') }}" class="flex flex-col p-5 bg-orange-500/10 border border-orange-500/20 rounded-2xl group hover:bg-orange-500/20 transition-all">
                        <div class="flex items-center gap-3 mb-3">
                            <span class="p-2 bg-orange-500/20 rounded-lg text-lg">🔧</span>
                            <span class="text-sm font-bold text-orange-400">{{ app()->getLocale() == 'ar' ? 'صيانة مستحقة' : 'Maintenance Due' }}</span>
                        </div>
                        <div class="text-xl font-black text-orange-500">{{ $maintenance_alerts['due'] }}</div>
                        <div class="text-xs text-orange-500/60 uppercase tracking-widest mt-1">{{ app()->getLocale() == 'ar' ? 'سيارات تجاوزت موعد الصيانة' : 'Exceeded mileage limit' }}</div>
                    </a>
                @endif

                <!-- 4. Overdue Rentals -->
                @if($rental_alerts['overdue'] > 0)
                    <a href="{{ route('admin.rentals.index', ['status' => 'open']) }}" class="flex flex-col p-5 bg-orange-500/10 border border-orange-500/20 rounded-2xl group hover:bg-orange-500/20 transition-all">
                        <div class="flex items-center gap-3 mb-3">
                            <span class="p-2 bg-orange-500/20 rounded-lg text-lg">🔑</span>
                            <span class="text-sm font-bold text-orange-400">{{ app()->getLocale() == 'ar' ? 'عقود متأخرة' : 'Overdue Rentals' }}</span>
                        </div>
                        <div class="text-xl font-black text-orange-500">{{ $rental_alerts['overdue'] }}</div>
                        <div class="text-xs text-orange-500/60 uppercase tracking-widest mt-1">{{ app()->getLocale() == 'ar' ? 'تجاوزت تاريخ التسليم' : 'Past return date' }}</div>
                    </a>
                @endif

                <!-- 5. High Expenses -->
                @if($expense_alerts['high_expenses'] > 0)
                    <a href="{{ route('admin.expenses.index') }}" class="flex flex-col p-5 bg-purple-500/10 border border-purple-500/20 rounded-2xl group hover:bg-purple-500/20 transition-all">
                        <div class="flex items-center gap-3 mb-3">
                            <span class="p-2 bg-purple-500/20 rounded-lg text-lg">⚠️</span>
                            <span class="text-sm font-bold text-purple-400">{{ app()->getLocale() == 'ar' ? 'مصاريف مرتفعة' : 'High Expenses' }}</span>
                        </div>
                        <div class="text-xl font-black text-purple-500">{{ $expense_alerts['high_expenses'] }}</div>
                        <div class="text-xs text-purple-500/60 uppercase tracking-widest mt-1">{{ app()->getLocale() == 'ar' ? 'مصاريف تتجاوز 5000 ' . $defaultCurrency->symbol_ar : 'Exceeding 5000 ' . $defaultCurrency->code }}</div>
                    </a>
                @endif
            </div>
        @endif
<!-- Visual Analytics Section (Pie Charts) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
            <!-- 1. Fleet Status Pie Chart -->
            <div class="bg-gradient-to-br from-[#1a1a1a] to-[#0f0f0f] p-8 rounded-[2rem]  rounded-3xl border border-gray-700 hover:border-[#d4af37] shadow-2xl hover:shadow-[#d4af37]/20 transition-all duration-300 flex flex-col items-center group">
                <h3 class="text-sm font-black mb-8 text-[#d4af37] uppercase tracking-[0.3em] self-start border-l-4 border-[#d4af37] pl-4">🚗 {{ app()->getLocale() == 'ar' ? 'تحليل حالة الأسطول' : 'Fleet Status' }}</h3>
                <div class="h-80 w-full relative flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
                    <canvas id="fleetStatusChart"></canvas>
                    <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                        <span class="text-4xl font-black text-[#d4af37] group-hover:text-white transition-colors">{{ $stats['total_cars'] }}</span>
                        <span class="text-xs text-gray-400 font-bold uppercase">{{ app()->getLocale() == 'ar' ? 'إجمالي السيارات' : 'Total Cars' }}</span>
                    </div>
                </div>
            </div>

            <!-- 2. Document Status Pie Chart -->
            <div class="bg-gradient-to-br from-[#1a1a1a] to-[#0f0f0f] p-8 rounded-[2rem]  rounded-3xl border border-gray-700 hover:border-[#d4af37] shadow-2xl hover:shadow-[#d4af37]/20 transition-all duration-300 flex flex-col items-center group">
                <h3 class="text-sm font-black mb-8 text-[#d4af37] uppercase tracking-[0.3em] self-start border-l-4 border-[#d4af37] pl-4">📄 {{ app()->getLocale() == 'ar' ? 'تحليل حالة الوثائق' : 'Documents Status' }}</h3>
                <div class="h-80 w-full relative flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
                    <canvas id="docStatusChart"></canvas>
                    <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                        <span class="text-4xl font-black text-[#d4af37] group-hover:text-white transition-colors">{{ array_sum($doc_stats) }}</span>
                        <span class="text-xs text-gray-400 font-bold uppercase">{{ app()->getLocale() == 'ar' ? 'إجمالي الوثائق' : 'Total Docs' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Grid: Clean Professional Graphical Layout -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- 1. Net Profit Today -->
            <div class="bg-[#111] border border-gray-800 rounded-3xl p-10 flex flex-col items-center justify-center text-center group hover:border-[#d4af37] transition-all duration-300">
                <div class="text-xs font-black text-[#d4af37] uppercase tracking-[0.3em] mb-4">{{ app()->getLocale() == 'ar' ? 'صافي أرباح اليوم' : 'Net Profit Today' }}</div>
                <div class="text-7xl font-black text-[#d4af37] tracking-tighter mb-4">
                    {{ number_format($stats['profit_today'], 0) }}
                    <span class="text-base text-[#d4af37]/50 uppercase">{{ app()->getLocale() == 'ar' ? $defaultCurrency->symbol_ar : $defaultCurrency->code }}</span>
                </div>
                <div class="text-sm text-white font-medium max-w-[90%] leading-relaxed">
                    {{ app()->getLocale() == 'ar' ? 'إجمالي المحصل اليوم مطروحاً منه كافة المصروفات التشغيلية' : 'Total daily revenue minus all operational expenses' }}
                </div>
            </div>

            <!-- 2. Unrented Cars -->
            <div class="bg-[#111] border border-gray-800 rounded-3xl p-10 flex flex-col items-center justify-center text-center group hover:border-[#d4af37] transition-all duration-300">
                <div class="text-xs font-black text-white uppercase tracking-[0.3em] mb-4">{{ app()->getLocale() == 'ar' ? 'الأسطول المتاح' : 'Available Fleet' }}</div>
                <div class="text-8xl font-black text-white tracking-tighter mb-4 group-hover:text-[#d4af37] transition-colors">
                    {{ $stats['unrented_cars'] }}
                </div>
                <div class="text-sm text-white font-medium max-w-[90%] leading-relaxed">
                    {{ app()->getLocale() == 'ar' ? 'السيارات الجاهزة للتأجير الفوري وغير المرتبطة بعقود نشطة حالياً' : 'Vehicles ready for immediate rental and not linked to any active contracts' }}
                </div>
            </div>

            <!-- 3. Occupancy Rate -->
            <div class="bg-[#111] border border-gray-800 rounded-3xl p-10 flex flex-col items-center justify-center text-center group hover:border-blue-400 transition-all duration-300">
                <div class="text-xs font-black text-white uppercase tracking-[0.3em] mb-4">{{ app()->getLocale() == 'ar' ? 'نسبة الإشغال' : 'Occupancy Rate' }}</div>
                <div class="text-8xl font-black text-blue-400 tracking-tighter mb-4">
                    {{ $stats['occupancy_rate'] }}<span class="text-3xl opacity-50">%</span>
                </div>
                <div class="w-full max-w-[200px] bg-gray-900 h-2 rounded-full mb-4 overflow-hidden border border-white/5">
                    <div class="bg-blue-400 h-full" style="width: {{ $stats['occupancy_rate'] }}%"></div>
                </div>
                <div class="text-sm text-white font-medium max-w-[90%] leading-relaxed">
                    {{ app()->getLocale() == 'ar' ? 'النسبة المئوية للسيارات المؤجرة من إجمالي أسطول المكتب الفعلي' : 'Percentage of rented vehicles relative to the total active office fleet' }}
                </div>
            </div>

            <!-- 4. Maintenance Cars -->
            <div class="bg-[#111] border border-gray-800 rounded-3xl p-10 flex flex-col items-center justify-center text-center group hover:border-orange-400 transition-all duration-300">
                <div class="text-xs font-black text-white uppercase tracking-[0.3em] mb-4">{{ app()->getLocale() == 'ar' ? 'السيارات المعطلة' : 'In Maintenance' }}</div>
                <div class="text-8xl font-black text-orange-400 tracking-tighter mb-4">
                    {{ $stats['maintenance_cars'] }}
                </div>
                <div class="text-sm text-white font-medium max-w-[90%] leading-relaxed">
                    {{ app()->getLocale() == 'ar' ? 'السيارات المتوقفة تماماً بسبب أعطال فنية أو صيانة دورية مجدولة' : 'Vehicles completely out of service due to technical faults or maintenance' }}
                </div>
            </div>

            <!-- 5. Overdue Rentals -->
            <div class="bg-[#111] border border-red-900/30 rounded-3xl p-10 flex flex-col items-center justify-center text-center group hover:border-red-500 transition-all duration-300 shadow-xl shadow-red-500/5">
                <div class="text-xs font-black text-red-500/50 uppercase tracking-[0.3em] mb-4">{{ app()->getLocale() == 'ar' ? 'العقود المتأخرة' : 'Overdue Rentals' }}</div>
                <div class="text-8xl font-black text-red-500 tracking-tighter mb-4 animate-pulse">
                    {{ $rental_alerts['overdue'] }}
                </div>
                <div class="text-sm text-red-400/70 font-medium max-w-[90%] leading-relaxed">
                    {{ app()->getLocale() == 'ar' ? 'عقود نشطة تجاوزت تاريخ التسليم المحدد ولم يتم إغلاقها بعد' : 'Active contracts that exceeded return date and have not been closed' }}
                </div>
            </div>

            <!-- 6. Expired Documents -->
            <div class="bg-[#111] border border-gray-800 rounded-3xl p-10 flex flex-col items-center justify-center text-center group hover:border-red-400 transition-all duration-300">
                <div class="text-xs font-black text-white uppercase tracking-[0.3em] mb-4">{{ app()->getLocale() == 'ar' ? 'الوثائق المنتهية' : 'Expired Docs' }}</div>
                <div class="text-8xl font-black text-red-400 tracking-tighter mb-4">
                    {{ $document_alerts['expired'] }}
                </div>
                <div class="text-sm text-white font-medium max-w-[90%] leading-relaxed">
                    {{ app()->getLocale() == 'ar' ? 'وثائق مركبات (استمارة/فحص) منتهية الصلاحية وتتطلب تجديداً' : 'Vehicle documents (Registration/Inspection) that are expired' }}
                </div>
            </div>
        </div>

        
        <!-- Charts Section (Old Bar/Doughnut) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
                <!-- Recent Inquiries -->
                <div class="bg-[#111] rounded-2xl border border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-800 flex justify-between items-center">
                        <h3 class="font-bold">{{ app()->getLocale() == 'ar' ? 'أحدث الاستفسارات' : 'Recent Inquiries' }}</h3>
                        <a href="{{ route('admin.inquiries.index') }}" class="text-[#d4af37] text-xs">{{ app()->getLocale() == 'ar' ? 'عرض الكل' : 'View All' }}</a>
                    </div>
                    <div class="divide-y divide-gray-800">
                        @forelse($latest_inquiries as $inquiry)
                        <div class="p-4 hover:bg-white/5 transition-colors">
                            <div class="flex justify-between mb-1">
                                <span class="font-bold text-sm">{{ $inquiry->customer->name }}</span>
                                <span class="text-[10px] text-gray-500">{{ $inquiry->created_at->diffForHumans() }}</span>
                            </div>
                            <div class="text-xs text-gray-400">{{ app()->getLocale() == 'ar' ? 'سيارة' : 'Car' }}: {{ $inquiry->car->title }}</div>
                            <div class="mt-2">
                                <span class="text-[10px] px-2 py-0.5 rounded-full {{ $inquiry->status == 'new' ? 'bg-red-500/20 text-red-400' : 'bg-green-500/20 text-green-400' }}">
                                    {{ $inquiry->status }}
                                </span>
                            </div>
                        </div>
                        @empty
                        <div class="p-10 text-center text-gray-600">{{ app()->getLocale() == 'ar' ? 'لا توجد استفسارات جديدة.' : 'No new inquiries found.' }}</div>
                        @endforelse
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="bg-[#111] p-8 rounded-2xl border border-gray-800">
                    <h3 class="font-bold mb-6">{{ app()->getLocale() == 'ar' ? 'إجراءات سريعة' : 'Quick Actions' }}</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <a href="{{ route('admin.cars.create') }}" class="flex flex-col items-center justify-center p-6 bg-black/40 rounded-xl border border-gray-800 hover:border-[#d4af37] transition-all group">
                            <span class="text-2xl mb-2">🚗</span>
                            <span class="text-sm">{{ app()->getLocale() == 'ar' ? 'إضافة سيارة' : 'Add Car' }}</span>
                        </a>
                        <a href="{{ route('admin.inquiries.index') }}" class="flex flex-col items-center justify-center p-6 bg-black/40 rounded-xl border border-gray-800 hover:border-[#d4af37] transition-all group">
                            <span class="text-2xl mb-2">📩</span>
                            <span class="text-sm">{{ app()->getLocale() == 'ar' ? 'الطلبات' : 'Inquiries' }}</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Business Intelligence Charts -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
                <div class="bg-gradient-to-br from-[#1a1a1a] to-[#0f0f0f] p-8 rounded-2xl border border-gray-700 hover:border-[#d4af37] shadow-2xl hover:shadow-[#d4af37]/20 transition-all duration-300 group">
                    <h3 class="text-sm font-bold mb-6 text-[#d4af37]">📊 {{ app()->getLocale() == 'ar' ? 'توزيع الماركات' : 'Brands Distribution' }}</h3>
                    <div class="h-64 relative group-hover:scale-105 transition-transform duration-300">
                        <canvas id="inventoryChart"></canvas>
                        @if($brands_distribution->sum('cars_count') == 0)
                            <div class="absolute inset-0 flex items-center justify-center text-gray-600 text-xs bg-black/20 rounded-lg">{{ app()->getLocale() == 'ar' ? 'لا توجد بيانات' : 'No data' }}</div>
                        @endif
                    </div>
                </div>

                <div class="bg-gradient-to-br from-[#1a1a1a] to-[#0f0f0f] p-8 rounded-2xl border border-gray-700 hover:border-[#d4af37] shadow-2xl hover:shadow-[#d4af37]/20 transition-all duration-300 group">
                    <h3 class="text-sm font-bold mb-6 text-[#d4af37]">🔍 {{ app()->getLocale() == 'ar' ? 'أكثر الماركات استفساراً' : 'Top Inquiries' }}</h3>
                    <div class="h-64 relative group-hover:scale-105 transition-transform duration-300">
                        <canvas id="inquiryChart"></canvas>
                        @if($inquiries_by_brand->sum('count') == 0)
                            <div class="absolute inset-0 flex items-center justify-center text-gray-600 text-xs bg-black/20 rounded-lg">{{ app()->getLocale() == 'ar' ? 'لا توجد بيانات' : 'No data' }}</div>
                        @endif
                    </div>
                </div>

                <div class="bg-gradient-to-br from-[#1a1a1a] to-[#0f0f0f] p-8 rounded-2xl border border-gray-700 hover:border-[#d4af37] shadow-2xl hover:shadow-[#d4af37]/20 transition-all duration-300 lg:col-span-2 group" style="margin-bottom: 20px;">
                    <h3 class="text-sm font-bold mb-6 text-[#d4af37]">⭐ {{ app()->getLocale() == 'ar' ? 'أداء الماركات' : 'Brand Performance' }}</h3>
                    <div class="h-64 relative group-hover:scale-105 transition-transform duration-300">
                        <canvas id="performanceChart"></canvas>
                        @if($performance_by_brand->sum('count') == 0)
                            <div class="absolute inset-0 flex items-center justify-center text-gray-600 text-xs bg-black/20 rounded-lg">{{ app()->getLocale() == 'ar' ? 'لا توجد بيانات' : 'No data' }}</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script>
        // Wait for DOM to be ready
        document.addEventListener('DOMContentLoaded', function() {
            const chartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#9ca3af',
                            font: { size: 10, family: 'Tajawal' },
                            padding: 20,
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    }
                },
                cutout: '70%'
            };

        // Fleet Status Chart
        new Chart(document.getElementById('fleetStatusChart'), {
            type: 'doughnut',
            data: {
                labels: {!! json_encode([app()->getLocale() == 'ar' ? 'متاح' : 'Available', app()->getLocale() == 'ar' ? 'مؤجر' : 'Rented', app()->getLocale() == 'ar' ? 'صيانة' : 'Maintenance']) !!},
                datasets: [{
                    data: [{{ $fleet_stats['available'] }}, {{ $fleet_stats['rented'] }}, {{ $fleet_stats['maintenance'] }}],
                    backgroundColor: ['#00d084', '#00c8ff', '#ff6b6b'],
                    borderWidth: 0,
                    hoverOffset: 25,
                    borderColor: '#111'
                }]
            },
            options: {
                ...chartOptions,
                cutout: '80%'
            }
        });

        // Doc Status Chart
        new Chart(document.getElementById('docStatusChart'), {
            type: 'doughnut',
            data: {
                labels: {!! json_encode([app()->getLocale() == 'ar' ? 'ساري' : 'Valid', app()->getLocale() == 'ar' ? 'ينتهي قريباً' : 'Expiring', app()->getLocale() == 'ar' ? 'منتهي' : 'Expired']) !!},
                datasets: [{
                    data: [{{ $doc_stats['valid'] }}, {{ $doc_stats['expiring_soon'] }}, {{ $doc_stats['expired'] }}],
                    backgroundColor: ['#00d084', '#ffa500', '#ff3838'],
                    borderWidth: 0,
                    hoverOffset: 25,
                    borderColor: '#111'
                }]
            },
            options: {
                ...chartOptions,
                cutout: '80%'
            }
        });

        // Inventory Chart
        new Chart(document.getElementById('inventoryChart'), {
            type: 'doughnut',
            data: {
                labels: {!! json_encode($brands_distribution->pluck('name')) !!},
                datasets: [{
                    data: {!! json_encode($brands_distribution->pluck('cars_count')) !!},
                    backgroundColor: ['#d4af37', '#ff6b9d', '#00c8ff', '#ffa500', '#00d084'],
                    borderWidth: 0,
                    hoverOffset: 20,
                    borderColor: '#111'
                }]
            },
            options: chartOptions
        });

        // Inquiry Chart
        new Chart(document.getElementById('inquiryChart'), {
            type: 'doughnut',
            data: {
                labels: {!! json_encode($inquiries_by_brand->pluck('name')) !!},
                datasets: [{
                    data: {!! json_encode($inquiries_by_brand->pluck('count')) !!},
                    backgroundColor: ['#00c8ff', '#ff6b9d', '#ffa500', '#d4af37', '#00d084'],
                    borderWidth: 0,
                    hoverOffset: 20,
                    borderColor: '#111'
                }]
            },
            options: chartOptions
        });

        // Performance Chart
        new Chart(document.getElementById('performanceChart'), {
            type: 'doughnut',
            data: {
                labels: {!! json_encode($performance_by_brand->pluck('name')) !!},
                datasets: [{
                    data: {!! json_encode($performance_by_brand->pluck('count')) !!},
                    backgroundColor: ['#00d084', '#d4af37', '#00c8ff', '#ff6b9d', '#ffa500'],
                    borderWidth: 0,
                    hoverOffset: 20,
                    borderColor: '#111'
                }]
            },
            options: chartOptions
        });
        });
    </script>
    @endpush
@endsection