@extends('layouts.frontend')

@section('title', 'تفاصيل العقد - ' . $rental->car->title)

@section('content')
<div class="py-20 bg-[#0a0a0a]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 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-3 space-y-8">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center gap-4">
                        <a href="{{ route('customer.rentals') }}" class="p-2 bg-white/5 rounded-lg text-gray-400 hover:text-white">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                        </a>
                        <h1 class="text-2xl font-black text-white">تفاصيل العقد #{{ $rental->id }}</h1>
                    </div>
                    <a href="{{ route('admin.rentals.pdf', $rental->id) }}" target="_blank" class="px-6 py-2 bg-[#d4af37] rounded-xl text-black transition-all flex items-center gap-3 font-bold text-sm">
                        <span>📄</span> تحميل PDF
                    </a>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Dates Card -->
                    <div class="bg-[#111] p-8 rounded-3xl border border-gray-800 shadow-xl">
                        <h3 class="text-[#d4af37] text-xs font-bold uppercase tracking-widest mb-6 border-b border-gray-800 pb-4">فترة الإيجار</h3>
                        <div class="space-y-4">
                            <div class="flex justify-between">
                                <span class="text-gray-500">تاريخ الاستلام</span>
                                <span class="text-white font-bold">{{ $rental->start_date->format('Y-m-d') }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-500">تاريخ التسليم</span>
                                <span class="text-white font-bold">{{ $rental->end_date->format('Y-m-d') }}</span>
                            </div>
                            <div class="pt-4 border-t border-gray-800 flex justify-between font-bold">
                                <span class="text-gray-500">إجمالي الأيام</span>
                                <span class="text-[#d4af37]">{{ $rental->start_date->diffInDays($rental->end_date) + 1 }} يوم</span>
                            </div>
                        </div>
                    </div>

                    <!-- Car Card -->
                    <div class="bg-[#111] p-8 rounded-3xl border border-gray-800 shadow-xl flex gap-6">
                        <div class="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">
                        </div>
                        <div>
                            <h4 class="text-white font-bold text-lg mb-1">{{ $rental->car->title }}</h4>
                            <p class="text-gray-500 text-xs mb-4">{{ $rental->car->brand->name }} {{ $rental->car->model->name }}</p>
                            <div class="bg-black/40 px-4 py-2 rounded-xl inline-block">
                                <span class="text-xs text-gray-500">السعر اليومي:</span>
                                <span class="text-[#d4af37] font-bold text-sm">{{ number_format($rental->daily_price) }} ر.س</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Financial Details -->
                <div class="bg-[#111] p-8 rounded-3xl border border-gray-800 shadow-xl">
                    <h3 class="text-[#d4af37] text-xs font-bold uppercase tracking-widest mb-6 border-b border-gray-800 pb-4">التفاصيل المالية والمدفوعات</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-10">
                        <div class="bg-black/40 p-6 rounded-2xl border border-gray-800">
                            <div class="text-[10px] text-gray-500 uppercase font-bold mb-1">إجمالي العقد</div>
                            <div class="text-2xl font-black text-white">{{ number_format($rental->total_amount) }} <span class="text-xs">ر.س</span></div>
                        </div>
                        <div class="bg-black/40 p-6 rounded-2xl border border-gray-800">
                            <div class="text-[10px] text-gray-500 uppercase font-bold mb-1">المدفوع</div>
                            <div class="text-2xl font-black text-green-500">{{ number_format($rental->receipts->sum('amount')) }} <span class="text-xs">ر.س</span></div>
                        </div>
                        <div class="bg-black/40 p-6 rounded-2xl border border-gray-800">
                            <div class="text-[10px] text-gray-500 uppercase font-bold mb-1">المتبقي</div>
                            <div class="text-2xl font-black text-red-500">{{ number_format($rental->total_amount - $rental->receipts->sum('amount')) }} <span class="text-xs">ر.س</span></div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <h4 class="text-white font-bold text-sm">سجل السندات</h4>
                        @forelse($rental->receipts as $receipt)
                        <div class="flex justify-between items-center py-4 px-6 bg-black/20 rounded-2xl border border-gray-800">
                            <div>
                                <div class="text-white font-bold">{{ number_format($receipt->amount) }} ر.س</div>
                                <div class="text-[10px] text-gray-500">{{ $receipt->payment_method_label }} - {{ $receipt->created_at->format('Y-m-d') }}</div>
                            </div>
                            <span class="text-[10px] font-bold text-green-500 bg-green-500/10 px-3 py-1 rounded-full uppercase border border-green-500/20">مدفوع</span>
                        </div>
                        @empty
                        <p class="text-gray-500 text-sm text-center py-4">لا توجد سندات قبض مسجلة.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection