@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="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @forelse($inquiries as $inquiry)
                        <div class="bg-black/20 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->format('Y-m-d') }}</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">{{ $inquiry->car ? $inquiry->car->title : 'استفسار عام' }}</h4>
                                <p class="text-gray-400 text-xs leading-relaxed">{{ $inquiry->notes }}</p>
                            </div>
                            
                            @if($inquiry->admin_notes)
                            <div class="mt-6 p-4 bg-[#d4af37]/5 rounded-2xl border border-[#d4af37]/10">
                                <p class="text-[#d4af37] text-[10px] font-bold mb-1 uppercase tracking-widest">رد الإدارة:</p>
                                <p class="text-gray-300 text-xs">{{ $inquiry->admin_notes }}</p>
                            </div>
                            @endif
                        </div>
                        @empty
                        <div class="col-span-2 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">
                        {{ $inquiries->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection