@extends('backoffice.dashboard')

@section('content')
<div class="container py-4" dir="rtl" lang="ar">
  <div class="row justify-content-center">
    <div class="col-lg-10">
      <div class="card shadow-sm">
        <div class="card-header text-center bg-white">
          <h4 class="mb-0">{{ $method === 'create' ? 'إنشاء مناظرة جديدة' : 'تعديل مناظرة' }}</h4>
        </div>

        <div class="card-body">
          @if($errors->any())
            <div class="alert alert-danger text-end">
              <ul class="mb-0">
                @foreach($errors->all() as $err) <li>{{ $err }}</li> @endforeach
              </ul>
            </div>
          @endif

          <form method="POST"
                action="{{ $method === 'create' ? route('concours.store') : route('concours.update', $concours) }}"
                novalidate>
            @csrf
            @if($method === 'edit') @method('PUT') @endif

            {{-- Basic concours meta --}}
            <div class="mb-3 text-end">
              <label class="form-label">العنوان <span class="text-danger">*</span></label>
              <input name="titre" class="form-control" value="{{ old('titre', $concours->titre) }}" required>
            </div>

            <div class="row g-2 mb-3">
              <div class="col-md-6 text-end">
                <label class="form-label">تاريخ البداية</label>
                <input name="date_debut" type="date" class="form-control"
                       value="{{ old('date_debut', optional($concours->date_debut)->format('Y-m-d')) }}">
              </div>
              <div class="col-md-6 text-end">
                <label class="form-label">تاريخ الانتهاء</label>
                <input name="date_fin" type="date" class="form-control"
                       value="{{ old('date_fin', optional($concours->date_fin)->format('Y-m-d')) }}">
              </div>
            </div>

            <div class="mb-3 text-end">
              <label class="form-label">الحالة</label>
              <select name="etat" class="form-control">
                <option value="draft" {{ old('etat', $concours->etat) === 'draft' ? 'selected' : '' }}>مسودة</option>
                <option value="published" {{ old('etat', $concours->etat) === 'published' ? 'selected' : '' }}>منشور</option>
                <option value="closed" {{ old('etat', $concours->etat) === 'closed' ? 'selected' : '' }}>مغلق</option>
              </select>
            </div>

            {{-- Core columns --}}
            @php
              $coreCols = [
                'nom' => 'اللقب / الاسم العائلي',
                'prenom' => 'الاسم الشخصي',
                'cin' => 'رقم بطاقة التعريف',
                'date_naissance' => 'تاريخ الولادة',
                'tel' => 'الهاتف',
                'email' => 'البريد الإلكتروني',
                'adresse' => 'العنوان',
                'gouvernorat' => 'الولاية',
                'code_postale' => 'الرمز البريدي',
              ];
              $enabledCore = old('core_fields', $concours->core_fields ?? []);
              $requiredCore = old('core_required', $concours->core_required ?? []);
            @endphp

            <div class="mb-3">
              <label class="form-label d-block text-end">الحقول الأساسية</label>
              <div class="d-flex flex-wrap gap-2 align-items-center">
                @foreach($coreCols as $key => $label)
                  <span class="badge bg-light text-dark border rounded-pill py-2 px-3">{{ $label }}</span>
                  @if(in_array($key, (array)$enabledCore))
                    <input type="hidden" name="core_fields[]" value="{{ $key }}">
                  @endif
                  @if(in_array($key, (array)$requiredCore))
                    <input type="hidden" name="core_required[]" value="{{ $key }}">
                  @endif
                @endforeach
              </div>
              <div class="form-text text-muted text-end">هذه حقول ثابتة تُعرض دائماً في نموذج الترشيح.</div>
            </div>

            {{-- Attached fields --}}
{{-- Attached fields --}}
{{-- Attached fields --}}
<div class="mb-4">
  <label class="form-label d-block text-end">الحقول الخاصة بهذه المناظرة</label>

  <div id="attachedFieldsBar" class="container-fluid px-0">
    @if($fields->isEmpty())
      <div class="text-muted small">لا توجد حقول مرفقة بعد.</div>
    @else
      {{-- chunk into groups of 2 so there are exactly two cards per row --}}
      @foreach($fields->chunk(2) as $pair)
        <div class="row g-2">
          @foreach($pair as $field)
            <div class="col-12 col-md-6">
              <div class="d-flex align-items-center border rounded px-3 py-2 attached-field-card" data-field-row="{{ $field->id }}">
                <input type="hidden" name="fields[]" value="{{ $field->id }}" data-attached-id="{{ $field->id }}">

                <div class="me-3 text-end" style="min-width:160px;">
                  <div class="fw-medium field-label-text">{{ $field->label }}</div>
                  <small class="text-muted">({{ $field->input_type }})</small>
                </div>

                <div class="ms-auto d-flex gap-1 align-items-center">
                  <button type="button" class="btn btn-sm btn-outline-secondary edit-field-btn" data-field-id="{{ $field->id }}">تعديل</button>
                  <button type="button" class="btn btn-sm btn-outline-warning remove-field-btn" data-field-id="{{ $field->id }}">إزالة</button>
                  <button type="button" class="btn btn-sm btn-outline-danger delete-db-field-btn" data-field-id="{{ $field->id }}">حذف</button>
                </div>
              </div>
            </div>
          @endforeach

          {{-- if this chunk has only one item, keep an empty col to preserve layout --}}
          @if($pair->count() === 1)
            <div class="col-12 col-md-6"></div>
          @endif
        </div>

        {{-- render edit panels right after the row (each panel is full width) --}}
        @foreach($pair as $field)
          <div class="row">
            <div class="col-12">
              <div class="card mt-2 p-2 d-none edit-panel" data-edit-panel-for="{{ $field->id }}">
                <div class="row g-2">
                  <div class="col-md-6">
                    <label class="form-label"> التسمية </label>
                    <input type="text" class="form-control edit-field-label" placeholder="التسمية" value="{{ $field->label }}">
                  </div>

                  <div class="col-md-6">
                    <label class="form-label"> نوع الحقل</label>
                    <select class="form-control edit-field-type">
                      <option value="text" {{ $field->input_type === 'text' ? 'selected' : '' }}>نص</option>
                      <option value="textarea" {{ $field->input_type === 'textarea' ? 'selected' : '' }}>منطقة نص</option>
                      <option value="date" {{ $field->input_type === 'date' ? 'selected' : '' }}>تاريخ</option>
                      <option value="number" {{ $field->input_type === 'number' ? 'selected' : '' }}>رقم</option>
                      <option value="select" {{ $field->input_type === 'select' ? 'selected' : '' }}>قائمة</option>
                      <option value="radio" {{ $field->input_type === 'radio' ? 'selected' : '' }}>راديو</option>
                      <option value="checkbox" {{ $field->input_type === 'checkbox' ? 'selected' : '' }}>مربعات اختيار</option>
                      <option value="file" {{ $field->input_type === 'file' ? 'selected' : '' }}>ملف</option>
                      <option value="email" {{ $field->input_type === 'email' ? 'selected' : '' }}>بريد إلكتروني</option>
                    </select>
                  </div>

                  <div class="col-md-6 text-end d-flex align-items-center gap-2">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input edit-field-visible" type="checkbox" id="edit_visible_{{ $field->id }}" {{ $field->is_visible ? 'checked' : '' }}>
                      <label class="form-check-label small" for="edit_visible_{{ $field->id }}">معروض</label>
                    </div>

                    <div class="form-check form-check-inline">
                      <input class="form-check-input edit-field-required" type="checkbox" id="edit_required_{{ $field->id }}" {{ $field->is_required ? 'checked' : '' }}>
                      <label class="form-check-label small" for="edit_required_{{ $field->id }}">إلزامي</label>
                    </div>
                  </div>

                  @php
                    $editOptions = method_exists($field, 'options') ? $field->options() : [];
                    $showWrapper = in_array($field->input_type, ['select','radio','checkbox']) || !empty($editOptions);
                  @endphp

                  <div class="col-12">
                    <div class="options-table-wrapper {{ $showWrapper ? '' : 'd-none' }}">
                      <table class="table table-sm options-table mb-0">
                        <thead>
                          <tr>
                            <th class="text-end">الخيار</th>
                            <th style="width:90px" class="text-center">العمليات</th>
                          </tr>
                        </thead>
                        <tbody>
                          @if(!empty($editOptions))
                            @foreach($editOptions as $opt)
                              <tr>
                                <td class="text-end">
                                  <input type="text" class="form-control form-control-sm edit-option-input" value="{{ $opt }}">
                                </td>
                                <td class="text-center">
                                  <div class="d-flex gap-1 justify-content-center">
                                    <button type="button" class="btn btn-sm btn-outline-danger remove-option-btn">×</button>
                                    <button type="button" class="btn btn-sm btn-outline-success add-option-btn">+</button>
                                  </div>
                                </td>
                              </tr>
                            @endforeach
                          @else
                            <tr>
                              <td class="text-end"><input type="text" class="form-control form-control-sm edit-option-input" value=""></td>
                              <td class="text-center">
                                <div class="d-flex gap-1 justify-content-center">
                                  <button type="button" class="btn btn-sm btn-outline-danger remove-option-btn">×</button>
                                  <button type="button" class="btn btn-sm btn-outline-success add-option-btn">+</button>
                                </div>
                              </td>
                            </tr>
                          @endif
                        </tbody>
                      </table>
                    </div>
                  </div>

                  <div class="col-12">
                    <div class="d-flex justify-content-between w-100" style="direction:ltr;">
                      <button type="button" class="btn btn-sm btn-outline-secondary cancel-edit-field-btn" data-field-id="{{ $field->id }}">إلغاء</button>
                      <button type="button" class="btn btn-sm btn-primary save-edit-field-btn" data-field-id="{{ $field->id }}">حفظ التعديل</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      @endforeach
    @endif
  </div>

  <div class="form-text text-muted text-end mt-2">يمكنك تعديل الحقول المرتبطة بهذه المسابقة أو حذفها أو اضافه حقول جديدة.</div>
</div>



            {{-- New fields widget --}}
            <div class="mb-4">
              <h6 class="mb-2 text-end">إنشاء حقل جديد</h6>

              <div id="newFieldsContainer" class="mb-2">
                {{-- restore old inputs (if any) --}}
                @if(old('new_fields'))
                  @foreach(old('new_fields') as $i => $nf)
                    @php
                      $type = $nf['input_type'] ?? 'text';
                      $showOptions = in_array($type, ['select','radio','checkbox']);
                      $is_visible = isset($nf['is_visible']) ? (int)$nf['is_visible'] === 1 : 1;
                      $is_required = isset($nf['is_required']) ? (int)$nf['is_required'] === 1 : 0;
                      // options may be string or array
                      $optsArr = [];
                      if (isset($nf['options'])) {
                        if (is_array($nf['options'])) $optsArr = $nf['options'];
                        else $optsArr = preg_split('/\r\n|\n|\r|,/', (string)$nf['options']);
                        $optsArr = array_values(array_filter(array_map('trim', $optsArr)));
                      }
                    @endphp

                    <div class="card mb-2 p-2 new-field-row">
                      <div class="d-flex gap-2 align-items-start" style="direction:rtl;">
                        <div class="flex-grow-1">
                          <div class="mb-2">
                             <label class="form-label"> التسمية </label>
                            <input type="text" name="new_fields[{{ $i }}][label]" class="form-control form-control-sm" placeholder="التسمية (العنوان)" value="{{ $nf['label'] ?? '' }}">
                          </div>

                          <div class="row g-2 align-items-center">
                            
                            <div class="col-md-5">
                                <label class="form-label"> نوع الحقل</label>
                              <select name="new_fields[{{ $i }}][input_type]" class="form-control">
                                <option value="text" {{ $type === 'text' ? 'selected' : '' }}>نص</option>
                                <option value="textarea" {{ $type === 'textarea' ? 'selected' : '' }}>منطقة نص</option>
                                <option value="date" {{ $type === 'date' ? 'selected' : '' }}>تاريخ</option>
                                <option value="number" {{ $type === 'number' ? 'selected' : '' }}>رقم</option>
                                <option value="select" {{ $type === 'select' ? 'selected' : '' }}>قائمة</option>
                                <option value="radio" {{ $type === 'radio' ? 'selected' : '' }}>راديو</option>
                                <option value="checkbox" {{ $type === 'checkbox' ? 'selected' : '' }}>مربعات اختيار</option>
                                <option value="file" {{ $type === 'file' ? 'selected' : '' }}>ملف</option>
                                <option value="email" {{ $type === 'email' ? 'selected' : '' }}>بريد إلكتروني</option>
                              </select>
                            </div>

                            <div class="col-md-7 text-end d-flex gap-2">
                              <input type="hidden" name="new_fields[{{ $i }}][is_visible]" value="0">
                              <div class="form-check form-check-inline">
                                <input class="form-check-input new-field-visible" type="checkbox" name="new_fields[{{ $i }}][is_visible]" id="nf_vis_{{ $i }}" value="1" {{ $is_visible ? 'checked' : '' }}>
                                <label class="form-check-label small" for="nf_vis_{{ $i }}">معروض</label>
                              </div>

                              <input type="hidden" name="new_fields[{{ $i }}][is_required]" value="0">
                              <div class="form-check form-check-inline">
                                <input class="form-check-input new-field-required" type="checkbox" name="new_fields[{{ $i }}][is_required]" id="nf_req_{{ $i }}" value="1" {{ $is_required ? 'checked' : '' }}>
                                <label class="form-check-label small" for="nf_req_{{ $i }}">إلزامي</label>
                              </div>
                            </div>
                          </div>

                          {{-- dynamic options table --}}
                          <div class="mt-2 new-field-options" style="{{ $showOptions ? '' : 'display:none;' }}">
                            <table class="table table-sm mb-1 options-table">
                              <thead>
                                <tr>
                                  <th class="text-end">الخيار</th>
                                  <th style="width:90px" class="text-center">العمليات</th>
                                </tr>
                              </thead>
                              <tbody>
                                @if(!empty($optsArr))
                                  @foreach($optsArr as $opt)
                                    <tr>
                                      <td class="text-end"><input type="text" name="new_fields[{{ $i }}][options][]" class="form-control form-control-sm option-input" value="{{ $opt }}"></td>
                                      <td class="text-center">
                                        <div class="d-flex gap-1 justify-content-center">
                                          <button type="button" class="btn btn-sm btn-outline-danger remove-option-btn">×</button>
                                          <button type="button" class="btn btn-sm btn-outline-success add-option-btn">+</button>
                                        </div>
                                      </td>
                                    </tr>
                                  @endforeach
                                @else
                                  <tr>
                                    <td class="text-end"><input type="text" name="new_fields[{{ $i }}][options][]" class="form-control form-control-sm option-input" value=""></td>
                                    <td class="text-center">
                                      <div class="d-flex gap-1 justify-content-center">
                                        <button type="button" class="btn btn-sm btn-outline-danger remove-option-btn">×</button>
                                        <button type="button" class="btn btn-sm btn-outline-success add-option-btn">+</button>
                                      </div>
                                    </td>
                                  </tr>
                                @endif
                              </tbody>
                            </table>
                          </div>

                        </div>

                        <div style="width:64px; display:flex; align-items:center; justify-content:center;">
                          <button type="button" class="btn btn-sm btn-outline-danger remove-new-field">حذف</button>
                        </div>
                      </div>
                    </div>
                  @endforeach
                @endif
              </div>

              <div class="text-end">
                <button type="button" id="addNewFieldBtn" class="btn btn-sm btn-outline-success">+ إضافة حقل جديد</button>
              </div>

            </div>

            <div id="dynamicHiddenInputs"></div>

            <div class="d-flex justify-content-between mt-3">
              <a href="{{ route('concours.index') }}" class="btn btn-outline-secondary">العودة</a>
              <button class="btn btn-primary">{{ $method === 'create' ? 'إنشاء' : 'حفظ التغييرات' }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

@push('styles')
<style>
  .card { border-radius: 12px; }
  .new-field-row { background: #fff; border:1px solid #eef2f6; border-radius:8px; }
  .form-label { font-weight:600; }
  .fw-medium { font-weight:600; }
  .edit-panel { background:#fafafa; border:1px solid #eef2f6; border-radius:6px; }
  .options-table input { text-align: right; }
  .options-table th { border-bottom: none; }
  .options-table td { vertical-align: middle; }
  .options-table .btn { min-width:34px; padding-left:.4rem; padding-right:.4rem; }
  .attached-field-card { min-height: 64px; }
@media (min-width: 768px) {
  #attachedFieldsBar .col-md-6 { padding-left: .5rem; padding-right: .5rem; }
}

</style>
@endpush

@push('scripts')
<script>
(function() {
  function $(q, ctx=document){ return ctx.querySelector(q); }
  function $all(q, ctx=document){ return Array.from((ctx||document).querySelectorAll(q)); }

  const hiddenHolder = document.getElementById('dynamicHiddenInputs');
  const newFieldsContainer = document.getElementById('newFieldsContainer');
  const addNewFieldBtn = document.getElementById('addNewFieldBtn');

  function addHiddenInput(name, value) {
    const i = document.createElement('input');
    i.type = 'hidden'; i.name = name; i.value = value;
    hiddenHolder.appendChild(i);
    return i;
  }

  function escapeHtml(s){ return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

  // ------------ Edit-panel helpers (attached fields) ------------
  function createEditOptionRow(value = '') {
    const tr = document.createElement('tr');
    tr.innerHTML = `<td class="text-end"><input type="text" class="form-control form-control-sm edit-option-input" value="${escapeHtml(value)}"></td>
                    <td class="text-center">
                      <div class="d-flex gap-1 justify-content-center">
                        <button type="button" class="btn btn-sm btn-outline-danger remove-option-btn">×</button>
                        <button type="button" class="btn btn-sm btn-outline-success add-option-btn">+</button>
                      </div>
                    </td>`;
    // remove
    tr.querySelector('.remove-option-btn').addEventListener('click', function(e){ e.stopPropagation(); tr.remove(); });
    // add: insert after current and stop propagation so delegated handlers won't duplicate
    tr.querySelector('.add-option-btn').addEventListener('click', function(e){ e.stopPropagation(); tr.after(createEditOptionRow('')); });
    return tr;
  }

  function toggleEditPanelOptions(panel) {
    const type = panel.querySelector('.edit-field-type').value;
    const wrapper = panel.querySelector('.options-table-wrapper');
    if (['select','radio','checkbox'].includes(type)) wrapper.classList.remove('d-none'); else wrapper.classList.add('d-none');
  }

  function addOptionRowToEditTbody(tbody, value='') {
    const tr = createEditOptionRow(value);
    tbody.appendChild(tr);
    return tr;
  }
// Ensure option rows in the edit panel have working handlers (safe to call repeatedly)
function initOptionRowsForPanel(panel) {
  if (!panel) return;
  const optWrapper = panel.querySelector('.options-table-wrapper');
  if (!optWrapper) return;
  const tbody = optWrapper.querySelector('tbody');
  // if wrapper should be visible (server rendered options), ensure it's shown
  // and attach handlers for existing rows without double-binding
  if (!tbody) return;

  // If wrapper has rows, attach handlers for each row (use cloning to avoid double binding)
  Array.from(tbody.querySelectorAll('tr')).forEach(tr => {
    const removeBtn = tr.querySelector('.remove-option-btn');
    const addBtn = tr.querySelector('.add-option-btn');

    if (removeBtn) {
      const cloneRemove = removeBtn.cloneNode(true);
      removeBtn.replaceWith(cloneRemove);
      cloneRemove.addEventListener('click', function(e){ e.stopPropagation(); tr.remove(); });
    }

    if (addBtn) {
      const cloneAdd = addBtn.cloneNode(true);
      addBtn.replaceWith(cloneAdd);
      cloneAdd.addEventListener('click', function(e){
        e.stopPropagation();
        // insert a new row after current row using same structure
        const newTr = createEditOptionRow('');
        tr.after(newTr);
      });
    }
  });

  // If wrapper is visible but has no rows, add a blank one so admin sees something to edit
  if (!optWrapper.classList.contains('d-none') && tbody.children.length === 0) {
    addOptionRowToEditTbody(tbody, '');
  }
}

  // Attach listeners for attached field controls
  function attachControlListeners() {
    $all('[data-field-row]').forEach(row => {
      const fid = row.getAttribute('data-field-row');
      const panel = document.querySelector('.edit-panel[data-edit-panel-for="'+fid+'"]');

      // edit toggle
row.querySelectorAll('.edit-field-btn').forEach(b => b.addEventListener('click', function(){
  if (!panel) return;

  // toggle panel visibility
  panel.classList.toggle('d-none');

  // make wrapper visibility reflect the current selected type
  toggleEditPanelOptions(panel);

  // initialize option rows & handlers for this panel now it's visible
  initOptionRowsForPanel(panel);

  if (!panel.classList.contains('d-none')) panel.scrollIntoView({behavior:'smooth', block:'center'});
}));


      // remove attached field
      row.querySelectorAll('.remove-field-btn').forEach(b => b.addEventListener('click', ()=> {
        const input = row.querySelector('input[name="fields[]"][value="'+fid+'"]');
        if (input) input.remove();
        if (panel) panel.remove();
        row.remove();
      }));

      // delete from DB
      row.querySelectorAll('.delete-db-field-btn').forEach(b => b.addEventListener('click', ()=> {
        if (!confirm('هل أنت متأكد من حذف هذا الحقل نهائياً من قاعدة البيانات؟')) return;
        addHiddenInput('delete_fields[]', fid);
        const input = row.querySelector('input[name="fields[]"][value="'+fid+'"]');
        if (input) input.remove();
        if (panel) panel.remove();
        row.remove();
      }));

      if (!panel) return;

      // toggle options when type changes
      const typeSelect = panel.querySelector('.edit-field-type');
      typeSelect && typeSelect.addEventListener('change', ()=> toggleEditPanelOptions(panel));

      // init option rows handlers for existing rows: ensure each remove/add button works
      const optWrapper = panel.querySelector('.options-table-wrapper');
      if (optWrapper) {
        const tbody = optWrapper.querySelector('tbody');
        // convert existing rows to have working handlers (avoid duplicate listeners)
        Array.from(tbody.querySelectorAll('tr')).forEach(tr => {
          const oldRemove = tr.querySelector('.remove-option-btn');
          const oldAdd = tr.querySelector('.add-option-btn');
          if (oldRemove) {
            const clone = oldRemove.cloneNode(true);
            oldRemove.replaceWith(clone);
            clone.addEventListener('click', function(e){ e.stopPropagation(); tr.remove(); });
          }
          if (oldAdd) {
            const clone2 = oldAdd.cloneNode(true);
            oldAdd.replaceWith(clone2);
            clone2.addEventListener('click', function(e){ e.stopPropagation(); tr.after(createEditOptionRow('')); });
          }
        });

        // if there are no rows and options visible, add one
        if (tbody.children.length === 0 && !optWrapper.classList.contains('d-none')) {
          addOptionRowToEditTbody(tbody, '');
        }
      }

      // Save edit -> create hidden edit_fields[...] inputs
      const saveBtn = panel.querySelector('.save-edit-field-btn');
      saveBtn && saveBtn.addEventListener('click', function(){
        const newLabel = panel.querySelector('.edit-field-label').value.trim();
        const newType = panel.querySelector('.edit-field-type').value;
        const visible = panel.querySelector('.edit-field-visible').checked ? '1' : '0';
        const required = panel.querySelector('.edit-field-required').checked ? '1' : '0';

        // remove previous edit inputs for this id
        $all('input[name^="edit_fields['+fid+']"], textarea[name^="edit_fields['+fid+']"]').forEach(n => n.remove());

        addHiddenInput('edit_fields['+fid+'][label]', newLabel);
        addHiddenInput('edit_fields['+fid+'][input_type]', newType);
        addHiddenInput('edit_fields['+fid+'][is_visible]', visible);
        addHiddenInput('edit_fields['+fid+'][is_required]', required);

        // collect options (if visible)
        const options = [];
        const optWrapperLocal = panel.querySelector('.options-table-wrapper');
        if (optWrapperLocal && !optWrapperLocal.classList.contains('d-none')) {
          optWrapperLocal.querySelectorAll('.edit-option-input').forEach(inp => {
            const v = inp.value.trim();
            if (v !== '') options.push(v);
          });
        }

        if (options.length) {
          options.forEach(o => addHiddenInput('edit_fields['+fid+'][options][]', o));
        }

        // update label text on the badge
        const labelTextEl = row.querySelector('.field-label-text');
        if (labelTextEl) labelTextEl.textContent = newLabel;

        panel.classList.add('d-none');
      });

      // cancel
      const cancelBtn = panel.querySelector('.cancel-edit-field-btn');
      cancelBtn && cancelBtn.addEventListener('click', ()=> panel.classList.add('d-none'));
    });
  }

  // ------- New fields helpers -------
  function createNewOptionRowElement(nameTemplate, value='') {
    const tr = document.createElement('tr');
    tr.innerHTML = `<td class="text-end"><input type="text" name="${nameTemplate}" class="form-control form-control-sm option-input" value="${escapeHtml(value)}"></td>
                    <td class="text-center">
                      <div class="d-flex gap-1 justify-content-center">
                        <button type="button" class="btn btn-sm btn-outline-danger remove-option-btn">×</button>
                        <button type="button" class="btn btn-sm btn-outline-success add-option-btn">+</button>
                      </div>
                    </td>`;
    // remove
    tr.querySelector('.remove-option-btn').addEventListener('click', function(e){ e.stopPropagation(); tr.remove(); });
    // add: insert after this row and stop propagation to prevent delegated duplicate handler
    tr.querySelector('.add-option-btn').addEventListener('click', function(e){ e.stopPropagation(); const newTr = createNewOptionRowElement(nameTemplate, ''); tr.after(newTr); });
    return tr;
  }

  function addNewOptionRow(tbody, nameTemplate, value='') {
    const tr = createNewOptionRowElement(nameTemplate, value);
    tbody.appendChild(tr);
    return tr;
  }

  function initNewFieldsWidget() {
    if (!newFieldsContainer || !addNewFieldBtn) return;

function makeRow(idx, preset = null) {
  const div = document.createElement('div');
  div.className = 'card mb-2 p-2 new-field-row';

  // unique ids for select + options wrapper
  div.innerHTML = `
    <div style="direction:rtl;">
      <div class="d-flex gap-2">
        <div class="flex-grow-1">
          <div class="row g-2 align-items-center">
            <div class="col-md-6">
              <label class="form-label">التسمية</label>
              <input type="text" name="new_fields[${idx}][label]" class="form-control form-control-sm" placeholder="التسمية (العنوان)">
            </div>

            <div class="col-md-6">
              <label class="form-label">نوع الحقل</label>
              <select id="new-field-type-${idx}" name="new_fields[${idx}][input_type]" class="form-control">
                <option value="text">نص</option>
                <option value="textarea">منطقة نص</option>
                <option value="date">تاريخ</option>
                <option value="number">رقم</option>
                <option value="select">قائمة</option>
                <option value="radio">راديو</option>
                <option value="checkbox">مربعات اختيار</option>
                <option value="file">ملف</option>
                <option value="email">بريد إلكتروني</option>
              </select>
            </div>
          </div>

          <div class="row g-2 mt-2 align-items-center">
              <div class="col-md-6 text-end">
              <!-- hidden fallback + visible checkbox for is_visible -->
              <input type="hidden" name="new_fields[${idx}][is_visible]" value="0">
              <div class="form-check form-check-inline">
                <input class="form-control new-field-visible" type="checkbox" name="new_fields[${idx}][is_visible]" id="nf_vis_${idx}" value="1" checked>
                <label class="form-label" for="nf_vis_${idx}">معروض</label>
              </div>

              <!-- hidden fallback + visible checkbox for is_required -->
              <input type="hidden" name="new_fields[${idx}][is_required]" value="0">
              <div class="form-check form-check-inline">
                <input class="form-control new-field-required" type="checkbox" name="new_fields[${idx}][is_required]" id="nf_req_${idx}" value="1">
                <label class="form-label" for="nf_req_${idx}">إلزامي</label>
              </div>
            </div>
            <div class="col-md-6">
              <!-- options area (hidden until needed) -->
              <div id="new-field-options-${idx}" class="mt-2 new-field-options" style="display:none;">
                <table class="table table-bordered options-table">
                  <thead class="thead-light">
                    <tr>
                      <th class="text-end">الخيار</th>
                      <th style="width:90px" class="text-center">العمليات</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
            </div>

          
          </div>
        </div>

        <!-- spacer for remove button column -->
        <div style="width:64px;"></div>
      </div>

      <!-- remove button (positioning handled by your CSS) -->
      <button type="button" class="btn btn-sm btn-outline-danger remove-new-field">حذف</button>
    </div>
  `;

  // initialize elements & events after insert
  setTimeout(()=> {
    const typeSelect = document.getElementById(`new-field-type-${idx}`);
    const optionsDiv = document.getElementById(`new-field-options-${idx}`);
    const tbody = optionsDiv.querySelector('tbody');

    // prefill options if preset provided
    if (preset && Array.isArray(preset.options) && preset.options.length) {
      preset.options.forEach(o => addNewOptionRow(tbody, `new_fields[${idx}][options][]`, o));
      optionsDiv.style.display = '';
      if (preset.input_type) typeSelect.value = preset.input_type;
      // preset.checked states (if present) — accept '1' or true
      const visCb = div.querySelector('.new-field-visible');
      const reqCb = div.querySelector('.new-field-required');
      if (typeof preset.is_visible !== 'undefined') visCb.checked = Boolean(Number(preset.is_visible) || preset.is_visible === true);
      if (typeof preset.is_required !== 'undefined') reqCb.checked = Boolean(Number(preset.is_required) || preset.is_required === true);
    }

    // toggle options area when type changes
    typeSelect.addEventListener('change', function() {
      if (['select','radio','checkbox'].includes(this.value)) {
        optionsDiv.style.display = '';
        if (tbody.children.length === 0) addNewOptionRow(tbody, `new_fields[${idx}][options][]`, '');
      } else {
        optionsDiv.style.display = 'none';
        tbody.innerHTML = '';
      }
    });

    // remove-new-field
    const removeBtn = div.querySelector('.remove-new-field');
    removeBtn && removeBtn.addEventListener('click', ()=> { div.remove(); reindexNewFields(); });

    // ensure at least one option row when needed
    if (preset && ['select','radio','checkbox'].includes(typeSelect.value) && tbody.children.length === 0) {
      addNewOptionRow(tbody, `new_fields[${idx}][options][]`, '');
    }
  }, 0);

  return div;
}


    function reindexNewFields() {
      Array.from(newFieldsContainer.querySelectorAll('.new-field-row')).forEach((r, i) => {
        r.querySelectorAll('input[name],select[name]').forEach(el => {
          const name = el.getAttribute('name');
          if (!name) return;
          el.setAttribute('name', name.replace(/new_fields\[\d+\]/g, `new_fields[${i}]`));
        });
        // reindex options inputs inside table
        r.querySelectorAll('.option-input').forEach(inp => {
          const name = inp.getAttribute('name') || '';
          inp.setAttribute('name', name.replace(/new_fields\[\d+\]\[options\]\[\]/g, `new_fields[${i}][options][]`));
        });
      });
    }

    addNewFieldBtn.addEventListener('click', function(e){
      e.preventDefault();
      const idx = newFieldsContainer.querySelectorAll('.new-field-row').length;
      const row = makeRow(idx);
      newFieldsContainer.appendChild(row);
      row.scrollIntoView({behavior:'smooth', block:'center'});
    });

    // delegated handler for clicks inside newFieldsContainer (manage remove option and remove-row only)
    // NOTE: add-option is handled by per-row listener which calls e.stopPropagation() to prevent duplication.
    newFieldsContainer.addEventListener('click', function(ev){
      const t = ev.target;
      if (!t || !t.classList) return;

      // remove new field
      if (t.classList.contains('remove-new-field')) {
        const row = t.closest('.new-field-row');
        if (row) { row.remove(); reindexNewFields(); }
        return;
      }

      // remove option (delegated as fallback)
      if (t.classList.contains('remove-option-btn')) {
        const tr = t.closest('tr'); if (tr) tr.remove();
        return;
      }

      // If add-option is clicked but didn't have per-row handler (fallback), handle here.
      if (t.classList.contains('add-option-btn')) {
        // ensure it wasn't stopped by per-row handler
        const rowCard = t.closest('.new-field-row');
        if (!rowCard) return;
        const optionsDiv = rowCard.querySelector('.new-field-options');
        if (!optionsDiv) return;
        const tbody = optionsDiv.querySelector('tbody');
        const idx = Array.from(newFieldsContainer.querySelectorAll('.new-field-row')).indexOf(rowCard);
        // fallback insertion at end of tbody
        addNewOptionRow(tbody, `new_fields[${idx}][options][]`, '');
        reindexNewFields();
        return;
      }
    });

    // On load: for server-rendered rows ensure options area behavior and attach proper handlers
// On load: for server-rendered rows ensure options area behavior and attach proper handlers
Array.from(newFieldsContainer.querySelectorAll('.new-field-row')).forEach((r, idx) => {
  // ensure the row's select and options wrapper have stable ids
  let typeSelect = r.querySelector('select[name$="[input_type]"]');
  if (typeSelect && !typeSelect.id) {
    typeSelect.id = `new-field-type-${idx}`;
  }
  let optionsDiv = r.querySelector('.new-field-options');
  if (optionsDiv && !optionsDiv.id) {
    optionsDiv.id = `new-field-options-${idx}`;
  }

  // ensure option inputs' name attributes include the correct index
  const tbody = optionsDiv && optionsDiv.querySelector('tbody');
  if (tbody) {
    tbody.querySelectorAll('.option-input').forEach(inp => {
      const currentName = inp.getAttribute('name') || `new_fields[${idx}][options][]`;
      inp.setAttribute('name', currentName.replace(/new_fields\[\d+\]\[options\]\[\]/g, `new_fields[${idx}][options][]`));
    });

    // attach add/remove handlers for each row's option controls (avoid double-binding)
    Array.from(tbody.querySelectorAll('tr')).forEach(tr => {
      const oldRemove = tr.querySelector('.remove-option-btn');
      const oldAdd = tr.querySelector('.add-option-btn');
      if (oldRemove) {
        const clone = oldRemove.cloneNode(true);
        oldRemove.replaceWith(clone);
        clone.addEventListener('click', function(e){ e.stopPropagation(); tr.remove(); });
      }
      if (oldAdd) {
        const clone2 = oldAdd.cloneNode(true);
        oldAdd.replaceWith(clone2);
        clone2.addEventListener('click', function(e){
          e.stopPropagation();
          const newTr = createNewOptionRowElement(`new_fields[${idx}][options][]`, '');
          tr.after(newTr);
          reindexNewFields();
        });
      }
    });
  }

  // attach change listener (by id) to toggle options area
  typeSelect = document.getElementById(`new-field-type-${idx}`);
  optionsDiv = document.getElementById(`new-field-options-${idx}`);
  if (typeSelect && optionsDiv) {
    typeSelect.addEventListener('change', function(){
      if (['select','radio','checkbox'].includes(this.value)) {
        optionsDiv.style.display = '';
        const tbodyLocal = optionsDiv.querySelector('tbody');
        if (tbodyLocal && tbodyLocal.children.length === 0) addNewOptionRow(tbodyLocal, `new_fields[${idx}][options][]`, '');
      } else {
        optionsDiv.style.display = 'none';
        const tbodyLocal = optionsDiv.querySelector('tbody');
        if (tbodyLocal) tbodyLocal.innerHTML = '';
      }
    });

    // Make visibility consistent for server-rendered rows: show if it already contains rows
    const tbodyLocal = optionsDiv.querySelector('tbody');
    if (tbodyLocal && tbodyLocal.children.length > 0) {
      optionsDiv.style.display = '';
    } else {
      // if the select is a multi-choice type, ensure at least one row
      if (['select','radio','checkbox'].includes(typeSelect.value) && tbodyLocal && tbodyLocal.children.length === 0) {
        addNewOptionRow(tbodyLocal, `new_fields[${idx}][options][]`, '');
        optionsDiv.style.display = '';
      }
    }
  }

  // ensure remove button works for server-rendered rows
  const removeBtn = r.querySelector('.remove-new-field');
  if (removeBtn) {
    removeBtn.addEventListener('click', function(){
      r.remove();
      reindexNewFields();
    });
  }
});

  }

  // init
 document.addEventListener('DOMContentLoaded', function(){
  attachControlListeners();
  initNewFieldsWidget();

  // ensure all edit-panels get their option rows wired (so stored rows are usable even before opening)
  document.querySelectorAll('.edit-panel').forEach(panel => {
    // ensure wrapper visibility matches current select value (in case backend made it visible)
    toggleEditPanelOptions(panel);
    // attach handlers to existing rows and create a blank row if needed
    initOptionRowsForPanel(panel);
  });
});

})();
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const form = document.querySelector('form');
  if (!form) return;

  function collectNewFieldsAsPayload() {
    const rows = Array.from(document.querySelectorAll('.new-field-row'));
    const payload = rows.map((row, idx) => {
      const labelEl = row.querySelector('input[name^="new_fields"][name$="[label]"]');
      const typeEl  = row.querySelector('select[name^="new_fields"][name$="[input_type]"]');
    
      // prefer the visible checkbox (not the hidden fallback input). If no checkbox found, use the first matching element.
function firstNonHidden(selector, ctx) {
  const els = Array.from((ctx||document).querySelectorAll(selector));
  if (els.length === 0) return null;
  const cb = els.find(e => e.type !== 'hidden');
  return cb || els[0];
}

const visEl = firstNonHidden('input[name^="new_fields"][name$="[is_visible]"]', row);
const reqEl = firstNonHidden('input[name^="new_fields"][name$="[is_required]"]', row);

      const opts = Array.from(row.querySelectorAll('.option-input'))
                        .map(i => (i.value || '').trim())
                        .filter(v => v !== '');

      return {
        label: labelEl ? (labelEl.value || '').trim() : '',
        input_type: typeEl ? (typeEl.value || 'text') : 'text',
     is_visible: (visEl && (visEl.type === 'checkbox' ? visEl.checked : (visEl.value === '1'))) ? '1' : '0',
is_required: (reqEl && (reqEl.type === 'checkbox' ? reqEl.checked : (reqEl.value === '1'))) ? '1' : '0',

        options: opts
      };
    });

    // attach / update hidden input carrying JSON payload
    let hidden = document.getElementById('new_fields_payload_input');
    if (!hidden) {
      hidden = document.createElement('input');
      hidden.type = 'hidden';
      hidden.id = 'new_fields_payload_input';
      hidden.name = 'new_fields_payload';
      form.appendChild(hidden);
    }
    hidden.value = JSON.stringify(payload);
  }

  // before submit: reindex names (if you keep that logic) and then build payload
  form.addEventListener('submit', function (ev) {
    try {
      // keep your existing reindex function if present
      if (typeof window.reindexNewFields === 'function') window.reindexNewFields();
    } catch (e) { /* ignore */ }

    // now build the payload that the server will prefer
    collectNewFieldsAsPayload();
    // form continues to submit normally
  });
});
</script>


@endpush

@stack('styles')
@stack('scripts')
@endsection