@extends('layouts.frontend')

@section('title', $car->title)

@section('content')
<div class="py-12 bg-[#0a0a0a]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="flex mb-8 text-sm text-gray-500" aria-label="Breadcrumb">
            <ol class="flex items-center space-x-2 space-x-reverse">
                <li><a href="{{ route('home') }}" class="hover:text-white">الرئيسية</a></li>
                <li><span class="mx-2">/</span></li>
                <li><a href="{{ route('cars.index') }}" class="hover:text-white">السيارات</a></li>
                <li><span class="mx-2">/</span></li>
                <li class="text-[#d4af37]">{{ $car->title }}</li>
            </ol>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- Left: Gallery -->
            <div class="space-y-4">
                <div class="h-[500px] rounded-2xl overflow-hidden border border-gray-800">
                    @php
                        $imagePath = $car->mainImage ? $car->mainImage->path : null;
                        $imageUrl = $imagePath ? (str_starts_with($imagePath, 'http') ? $imagePath : asset('storage/'.$imagePath)) : 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&q=80&w=1200';
                    @endphp
                    <img id="main-gallery-image" src="{{ $imageUrl }}" class="w-full h-full object-cover" alt="{{ $car->title }}">
                </div>
                <div class="grid grid-cols-4 gap-4">
                    @foreach($car->images as $image)
                    @php
                        $thumbUrl = str_starts_with($image->path, 'http') ? $image->path : asset('storage/'.$image->path);
                    @endphp
                    <div class="h-24 rounded-xl overflow-hidden border border-gray-800 cursor-pointer hover:border-[#d4af37] transition-all" onclick="document.getElementById('main-gallery-image').src = '{{ $thumbUrl }}'">
                        <img src="{{ $thumbUrl }}" class="w-full h-full object-cover" alt="Gallery">
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Right: Info -->
            <div class="space-y-8">
                <div>
                    <div class="flex items-center gap-3 mb-4">
                        <span class="bg-[#d4af37]/20 text-[#d4af37] text-xs font-bold px-3 py-1 rounded-full border border-[#d4af37]/30">{{ $car->year }}</span>
                        <span class="bg-blue-500/20 text-blue-400 text-xs font-bold px-3 py-1 rounded-full border border-blue-500/30">{{ $car->type == 'sale' ? 'للبيع' : 'للايجار' }}</span>
                        <span class="bg-{{ $car->dynamic_status['color'] }}-500/20 text-{{ $car->dynamic_status['color'] }}-400 text-xs font-bold px-3 py-1 rounded-full border border-{{ $car->dynamic_status['color'] }}-500/30">
                            {{ $car->dynamic_status['label'] }}
                        </span>
                    </div>
                    <h1 class="text-4xl font-bold mb-4">{{ $car->title }}</h1>
                    <div class="text-3xl font-bold text-[#d4af37]">
                        @if($car->price)
                            {{ number_format($car->price) }} ر.س
                        @elseif($car->daily_price)
                            {{ number_format($car->daily_price) }} ر.س <span class="text-sm text-gray-500">/ يومي</span>
                        @endif
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-[#111] p-4 rounded-xl border border-gray-800">
                        <div class="text-gray-500 text-xs mb-1">الممشى</div>
                        <div class="font-bold">{{ number_format($car->mileage) }} كم</div>
                    </div>
                    <div class="bg-[#111] p-4 rounded-xl border border-gray-800">
                        <div class="text-gray-500 text-xs mb-1">ناقل الحركة</div>
                        <div class="font-bold">{{ $car->transmission }}</div>
                    </div>
                    <div class="bg-[#111] p-4 rounded-xl border border-gray-800">
                        <div class="text-gray-500 text-xs mb-1">نوع الوقود</div>
                        <div class="font-bold">{{ $car->fuel_type }}</div>
                    </div>
                    <div class="bg-[#111] p-4 rounded-xl border border-gray-800">
                        <div class="text-gray-500 text-xs mb-1">الضمان</div>
                        <div class="font-bold">متاح</div>
                    </div>
                </div>

                <div>
                    <h3 class="text-xl font-bold mb-4 border-r-4 border-[#d4af37] pr-4">المميزات الرئيسية</h3>
                    <div class="grid grid-cols-2 gap-y-3">
                        @if($car->features && is_array($car->features))
                            @foreach($car->features as $feature)
                            <div class="flex items-center text-sm text-gray-300">
                                <span class="ml-2 text-[#d4af37]">✓</span> {{ $feature }}
                            </div>
                            @endforeach
                        @else
                            <div class="text-gray-500 text-sm italic">لا توجد مميزات مسجلة.</div>
                        @endif
                    </div>
                </div>

                <div class="pt-8 border-t border-gray-800">
                    <div class="flex gap-4">
                        <button onclick="document.getElementById('inquiry-form').scrollIntoView({behavior: 'smooth'})" class="btn-gold flex-grow py-4 rounded-xl">احجز موعد معاينة</button>
                        <a href="https://wa.me/966501234567" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-6 py-4 rounded-xl transition-all">
                            WhatsApp
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Details & Inquiry Form -->
        <div class="mt-20 grid grid-cols-1 lg:grid-cols-3 gap-12">
            <div class="lg:col-span-2 space-y-10">
                @if($addOns->count() > 0)
                <div class="bg-[#111] p-8 rounded-[2.5rem] border border-gray-800 relative overflow-hidden group">
                    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[#d4af37] to-transparent opacity-50"></div>
                    
                    <div class="flex items-center justify-between mb-8">
                        <div>
                            <h3 class="text-2xl font-bold flex items-center gap-3">
                                <span class="text-3xl">🚀</span>
                                عزز تجربتك
                            </h3>
                            <p class="text-gray-500 text-sm mt-1">اختر من خدماتنا المميزة لراحة بال قصوى</p>
                        </div>
                        <div class="hidden md:block">
                            <span class="text-[10px] text-gray-500 font-bold uppercase tracking-widest bg-gray-800/50 px-3 py-1 rounded-full border border-gray-700">Premium Add-ons</span>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach($addOns as $addOn)
                            @php
                                $price = $addOn->pivot->custom_price ?? $addOn->price;
                            @endphp
                            <div class="bg-black/40 border {{ $addOn->is_bundle ? 'border-[#d4af37]/40' : 'border-gray-800' }} rounded-2xl p-5 hover:border-[#d4af37]/60 transition-all group/card relative">
                                @if($addOn->is_bundle)
                                    <div class="absolute -top-3 -right-3">
                                        <span class="bg-[#d4af37] text-black text-[10px] font-black px-3 py-1 rounded-lg shadow-lg shadow-[#d4af37]/20">باقة مميزة</span>
                                    </div>
                                @endif
                                
                                <div class="flex justify-between items-start mb-3">
                                    <div class="p-2 bg-gray-800/50 rounded-lg group-hover/card:bg-[#d4af37]/10 transition-colors">
                                        @if($addOn->name == 'تأمين شامل') 🛡️ @elseif($addOn->name == 'كيلومترات مفتوحة') 🛣️ @elseif($addOn->name == 'إضافة كرسي اطفال') 👶 @elseif($addOn->name == 'حماية الإطارات والزجاج') 🛞 @else ✨ @endif
                                    </div>
                                    <div class="text-left">
                                        <div class="text-[#d4af37] font-bold">{{ number_format($price) }} ر.س</div>
                                        <div class="text-[10px] text-gray-600 font-bold uppercase">{{ $addOn->price_type == 'daily' ? 'يومي' : 'ثابت' }}</div>
                                    </div>
                                </div>
                                
                                <h4 class="font-bold text-white text-sm mb-1">{{ $addOn->name }}</h4>
                                <p class="text-gray-500 text-xs leading-relaxed line-clamp-2">{{ $addOn->description }}</p>
                                
                                @if($addOn->badge)
                                    <div class="mt-3 flex">
                                        <span class="text-[9px] font-bold text-[#d4af37] border border-[#d4af37]/30 px-2 py-0.5 rounded-md bg-[#d4af37]/5">{{ $addOn->badge }}</span>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                    
                    <div class="mt-8 p-4 bg-[#d4af37]/5 border border-[#d4af37]/20 rounded-xl">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-[#d4af37] rounded-full flex items-center justify-center text-black font-bold">💡</div>
                            <div class="text-sm">
                                <span class="text-gray-400">مثال للسعر مع</span> 
                                <span class="text-white font-bold">الباقة الذهبية:</span>
                                <span class="text-[#d4af37] font-bold mr-2">{{ number_format($car->daily_price + ($addOns->where('is_bundle', true)->first()->pivot->custom_price ?? ($addOns->where('is_bundle', true)->first()->price ?? 0))) }} ر.س / يومي</span>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <div>
                    <h3 class="text-2xl font-bold mb-6">الوصف</h3>
                    <div class="text-gray-400 leading-relaxed">
                        {{ $car->description ?? 'لا يوجد وصف متاح لهذه السيارة.' }}
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold mb-6">المواصفات التقنية</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="flex justify-between p-4 bg-[#111] rounded-lg">
                            <span class="text-gray-500">سنة الصنع</span>
                            <span class="text-white">{{ $car->year }}</span>
                        </div>
                        <div class="flex justify-between p-4 bg-[#111] rounded-lg">
                            <span class="text-gray-500">معرض السيارة</span>
                            <span class="text-white">{{ $car->branch->name ?? 'غير محدد' }}</span>
                        </div>
                        <div class="flex justify-between p-4 bg-[#111] rounded-lg">
                            <span class="text-gray-500">نوع الهيكل</span>
                            <span class="text-white">{{ $car->body_type }}</span>
                        </div>
                        <div class="flex justify-between p-4 bg-[#111] rounded-lg">
                            <span class="text-gray-500">ناقل الحركة</span>
                            <span class="text-white">{{ $car->transmission }}</span>
                        </div>
                        <div class="flex justify-between p-4 bg-[#111] rounded-lg">
                            <span class="text-gray-500">نوع الوقود</span>
                            <span class="text-white">{{ $car->fuel_type }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div id="inquiry-form" class="lg:col-span-1">
                <div class="bg-[#111] p-8 rounded-2xl border border-gray-800 sticky top-24">
                    <h3 class="text-xl font-bold mb-6">استفسر عن هذه السيارة</h3>
                    <form action="{{ route('inquiries.store') }}" method="POST" class="space-y-4">
                        @csrf
                        <input type="hidden" name="car_id" value="{{ $car->id }}">
                        
                        <div>
                            <label class="block text-xs text-gray-500 mb-2">نوع الطلب</label>
                            <select name="request_type" class="w-full bg-[#1a1a1a] border-gray-700 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none">
                                <option value="inquiry">استفسار عام</option>
                                <option value="test_drive">طلب معاينة/تجربة</option>
                                <option value="purchase">طلب شراء</option>
                                <option value="rent">طلب تأجير</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-xs text-gray-500 mb-2">الاسم الكامل</label>
                            <input type="text" name="name" required class="w-full bg-[#1a1a1a] border-gray-700 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none">
                        </div>
                        
                        <div>
                            <label class="block text-xs text-gray-500 mb-2">رقم الجوال</label>
                            <input type="text" name="phone" required class="w-full bg-[#1a1a1a] border-gray-700 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none">
                        </div>
                        
                        <div>
                            <label class="block text-xs text-gray-500 mb-2">ملاحظات إضافية</label>
                            <textarea name="notes" rows="3" class="w-full bg-[#1a1a1a] border-gray-700 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none"></textarea>
                        </div>

                        <button type="submit" class="btn-gold w-full py-4 rounded-xl font-bold">إرسال الطلب</button>
                    </form>
                    
                    @if(session('success'))
                        <div class="mt-4 p-4 bg-green-500/20 text-green-400 text-sm rounded-lg border border-green-500/30">
                            {{ session('success') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection