@extends('layouts.app')

@section('content')

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <!-- Back Button -->
        <div class="mb-6">
            <a href="{{ route('admin.cars.index') }}" class="text-[#d4af37] hover:text-[#e8c547] flex items-center gap-2 font-bold">
                ← {{ app()->getLocale() == 'ar' ? 'العودة للقائمة' : 'Back to List' }}
            </a>
        </div>

        <!-- Image Gallery Section -->
        <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden mb-6 shadow-2xl">
            <div class="relative">
                <!-- Main Image -->
                <div class="relative bg-black h-96">
                    @php
                        $mainImage = $car->mainImage ?? $car->images->first();
                        $imagePath = $mainImage ? $mainImage->path : null;
                        $imageUrl = $imagePath ? (str_starts_with($imagePath, 'http') ? $imagePath : asset('storage/'.$imagePath)) : asset('images/login-bg.png');
                    @endphp
                    <img id="mainImage" src="{{ $imageUrl }}" alt="{{ $car->title }}" class="w-full h-full object-cover" onerror="this.src='{{ asset('images/login-bg.png') }}'">
                    
                    <!-- Status Badge -->
                    <div class="absolute top-4 right-4">
                        <span class="px-4 py-2 rounded-full text-sm font-bold 
                            {{ $car->status == 'available' ? 'bg-green-500/80 text-white' : 'bg-red-500/80 text-white' }}">
                            {{ $car->status }}
                        </span>
                    </div>
                </div>

                <!-- Thumbnail Gallery -->
                @if($car->images->count() > 1)
                <div class="bg-black/50 px-6 py-4 flex gap-3 overflow-x-auto">
                    @foreach($car->images as $image)
                        <img 
                            src="{{ str_starts_with($image->path, 'http') ? $image->path : asset('storage/'.$image->path) }}" 
                            alt="Thumbnail" 
                            class="w-16 h-16 rounded-lg object-cover cursor-pointer border-2 border-transparent hover:border-[#d4af37] transition" 
                            onclick="document.getElementById('mainImage').src = '{{ str_starts_with($image->path, 'http') ? $image->path : asset('storage/'.$image->path) }}'"
                            onerror="this.src='{{ asset('images/login-bg.png') }}'">
                    @endforeach
                </div>
                @endif
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column: Details -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Title & Price -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-8 shadow-lg">
                    <div class="flex justify-between items-start">
                        <div>
                            <h1 class="text-4xl font-black text-white mb-2">{{ $car->title }}</h1>
                            <p class="text-gray-400 text-lg">{{ $car->brand->name ?? 'Unknown' }} | {{ $car->carModel->name ?? 'Unknown' }} | {{ $car->year }}</p>
                        </div>
                        <div class="text-right">
                            <div class="text-4xl font-black text-[#d4af37]">
                                {{ number_format($car->price ?? $car->daily_price, 0) }}
                            </div>
                            <div class="text-sm text-gray-500">{{ app()->getLocale() == 'ar' ? 'ر.س' : 'SAR' }}</div>
                        </div>
                    </div>
                </div>

                <!-- Quick Stats -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="bg-[#111] border border-gray-800 rounded-xl p-4 text-center">
                        <div class="text-xs text-gray-500 uppercase mb-2">{{ app()->getLocale() == 'ar' ? 'سنة' : 'Year' }}</div>
                        <div class="text-2xl font-bold text-[#d4af37]">{{ $car->year }}</div>
                    </div>
                    <div class="bg-[#111] border border-gray-800 rounded-xl p-4 text-center">
                        <div class="text-xs text-gray-500 uppercase mb-2">{{ app()->getLocale() == 'ar' ? 'المسافة' : 'Mileage' }}</div>
                        <div class="text-2xl font-bold text-white">{{ number_format($car->mileage ?? 0) }}</div>
                        <div class="text-xs text-gray-500">km</div>
                    </div>
                    <div class="bg-[#111] border border-gray-800 rounded-xl p-4 text-center">
                        <div class="text-xs text-gray-500 uppercase mb-2">{{ app()->getLocale() == 'ar' ? 'المقاعد' : 'Seats' }}</div>
                        <div class="text-2xl font-bold text-white">{{ $car->seats ?? '—' }}</div>
                    </div>
                    <div class="bg-[#111] border border-gray-800 rounded-xl p-4 text-center">
                        <div class="text-xs text-gray-500 uppercase mb-2">{{ app()->getLocale() == 'ar' ? 'الأبواب' : 'Doors' }}</div>
                        <div class="text-2xl font-bold text-white">{{ $car->doors ?? '—' }}</div>
                    </div>
                </div>

                <!-- Specifications -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-8 shadow-lg">
                    <h2 class="text-xl font-bold text-white mb-6">{{ app()->getLocale() == 'ar' ? '⚙️ المواصفات' : '⚙️ Specifications' }}</h2>
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'نوع الوقود' : 'Fuel Type' }}</div>
                            <div class="text-white font-bold">{{ $car->fuel_type ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'الناقل' : 'Transmission' }}</div>
                            <div class="text-white font-bold">{{ $car->transmission ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'نوع المحرك' : 'Engine Size' }}</div>
                            <div class="text-white font-bold">{{ $car->engine_size ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'القوة الحصانية' : 'Horsepower' }}</div>
                            <div class="text-white font-bold">{{ $car->horsepower ?? '—' }} HP</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'نوع المحرك' : 'Drive Type' }}</div>
                            <div class="text-white font-bold">{{ $car->drive_type ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'نوع الجسم' : 'Body Type' }}</div>
                            <div class="text-white font-bold">{{ $car->body_type ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'اللون الخارجي' : 'Exterior Color' }}</div>
                            <div class="flex items-center gap-2">
                                @if($car->color_ext)
                                    <div class="w-6 h-6 rounded border border-gray-600" style="background-color: {{ $car->color_ext }}"></div>
                                @endif
                                <span class="text-white font-bold">{{ $car->color_ext ?? '—' }}</span>
                            </div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'اللون الداخلي' : 'Interior Color' }}</div>
                            <div class="flex items-center gap-2">
                                @if($car->color_int)
                                    <div class="w-6 h-6 rounded border border-gray-600" style="background-color: {{ $car->color_int }}"></div>
                                @endif
                                <span class="text-white font-bold">{{ $car->color_int ?? '—' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Description -->
                @if($car->description)
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-8 shadow-lg">
                    <h2 class="text-xl font-bold text-white mb-4">{{ app()->getLocale() == 'ar' ? '📝 الوصف' : '📝 Description' }}</h2>
                    <p class="text-gray-300 leading-relaxed">{{ $car->description }}</p>
                </div>
                @endif

                <!-- Features -->
                @php
                    $features = is_string($car->features) ? json_decode($car->features, true) : $car->features;
                @endphp
                @if($features && count($features) > 0)
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-8 shadow-lg">
                    <h2 class="text-xl font-bold text-white mb-4">{{ app()->getLocale() == 'ar' ? '✨ المميزات' : '✨ Features' }}</h2>
                    <div class="grid grid-cols-2 gap-3">
                        @foreach($features as $feature)
                            <div class="flex items-center gap-2">
                                <span class="text-[#d4af37]">✓</span>
                                <span class="text-gray-300">{{ $feature }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Insurance Information -->
                @if($insurances->count() > 0)
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-8 shadow-lg">
                    <h2 class="text-xl font-bold text-white mb-6">{{ app()->getLocale() == 'ar' ? '🛡️ التأمين' : '🛡️ Insurance' }}</h2>
                    <div class="space-y-4">
                        @foreach($insurances as $insurance)
                            <div class="bg-black/40 border border-gray-700 rounded-lg p-4">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <div class="font-bold text-white">{{ $insurance->company->name ?? 'Unknown' }}</div>
                                        <div class="text-xs text-gray-500">{{ app()->getLocale() == 'ar' ? 'رقم البوليصة' : 'Policy #' }}: {{ $insurance->policy_number }}</div>
                                    </div>
                                    <span class="text-[10px] px-2 py-1 rounded-full font-bold
                                        {{ $insurance->status === 'active' && !$insurance->isExpired() ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                                        {{ $insurance->isExpired() ? (app()->getLocale() == 'ar' ? 'منتهي' : 'Expired') : (app()->getLocale() == 'ar' ? 'نشط' : 'Active') }}
                                    </span>
                                </div>
                                <div class="grid grid-cols-2 gap-3 text-xs">
                                    <div>
                                        <span class="text-gray-500">{{ app()->getLocale() == 'ar' ? 'النوع' : 'Type' }}:</span>
                                        <span class="text-gray-300">{{ $insurance->insurance_type }}</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">{{ app()->getLocale() == 'ar' ? 'المبلغ المغطى' : 'Coverage' }}:</span>
                                        <span class="text-gray-300">{{ number_format($insurance->coverage_amount, 0) }}</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">{{ app()->getLocale() == 'ar' ? 'من' : 'From' }}:</span>
                                        <span class="text-gray-300">{{ $insurance->start_date->format('Y-m-d') }}</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">{{ app()->getLocale() == 'ar' ? 'إلى' : 'To' }}:</span>
                                        <span class="text-gray-300">{{ $insurance->end_date->format('Y-m-d') }}</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Maintenance Records -->
                @if($maintenance->count() > 0)
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-8 shadow-lg">
                    <h2 class="text-xl font-bold text-white mb-6">{{ app()->getLocale() == 'ar' ? '🔧 سجل الصيانة' : '🔧 Maintenance History' }}</h2>
                    <div class="space-y-3 max-h-96 overflow-y-auto">
                        @foreach($maintenance as $record)
                            <div class="bg-black/40 border border-gray-700 rounded-lg p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="font-bold text-white">{{ $record->description }}</div>
                                    <span class="text-[#d4af37] font-bold">{{ number_format($record->cost, 0) }} {{ app()->getLocale() == 'ar' ? 'ر.س' : 'SAR' }}</span>
                                </div>
                                <div class="flex justify-between text-xs text-gray-500">
                                    <span>{{ $record->maintenance_date->format('Y-m-d H:i') }}</span>
                                    @if($record->next_due_km)
                                    <span>{{ app()->getLocale() == 'ar' ? 'الصيانة التالية عند' : 'Next due at' }}: {{ number_format($record->next_due_km) }} km</span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Documents -->
                @if($documents->count() > 0)
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-8 shadow-lg">
                    <h2 class="text-xl font-bold text-white mb-6">{{ app()->getLocale() == 'ar' ? '📄 الوثائق' : '📄 Documents' }}</h2>
                    <div class="space-y-4">
                        @foreach($documents as $doc)
                            <div class="bg-black/40 border border-gray-700 rounded-lg p-4">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <div class="font-bold text-white">{{ app()->getLocale() == 'ar' ? 'وثائق السيارة' : 'Vehicle Documents' }}</div>
                                    </div>
                                    <span class="text-[10px] px-2 py-1 rounded-full font-bold
                                        {{ $doc->calculated_status === 'valid' ? 'bg-green-500/20 text-green-400' : ($doc->calculated_status === 'expiring_soon' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-red-500/20 text-red-400') }}">
                                        {{ $doc->calculated_status === 'valid' ? (app()->getLocale() == 'ar' ? '✓ صالح' : '✓ Valid') : ($doc->calculated_status === 'expiring_soon' ? (app()->getLocale() == 'ar' ? '⚠️ ينتهي قريباً' : '⚠️ Expiring Soon') : (app()->getLocale() == 'ar' ? '✕ منتهي' : '✕ Expired')) }}
                                    </span>
                                </div>
                                <div class="grid grid-cols-2 gap-4 text-xs">
                                    <div>
                                        <span class="text-gray-500 block mb-1">{{ app()->getLocale() == 'ar' ? 'صلاحية التسجيل' : 'Registration Expiry' }}</span>
                                        <span class="text-white font-bold">{{ $doc->registration_expiry_date->format('Y-m-d') }}</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500 block mb-1">{{ app()->getLocale() == 'ar' ? 'صلاحية الفحص' : 'Inspection Expiry' }}</span>
                                        <span class="text-white font-bold">{{ $doc->inspection_expiry_date->format('Y-m-d') }}</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500 block mb-1">{{ app()->getLocale() == 'ar' ? 'تاريخ الفحص' : 'Inspection Date' }}</span>
                                        <span class="text-white font-bold">{{ $doc->inspection_date->format('Y-m-d') }}</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500 block mb-1">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</span>
                                        <span class="text-white font-bold">{{ $doc->status }}</span>
                                    </div>
                                </div>
                                @if($doc->notes)
                                <div class="mt-3 pt-3 border-t border-gray-700">
                                    <span class="text-gray-500 text-xs">{{ app()->getLocale() == 'ar' ? 'ملاحظات' : 'Notes' }}: </span>
                                    <span class="text-gray-300 text-xs">{{ $doc->notes }}</span>
                                </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>

            <!-- Right Sidebar -->
            <div class="space-y-6">
                <!-- Pricing Details -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-6 shadow-lg">
                    <h2 class="text-lg font-bold text-white mb-4">{{ app()->getLocale() == 'ar' ? '💰 الأسعار' : '💰 Pricing' }}</h2>
                    <div class="space-y-3">
                        @if($car->daily_price)
                        <div class="flex justify-between items-center pb-3 border-b border-gray-700">
                            <span class="text-gray-400 text-sm">{{ app()->getLocale() == 'ar' ? 'السعر اليومي' : 'Daily' }}</span>
                            <span class="text-[#d4af37] font-bold">{{ number_format($car->daily_price, 0) }}</span>
                        </div>
                        @endif
                        @if($car->weekly_price)
                        <div class="flex justify-between items-center pb-3 border-b border-gray-700">
                            <span class="text-gray-400 text-sm">{{ app()->getLocale() == 'ar' ? 'السعر الأسبوعي' : 'Weekly' }}</span>
                            <span class="text-[#d4af37] font-bold">{{ number_format($car->weekly_price, 0) }}</span>
                        </div>
                        @endif
                        @if($car->monthly_price)
                        <div class="flex justify-between items-center">
                            <span class="text-gray-400 text-sm">{{ app()->getLocale() == 'ar' ? 'السعر الشهري' : 'Monthly' }}</span>
                            <span class="text-[#d4af37] font-bold">{{ number_format($car->monthly_price, 0) }}</span>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Additional Info -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-6 shadow-lg">
                    <h2 class="text-lg font-bold text-white mb-4">{{ app()->getLocale() == 'ar' ? 'ℹ️ معلومات إضافية' : 'ℹ️ Additional Info' }}</h2>
                    <div class="space-y-3 text-sm">
                        <div>
                            <div class="text-gray-500 mb-1">{{ app()->getLocale() == 'ar' ? 'رقم الهيكل (VIN)' : 'VIN' }}</div>
                            <div class="text-white font-bold break-all">{{ $car->vin ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-gray-500 mb-1">{{ app()->getLocale() == 'ar' ? 'رقم اللوحة' : 'Plate Number' }}</div>
                            <div class="text-white font-bold">{{ $car->plate_number ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-gray-500 mb-1">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Condition' }}</div>
                            <div class="text-white font-bold">{{ ucfirst($car->condition) ?? '—' }}</div>
                        </div>
                        @if($car->insurance_deposit)
                        <div>
                            <div class="text-gray-500 mb-1">{{ app()->getLocale() == 'ar' ? 'تأمين التأجير' : 'Insurance Deposit' }}</div>
                            <div class="text-white font-bold">{{ number_format($car->insurance_deposit, 0) }}</div>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Rental & Inquiry Stats -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-6 shadow-lg">
                    <h2 class="text-lg font-bold text-white mb-4">{{ app()->getLocale() == 'ar' ? '📊 الإحصائيات' : '📊 Statistics' }}</h2>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center pb-3 border-b border-gray-700">
                            <span class="text-gray-400 text-sm">{{ app()->getLocale() == 'ar' ? 'إجمالي العقود' : 'Total Rentals' }}</span>
                            <span class="text-[#d4af37] font-bold text-lg">{{ $totalRentals }}</span>
                        </div>
                        <div class="flex justify-between items-center pb-3 border-b border-gray-700">
                            <span class="text-gray-400 text-sm">{{ app()->getLocale() == 'ar' ? 'العقود النشطة' : 'Active Rentals' }}</span>
                            <span class="text-green-400 font-bold text-lg">{{ $activeRentals }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-400 text-sm">{{ app()->getLocale() == 'ar' ? 'الاستفسارات' : 'Inquiries' }}</span>
                            <span class="text-blue-400 font-bold text-lg">{{ $inquiries }}</span>
                        </div>
                    </div>
                </div>

                <!-- Branch Info -->
                @if($car->branch)
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-6 shadow-lg">
                    <h2 class="text-lg font-bold text-white mb-4">{{ app()->getLocale() == 'ar' ? '🏢 الفرع' : '🏢 Branch' }}</h2>
                    <div class="text-gray-300">{{ $car->branch->name }}</div>
                </div>
                @endif

                <!-- Actions -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl p-6 shadow-lg">
                    <h2 class="text-lg font-bold text-white mb-4">{{ app()->getLocale() == 'ar' ? '⚙️ العمليات' : '⚙️ Actions' }}</h2>
                    <div class="grid grid-cols-2 gap-3">
                        <a href="{{ route('admin.cars.edit', $car->id) }}" class="px-4 py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg transition text-center text-sm">
                            {{ app()->getLocale() == 'ar' ? '✏️ تعديل' : '✏️ Edit' }}
                        </a>
                        <form action="{{ route('admin.cars.destroy', $car->id) }}" method="POST" class="w-full">
                            @csrf @method('DELETE')
                            <button type="submit" class="w-full px-4 py-3 bg-red-500 hover:bg-red-600 text-white font-bold rounded-lg transition text-sm" onclick="return confirm('{{ app()->getLocale() == 'ar' ? 'هل أنت متأكد من حذف السيارة؟' : 'Are you sure you want to delete this car?' }}')">
                                {{ app()->getLocale() == 'ar' ? '🗑️ حذف' : '🗑️ Delete' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection