@extends('admin.layouts.admin')

@section('title', 'إدارة ' . $policy->title)

@section('content')
<div class="max-w-5xl mx-auto pb-32">

    {{-- Header Section --}}
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
        <div class="flex items-center gap-4">
            <div class="p-4 bg-blue-50 rounded-2xl text-blue-600 text-3xl shadow-sm">
                <i class="{{ $policy->intro_icon ?: 'fa-solid fa-file-contract' }}"></i>
            </div>
            <div>
                <h2 class="text-3xl font-extrabold text-gray-900">إدارة {{ $policy->title }}</h2>
                <p class="text-gray-500 mt-1 font-medium">تعديل محتوى الصفحة والسياسات المتبعة في المنصة</p>
            </div>
        </div>
        <button type="submit" form="policyForm" class="hidden md:flex bg-orange-600 hover:bg-orange-700 text-white font-bold py-3.5 px-10 rounded-2xl transition duration-300 shadow-lg shadow-orange-200 items-center justify-center gap-2">
            <i class="fa-solid fa-save"></i>
            حفظ التغييرات
        </button>
    </div>

    <form action="{{ route('admin.policies.update', $policy->slug) }}" method="POST" id="policyForm">
        @csrf

        {{-- الكارت الأول: البيانات الأساسية والمقدمة --}}
        <div class="bg-white rounded-[2rem] shadow-sm border border-gray-100 p-8 md:p-10 mb-10">
            <div class="flex items-center gap-2 mb-8 border-b border-gray-50 pb-4">
                <i class="fa-solid fa-circle-info text-orange-500 text-xl"></i>
                <h3 class="text-xl font-bold text-gray-800">المقدمة والبيانات الأساسية</h3>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                {{-- تاريخ التحديث --}}
                <div class="space-y-2">
                    <label class="block text-sm font-bold text-gray-700">تاريخ آخر تحديث <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <i class="fa-solid fa-calendar-alt absolute right-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        <input type="date" name="last_updated_at" 
                               value="{{ $policy->last_updated_at ? $policy->last_updated_at->format('Y-m-d') : date('Y-m-d') }}"
                               class="w-full pr-12 pl-5 py-4 rounded-2xl border border-gray-200 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 focus:outline-none transition bg-gray-50/30">
                    </div>
                </div>

                {{-- أيقونة المقدمة --}}
                <div class="space-y-2">
                    <label class="block text-sm font-bold text-gray-700">أيقونة الصفحة</label>
                    <div class="flex items-center gap-4">
                        <input type="hidden" name="intro_icon" id="intro_icon_input" value="{{ $policy->intro_icon }}">
                        <div id="intro_icon_preview" class="w-16 h-16 flex items-center justify-center bg-gray-50 border-2 border-dashed border-gray-200 rounded-2xl text-3xl text-blue-600 shadow-inner">
                            <i class="{{ $policy->intro_icon ?: 'fa-solid fa-file-contract' }}"></i>
                        </div>
                        <button type="button" onclick="openIconPicker('intro_icon_input', 'intro_icon_preview')" 
                                class="bg-white border border-gray-200 text-gray-700 px-6 py-3 rounded-xl hover:bg-gray-50 transition font-bold shadow-sm">
                            <i class="fa-solid fa-icons ml-1 text-orange-500"></i> تغيير الأيقونة
                        </button>
                    </div>
                </div>

                {{-- وصف المقدمة --}}
                <div class="md:col-span-2 space-y-2">
                    <label class="block text-sm font-bold text-gray-700">وصف المقدمة</label>
                    <textarea name="intro_description" rows="3" 
                              placeholder="اكتب وصفاً مختصراً يظهر في بداية الصفحة..."
                              class="w-full px-6 py-4 rounded-2xl border border-gray-200 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 focus:outline-none transition bg-gray-50/30">{{ $policy->intro_description }}</textarea>
                </div>
            </div>
        </div>

        {{-- القسم الثاني: الأقسام والنقاط تفصيلياً --}}
        <div id="sectionsContainer" class="space-y-10">
            @foreach($policy->sections as $sIdx => $section)
            <div class="section-item bg-white rounded-[2rem] shadow-sm border border-gray-100 overflow-hidden group" data-idx="{{ $sIdx }}">
                <div class="bg-gray-50 px-8 py-5 border-b border-gray-100 flex justify-between items-center group-hover:bg-gray-100 transition">
                    <div class="flex items-center gap-3">
                        <span class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold">{{ $sIdx + 1 }}</span>
                        <h4 class="font-bold text-gray-700">{{ $policy->slug == 'faq' ? 'سؤال جديد' : 'قسم سياسة جديد' }}</h4>
                    </div>
                    <button type="button" onclick="removeSection(this)" class="text-red-400 hover:text-red-600 transition flex items-center gap-1 font-bold text-sm">
                        <i class="fa-solid fa-trash-can"></i> حذف بالكامل
                    </button>
                </div>
                
                <div class="p-8 md:p-10">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                        {{-- العنوان / السؤال --}}
                        <div class="space-y-2">
                            <label class="block text-sm font-bold text-gray-700">
                                {{ $policy->slug == 'faq' ? 'نص السؤال' : 'عنوان القسم' }} <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="sections[{{ $sIdx }}][title]" 
                                   value="{{ $section->title }}" placeholder="أدخل العنوان هنا..."
                                   class="w-full px-6 py-4 rounded-2xl border border-gray-200 focus:ring-2 focus:ring-orange-500 focus:outline-none transition bg-gray-50/20">
                        </div>

                        {{-- أيقونة القسم (مخفية للـ FAQ) --}}
                        <div class="space-y-2 {{ $policy->slug == 'faq' ? 'hidden' : '' }}">
                            <label class="block text-sm font-bold text-gray-700">أيقونة القسم الرئيسي</label>
                            <div class="flex items-center gap-4">
                                <input type="hidden" name="sections[{{ $sIdx }}][icon]" id="icon_input_{{ $sIdx }}" value="{{ $section->icon }}">
                                <div id="icon_preview_{{ $sIdx }}" class="w-14 h-14 flex items-center justify-center bg-gray-50 border border-gray-200 rounded-2xl text-2xl text-blue-500 shadow-inner">
                                    <i class="{{ $section->icon ?: 'fa-solid fa-check' }}"></i>
                                </div>
                                <button type="button" onclick="openIconPicker('icon_input_{{ $sIdx }}', 'icon_preview_{{ $sIdx }}')" 
                                        class="bg-white border border-gray-200 px-4 py-2.5 rounded-xl hover:bg-gray-50 transition text-sm font-bold">
                                    تغيير
                                </button>
                            </div>
                        </div>

                        {{-- الوصف / الإجابة --}}
                        <div class="md:col-span-2 space-y-2">
                            <label class="block text-sm font-bold text-gray-700">
                                {{ $policy->slug == 'faq' ? 'نص الإجابة' : 'وصف توضيحي للقسم (اختياري)' }}
                            </label>
                            <textarea name="sections[{{ $sIdx }}][description]" rows="3"
                                      class="w-full px-6 py-4 rounded-2xl border border-gray-200 focus:ring-2 focus:ring-orange-500 focus:outline-none transition bg-gray-50/20">{{ $section->description }}</textarea>
                        </div>
                    </div>

                    {{-- النقاط (مخفية تماماً للـ FAQ) --}}
                    @if($policy->slug != 'faq')
                    <div class="mt-8 pt-8 border-t border-gray-50">
                        <h5 class="text-sm font-bold text-gray-500 mb-6 flex items-center gap-2">
                             النقاط التفصيلية للقسم (في بوكسات منفصلة)
                        </h5>
                        <div class="points-list space-y-4">
                            @foreach($section->items as $iIdx => $item)
                            <div class="flex items-center gap-3">
                                <div class="p-2 bg-gray-50 rounded-lg text-gray-400">
                                    <i class="fa-solid fa-circle-dot"></i>
                                </div>
                                <input type="text" name="sections[{{ $sIdx }}][items][]" 
                                       value="{{ $item->content }}" placeholder="اكتب النقطة هنا..."
                                       class="flex-1 px-5 py-3.5 rounded-2xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:outline-none transition bg-white shadow-sm">
                                <button type="button" onclick="this.parentElement.remove()" class="p-3 text-red-300 hover:text-red-500 transition">
                                    <i class="fa-solid fa-xmark-circle text-2xl"></i>
                                </button>
                            </div>
                            @endforeach
                        </div>
                        <button type="button" onclick="addPoint(this, {{ $sIdx }})" 
                                class="mt-6 text-sm bg-blue-50 text-blue-600 px-6 py-3 rounded-xl font-bold hover:bg-blue-100 transition inline-flex items-center gap-2 shadow-sm">
                            <i class="fa-solid fa-plus-circle"></i> إضافة نقطة تفصيلية
                        </button>
                    </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

        {{-- أزرار التحكم السفلية --}}
        <div class="mt-12 flex flex-col md:flex-row items-center justify-between gap-6">
            <button type="button" onclick="addSection()" 
                    class="w-full md:w-auto px-12 py-5 bg-gray-900 shadow-xl shadow-gray-200 text-white rounded-2xl font-bold hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3">
                <i class="fa-solid fa-plus-circle text-xl text-blue-400"></i> 
                {{ $policy->slug == 'faq' ? 'إضافة سؤال وإجابة جديدة' : 'إضافة قسم سياسة جديد' }}
            </button>
            
            <button type="submit" class="w-full md:w-auto px-16 py-5 bg-orange-600 shadow-xl shadow-orange-100 text-white rounded-2xl font-extrabold hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3">
                <i class="fa-solid fa-save text-xl"></i>
                حفظ كافة البيانات
            </button>
        </div>

    </form>
</div>

{{-- تضمين مختار الأيقونات الاحترافي --}}
@include('admin.partials.icon_picker_modal')

<style>
    body { background-color: #f8fafc; }
    .section-item { animation: fadeIn 0.4s ease-out; }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>

<script>
    let sectionCount = {{ $policy->sections->count() }};
    const isFaq = @json($policy->slug == 'faq');

    function addSection() {
        const idx = sectionCount++;
        const iconSection = isFaq ? 'hidden' : '';
        const titleLabel = isFaq ? 'نص السؤال' : 'عنوان القسم';
        const descLabel = isFaq ? 'نص الإجابة' : 'وصف توضيحي للقسم (اختياري)';
        const sectionTitle = isFaq ? 'سؤال وجواب جديد' : 'قسم سياسة جديد';
        
        let pointsSection = '';
        if(!isFaq) {
            pointsSection = `
                <div class="mt-8 pt-8 border-t border-gray-50">
                    <h5 class="text-sm font-bold text-gray-500 mb-6 flex items-center gap-2">النقاط التفصيلية للقسم</h5>
                    <div class="points-list space-y-4"></div>
                    <button type="button" onclick="addPoint(this, ${idx})" 
                            class="mt-6 text-sm bg-blue-50 text-blue-600 px-6 py-3 rounded-xl font-bold hover:bg-blue-100 transition inline-flex items-center gap-2 shadow-sm">
                        <i class="fa-solid fa-plus-circle"></i> إضافة نقطة تفصيلية
                    </button>
                </div>
            `;
        }

        const html = `
            <div class="section-item bg-white rounded-[2rem] shadow-sm border border-gray-100 overflow-hidden" id="section_${idx}" data-idx="${idx}">
                <div class="bg-gray-50 px-8 py-5 border-b border-gray-100 flex justify-between items-center">
                    <div class="flex items-center gap-3">
                        <span class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold">${idx + 1}</span>
                        <h4 class="font-bold text-gray-700">${sectionTitle}</h4>
                    </div>
                    <button type="button" onclick="removeSection(this)" class="text-red-400 hover:text-red-600 transition flex items-center gap-1 font-bold text-sm">
                        <i class="fa-solid fa-trash-can"></i> حذف بالكامل
                    </button>
                </div>
                
                <div class="p-8 md:p-10">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                        <div class="space-y-2">
                            <label class="block text-sm font-bold text-gray-700">${titleLabel} <span class="text-red-500">*</span></label>
                            <input type="text" name="sections[${idx}][title]" placeholder="أدخل هنا..."
                                   class="w-full px-6 py-4 rounded-2xl border border-gray-200 focus:ring-2 focus:ring-orange-500 focus:outline-none transition bg-gray-50/20">
                        </div>
                        <div class="space-y-2 ${iconSection}">
                            <label class="block text-sm font-bold text-gray-700">أيقونة القسم الرئيسية</label>
                            <div class="flex items-center gap-4">
                                <input type="hidden" name="sections[${idx}][icon]" id="icon_input_${idx}" value="fa-solid fa-check">
                                <div id="icon_preview_${idx}" class="w-14 h-14 flex items-center justify-center bg-gray-50 border border-gray-200 rounded-2xl text-2xl text-blue-500 shadow-inner">
                                    <i class="fa-solid fa-check"></i>
                                </div>
                                <button type="button" onclick="openIconPicker('icon_input_${idx}', 'icon_preview_${idx}')" 
                                        class="bg-white border border-gray-200 px-4 py-2.5 rounded-xl hover:bg-gray-50 transition text-sm font-bold">تغيير</button>
                            </div>
                        </div>
                        <div class="md:col-span-2 space-y-2">
                            <label class="block text-sm font-bold text-gray-700">${descLabel}</label>
                            <textarea name="sections[${idx}][description]" rows="3"
                                      class="w-full px-6 py-4 rounded-2xl border border-gray-200 focus:ring-2 focus:ring-orange-500 focus:outline-none transition bg-gray-50/20"></textarea>
                        </div>
                    </div>
                    ${pointsSection}
                </div>
            </div>
        `;
        document.getElementById('sectionsContainer').insertAdjacentHTML('beforeend', html);
        
        window.scrollTo({ top: document.getElementById(`section_${idx}`).offsetTop - 100, behavior: 'smooth' });
    }

    function removeSection(btn) {
        if(confirm('هل أنت متأكد من حذف هذا القسم بالكامل؟')) {
            btn.closest('.section-item').classList.add('opacity-0', 'scale-95');
            setTimeout(() => btn.closest('.section-item').remove(), 300);
        }
    }

    function addPoint(btn, sectionIdx) {
        const list = btn.closest('.points-container').querySelector('.points-list');
        const randId = Math.random().toString(36).substr(2, 9);
        const html = `
            <div class="flex items-center gap-3 animate-slide-in" id="point_${randId}">
                <div class="p-2 bg-gray-50 rounded-lg text-gray-400">
                    <i class="fa-solid fa-circle-dot"></i>
                </div>
                <input type="text" name="sections[${sectionIdx}][items][]" placeholder="اكتب النقطة هنا..."
                       class="flex-1 px-5 py-3.5 rounded-2xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:outline-none transition bg-white shadow-sm">
                <button type="button" onclick="this.parentElement.remove()" class="p-3 text-red-300 hover:text-red-500 transition">
                    <i class="fa-solid fa-xmark-circle text-2xl"></i>
                </button>
            </div>
        `;
        list.insertAdjacentHTML('beforeend', html);
    }
</script>
@endsection