@extends('layouts.frontend')

@section('title', 'عقودي - TQ CARS')

@section('content')
<div class="py-20 bg-[#0a0a0a]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Alerts -->
        @if (session('success'))
            <div class="mb-8 p-5 rounded-2xl bg-green-500/10 border border-green-500/20 text-green-500 flex items-center gap-4 animate-fade-in shadow-xl shadow-green-900/10">
                <span class="text-2xl">✅</span>
                <span class="font-bold text-sm">{{ session('success') }}</span>
            </div>
        @endif

        @if (session('error'))
            <div class="mb-8 p-5 rounded-2xl bg-red-500/10 border border-red-500/20 text-red-500 flex items-center gap-4 animate-fade-in shadow-xl shadow-red-900/10">
                <span class="text-2xl">❌</span>
                <span class="font-bold text-sm">{{ session('error') }}</span>
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
            <!-- Sidebar Navigation -->
            <div class="lg:col-span-1 space-y-6">
                <div class="bg-[#111] rounded-3xl border border-gray-800 p-6 overflow-hidden sticky top-24">
                    <h3 class="text-gray-500 text-xs font-bold uppercase tracking-widest mb-6 px-4">القائمة السريعة</h3>
                    <nav class="space-y-2">
                        <a href="{{ route('customer.dashboard') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl {{ request()->routeIs('customer.dashboard') ? 'bg-[#d4af37] text-black font-bold' : 'text-gray-400 hover:bg-white/5 hover:text-white' }} transition-all">
                            <span class="text-xl">📊</span> لوحة التحكم
                        </a>
                        <a href="{{ route('customer.rentals') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl {{ request()->routeIs('customer.rentals*') ? 'bg-[#d4af37] text-black font-bold' : 'text-gray-400 hover:bg-white/5 hover:text-white' }} transition-all">
                            <span class="text-xl">📄</span> عقودي
                        </a>
                        <a href="{{ route('customer.inquiries') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl {{ request()->routeIs('customer.inquiries') ? 'bg-[#d4af37] text-black font-bold' : 'text-gray-400 hover:bg-white/5 hover:text-white' }} transition-all">
                            <span class="text-xl">💬</span> طلباتي
                        </a>
                        <a href="{{ route('customer.profile') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl {{ request()->routeIs('customer.profile') ? 'bg-[#d4af37] text-black font-bold' : 'text-gray-400 hover:bg-white/5 hover:text-white' }} transition-all">
                            <span class="text-xl">⚙️</span> الملف الشخصي
                        </a>
                        <form method="POST" action="{{ route('customer.logout') }}" class="mt-6 pt-6 border-t border-gray-800">
                            @csrf
                            <button type="submit" class="w-full flex items-center gap-4 px-4 py-3 rounded-xl text-red-500 hover:bg-red-500/10 transition-all font-bold">
                                <span class="text-xl">🚪</span> تسجيل الخروج
                            </button>
                        </form>
                    </nav>
                </div>
            </div>

            <!-- Main Content Area -->
            <div class="lg:col-span-2 space-y-10">
                <div class="bg-[#111] rounded-3xl border border-gray-800 p-8 shadow-xl">
                    <h3 class="text-2xl font-black text-white mb-8 flex items-center gap-3">
                        <span class="w-1.5 h-8 bg-[#d4af37] rounded-full"></span>
                        قائمة العقود والاتفاقيات
                    </h3>

                    <div class="space-y-4">
                        @forelse($rentals as $rental)
                        <div class="bg-black/20 p-6 rounded-3xl border border-gray-800 hover:border-[#d4af37]/30 transition-all group flex flex-col md:flex-row gap-6">
                            <div class="w-full md:w-32 h-24 rounded-2xl overflow-hidden shrink-0 border border-gray-800">
                                @php
                                    $car = $rental->car;
                                    $img = $car->mainImage ? asset('storage/'.$car->mainImage->path) : asset('images/login-bg.png');
                                @endphp
                                <img src="{{ $img }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                            </div>
                            <div class="flex-grow">
                                <div class="flex justify-between items-start mb-2">
                                    <h4 class="font-bold text-lg text-white group-hover:text-[#d4af37] transition-colors">{{ $rental->car->title }}</h4>
                                    <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase {{ $rental->status == 'active' ? 'bg-green-500/10 text-green-500 border border-green-500/20' : 'bg-gray-500/10 text-gray-500 border border-gray-500/20' }}">
                                        {{ $rental->status == 'active' ? 'نشط' : 'منتهي' }}
                                    </span>
                                </div>
                                <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-xs text-gray-500">
                                    <div class="flex items-center gap-2"><span>📅</span> من: {{ $rental->start_date->format('Y-m-d') }}</div>
                                    <div class="flex items-center gap-2"><span>📅</span> إلى: {{ $rental->end_date->format('Y-m-d') }}</div>
                                    <div class="flex items-center gap-2"><span>💰</span> السعر اليومي: {{ number_format($rental->daily_price) }} ر.س</div>
                                    <div class="flex items-center gap-2 font-bold text-[#d4af37]"><span>💳</span> الإجمالي: {{ number_format($rental->total_amount) }} ر.س</div>
                                </div>
                            </div>
                            <div class="flex items-center justify-end">
                                <a href="{{ route('customer.rental.show', $rental->id) }}" class="px-6 py-3 bg-white/5 rounded-xl hover:bg-[#d4af37] hover:text-black transition-all text-sm font-bold">
                                    عرض التفاصيل
                                </a>
                            </div>
                        </div>
                        @empty
                        <div class="bg-black/20 p-20 rounded-3xl border border-gray-800 text-center text-gray-500">
                            <div class="text-4xl mb-4">📄</div>
                            لا توجد عقود مسجلة حالياً.
                        </div>
                        @endforelse
                    </div>

                    <div class="mt-8">
                        {{ $rentals->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection