@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">
        <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 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 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 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 bg-[#d4af37] text-black font-bold 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">
                <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>

                    @if(session('success'))
                        <div class="mb-6 p-4 bg-green-500/10 border border-green-500/20 text-green-500 rounded-2xl text-sm font-bold">
                            {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ route('customer.profile.update') }}" method="POST" class="space-y-6">
                        @csrf
                        @method('PUT')

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-gray-400 text-xs font-bold mb-2 uppercase tracking-widest mr-2">الاسم الكامل</label>
                                <input type="text" name="name" value="{{ old('name', $customer->name) }}" class="w-full bg-black/40 border border-gray-800 rounded-2xl px-6 py-4 text-white focus:border-[#d4af37] transition-all outline-none">
                                @error('name') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block text-gray-400 text-xs font-bold mb-2 uppercase tracking-widest mr-2">رقم الهاتف</label>
                                <input type="text" name="phone" value="{{ old('phone', $customer->phone) }}" class="w-full bg-black/40 border border-gray-800 rounded-2xl px-6 py-4 text-white focus:border-[#d4af37] transition-all outline-none">
                                @error('phone') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <div>
                            <label class="block text-gray-400 text-xs font-bold mb-2 uppercase tracking-widest mr-2">البريد الإلكتروني</label>
                            <input type="email" name="email" value="{{ old('email', $customer->email) }}" class="w-full bg-black/40 border border-gray-800 rounded-2xl px-6 py-4 text-white focus:border-[#d4af37] transition-all outline-none">
                            @error('email') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                        </div>

                        <hr class="border-gray-800 my-8">

                        <h4 class="text-white font-bold mb-4">تغيير كلمة المرور (اختياري)</h4>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-gray-400 text-xs font-bold mb-2 uppercase tracking-widest mr-2">كلمة المرور الجديدة</label>
                                <input type="password" name="password" class="w-full bg-black/40 border border-gray-800 rounded-2xl px-6 py-4 text-white focus:border-[#d4af37] transition-all outline-none">
                                @error('password') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block text-gray-400 text-xs font-bold mb-2 uppercase tracking-widest mr-2">تأكيد كلمة المرور</label>
                                <input type="password" name="password_confirmation" class="w-full bg-black/40 border border-gray-800 rounded-2xl px-6 py-4 text-white focus:border-[#d4af37] transition-all outline-none">
                            </div>
                        </div>

                        <div class="pt-6">
                            <button type="submit" class="w-full md:w-auto px-12 py-4 bg-[#d4af37] hover:bg-[#b8962d] text-black font-black rounded-2xl transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg shadow-[#d4af37]/20">
                                حفظ التغييرات
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection