@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' ? 'لوحة التحكم العامة' : 'General Dashboard' }}</h1>
        <p class="text-sm text-gray-500 mt-2 font-medium">{{ app()->getLocale() == 'ar' ? 'نظرة شاملة على العمليات والأسطول' : 'Comprehensive view of operations & 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($assignedBranches 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 || $maintenance_alerts['due'] > 0;
        @endphp

        @if($has_alerts)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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
            </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 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- 1. Total 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-[#d4af37] uppercase tracking-[0.3em] mb-4">{{ app()->getLocale() == 'ar' ? 'إجمالي الأسطول' : 'Total Fleet' }}</div>
                <div class="text-7xl font-black text-[#d4af37] tracking-tighter mb-4">
                    {{ $stats['total_cars'] }}
                </div>
                <div class="text-sm text-white font-medium max-w-[90%] leading-relaxed">
                    {{ app()->getLocale() == 'ar' ? 'إجمالي عدد السيارات المسجلة في النظام والتابعة للفروع المحددة' : 'Total number of registered vehicles across selected branches' }}
                </div>
            </div>

            <!-- 2. Available Fleet -->
            <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-7xl 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-7xl 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>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Latest Inquiries -->
            <div class="lg:col-span-2 bg-[#111] border border-gray-800 rounded-3xl p-8 group hover:border-[#d4af37] transition-all duration-300">
                <div class="flex items-center justify-between mb-8">
                    <h3 class="text-sm font-black text-[#d4af37] uppercase tracking-[0.3em] border-l-4 border-[#d4af37] pl-4">{{ app()->getLocale() == 'ar' ? 'آخر طلبات الاستفسار' : 'Latest Inquiries' }}</h3>
                    <a href="{{ route('admin.inquiries.index') }}" class="text-xs font-bold text-gray-500 hover:text-[#d4af37] transition-colors uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'عرض الكل' : 'View All' }} →</a>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead>
                            <tr class="border-b border-white/5">
                                <th class="pb-4 text-[10px] font-black text-gray-600 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'العميل' : 'Customer' }}</th>
                                <th class="pb-4 text-[10px] font-black text-gray-600 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'السيارة' : 'Vehicle' }}</th>
                                <th class="pb-4 text-[10px] font-black text-gray-600 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</th>
                                <th class="pb-4 text-[10px] font-black text-gray-600 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'التاريخ' : 'Date' }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/5">
                            @foreach($latest_inquiries as $inquiry)
                            <tr class="group/row hover:bg-white/[0.02] transition-colors">
                                <td class="py-4">
                                    <div class="font-bold text-white text-sm">{{ $inquiry->customer->name }}</div>
                                    <div class="text-[10px] text-gray-500">{{ $inquiry->customer->phone }}</div>
                                </td>
                                <td class="py-4">
                                    <div class="font-bold text-[#d4af37] text-sm">{{ $inquiry->car->title }}</div>
                                    <div class="text-[10px] text-gray-500">{{ $inquiry->car->plate_number }}</div>
                                </td>
                                <td class="py-4">
                                    <span class="px-3 py-1 bg-[#d4af37]/10 text-[#d4af37] rounded-full text-[10px] font-black uppercase tracking-tighter border border-[#d4af37]/20">
                                        {{ $inquiry->status }}
                                    </span>
                                </td>
                                <td class="py-4 text-[10px] text-gray-500 font-bold uppercase">{{ $inquiry->created_at->format('d M Y') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Brand Distribution Chart -->
            <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>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
    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
        });
    });
</script>
@endpush
@endsection