@extends('layouts.app')

@section('content')
<style>
    :root {
        --gold: #D4AF37;
        --dark-bg: #0a0a0a;
        --card-bg: #1a1a2e;
        --border-light: rgba(212, 175, 55, 0.3);
        --border-strong: rgba(212, 175, 55, 0.7);
    }
    
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes slideInLeft {
        from { opacity: 0; transform: translateX(-30px); }
        to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes glowPulse {
        0%, 100% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
        50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.5); }
    }
    
    body {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 100%);
    }
    
    .section-title {
        font-size: 1.8rem;
        font-weight: 900;
        color: var(--gold);
        margin-bottom: 2rem;
        margin-top: 0;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .section-title i {
        font-size: 2rem;
        color: var(--gold);
        font-weight: 600;
    }
    
    .alert-box i,
    .stat-box i {
        font-weight: 600;
    }
    
    .section-title::before {
        content: '';
        width: 4px;
        height: 2.5rem;
        background: linear-gradient(180deg, var(--gold), rgba(212, 175, 55, 0.3));
        border-radius: 2px;
    }
    
    .section-container {
        margin-bottom: 1rem;
        margin-top: 0;
    }
    
    .premium-card {
       /* background: linear-gradient(135deg, rgba(20, 20, 35, 0.95), rgba(35, 35, 55, 0.95));*/
        background: #0E0F14;
        border: 2px solid var(--border-light);
        border-radius: 1.5rem;
        padding: 2rem;
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation: fadeInUp 0.8s ease-out forwards;
        backdrop-filter: blur(10px);
        margin-bottom: 1rem;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    }
    
    .premium-card:hover {
        border-color: var(--border-strong);
        box-shadow: 0 15px 50px rgba(212, 175, 55, 0.25);
        transform: translateY(-8px);
    }
    
    .action-icon-box {
        width: 5rem;
        height: 5rem;
        border: 2px solid var(--gold);
        border-radius: 1.25rem;
        /*background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.08));*/
        background: #0E0F14;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.1);
    }
    
    .action-icon-box i {
        font-size: 2.5rem;
        color: var(--gold);
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    
    .action-card {
        /*background: linear-gradient(135deg, rgba(20, 20, 40, 0.98), rgba(30, 30, 50, 0.98));*/
        background: #0E0F14;
        border: 2px solid var(--border-light);
        border-radius: 1.25rem;
        padding: 2.5rem 2rem;
        cursor: pointer;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation: fadeInUp 0.8s ease-out backwards;
        backdrop-filter: blur(10px);
        min-height: 200px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    }
    
    .action-card:hover {
        border-color: var(--gold);
        box-shadow: 0 20px 60px rgba(212, 175, 55, 0.3);
        transform: translateY(-10px);
    }
    
    .action-card:hover .action-icon-box {
        background: var(--gold);
        transform: scale(1.2) rotate(10deg);
        box-shadow: 0 10px 40px rgba(212, 175, 55, 0.6);
    }
    
    .action-card:hover .action-icon-box i {
        color: var(--dark-bg);
    }
    
    .action-label {
        font-size: 1.1rem;
        font-weight: 900;
        color: #ffffff;
        text-align: center;
        margin-top: 1.5rem;
        letter-spacing: 0.8px;
        transition: color 0.3s;
        text-transform: uppercase;
    }
    
    .action-card:hover .action-label {
        color: var(--gold);
    }
    
    .alert-box {
        /*background: linear-gradient(135deg, rgba(20, 20, 40, 0.98), rgba(30, 30, 55, 0.98));*/
        background: #0E0F14;
        border: 2px solid var(--border-light);
        border-radius: 1.25rem;
        padding: 1.75rem;
        animation: fadeInUp 0.8s ease-out backwards;
        backdrop-filter: blur(10px);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        transition: all 0.4s;
    }
    
    .alert-box:hover {
        border-color: var(--border-strong);
        box-shadow: 0 12px 40px rgba(212, 175, 55, 0.2);
        transform: translateY(-5px);
    }
    
    .stat-box {
        background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(30, 30, 50, 0.95));
        border: 2px solid var(--border-light);
        border-radius: 1rem;
        padding: 1.5rem;
        text-align: left;
        transition: all 0.4s;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    
    .stat-box:hover {
        border-color: var(--border-strong);
        box-shadow: 0 10px 35px rgba(212, 175, 55, 0.15);
        transform: translateY(-3px);
    }
    
    .text-gold {
        color: var(--gold);
    }
    
    .content-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 0;
    }
    
    .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    @media (max-width: 1024px) {
        .grid-3 {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (max-width: 640px) {
        .grid-3 {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="content-wrapper py-8 px-4 md:px-0">
    
    <!-- Quick Actions Section -->
    <div class="section-container">
        <h2 class="section-title" style="animation-delay: 0.1s">
            <i class="fa-solid fa-gauge-high"></i>
            {{ app()->getLocale() == 'ar' ? 'إجراءات سريعة' : 'Quick Actions' }}
        </h2>
        
        <div class="grid-3" style="background-color: #0E0F14;">
            @php
                $actions = [
                    ['route' => 'admin.rentals.create', 'icon' => 'fa-file-signature', 'label_ar' => 'إنشاء عقد', 'label_en' => 'New Contract'],
                    ['route' => 'admin.cars.create', 'icon' => 'fa-car-side', 'label_ar' => 'إضافة سيارة', 'label_en' => 'Add Car'],
                    ['route' => 'admin.maintenance.create', 'icon' => 'fa-screwdriver-wrench', 'label_ar' => 'تسجيل صيانة', 'label_en' => 'Maintenance'],
                    ['route' => 'admin.vehicle-documents.create', 'icon' => 'fa-file-invoice', 'label_ar' => 'إضافة وثيقة', 'label_en' => 'Add Document'],
                    ['route' => 'admin.customers.index', 'icon' => 'fa-user-tie', 'label_ar' => 'إضافة عميل', 'label_en' => 'Add Client'],
                    ['route' => 'admin.vehicle-insurances.create', 'icon' => 'fa-shield-halved', 'label_ar' => 'تسجيل تأمين', 'label_en' => 'Insurance'],
                ];
            @endphp

            @foreach($actions as $index => $action)
            <a href="{{ route($action['route']) }}" class="action-card" style="animation-delay: {{ 0.1 + ($index * 0.05) }}s">
                <div class="action-icon-box">
                    <i class="fa-solid {{ $action['icon'] }}"></i>
                </div>
                <span class="action-label">{{ app()->getLocale() == 'ar' ? $action['label_ar'] : $action['label_en'] }}</span>
            </a>
            @endforeach
        </div>
    </div>

    <!-- Critical Alerts Section -->
    <div class="section-container" style="animation-delay: 0.2s">
        <h2 class="section-title">
            <i class="fa-solid fa-circle-exclamation"></i>
            {{ app()->getLocale() == 'ar' ? 'تنبيهات فورية' : 'Critical Alerts' }}
        </h2>
        
        <div class="grid-3">
            @php
                $alert_items = [
                    ['icon' => 'fa-file-lines', 'label_ar' => 'وثائق تنتهي', 'label_en' => 'Docs Expiring', 'count' => $alerts['doc_expiring'], 'color' => '#FF6B6B'],
                    ['icon' => 'fa-shield-halved', 'label_ar' => 'تأمينات تنتهي', 'label_en' => 'Insurance Expiring', 'count' => $alerts['ins_expiring'], 'color' => '#FFA94D'],
                    ['icon' => 'fa-screwdriver-wrench', 'label_ar' => 'صيانة مستحقة', 'label_en' => 'Maintenance Due', 'count' => $alerts['maintenance_due'], 'color' => '#FFD700'],
                    ['icon' => 'fa-handshake', 'label_ar' => 'عقود تنتهي', 'label_en' => 'Contracts Ending', 'count' => $alerts['contracts_ending'], 'color' => '#4ECDC4'],
                    ['icon' => 'fa-triangle-exclamation', 'label_ar' => 'بيانات ناقصة', 'label_en' => 'Missing Data', 'count' => $missing_docs['no_registration'] + $missing_docs['no_insurance'] + $missing_docs['no_inspection'], 'color' => '#FF4757'],
                ];
            @endphp

            @foreach($alert_items as $index => $item)
            <div class="alert-box" style="animation-delay: {{ 0.3 + ($index * 0.05) }}s; border-left: 4px solid {{ $item['color'] }};">
                <div class="flex items-center justify-between gap-3">
                    <div class="flex-1">
                        <h3 class="text-white font-bold text-lg mb-2">{{ app()->getLocale() == 'ar' ? $item['label_ar'] : $item['label_en'] }}</h3>
                        <p class="text-xs text-gray-400 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'يتطلب إجراء فوري' : 'Action Required' }}</p>
                    </div>
                    <div class="text-right">
                        <div class="text-4xl font-black mb-2" style="color: {{ $item['color'] }};">{{ $item['count'] }}</div>
                        <i class="fa-solid {{ $item['icon'] }}" style="font-size: 1.5rem; color: {{ $item['color'] }};"></i>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Today's Tasks & Fleet Stats -->
    <div class="section-container" style="animation-delay: 0.4s">
        <h2 class="section-title">
            <i class="fa-solid fa-chart-column"></i>
            {{ app()->getLocale() == 'ar' ? 'ملخص اليوم' : 'Today Summary' }}
        </h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Today's Tasks -->
        <div class="premium-card">
            <h2 class="text-xl font-black text-gold mb-6 flex items-center gap-2 uppercase tracking-wider">
                <i class="fa-solid fa-tasks"></i>
                {{ app()->getLocale() == 'ar' ? 'مهام اليوم' : "Today's Tasks" }}
            </h2>
            <div class="space-y-4">
                @php
                    $today_agenda = [
                        ['label_ar' => 'عقود جديدة مطلوبة', 'label_en' => 'New Contracts', 'count' => $tasks['new_contracts_needed'], 'color' => '#D4AF37', 'icon' => 'fa-file-signature'],
                        ['label_ar' => 'تسليمات اليوم', 'label_en' => 'Deliveries', 'count' => $tasks['deliveries_today'], 'color' => '#00D9FF', 'icon' => 'fa-truck-fast'],
                        ['label_ar' => 'استلامات اليوم', 'label_en' => 'Returns', 'count' => $tasks['pickups_today'], 'color' => '#00FF88', 'icon' => 'fa-car-on'],
                    ];
                @endphp
                @foreach($today_agenda as $task)
                <div class="stat-box flex items-center justify-between" style="border-left: 3px solid {{ $task['color'] }}">
                    <div class="flex items-center gap-3">
                        <i class="fa-solid {{ $task['icon'] }}" style="color: {{ $task['color'] }}; font-size: 1.25rem;"></i>
                        <span class="text-white font-semibold">{{ app()->getLocale() == 'ar' ? $task['label_ar'] : $task['label_en'] }}</span>
                    </div>
                    <span class="text-2xl font-black" style="color: {{ $task['color'] }};">{{ $task['count'] }}</span>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Fleet Stats -->
        <div class="premium-card">
            <h2 class="text-xl font-black text-gold mb-6 flex items-center gap-2 uppercase tracking-wider">
                <i class="fa-solid fa-chart-line"></i>
                {{ app()->getLocale() == 'ar' ? 'حالة الأسطول' : "Fleet Status" }}
            </h2>
            <div class="space-y-4">
                @php
                    $stats = [
                        ['label_ar' => 'متاحة', 'label_en' => 'Available', 'count' => $fleet_stats['available'], 'color' => '#00FF88', 'icon' => 'fa-circle-check'],
                        ['label_ar' => 'مؤجرة', 'label_en' => 'Rented', 'count' => $fleet_stats['rented'], 'color' => '#00D9FF', 'icon' => 'fa-key'],
                        ['label_ar' => 'صيانة', 'label_en' => 'Maintenance', 'count' => $fleet_stats['maintenance'], 'color' => '#FFA94D', 'icon' => 'fa-screwdriver-wrench'],
                        ['label_ar' => 'محجوزة', 'label_en' => 'Reserved', 'count' => $fleet_stats['reserved'], 'color' => '#B19CD9', 'icon' => 'fa-calendar-day'],
                    ];
                @endphp
                @foreach($stats as $stat)
                <div class="stat-box flex items-center justify-between" style="border-left: 3px solid {{ $stat['color'] }}">
                    <div class="flex items-center gap-3">
                        <i class="fa-solid {{ $stat['icon'] }}" style="color: {{ $stat['color'] }}; font-size: 1.25rem;"></i>
                        <span class="text-white font-semibold">{{ app()->getLocale() == 'ar' ? $stat['label_ar'] : $stat['label_en'] }}</span>
                    </div>
                    <span class="text-2xl font-black" style="color: {{ $stat['color'] }};">{{ $stat['count'] }}</span>
                </div>
                @endforeach
            </div>
        </div>
        </div>
    </div>

    <!-- Fleet Distribution Chart -->
    <div class="section-container" style="animation-delay: 0.5s">
        <h2 class="section-title">
            <i class="fa-solid fa-chart-pie"></i>
            {{ app()->getLocale() == 'ar' ? 'توزيع الأسطول البياني' : 'Fleet Distribution Chart' }}
        </h2>
        <div class="premium-card">
            <div class="relative h-96 flex items-center justify-center">
                <canvas id="fleetPieChart"></canvas>
            </div>
        </div>
    </div>

</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('fleetPieChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: [
                '{{ app()->getLocale() == "ar" ? "متاحة" : "Available" }}',
                '{{ app()->getLocale() == "ar" ? "مؤجرة" : "Rented" }}',
                '{{ app()->getLocale() == "ar" ? "صيانة" : "Maintenance" }}',
                '{{ app()->getLocale() == "ar" ? "محجوزة" : "Reserved" }}'
            ],
            datasets: [{
                data: [
                    {{ $fleet_stats['available'] }},
                    {{ $fleet_stats['rented'] }},
                    {{ $fleet_stats['maintenance'] }},
                    {{ $fleet_stats['reserved'] }}
                ],
                backgroundColor: ['#00FF88', '#00D9FF', '#FFA94D', '#B19CD9'],
                borderColor: 'rgba(212, 175, 55, 0.3)',
                borderWidth: 2,
                hoverOffset: 15,
                spacing: 10,
                borderRadius: 40
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%',
            plugins: {
                legend: { 
                    display: true,
                    position: 'bottom',
                    labels: {
                        color: '#ffffff',
                        font: { size: 12, weight: 'bold' },
                        padding: 20,
                        usePointStyle: true
                    }
                }
            }
        }
    });
</script>
@endpush
@endsection