@extends('layouts.admin')

@section('title', 'الإعدادات')
@section('page-title', 'إعدادات النظام')

@section('breadcrumb')
    <a href="{{ route('admin.dashboard') }}" class="hover:text-navy-900">الرئيسية</a>
    <span class="mx-2">/</span>
    <span>الإعدادات</span>
@endsection

@section('content')
<div class="space-y-6">
    <!-- Event Settings -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="p-6 border-b">
            <h3 class="text-lg font-bold text-navy-900">معلومات الحفل</h3>
            <p class="text-sm text-gray-500 mt-1">إعدادات التاريخ والمكان والموعد</p>
        </div>
        
        <form action="{{ route('admin.settings.event') }}" method="POST" class="p-6">
            @csrf
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">عنوان الحفل</label>
                    <input type="text" name="event_title" value="{{ $eventInfo['event_title'] }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">العنوان الفرعي</label>
                    <input type="text" name="event_subtitle" value="{{ $eventInfo['event_subtitle'] }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">تاريخ الحفل</label>
                    <input type="date" name="event_date" value="{{ $eventInfo['event_date'] }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">موعد الحفل</label>
                    <input type="time" name="event_time" value="{{ $eventInfo['event_time'] }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">مكان الحفل</label>
                    <input type="text" name="event_location" value="{{ $eventInfo['event_location'] }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">ملاحظات</label>
                    <textarea name="event_notes" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none resize-none">{{ $eventInfo['event_notes'] }}</textarea>
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="px-6 py-3 bg-navy-900 text-white rounded-lg hover:bg-navy-800 transition-colors">
                    حفظ التغييرات
                </button>
            </div>
        </form>
    </div>

    <!-- Site Content -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="p-6 border-b">
            <h3 class="text-lg font-bold text-navy-900">محتوى الموقع</h3>
            <p class="text-sm text-gray-500 mt-1">النصوص المعروضة في الصفحة الرئيسية</p>
        </div>
        
        <form action="{{ route('admin.settings.site') }}" method="POST" class="p-6">
            @csrf
            <div class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">عنوان الترحيب</label>
                    <input type="text" name="hero_title" value="{{ $siteContent['hero_title'] }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">نص الترحيب</label>
                    <textarea name="hero_subtitle" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none resize-none">{{ $siteContent['hero_subtitle'] }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">نص التذييل</label>
                    <input type="text" name="footer_text" value="{{ $siteContent['footer_text'] }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none">
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="px-6 py-3 bg-navy-900 text-white rounded-lg hover:bg-navy-800 transition-colors">
                    حفظ التغييرات
                </button>
            </div>
        </form>
    </div>

    <!-- Seating Configuration -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="p-6 border-b">
            <h3 class="text-lg font-bold text-navy-900">إعدادات القاعة</h3>
            <p class="text-sm text-gray-500 mt-1">تكوين صفوف ومقاعد القاعة</p>
        </div>
        
        <form action="{{ route('admin.settings.seating') }}" method="POST" class="p-6">
            @csrf
            <div class="grid md:grid-cols-2 gap-6">
                <div class="p-4 bg-gold-50 rounded-xl border border-gold-200">
                    <h4 class="font-bold text-gold-800 mb-4 flex items-center gap-2">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                        </svg>
                        منطقة VIP
                    </h4>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">عدد الصفوف</label>
                            <input type="number" name="vip_rows" value="{{ $seatingConfig['vip_rows'] }}" min="1" max="10" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold-500 focus:border-gold-500 outline-none">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">مقاعد لكل صف</label>
                            <input type="number" name="vip_seats_per_row" value="{{ $seatingConfig['vip_seats_per_row'] }}" min="1" max="50" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold-500 focus:border-gold-500 outline-none">
                        </div>
                    </div>
                </div>
                
                <div class="p-4 bg-navy-50 rounded-xl border border-navy-200">
                    <h4 class="font-bold text-navy-800 mb-4 flex items-center gap-2">
                        <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="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
                        </svg>
                        المنطقة العادية
                    </h4>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">عدد الصفوف</label>
                            <input type="number" name="normal_rows" value="{{ $seatingConfig['normal_rows'] }}" min="1" max="50" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">مقاعد لكل صف</label>
                            <input type="number" name="normal_seats_per_row" value="{{ $seatingConfig['normal_seats_per_row'] }}" min="1" max="50" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy-500 focus:border-navy-500 outline-none">
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="px-6 py-3 bg-navy-900 text-white rounded-lg hover:bg-navy-800 transition-colors">
                    حفظ التغييرات
                </button>
            </div>
        </form>
    </div>

    <!-- Quick Links -->
    <div class="grid md:grid-cols-2 gap-6">
        <a href="{{ route('admin.settings.partners') }}" class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow flex items-center gap-4">
            <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                <svg class="w-6 h-6 text-purple-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            <div>
                <h4 class="font-bold text-navy-900">شركاء النجاح</h4>
                <p class="text-sm text-gray-500">إدارة الرعاة والشركاء</p>
            </div>
            <svg class="w-5 h-5 text-gray-400 mr-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </a>
        
        <a href="{{ route('admin.settings.pages') }}" class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow flex items-center gap-4">
            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                <svg class="w-6 h-6 text-blue-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <div>
                <h4 class="font-bold text-navy-900">الصفحات</h4>
                <p class="text-sm text-gray-500">إدارة صفحات الموقع</p>
            </div>
            <svg class="w-5 h-5 text-gray-400 mr-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </a>
    </div>
</div>
@endsection