@extends('admin.layouts.app')

@section('content')
    <section class="section">
        <div class="section-header">
            <h1>إعدادات صفحة عضوية المونتيسوري</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="/admin/">{{ trans('admin/main.dashboard') }}</a></div>
                <div class="breadcrumb-item">إعدادات صفحة عضوية المونتيسوري</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    @if(!empty(session()->has('msg')))
                        <div class="alert alert-success my-25 d-flex align-items-center">
                            <i data-feather="check-square" width="20" height="20" class="mr-2"></i>
                            {{ session()->get('msg') }}
                        </div>
                    @endif

                    <div class="card">
                        <div class="card-body">
                            <form action="/admin/additional_page/montessori_membership" method="post">
                                {{ csrf_field() }}

                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <h4 class="section-title">إعدادات البانر</h4>
                                        
                                        <div class="form-group">
                                            <label class="input-label">صورة البانر</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <button type="button" class="input-group-text admin-file-manager" data-input="banner_image_record" data-preview="holder">
                                                        <i class="fa fa-chevron-up"></i>
                                                    </button>
                                                </div>
                                                <input type="text" name="value[banner_image]" id="banner_image_record" value="{{ (!empty($value) and !empty($value['banner_image'])) ? $value['banner_image'] : '' }}" class="form-control"/>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="input-label">عنوان البانر</label>
                                            <input type="text" name="value[banner_title]" value="{{ (!empty($value) and !empty($value['banner_title'])) ? $value['banner_title'] : 'عضوية المونتيسوري' }}" class="form-control" placeholder="عضوية المونتيسوري"/>
                                        </div>

                                        <div class="form-group">
                                            <label class="input-label">وصف البانر</label>
                                            <textarea name="value[banner_description]" rows="3" class="form-control" placeholder="انضم إلى عضوية المونتيسوري واحصل على مزايا حصرية">{{ (!empty($value) and !empty($value['banner_description'])) ? $value['banner_description'] : '' }}</textarea>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <h4 class="section-title">إعدادات العضوية</h4>
                                        
                                        <div class="form-group">
                                            <label class="input-label">تكلفة الاشتراك السنوي (بالدولار الأمريكي)</label>
                                            <input type="number" name="value[membership_price]" value="{{ (!empty($value) and !empty($value['membership_price'])) ? $value['membership_price'] : '100' }}" class="form-control" min="0" step="0.01"/>
                                            <div class="text-muted text-small mt-1">القيمة الافتراضية: 100 دولار أمريكي</div>
                                        </div>

                                        <div class="form-group">
                                            <label class="input-label">وصف التكلفة</label>
                                            <textarea name="value[membership_price_description]" rows="3" class="form-control" placeholder="يشمل جميع السيمينارات الدولية وأيضًا الندوات واللقاءات المهنية المنعقدة دون استثناء">{{ (!empty($value) and !empty($value['membership_price_description'])) ? $value['membership_price_description'] : '' }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h4 class="section-title">قسم المقدمة (Introduction Section)</h4>
                                    </div>
                                    
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="input-label">لوجو القسم</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <button type="button" class="input-group-text admin-file-manager" data-input="intro_logo_record" data-preview="holder">
                                                        <i class="fa fa-chevron-up"></i>
                                                    </button>
                                                </div>
                                                <input type="text" name="value[intro_logo]" id="intro_logo_record" value="{{ (!empty($value) and !empty($value['intro_logo'])) ? $value['intro_logo'] : '' }}" class="form-control"/>
                                            </div>
                                            <div class="text-muted text-small mt-1">اختياري: إذا لم يتم تحديد لوجو، سيتم استخدام لوجو الموقع العام</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="input-label">عنوان القسم</label>
                                            <input type="text" name="value[intro_title]" value="{{ (!empty($value) and !empty($value['intro_title'])) ? $value['intro_title'] : 'عن رابطة مونتيسوري الدولية' }}" class="form-control" placeholder="عن رابطة مونتيسوري الدولية"/>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="input-label">نصوص المقدمة (كل فقرة في سطر منفصل)</label>
                                            <textarea name="value[intro_content]" rows="5" class="form-control" placeholder="انطلاقًا من إيماننا بأن منهج مونتيسوري ليس مرحلة دراسية تنتهي بالحصول على شهادة، بل مسار مهني مستمر يحتاج إلى دعم، توجيه، وتطوير دائم؛

تم تأسيس رابطة مونتيسوري المهنية لتكون مجتمعًا مهنيًا متخصصًا يجمع خريجي مونتيسوري في مساحة واحدة قائمة على الوعي، الخبرة، والتأثير الحقيقي في المجال.

الرابطة تهدف إلى خلق بيئة احترافية داعمة، تجمع بين التطبيق العملي والنقاش المهني المستمر، تحت إشراف خبراء ومتخصصين في منهج مونتيسوري.">{{ (!empty($value) and !empty($value['intro_content'])) ? $value['intro_content'] : '' }}</textarea>
                                            <div class="text-muted text-small mt-1">كل فقرة في سطر منفصل</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h4 class="section-title">قسم المزايا (Benefits Section)</h4>
                                    </div>
                                    
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="input-label">عنوان القسم</label>
                                            <input type="text" name="value[benefits_title]" value="{{ (!empty($value) and !empty($value['benefits_title'])) ? $value['benefits_title'] : 'مزايا العضوية' }}" class="form-control" placeholder="مزايا العضوية"/>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="input-label">خلفية قسم الفوائد</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <button type="button" class="input-group-text admin-file-manager" data-input="benefits_bg_record" data-preview="holder">
                                                        <i class="fa fa-chevron-up"></i>
                                                    </button>
                                                </div>
                                                <input type="text" name="value[benefits_section_bg]" id="benefits_bg_record" value="{{ (!empty($value) and !empty($value['benefits_section_bg'])) ? $value['benefits_section_bg'] : '' }}" class="form-control"/>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="input-label">وصف القسم</label>
                                            <textarea name="value[benefits_description]" rows="2" class="form-control" placeholder="الانضمام إلى رابطة مونتيسوري المهنية يوفّر للأعضاء منظومة متكاملة من الدعم والفرص الحقيقية">{{ (!empty($value) and !empty($value['benefits_description'])) ? $value['benefits_description'] : '' }}</textarea>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <label class="input-label">قائمة المزايا</label>
                                        <div id="benefits-container">
                                            @if(!empty($value['benefits_items']) && is_array($value['benefits_items']))
                                                @foreach($value['benefits_items'] as $index => $benefit)
                                                    <div class="benefit-item-box border rounded p-3 mb-3">
                                                        <div class="form-group">
                                                            <label class="input-label">عنوان الميزة</label>
                                                            <input type="text" name="value[benefits_items][{{ $index }}][title]" value="{{ $benefit['title'] ?? '' }}" class="form-control" placeholder="عنوان الميزة"/>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="input-label">وصف الميزة</label>
                                                            <textarea name="value[benefits_items][{{ $index }}][description]" rows="2" class="form-control" placeholder="وصف الميزة">{{ $benefit['description'] ?? '' }}</textarea>
                                                        </div>
                                                        <button type="button" class="btn btn-sm btn-danger remove-benefit-btn">حذف</button>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                        <button type="button" class="btn btn-sm btn-primary" id="add-benefit-btn">
                                            <i class="fa fa-plus"></i> إضافة ميزة جديدة
                                        </button>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h4 class="section-title">قسم الأهلية (Membership Eligibility Section)</h4>
                                    </div>
                                    
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="input-label">عنوان القسم</label>
                                            <input type="text" name="value[eligibility_title]" value="{{ (!empty($value) and !empty($value['eligibility_title'])) ? $value['eligibility_title'] : 'من له حق المشاركة في الرابطة؟' }}" class="form-control" placeholder="من له حق المشاركة في الرابطة؟"/>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="input-label">قائمة الأهلية (كل عنصر في سطر منفصل)</label>
                                            <textarea name="value[eligibility_items]" rows="3" class="form-control" placeholder="خريجي دبلومات وبرامج مونتيسوري المعتمدة
خريجي مؤسسة مونتيسوري والراغبين في الاستمرار بالدعم والتطوير المهني">{{ (!empty($value) and !empty($value['eligibility_items'])) ? (is_array($value['eligibility_items']) ? implode("\n", $value['eligibility_items']) : $value['eligibility_items']) : '' }}</textarea>
                                            <div class="text-muted text-small mt-1">كل عنصر في سطر منفصل</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h4 class="section-title">قسم التقديم (Apply Section)</h4>
                                    </div>
                                    
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="input-label">نص السعر</label>
                                            <input type="text" name="value[apply_fee_text]" value="{{ (!empty($value) and !empty($value['apply_fee_text'])) ? $value['apply_fee_text'] : 'تكلفة الاشتراك السنوية' }}" class="form-control" placeholder="تكلفة الاشتراك السنوية"/>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="input-label">نص زر التقديم</label>
                                            <input type="text" name="value[apply_button_text]" value="{{ (!empty($value) and !empty($value['apply_button_text'])) ? $value['apply_button_text'] : 'تقدم الآن' }}" class="form-control" placeholder="تقدم الآن"/>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="input-label">نص الفوائد</label>
                                            <textarea name="value[apply_benefits_text]" rows="2" class="form-control" placeholder="واحصل على وصول فوري للمزايا والفرص الحصرية">{{ (!empty($value) and !empty($value['apply_benefits_text'])) ? $value['apply_benefits_text'] : '' }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h4 class="section-title">حقول نموذج التسجيل (Application Form Fields)</h4>
                                        <p class="text-muted mb-3">يمكنك إضافة/تعديل حقول نموذج التسجيل</p>
                                    </div>
                                    
                                    <div class="col-12" id="form-fields-container">
                                        @if(!empty($value['form_fields']) && is_array($value['form_fields']))
                                            @foreach($value['form_fields'] as $index => $field)
                                                <div class="form-field-box border rounded p-3 mb-3">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label class="input-label">اسم الحقل (Label)</label>
                                                                <input type="text" name="value[form_fields][{{ $index }}][label]" value="{{ $field['label'] ?? '' }}" class="form-control" placeholder="مثال: الاسم"/>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label class="input-label">اسم الحقل في النظام (Name)</label>
                                                                <input type="text" name="value[form_fields][{{ $index }}][name]" value="{{ $field['name'] ?? '' }}" class="form-control" placeholder="مثال: name"/>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label class="input-label">نوع الحقل</label>
                                                                <select name="value[form_fields][{{ $index }}][type]" class="form-control">
                                                                    <option value="text" {{ (!empty($field['type']) && $field['type'] == 'text') ? 'selected' : '' }}>نص (Text)</option>
                                                                    <option value="email" {{ (!empty($field['type']) && $field['type'] == 'email') ? 'selected' : '' }}>بريد إلكتروني (Email)</option>
                                                                    <option value="tel" {{ (!empty($field['type']) && $field['type'] == 'tel') ? 'selected' : '' }}>هاتف (Phone)</option>
                                                                    <option value="select" {{ (!empty($field['type']) && $field['type'] == 'select') ? 'selected' : '' }}>قائمة منسدلة (Select)</option>
                                                                    <option value="file" {{ (!empty($field['type']) && $field['type'] == 'file') ? 'selected' : '' }}>صورة (Image)</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label class="input-label">مطلوب</label>
                                                                <select name="value[form_fields][{{ $index }}][required]" class="form-control">
                                                                    <option value="1" {{ (!empty($field['required']) && $field['required'] == '1') ? 'selected' : '' }}>نعم</option>
                                                                    <option value="0" {{ (empty($field['required']) || $field['required'] == '0') ? 'selected' : '' }}>لا</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="input-label">خيارات القائمة (فقط للقوائم المنسدلة - كل خيار في سطر منفصل)</label>
                                                        <textarea name="value[form_fields][{{ $index }}][options]" rows="3" class="form-control" placeholder="دبلوم المرحلة الأولى&#10;دبلوم المرحلة الثانية">{{ !empty($field['options']) ? (is_array($field['options']) ? implode("\n", $field['options']) : $field['options']) : '' }}</textarea>
                                                    </div>
                                                    
                                                    <div class="form-group">
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" class="custom-control-input has-sub-fields-checkbox" id="has_sub_fields_{{ $index }}" 
                                                                   {{ (!empty($field['has_sub_fields']) && $field['has_sub_fields'] == '1') ? 'checked' : '' }}
                                                                   onchange="toggleSubFields({{ $index }})">
                                                            <input type="hidden" name="value[form_fields][{{ $index }}][has_sub_fields]" value="{{ (!empty($field['has_sub_fields']) && $field['has_sub_fields'] == '1') ? '1' : '0' }}" class="sub-fields-hidden-input-{{ $index }}">
                                                            <label class="custom-control-label" for="has_sub_fields_{{ $index }}">
                                                                <strong>إضافة حقول فرعية (تظهر عند اختيار قيمة معينة)</strong>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="sub-fields-container border rounded p-3 mb-2" id="sub_fields_container_{{ $index }}" 
                                                         style="display: {{ (!empty($field['has_sub_fields']) && $field['has_sub_fields'] == '1') ? 'block' : 'none' }}; background: #f8f9fa;">
                                                        <h6 class="mb-3"><i class="fas fa-arrow-right"></i> الحقول الفرعية</h6>
                                                        
                                                        <div class="form-group">
                                                            <label class="input-label">عرض الحقول الفرعية عند اختيار هذه القيمة:</label>
                                                            <input type="text" name="value[form_fields][{{ $index }}][sub_fields_trigger_value]" 
                                                                   value="{{ $field['sub_fields_trigger_value'] ?? '' }}" 
                                                                   class="form-control" placeholder="مثال: نعم">
                                                            <small class="text-muted">القيمة التي عند اختيارها ستظهر الحقول الفرعية</small>
                                                        </div>
                                                        
                                                        <div class="sub-fields-list" id="sub_fields_list_{{ $index }}">
                                                            @if(!empty($field['sub_fields']) && is_array($field['sub_fields']))
                                                                @foreach($field['sub_fields'] as $subIndex => $subField)
                                                                    <div class="sub-field-item border rounded p-2 mb-2" style="background: white;">
                                                                        <div class="row">
                                                                            <div class="col-md-6">
                                                                                <input type="text" name="value[form_fields][{{ $index }}][sub_fields][{{ $subIndex }}][label]" 
                                                                                       value="{{ $subField['label'] ?? '' }}" class="form-control form-control-sm mb-2" placeholder="اسم الحقل الفرعي">
                                                                            </div>
                                                                            <div class="col-md-4">
                                                                                <select name="value[form_fields][{{ $index }}][sub_fields][{{ $subIndex }}][type]" class="form-control form-control-sm mb-2">
                                                                                    <option value="text" {{ (!empty($subField['type']) && $subField['type'] == 'text') ? 'selected' : '' }}>نص</option>
                                                                                    <option value="select" {{ (!empty($subField['type']) && $subField['type'] == 'select') ? 'selected' : '' }}>قائمة</option>
                                                                                    <option value="textarea" {{ (!empty($subField['type']) && $subField['type'] == 'textarea') ? 'selected' : '' }}>نص طويل</option>
                                                                                    <option value="checkbox" {{ (!empty($subField['type']) && $subField['type'] == 'checkbox') ? 'selected' : '' }}>صندوق اختيار</option>
                                                                                </select>
                                                                            </div>
                                                                            <div class="col-md-2">
                                                                                <button type="button" class="btn btn-sm btn-danger btn-block" onclick="removeSubField(this)">
                                                                                    <i class="fas fa-trash"></i>
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @endif
                                                        </div>
                                                        
                                                        <button type="button" class="btn btn-sm btn-success" onclick="addSubField({{ $index }})">
                                                            <i class="fas fa-plus"></i> إضافة حقل فرعي
                                                        </button>
                                                    </div>
                                                    
                                                    <button type="button" class="btn btn-sm btn-danger remove-form-field-btn">حذف</button>
                                                </div>
                                            @endforeach
                                        @else
                                            {{-- Default form fields --}}
                                            <div class="form-field-box border rounded p-3 mb-3">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label class="input-label">اسم الحقل (Label)</label>
                                                            <input type="text" name="value[form_fields][0][label]" value="الاسم (الاسم الثلاثي)" class="form-control"/>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label class="input-label">اسم الحقل في النظام (Name)</label>
                                                            <input type="text" name="value[form_fields][0][name]" value="name" class="form-control"/>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label class="input-label">نوع الحقل</label>
                                                            <select name="value[form_fields][0][type]" class="form-control">
                                                                <option value="text" selected>نص (Text)</option>
                                                                <option value="email">بريد إلكتروني (Email)</option>
                                                                <option value="tel">هاتف (Phone)</option>
                                                                <option value="select">قائمة منسدلة (Select)</option>
                                                                <option value="file">صورة (Image)</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <div class="form-group">
                                                            <label class="input-label">مطلوب</label>
                                                            <select name="value[form_fields][0][required]" class="form-control">
                                                                <option value="1" selected>نعم</option>
                                                                <option value="0">لا</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-sm btn-danger remove-form-field-btn">حذف</button>
                                            </div>
                                        @endif
                                    </div>
                                    
                                    <div class="col-12">
                                        <button type="button" class="btn btn-sm btn-primary" id="add-form-field-btn">
                                            <i class="fa fa-plus"></i> إضافة حقل جديد
                                        </button>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h4 class="section-title">إعدادات الإشعارات</h4>
                                    </div>
                                    
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="input-label">البريد الإلكتروني للإشعارات (Notification Email)</label>
                                            <input type="email" name="value[notification_email]" value="{{ (!empty($value) and !empty($value['notification_email'])) ? $value['notification_email'] : 'polashang3@gmail.com' }}" class="form-control" placeholder="polashang3@gmail.com"/>
                                            <div class="text-muted text-small mt-1">البريد الإلكتروني الذي سيتم إرسال إشعار إليه عند التسجيل</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h4 class="section-title">الأسئلة المتداولة (FAQs)</h4>
                                        <p class="text-muted mb-3">يمكنك إضافة/تعديل الأسئلة المتداولة التي تظهر في الصفحة</p>
                                    </div>
                                    
                                    <div class="col-12" id="faqs-container">
                                        @if(!empty($value['faqs']) && is_array($value['faqs']))
                                            @foreach($value['faqs'] as $index => $faq)
                                                <div class="faq-item-box border rounded p-3 mb-3">
                                                    <div class="form-group">
                                                        <label class="input-label">السؤال</label>
                                                        <input type="text" name="value[faqs][{{ $index }}][question]" value="{{ $faq['question'] ?? '' }}" class="form-control" placeholder="السؤال"/>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="input-label">الإجابة</label>
                                                        <textarea name="value[faqs][{{ $index }}][answer]" rows="3" class="form-control" placeholder="الإجابة">{{ $faq['answer'] ?? '' }}</textarea>
                                                    </div>
                                                    <button type="button" class="btn btn-sm btn-danger remove-faq-btn">حذف</button>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    
                                    <div class="col-12">
                                        <button type="button" class="btn btn-sm btn-primary" id="add-faq-btn">
                                            <i class="fa fa-plus"></i> إضافة سؤال جديد
                                        </button>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h4 class="section-title">إعدادات الألوان</h4>
                                        <p class="text-muted mb-3">تحكم في ألوان النصوص والعناصر في الصفحة</p>
                                    </div>
                                    
                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="input-label">لون عنوان البانر</label>
                                            <input type="color" name="value[color_banner_title]" value="{{ (!empty($value) and !empty($value['color_banner_title'])) ? $value['color_banner_title'] : '#ffffff' }}" class="form-control" style="height: 50px;"/>
                                            <div class="text-muted text-small mt-1">الافتراضي: #ffffff (أبيض)</div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="input-label">لون وصف البانر</label>
                                            <input type="color" name="value[color_banner_description]" value="{{ (!empty($value) and !empty($value['color_banner_description'])) ? $value['color_banner_description'] : '#ffffff' }}" class="form-control" style="height: 50px;"/>
                                            <div class="text-muted text-small mt-1">الافتراضي: #ffffff (أبيض)</div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="input-label">لون عناوين الأقسام الرئيسية</label>
                                            <input type="color" name="value[color_section_title]" value="{{ (!empty($value) and !empty($value['color_section_title'])) ? $value['color_section_title'] : '#1e3a8a' }}" class="form-control" style="height: 50px;"/>
                                            <div class="text-muted text-small mt-1">الافتراضي: #1e3a8a (أزرق داكن)</div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="input-label">لون النصوص العادية</label>
                                            <input type="color" name="value[color_body_text]" value="{{ (!empty($value) and !empty($value['color_body_text'])) ? $value['color_body_text'] : '#4b5563' }}" class="form-control" style="height: 50px;"/>
                                            <div class="text-muted text-small mt-1">الافتراضي: #4b5563 (رمادي)</div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="input-label">لون عناوين المزايا</label>
                                            <input type="color" name="value[color_benefit_title]" value="{{ (!empty($value) and !empty($value['color_benefit_title'])) ? $value['color_benefit_title'] : '#1e40af' }}" class="form-control" style="height: 50px;"/>
                                            <div class="text-muted text-small mt-1">الافتراضي: #1e40af (أزرق)</div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="input-label">لون السعر</label>
                                            <input type="color" name="value[color_price]" value="{{ (!empty($value) and !empty($value['color_price'])) ? $value['color_price'] : '#ef4444' }}" class="form-control" style="height: 50px;"/>
                                            <div class="text-muted text-small mt-1">الافتراضي: #ef4444 (أحمر)</div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="input-label">لون خلفية زر التقديم</label>
                                            <input type="color" name="value[color_apply_button_bg]" value="{{ (!empty($value) and !empty($value['color_apply_button_bg'])) ? $value['color_apply_button_bg'] : '#449cef' }}" class="form-control" style="height: 50px;"/>
                                            <div class="text-muted text-small mt-1">الافتراضي: #449cef (أزرق فاتح)</div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="input-label">لون نص زر التقديم</label>
                                            <input type="color" name="value[color_apply_button_text]" value="{{ (!empty($value) and !empty($value['color_apply_button_text'])) ? $value['color_apply_button_text'] : '#ffffff' }}" class="form-control" style="height: 50px;"/>
                                            <div class="text-muted text-small mt-1">الافتراضي: #ffffff (أبيض)</div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <div class="form-group">
                                            <label class="input-label">لون أسئلة الـ FAQ</label>
                                            <input type="color" name="value[color_faq_question]" value="{{ (!empty($value) and !empty($value['color_faq_question'])) ? $value['color_faq_question'] : '#1e3a8a' }}" class="form-control" style="height: 50px;"/>
                                            <div class="text-muted text-small mt-1">الافتراضي: #1e3a8a (أزرق داكن)</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h4 class="section-title">إعدادات SEO</h4>
                                    </div>
                                    
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="input-label">عنوان الصفحة (Page Title)</label>
                                            <input type="text" name="value[seo_title]" value="{{ (!empty($value) and !empty($value['seo_title'])) ? $value['seo_title'] : 'عضوية المونتيسوري' }}" class="form-control" placeholder="عضوية المونتيسوري"/>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6" >
                                        <div class="form-group">
                                            <label class="input-label">وصف الصفحة (Meta Description)</label>
                                            <textarea name="value[seo_description]" rows="3" class="form-control" placeholder="وصف الصفحة لمحركات البحث">{{ (!empty($value) and !empty($value['seo_description'])) ? $value['seo_description'] : '' }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-4">
                                    <button type="submit" class="btn btn-primary">{{ trans('admin/main.save_change') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts_bottom')
    <script>
        var formFieldIndex = {{ (!empty($value['form_fields']) && is_array($value['form_fields'])) ? count($value['form_fields']) : 1 }};

        document.getElementById('add-form-field-btn').addEventListener('click', function() {
            var container = document.getElementById('form-fields-container');
            var html = `
                <div class="form-field-box border rounded p-3 mb-3">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="input-label">اسم الحقل (Label)</label>
                                <input type="text" name="value[form_fields][${formFieldIndex}][label]" class="form-control" placeholder="مثال: الاسم"/>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="input-label">اسم الحقل في النظام (Name)</label>
                                <input type="text" name="value[form_fields][${formFieldIndex}][name]" class="form-control" placeholder="مثال: name"/>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="input-label">نوع الحقل</label>
                                <select name="value[form_fields][${formFieldIndex}][type]" class="form-control">
                                    <option value="text">نص (Text)</option>
                                    <option value="email">بريد إلكتروني (Email)</option>
                                    <option value="tel">هاتف (Phone)</option>
                                    <option value="select">قائمة منسدلة (Select)</option>
                                    <option value="file">صورة (Image)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label class="input-label">مطلوب</label>
                                <select name="value[form_fields][${formFieldIndex}][required]" class="form-control">
                                    <option value="1">نعم</option>
                                    <option value="0">لا</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="input-label">خيارات القائمة (فقط للقوائم المنسدلة - كل خيار في سطر منفصل)</label>
                        <textarea name="value[form_fields][${formFieldIndex}][options]" rows="3" class="form-control" placeholder="الخيار الأول&#10;الخيار الثاني"></textarea>
                    </div>
                    <button type="button" class="btn btn-sm btn-danger remove-form-field-btn">حذف</button>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', html);
            formFieldIndex++;
        });

        var faqIndex = {{ (!empty($value['faqs']) && is_array($value['faqs'])) ? count($value['faqs']) : 0 }};

        document.getElementById('add-faq-btn').addEventListener('click', function() {
            var container = document.getElementById('faqs-container');
            var html = `
                <div class="faq-item-box border rounded p-3 mb-3">
                    <div class="form-group">
                        <label class="input-label">السؤال</label>
                        <input type="text" name="value[faqs][${faqIndex}][question]" class="form-control" placeholder="السؤال"/>
                    </div>
                    <div class="form-group">
                        <label class="input-label">الإجابة</label>
                        <textarea name="value[faqs][${faqIndex}][answer]" rows="3" class="form-control" placeholder="الإجابة"></textarea>
                    </div>
                    <button type="button" class="btn btn-sm btn-danger remove-faq-btn">حذف</button>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', html);
            faqIndex++;
        });

        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-faq-btn')) {
                e.target.closest('.faq-item-box').remove();
            }
            if (e.target.classList.contains('remove-benefit-btn')) {
                e.target.closest('.benefit-item-box').remove();
            }
            if (e.target.classList.contains('remove-form-field-btn')) {
                e.target.closest('.form-field-box').remove();
            }
        });

        // Toggle sub-fields container
        function toggleSubFields(index) {
            const checkbox = document.getElementById('has_sub_fields_' + index);
            const container = document.getElementById('sub_fields_container_' + index);
            const hiddenInput = document.querySelector('.sub-fields-hidden-input-' + index);
            
            if (checkbox && container && hiddenInput) {
                if (checkbox.checked) {
                    container.style.display = 'block';
                    hiddenInput.value = '1';
                } else {
                    container.style.display = 'none';
                    hiddenInput.value = '0';
                }
            }
        }

        // Add sub-field
        var subFieldCounters = {};
        function addSubField(parentIndex) {
            if (!subFieldCounters[parentIndex]) {
                subFieldCounters[parentIndex] = 0;
            }
            const subIndex = subFieldCounters[parentIndex]++;
            const container = document.getElementById('sub_fields_list_' + parentIndex);
            
            const html = `
                <div class="sub-field-item border rounded p-2 mb-2" style="background: white;">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" name="value[form_fields][${parentIndex}][sub_fields][${subIndex}][label]" 
                                   class="form-control form-control-sm mb-2" placeholder="اسم الحقل الفرعي">
                        </div>
                        <div class="col-md-4">
                            <select name="value[form_fields][${parentIndex}][sub_fields][${subIndex}][type]" class="form-control form-control-sm mb-2">
                                <option value="text">نص</option>
                                <option value="select">قائمة</option>
                                <option value="textarea">نص طويل</option>
                                <option value="checkbox">صندوق اختيار</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-sm btn-danger btn-block" onclick="removeSubField(this)">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', html);
        }

        // Remove sub-field
        function removeSubField(button) {
            button.closest('.sub-field-item').remove();
        }

        var formFieldIndex = {{ (!empty($value['form_fields']) && is_array($value['form_fields'])) ? count($value['form_fields']) : 1 }};

        document.getElementById('add-form-field-btn').addEventListener('click', function() {
            var container = document.getElementById('form-fields-container');
            var html = `
                <div class="form-field-box border rounded p-3 mb-3">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="input-label">اسم الحقل (Label)</label>
                                <input type="text" name="value[form_fields][${formFieldIndex}][label]" class="form-control" placeholder="مثال: الاسم"/>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="input-label">اسم الحقل في النظام (Name)</label>
                                <input type="text" name="value[form_fields][${formFieldIndex}][name]" class="form-control" placeholder="مثال: name"/>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="input-label">نوع الحقل</label>
                                <select name="value[form_fields][${formFieldIndex}][type]" class="form-control">
                                    <option value="text">نص (Text)</option>
                                    <option value="email">بريد إلكتروني (Email)</option>
                                    <option value="tel">هاتف (Phone)</option>
                                    <option value="select">قائمة منسدلة (Select)</option>
                                    <option value="file">صورة (Image)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label class="input-label">مطلوب</label>
                                <select name="value[form_fields][${formFieldIndex}][required]" class="form-control">
                                    <option value="1">نعم</option>
                                    <option value="0">لا</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="input-label">خيارات القائمة (فقط للقوائم المنسدلة - كل خيار في سطر منفصل)</label>
                        <textarea name="value[form_fields][${formFieldIndex}][options]" rows="3" class="form-control" placeholder="الخيار الأول&#10;الخيار الثاني"></textarea>
                    </div>
                    <button type="button" class="btn btn-sm btn-danger remove-form-field-btn">حذف</button>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', html);
            formFieldIndex++;
        });

        var benefitIndex = {{ (!empty($value['benefits_items']) && is_array($value['benefits_items'])) ? count($value['benefits_items']) : 0 }};

        document.getElementById('add-benefit-btn').addEventListener('click', function() {
            var container = document.getElementById('benefits-container');
            var html = `
                <div class="benefit-item-box border rounded p-3 mb-3">
                    <div class="form-group">
                        <label class="input-label">عنوان الميزة</label>
                        <input type="text" name="value[benefits_items][${benefitIndex}][title]" class="form-control" placeholder="عنوان الميزة"/>
                    </div>
                    <div class="form-group">
                        <label class="input-label">وصف الميزة</label>
                        <textarea name="value[benefits_items][${benefitIndex}][description]" rows="2" class="form-control" placeholder="وصف الميزة"></textarea>
                    </div>
                    <button type="button" class="btn btn-sm btn-danger remove-benefit-btn">حذف</button>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', html);
            benefitIndex++;
        });
    </script>
@endpush
