@extends('layouts.admin')

@section('title', 'الإعدادات')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-white">إعدادات النظام</h1>
        <p class="text-gray-400 mt-1">إدارة إعدادات الموقع والحفل</p>
    </div>

    @if(session('success'))
    <div class="bg-green-500/20 border border-green-500/30 text-green-400 px-4 py-3 rounded-lg">
        {{ session('success') }}
    </div>
    @endif

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

        <!-- Event Settings -->
        <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-2xl border border-[#334155] p-6">
            <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-[#2dd4bf]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                معلومات الحفل
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-gray-400 mb-2">اسم الحفل</label>
                    <input type="text" name="event_name" value="{{ $settings['event_name'] ?? 'الحفل الموحد لخريجي وخريجات المنشآت التدريبية' }}"
                           class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-3 text-white focus:border-[#2dd4bf] focus:ring-1 focus:ring-[#2dd4bf] outline-none">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">تاريخ الحفل</label>
                    <input type="date" name="event_date" value="{{ $settings['event_date'] ?? '' }}"
                           class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-3 text-white focus:border-[#2dd4bf] focus:ring-1 focus:ring-[#2dd4bf] outline-none">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">وقت الحفل</label>
                    <input type="time" name="event_time" value="{{ $settings['event_time'] ?? '' }}"
                           class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-3 text-white focus:border-[#2dd4bf] focus:ring-1 focus:ring-[#2dd4bf] outline-none">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">مكان الحفل</label>
                    <input type="text" name="event_location" value="{{ $settings['event_location'] ?? '' }}"
                           class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-3 text-white focus:border-[#2dd4bf] focus:ring-1 focus:ring-[#2dd4bf] outline-none">
                </div>
            </div>
        </div>

        <!-- Hero Settings -->
        <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-2xl border border-[#334155] p-6">
            <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-[#2dd4bf]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                القسم الرئيسي (Hero)
            </h2>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm text-gray-400 mb-2">العنوان الرئيسي</label>
                    <input type="text" name="hero_title" value="{{ $settings['hero_title'] ?? 'الحفل الموحد للخريجين' }}"
                           class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-3 text-white focus:border-[#2dd4bf] focus:ring-1 focus:ring-[#2dd4bf] outline-none">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">الوصف</label>
                    <textarea name="hero_description" rows="3"
                              class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-3 text-white focus:border-[#2dd4bf] focus:ring-1 focus:ring-[#2dd4bf] outline-none resize-none">{{ $settings['hero_description'] ?? '' }}</textarea>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">صورة Hero</label>
                    <input type="file" name="hero_image" accept="image/*"
                           class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-2 text-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-[#2dd4bf] file:text-[#0f172a] file:font-medium hover:file:bg-[#14b8a6]">
                    @if(isset($settings['hero_image']))
                    <p class="text-sm text-gray-500 mt-2">الصورة الحالية: {{ $settings['hero_image'] }}</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Contact Settings -->
        <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-2xl border border-[#334155] p-6">
            <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-[#2dd4bf]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                معلومات التواصل
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-gray-400 mb-2">البريد الإلكتروني</label>
                    <input type="email" name="contact_email" value="{{ $settings['contact_email'] ?? '' }}"
                           class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-3 text-white focus:border-[#2dd4bf] focus:ring-1 focus:ring-[#2dd4bf] outline-none">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">رقم الهاتف</label>
                    <input type="text" name="contact_phone" value="{{ $settings['contact_phone'] ?? '' }}"
                           class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-3 text-white focus:border-[#2dd4bf] focus:ring-1 focus:ring-[#2dd4bf] outline-none">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm text-gray-400 mb-2">العنوان</label>
                    <input type="text" name="contact_address" value="{{ $settings['contact_address'] ?? '' }}"
                           class="w-full bg-[#0f172a] border border-[#334155] rounded-lg px-4 py-3 text-white focus:border-[#2dd4bf] focus:ring-1 focus:ring-[#2dd4bf] outline-none">
                </div>
            </div>
        </div>

        <!-- Submit -->
        <div class="flex justify-end">
            <button type="submit" class="px-8 py-3 bg-[#2dd4bf] text-[#0f172a] rounded-lg hover:bg-[#14b8a6] transition font-bold">
                حفظ الإعدادات
            </button>
        </div>
    </form>
</div>
@endsection