@extends('layouts.frontend')

@section('title', 'لوحة التحكم - ' . $customer->name)

@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

        <!-- Header Section -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6 bg-[#111] p-8 rounded-3xl border border-gray-800 shadow-xl relative overflow-hidden">
            <div class="relative z-10">
                <span class="text-[#d4af37] text-sm font-bold uppercase tracking-widest mb-2 block">مرحباً بك،</span>
                <h1 class="text-3xl md:text-4xl font-black text-white">{{ $customer->name }}</h1>
                <p class="text-gray-400 mt-2 text-sm">آخر نشاط لك: {{ now()->format('Y-m-d') }}</p>
            </div>
            <div class="flex flex-wrap gap-4 relative z-10">
                <div class="bg-black/40 px-6 py-3 rounded-2xl border border-gray-800 text-center">
                    <div class="text-xs text-gray-500 mb-1">إجمالي المدفوعات</div>
                    <div class="text-[#d4af37] font-bold">{{ number_format($totalPayments) }} <span class="text-[10px]">ر.س</span></div>
                </div>
                <div class="bg-black/40 px-6 py-3 rounded-2xl border border-gray-800 text-center">
                    <div class="text-xs text-gray-500 mb-1">العقود النشطة</div>
                    <div class="text-white font-bold">{{ $rentals->where('status', 'active')->count() }}</div>
                </div>
            </div>
            <!-- Decor -->
            <div class="absolute -top-12 -right-12 w-48 h-48 bg-[#d4af37]/5 rounded-full blur-3xl"></div>
        </div>

        <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">
                <!-- Recent Rentals -->
                <section>
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-bold text-white flex items-center gap-3">
                            <span class="w-1.5 h-6 bg-[#d4af37] rounded-full"></span>
                            أحدث العقود
                        </h3>
                        <a href="{{ route('customer.rentals') }}" class="text-[#d4af37] text-sm hover:underline">عرض الكل</a>
                    </div>
                    
                    <div class="space-y-4">
                        @forelse($rentals->take(3) as $rental)
                        <div class="bg-[#111] 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-20 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-4 text-xs text-gray-500">
                                    <div>📅 من: {{ $rental->start_date->format('Y-m-d') }}</div>
                                    <div>💰 السعر: {{ number_format($rental->daily_price) }} ر.س</div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <a href="{{ route('customer.rental.show', $rental->id) }}" class="p-3 bg-white/5 rounded-xl hover:bg-[#d4af37] hover:text-black transition-all">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                </a>
                            </div>
                        </div>
                        @empty
                        <div class="bg-[#111] p-12 rounded-3xl border border-gray-800 text-center text-gray-500">
                            لا توجد عقود حالياً.
                        </div>
                        @endforelse
                    </div>
                </section>

                <!-- Recent Inquiries -->
                <section>
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-bold text-white flex items-center gap-3">
                            <span class="w-1.5 h-6 bg-[#d4af37] rounded-full"></span>
                            آخر الاستفسارات
                        </h3>
                        <a href="{{ route('customer.inquiries') }}" class="text-[#d4af37] text-sm hover:underline">عرض الكل</a>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @forelse($inquiries->take(4) as $inquiry)
                        <div class="bg-[#111] p-6 rounded-3xl border border-gray-800 hover:border-[#d4af37]/30 transition-all flex flex-col justify-between h-full">
                            <div>
                                <div class="flex justify-between items-center mb-4">
                                    <span class="text-[10px] text-gray-500 font-bold bg-black/40 px-3 py-1 rounded-full border border-gray-800">{{ $inquiry->created_at->diffForHumans() }}</span>
                                    <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase {{ $inquiry->status == 'replied' ? 'bg-[#d4af37]/10 text-[#d4af37]' : 'bg-blue-500/10 text-blue-500' }}">
                                        {{ $inquiry->status == 'replied' ? 'تم الرد' : 'قيد المراجعة' }}
                                    </span>
                                </div>
                                <h4 class="font-bold text-white mb-2 line-clamp-1">{{ $inquiry->car ? $inquiry->car->title : 'استفسار عام' }}</h4>
                                <p class="text-gray-400 text-xs line-clamp-2">{{ $inquiry->notes }}</p>
                            </div>
                        </div>
                        @empty
                        <div class="col-span-2 bg-[#111] p-12 rounded-3xl border border-gray-800 text-center text-gray-500">
                            لا توجد استفسارات حالياً.
                        </div>
                        @endforelse
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
@endsection