@extends('layouts.app')

@section('content')
    <div dir="rtl">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-[#111] overflow-hidden shadow-2xl rounded-2xl border border-gray-800">
                <div class="p-8">
                    <div class="flex items-center justify-between mb-8 border-b border-gray-800 pb-6">
                        <h2 class="text-3xl font-bold text-white">إعدادات الموقع والقسم الرئيسي</h2>
                    </div>

                    @if (session('success'))
                        <div class="mb-6 p-4 bg-green-900/30 border border-green-500/50 text-green-400 rounded-xl flex items-center gap-3">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" class="space-y-10">
                        @csrf
                        @method('PUT')

                        <!-- Hero Section Settings -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
                            <div class="space-y-6">
                                <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4">القسم الرئيسي (Hero Section)</h3>
                                
                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">العنوان الرئيسي</label>
                                    <input type="text" name="hero_title" value="{{ old('hero_title', $settings->hero_title) }}" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">
                                    @error('hero_title') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                </div>

                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">العنوان الفرعي</label>
                                    <textarea name="hero_subtitle" rows="3" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">{{ old('hero_subtitle', $settings->hero_subtitle) }}</textarea>
                                    @error('hero_subtitle') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                </div>

                                <div class="grid grid-cols-3 gap-4">
                                    <div class="space-y-2">
                                        <label class="text-sm font-medium text-gray-400">عدد السيارات</label>
                                        <input type="text" name="hero_cars_count" value="{{ old('hero_cars_count', $settings->hero_cars_count) }}" 
                                            class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">
                                    </div>
                                    <div class="space-y-2">
                                        <label class="text-sm font-medium text-gray-400">سنوات الخبرة</label>
                                        <input type="text" name="hero_experience_years" value="{{ old('hero_experience_years', $settings->hero_experience_years) }}" 
                                            class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">
                                    </div>
                                    <div class="space-y-2">
                                        <label class="text-sm font-medium text-gray-400">عدد العملاء</label>
                                        <input type="text" name="hero_customers_count" value="{{ old('hero_customers_count', $settings->hero_customers_count) }}" 
                                            class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">
                                    </div>
                                </div>
                            </div>

                            <div class="space-y-6">
                                <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4">خلفية القسم الرئيسي</h3>
                                
                                <div class="space-y-4">
                                    <label class="text-sm font-medium text-gray-400 block">نوع الخلفية</label>
                                    <div class="flex gap-6">
                                        <label class="inline-flex items-center group cursor-pointer">
                                            <input type="radio" name="hero_bg_type" value="image" {{ $settings->hero_bg_type == 'image' ? 'checked' : '' }} 
                                                class="form-radio text-[#D4AF37] bg-gray-800 border-gray-700 focus:ring-0">
                                            <span class="mr-2 text-white group-hover:text-[#D4AF37] transition-colors">صورة</span>
                                        </label>
                                        <label class="inline-flex items-center group cursor-pointer">
                                            <input type="radio" name="hero_bg_type" value="video" {{ $settings->hero_bg_type == 'video' ? 'checked' : '' }} 
                                                class="form-radio text-[#D4AF37] bg-gray-800 border-gray-700 focus:ring-0">
                                            <span class="mr-2 text-white group-hover:text-[#D4AF37] transition-colors">فيديو</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="space-y-4">
                                    <label class="text-sm font-medium text-gray-400 block">رفع الملف الجديد (صورة أو فيديو)</label>
                                    <div class="relative group">
                                        <input type="file" name="hero_bg_file" id="hero_bg_file" class="hidden">
                                        <label for="hero_bg_file" class="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-800 rounded-2xl cursor-pointer hover:border-[#D4AF37] hover:bg-[#1a1a1a] transition-all overflow-hidden relative">
                                            <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                                <svg class="w-10 h-10 mb-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                                                </svg>
                                                <p class="mb-2 text-sm text-gray-400"><span class="font-semibold text-[#D4AF37]">اضغط لرفع ملف</span> أو اسحب الملف هنا</p>
                                                <p class="text-xs text-gray-500">صورة (JPG, PNG) أو فيديو (MP4) بحد أقصى 20 ميجا</p>
                                            </div>
                                        </label>
                                    </div>
                                    
                                    @if($settings->hero_bg_path)
                                        <div class="mt-4 p-4 bg-[#1a1a1a] rounded-xl border border-gray-800">
                                            <p class="text-xs text-gray-500 mb-2">المعاينه الحالية:</p>
                                            @if($settings->hero_bg_type == 'image')
                                                <img src="{{ asset('storage/' . $settings->hero_bg_path) }}" class="h-32 rounded-lg object-cover">
                                            @else
                                                <video src="{{ asset('storage/' . $settings->hero_bg_path) }}" class="h-32 rounded-lg object-cover" muted></video>
                                            @endif
                                        </div>
                                    @endif
                                    @error('hero_bg_file') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                </div>
                            </div>
                        </div>

                        <!-- General Site Settings -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 border-t border-gray-800 pt-10">
                            <div class="space-y-6">
                                <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4">إعدادات عامة</h3>
                                
                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">اسم الموقع</label>
                                    <input type="text" name="site_name" value="{{ old('site_name', $settings->site_name) }}" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">
                                    @error('site_name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                </div>
                                
                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">رقم التواصل</label>
                                    <input type="text" name="contact_phone" value="{{ old('contact_phone', $settings->contact_phone) }}" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3" dir="ltr">
                                </div>
                            </div>

                            <div class="space-y-6">
                                <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4">بيانات التواصل</h3>
                                
                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">البريد الإلكتروني</label>
                                    <input type="email" name="contact_email" value="{{ old('contact_email', $settings->contact_email) }}" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3" dir="ltr">
                                </div>

                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">العنوان</label>
                                    <textarea name="contact_address" rows="2" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">{{ old('contact_address', $settings->contact_address) }}</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Section Text -->
                        <div class="border-t border-gray-800 pt-10">
                            <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4 mb-6">نصوص قسم "تواصل معنا" (Contact Section)</h3>
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">العنوان الرئيسي</label>
                                    <input type="text" name="contact_section_title" value="{{ old('contact_section_title', $settings->contact_section_title) }}" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">
                                </div>
                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">الوصف (العنوان الفرعي)</label>
                                    <textarea name="contact_section_subtitle" rows="2" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">{{ old('contact_section_subtitle', $settings->contact_section_subtitle) }}</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Features Settings -->
                        <div class="border-t border-gray-800 pt-10">
                            <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4 mb-6">قسم مميزاتنا (Features Section)</h3>
                            
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">نص التسمية العلوي</label>
                                    <input type="text" name="features_title" value="{{ old('features_title', $settings->features_title) }}" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">
                                </div>
                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">العنوان الرئيسي للقسم</label>
                                    <input type="text" name="features_heading" value="{{ old('features_heading', $settings->features_heading) }}" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                @for($i = 0; $i < 6; $i++)
                                    <div class="bg-[#1a1a1a] p-6 rounded-2xl border border-gray-800 space-y-4">
                                        <div class="flex items-center justify-between border-b border-gray-800 pb-3">
                                            <h4 class="text-[#D4AF37] font-bold">الميزة {{ $i + 1 }}</h4>
                                        </div>
                                        <div class="space-y-2">
                                            <label class="text-xs text-gray-500">الأيقونة (Emoji)</label>
                                            <input type="text" name="features_list[{{ $i }}][icon]" value="{{ old('features_list.'.$i.'.icon', $settings->features_list[$i]['icon'] ?? '') }}" 
                                                class="w-full bg-black border-gray-800 rounded-lg text-white p-2">
                                        </div>
                                        <div class="space-y-2">
                                            <label class="text-xs text-gray-500">العنوان</label>
                                            <input type="text" name="features_list[{{ $i }}][title]" value="{{ old('features_list.'.$i.'.title', $settings->features_list[$i]['title'] ?? '') }}" 
                                                class="w-full bg-black border-gray-800 rounded-lg text-white p-2">
                                        </div>
                                        <div class="space-y-2">
                                            <label class="text-xs text-gray-500">الوصف</label>
                                            <textarea name="features_list[{{ $i }}][description]" rows="2" 
                                                class="w-full bg-black border-gray-800 rounded-lg text-white p-2 text-sm">{{ old('features_list.'.$i.'.description', $settings->features_list[$i]['description'] ?? '') }}</textarea>
                                        </div>
                                    </div>
                                @endfor
                            </div>
                        </div>

                        <!-- Currency Settings -->
                        <div class="border-t border-gray-800 pt-10">
                            <div class="space-y-6">
                                <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4">إعدادات العملات</h3>
                                
                                <div class="overflow-x-auto bg-[#1a1a1a] rounded-2xl border border-gray-800">
                                    <table class="w-full text-right">
                                        <thead>
                                            <tr class="border-b border-gray-800 bg-[#222]">
                                                <th class="p-4 text-xs font-medium text-gray-400 uppercase">العملة (عربي)</th>
                                                <th class="p-4 text-xs font-medium text-gray-400 uppercase">العملة (إنجليزي)</th>
                                                <th class="p-4 text-xs font-medium text-gray-400 uppercase">الرمز (SAR, USD...)</th>
                                                <th class="p-4 text-xs font-medium text-gray-400 uppercase">الرمز (ر.س, $...)</th>
                                                <th class="p-4 text-xs font-medium text-gray-400 uppercase text-center">نشط</th>
                                                <th class="p-4 text-xs font-medium text-gray-400 uppercase text-center">الافتراضية</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-800">
                                            @foreach($currencies as $currency)
                                            <tr>
                                                <td class="p-4">
                                                    <input type="text" name="currencies[{{ $currency->id }}][name_ar]" value="{{ $currency->name_ar }}" 
                                                        class="w-full bg-black border-gray-800 rounded-lg text-white text-sm focus:ring-[#D4AF37] focus:border-[#D4AF37]">
                                                </td>
                                                <td class="p-4">
                                                    <input type="text" name="currencies[{{ $currency->id }}][name_en]" value="{{ $currency->name_en }}" 
                                                        class="w-full bg-black border-gray-800 rounded-lg text-white text-sm focus:ring-[#D4AF37] focus:border-[#D4AF37]" dir="ltr">
                                                </td>
                                                <td class="p-4">
                                                    <input type="text" name="currencies[{{ $currency->id }}][code]" value="{{ $currency->code }}" 
                                                        class="w-full bg-black border-gray-800 rounded-lg text-white text-sm focus:ring-[#D4AF37] focus:border-[#D4AF37]" dir="ltr">
                                                </td>
                                                <td class="p-4">
                                                    <input type="text" name="currencies[{{ $currency->id }}][symbol_ar]" value="{{ $currency->symbol_ar }}" 
                                                        class="w-full bg-black border-gray-800 rounded-lg text-white text-sm focus:ring-[#D4AF37] focus:border-[#D4AF37]">
                                                </td>
                                                <td class="p-4 text-center">
                                                    <input type="checkbox" name="currencies[{{ $currency->id }}][is_active]" value="1" {{ $currency->is_active ? 'checked' : '' }}
                                                        class="w-5 h-5 bg-black border-gray-800 rounded text-[#D4AF37] focus:ring-0">
                                                </td>
                                                <td class="p-4 text-center">
                                                    <input type="radio" name="default_currency_id" value="{{ $currency->id }}" {{ $currency->is_default ? 'checked' : '' }}
                                                        class="w-5 h-5 bg-black border-gray-800 text-[#D4AF37] focus:ring-0">
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Rental Terms Settings -->
                        <div class="border-t border-gray-800 pt-10">
                            <div class="space-y-6">
                                <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4">شروط استئجار السيارات</h3>
                                
                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">نص الشروط والأحكام</label>
                                    <textarea name="rental_terms" rows="8" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3 font-['Tajawal']" placeholder="أدخل شروط الاستئجار هنا...">{{ old('rental_terms', $settings->rental_terms) }}</textarea>
                                    @error('rental_terms') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 mt-2">يمكنك استخدام HTML للتنسيق أو كتابة النصوص مباشرة</p>
                                </div>
                            </div>
                        </div>

                        <!-- Footer Settings -->
                        <div class="border-t border-gray-800 pt-10">
                            <h3 class="text-2xl font-bold text-white mb-8">إعدادات فوتر الموقع (Footer)</h3>
                            
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
                                <div class="space-y-6">
                                    <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4">العمود الأول: عن المعرض</h3>
                                    <div class="space-y-2">
                                        <label class="text-sm font-medium text-gray-400">نص التعريف</label>
                                        <textarea name="footer_about_text" rows="4" 
                                            class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">{{ old('footer_about_text', $settings->footer_about_text) }}</textarea>
                                    </div>
                                    
                                    <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4 mt-10">روابط السوشيال ميديا</h3>
                                    <div class="grid grid-cols-2 gap-4">
                                        <div class="space-y-2">
                                            <label class="text-sm font-medium text-gray-400">واتساب (رقم كامل)</label>
                                            <input type="text" name="social_whatsapp" value="{{ old('social_whatsapp', $settings->social_whatsapp) }}" class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3" dir="ltr">
                                        </div>
                                        <div class="space-y-2">
                                            <label class="text-sm font-medium text-gray-400">انستقرام (رابط)</label>
                                            <input type="text" name="social_instagram" value="{{ old('social_instagram', $settings->social_instagram) }}" class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3" dir="ltr">
                                        </div>
                                        <div class="space-y-2">
                                            <label class="text-sm font-medium text-gray-400">إكس / تويتر (رابط)</label>
                                            <input type="text" name="social_twitter" value="{{ old('social_twitter', $settings->social_twitter) }}" class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3" dir="ltr">
                                        </div>
                                        <div class="space-y-2">
                                            <label class="text-sm font-medium text-gray-400">سناب شات (رابط)</label>
                                            <input type="text" name="social_snapchat" value="{{ old('social_snapchat', $settings->social_snapchat) }}" class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3" dir="ltr">
                                        </div>
                                        <div class="space-y-2">
                                            <label class="text-sm font-medium text-gray-400">تيك توك (رابط)</label>
                                            <input type="text" name="social_tiktok" value="{{ old('social_tiktok', $settings->social_tiktok) }}" class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3" dir="ltr">
                                        </div>
                                        <div class="space-y-2">
                                            <label class="text-sm font-medium text-gray-400">فيسبوك (رابط)</label>
                                            <input type="text" name="social_facebook" value="{{ old('social_facebook', $settings->social_facebook) }}" class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3" dir="ltr">
                                        </div>
                                    </div>
                                </div>

                                <div class="space-y-8">
                                    <div>
                                        <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4 mb-4">العمود الثاني: روابط مخصصة</h3>
                                        <div class="space-y-4">
                                            <div class="space-y-2">
                                                <label class="text-sm font-medium text-gray-400">عنوان العمود</label>
                                                <input type="text" name="footer_column2_title" value="{{ old('footer_column2_title', $settings->footer_column2_title) }}" class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">
                                            </div>
                                            <div class="space-y-2">
                                                <label class="text-sm font-medium text-gray-400">الروابط (اكتب: الاسم|الرابط - كل رابط في سطر)</label>
                                                <textarea name="footer_column2_links" rows="4" 
                                                    class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3 font-mono text-sm" placeholder="الرئيسية|/
السيارات|/cars">{{ old('footer_column2_links', $settings->footer_column2_links) }}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div>
                                        <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4 mb-4">العمود الثالث: خدماتنا</h3>
                                        <div class="space-y-4">
                                            <div class="space-y-2">
                                                <label class="text-sm font-medium text-gray-400">عنوان العمود</label>
                                                <input type="text" name="footer_column3_title" value="{{ old('footer_column3_title', $settings->footer_column3_title) }}" class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3">
                                            </div>
                                            <div class="space-y-2">
                                                <label class="text-sm font-medium text-gray-400">الروابط (اكتب: الاسم|الرابط - كل رابط في سطر)</label>
                                                <textarea name="footer_column3_links" rows="4" 
                                                    class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3 font-mono text-sm" placeholder="تأجير يومي|/rentals
تأجير طويل|/long-term">{{ old('footer_column3_links', $settings->footer_column3_links) }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-10 space-y-6">
                                <h3 class="text-xl font-semibold text-[#D4AF37] border-r-4 border-[#D4AF37] pr-4">الفوتر الأخير: حقوق النشر</h3>
                                <div class="space-y-2">
                                    <label class="text-sm font-medium text-gray-400">نص الحقوق</label>
                                    <input type="text" name="footer_copyright_text" value="{{ old('footer_copyright_text', $settings->footer_copyright_text) }}" 
                                        class="w-full bg-[#1a1a1a] border-gray-800 rounded-xl text-white focus:ring-[#D4AF37] focus:border-[#D4AF37] p-3" placeholder="جميع الحقوق محفوظة © 2024 TQ CARS">
                                </div>
                            </div>
                        </div>

                        <div class="flex justify-end gap-4 pt-6 border-t border-gray-800">
                            <button type="submit" style="background: linear-gradient(to right, #d4af37, #f9d976); color: black; padding-left: 1rem; padding-right: 1rem;" class="py-4 rounded-xl font-bold hover:scale-105 transition-all shadow-lg shadow-[#d4af37]/40 uppercase tracking-wider">
                                حفظ التغييرات
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection