@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="{{ asset('css/pages/form.css') }}">
@if ($errors->any())
  <div class="alert alert-danger">
    <strong>هناك أخطاء — صحّحها ثم أعد المحاولة:</strong>
    <ul class="mb-0">
      @foreach ($errors->all() as $err)
        <li>{{ $err }}</li>
      @endforeach
    </ul>
  </div>
@endif

@if (session('error'))
  <div class="alert alert-danger">{{ session('error') }}</div>
@endif
@if (session('success'))
  <div class="alert alert-success">{{ session('success') }}</div>
@endif



<form action="{{ route('signalement.update', $signalement->id_signalement) }}" method="POST" class="needs-validation" novalidate>

  @csrf
  @method('PUT')
  <!-- Title card -->
  <div class="card page-title-card mb-3">
    <div class="card-body d-flex flex-column flex-sm-row align-items-sm-center justify-content-between">
      <div class="d-flex flex-column">
        <h3 class="h3 mb-1">تعديل معطيات البلاغ</h3>

      </div>

      <div class="form-title-actions mt-2 mt-sm-0">
        {{-- <button type="submit" class="btn btn-primary btn-sm" id="btnSaveForm" aria-label="حفظ الاستمارة">
            <i class="bx bx-save me-1"></i> حفظ
          </button> --}}


      </div>
    </div>
  </div>

  <!-- Main card that contains all form sections -->
  <div class="card mb-4">
    <div class="card-body">



  <div class="accordion mx-auto" id="sectionsAccordion" dir="rtl" style="max-width:98%;">

    <!-- Section: توقيت المكالمة -->
    <div class="accordion-item">
     <br>
    <div class="section-title">
          <h4 class="accordion-header" id="heading-timing">توقيت المكالمة</h4>
          {{-- <div class="section-sub">تفاصيل توقيت المكالمة</div> --}}
        </div>
        
      <div >
        <br>
        <div dir="rtl">

          <div class="row g-3">

            <!-- Date d'écoute (jour/mois/année) -->
            <div class="col-12 col-md-6">
              <label class="form-label fw-semibold">تاريخ الإنصات</label>
              <input name="date_appel" type="date" class="form-control"
                     value="{{ old('date_appel', optional($signalement ?? null)->date_appel ? \Carbon\Carbon::parse($signalement->date_appel)->format('Y-m-d') : '') }}">
              @error('date_appel') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
              <div class="form-text">اليوم / الشهر / السنة</div>
            </div>

            <!-- Heure de l'appel -->
            <div class="col-12 col-md-6">
              <label class="form-label fw-semibold">توقيت المكالمة</label>
              <input name="heure_ecoute" type="time" class="form-control"
                     value="{{ old('heure_ecoute', optional($signalement ?? null)->heure_ecoute) }}" />
              @error('heure_ecoute') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>

            <!-- Choix de la séance (توقيت الإنصات) => inline -->
            <div class="col-12">
              <label class="form-label fw-semibold mb-2"> توقيت الإنصات:</label>

              <div class="d-flex flex-wrap align-items-center gap-2">
                @foreach($seances as $s)
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="id_seance" id="seance-{{ $s->id }}"
                           value="{{ $s->id }}"
                           {{ old('id_seance', optional($signalement ?? null)->id_seance) == $s->id ? 'checked' : '' }}>
                    <label class="form-check-label" for="seance-{{ $s->id }}">
                      {{ $s->seance_ar ?? $s->seance_fr ?? '—' }}
                    </label>
                  </div>
                @endforeach
              </div>

              @error('id_seance') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>

          </div> <!-- /.row -->

        </div> <!-- /.accordion-body -->
      </div>
    </div>
<br>
<!-- Section: موضوع المكالمة -->
<div class="accordion-item">
        <div class="section-title">
          <h4 class="accordion-header" id="heading-timing">موضوع المكالمة</h4>
          {{-- <div class="section-sub">تفاصيل توقيت المكالمة</div> --}}
        </div>
<br>
  <div>
    <div class="accordion-body" dir="rtl">

      <!-- 1) Choix principal du sujet (radio buttons) -->
      <div class="mb-3">
        <label class="form-label fw-semibold d-block mb-2">اختر موضوع المكالمة (الموضوع الرئيسي)</label>

        <div class="d-flex flex-wrap gap-2">
          @foreach($sujets as $s)
            <div class="form-check">
              <input class="form-check-input" type="radio" name="id_sujet_appel"
                     id="sujet-{{ $s->id }}" value="{{ $s->id }}"
                     {{ (string) old('id_sujet_appel', optional($signalement ?? null)->id_sujet_appel) === (string)$s->id ? 'checked' : '' }}>
              <label class="form-check-label" for="sujet-{{ $s->id }}">
                {{ $s->sujet_ar ?? $s->sujet_fr }}
              </label>
            </div>
          @endforeach
        </div>

        @error('id_sujet_appel') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
      </div>

      <!-- 2) Si 'مسائل أخرى' => choix d'une raison autre (lookup) -->
<!-- 2) Si 'مسائل أخرى' => choix d'une raison autre (lookup) -->
<div class="mb-3" id="autre-section">
  <label class="form-label fw-semibold">المكالمات المتعلقة بمسائل أخرى — سبب (إن وُجد)</label>
  <select name="id_autre" class="form-select">
    <option value="">-- اختر (إن وجد) --</option>
    @foreach($autres as $a)
      <option value="{{ $a->id }}"
        {{ (string) old('id_autre', optional($signalement ?? null)->id_autre) === (string)$a->id ? 'selected' : '' }}>
        {{ $a->autre_ar ?? $a->autre_fr }}
      </option>
    @endforeach
  </select>
  @error('id_autre') <div class="text-danger small mt-1">{{ $message }}</div> @enderror

</div>



<!-- 3 & 4) Source signalement + Rapporteur -->
<div class="row g-3" id="source-rapporteur-section">
  <div class="col-12 col-md-6">
    <label class="form-label fw-semibold">مصدر الإشعار (في حالات الاشعار عن عنف ضد المرأة)</label>
    <select name="id_source_signale" class="form-select">
      <option value="">-- اختر مصدر الإشعار --</option>
      @foreach($sources as $src)
        <option value="{{ $src->id }}"
          {{ (string) old('id_source_signale', optional($signalement ?? null)->id_source_signale) === (string)$src->id ? 'selected' : '' }}>
          {{ $src->source_ar ?? $src->source_fr }}
        </option>
      @endforeach
    </select>
    @error('id_source_signale') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
  </div>

  <div class="col-12 col-md-6">
    <label class="form-label fw-semibold">المبلغ (من قام بالإشعار)</label>
    <select name="id_rapporteur" class="form-select">
      <option value="">-- اختر المبلغ --</option>
      @foreach($rapporteurs as $r)
        <option value="{{ $r->id }}"
          {{ (string) old('id_rapporteur', optional($signalement ?? null)->id_rapporteur) === (string)$r->id ? 'selected' : '' }}>
          {{ $r->rapporteur_ar ?? $r->rapporteur_fr }}
        </option>
      @endforeach
    </select>
    @error('id_rapporteur') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
  </div>
  

</div>

    </div> <!-- /.accordion-body -->
  </div> <!-- /.collapse -->
</div> <!-- /.accordion-item -->


 <!-- Section: معلومات عن الضحية -->
<div class="accordion-item">
    <div class="section-title">
   <h4 class="accordion-header" id="heading-timing">معلومات عن الضحية</h4>
    </div>

  <div>
    <div class="accordion-body" dir="rtl">

      <div class="row g-3">

        <!-- الموافقة على التصريح بالهوية -->
        <div class="col-12">
          <label class="form-label fw-semibold">الموافقة على التصريح بهويّيتها</label>
          <div class="d-flex gap-3 align-items-center">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="accept_identite" id="accept_identite_yes" value="1"
               {{ (string) old('accept_identite', optional($victime ?? null)->accept_identite) === '1' ? 'checked' : '' }}>
              <label class="form-check-label" for="accept_identite_yes">نعم</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="accept_identite" id="accept_identite_no" value="0"
                 {{ (string) old('accept_identite', optional($victime ?? null)->accept_identite) === '0' ? 'checked' : '' }}>
              <label class="form-check-label" for="accept_identite_no">لا</label>
            </div>
          </div>
          @error('accept_identite') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
        </div>

        <!-- الاسم -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">السيدة (الإسم واللقب)</label>
          <input type="text" name="nom_prenom" class="form-control"
                 value="{{ old('nom_prenom', optional($victime ?? null)->nom_prenom) }}">
          @error('nom_prenom') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
        </div>

        <!-- معرف الضحية -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">معرف الضحية</label>
          <input type="text" name="identifiant" class="form-control"
                 value="{{ old('identifiant', optional($victime ?? null)->identifiant) }}">
          @error('identifiant') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
        </div>

        <!-- بطاقة تعريف غير متوفرة: select -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">بطاقة تعريف غير متوفرة (إن وجد)</label>
          <select name="id_cin_non_dispo" id="id_cin_non_dispo" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($cin as $c)
              <option value="{{ $c->id }}"
                {{ (string) old('id_cin_non_dispo', optional($victime ?? null)->id_cin_non_dispo) === (string)$c->id ? 'selected' : '' }}>
                {{ $c->cin_ar ?? $c->cin_fr ?? '—' }}
              </option>
            @endforeach
          </select>
          @error('id_cin_non_dispo') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
        </div>
    <!-- الجنسية -->
      
       <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">الجنسية</label>
          <input type="text" name="nationalite" class="form-control" value="{{ old('nationalite', optional($victime ?? null)->nationalite) }}">
          @error('nationalite') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
        </div>

        <!-- الهاتف للمتابعة -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">الهاتف للمتابعة عند الضرورة</label>
          <input type="tel" name="num_tel_suivi" class="form-control" value="{{ old('num_tel_suivi', optional($victime ?? null)->num_tel_suivi) }}">
        </div>

      <!-- الهاتف الشخصي للضحية -->
    
     <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">الهاتف الشخصي للضحية</label>
          <input type="tel" name="num_tel" class="form-control" value="{{ old('num_tel', optional($victime ?? null)->num_tel) }}">
          @error('num_tel') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
        </div>
        <!-- العنوان -->
        <div class="col-12 col-md-12">
          <label class="form-label fw-semibold">العنوان</label>
          <input type="text" name="adresse" class="form-control" value="{{ old('adresse', optional($victime ?? null)->adresse) }}">
          @error('adresse') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
        </div>

        <!-- الولاية (select) -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">الولاية</label>
          <select name="id_gouver" id="id_gouver" class="form-select">
            <option value="">-- اختر الولاية --</option>
            @foreach($gouvernorats as $g)
              <option value="{{ $g->id_gouver }}"
                {{ (string) old('id_gouver', optional($victime ?? null)->id_gouver) === (string)$g->id_gouver ? 'selected' : '' }}>
                {{ $g->nom_ar }}
              </option>
            @endforeach
          </select>
          @error('id_gouver') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
        </div>

        <!-- المعتمدية (select) -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">المعتمدية / العمادة</label>
      <select name="id_municipalite" id="id_municipalite" class="form-select">
  <option value="">-- اختر المعتمدية --</option>
  @foreach($delegations as $d)
    <option value="{{ $d->id_delegation }}"
      {{ (string) old('id_municipalite', optional($victime ?? null)->id_municipalite) === (string)$d->id_delegation ? 'selected' : '' }}>
      {{ $d->nom_ar }}
    </option>
  @endforeach
</select>

          @error('id_municipalite') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
        </div>

        <!-- مكان تواجد الضحية -->
        <div class="col-12">
          <label class="form-label fw-semibold">مكان تواجد الضحيّة عند الإتصال</label>
          <input type="text" name="lieu_vict_appel" class="form-control" value="{{ old('lieu_vict_appel', optional($victime ?? null)->lieu_vict_appel) }}">
        </div>

        <!-- الولاية عند العنف + معتمدية عند العنف (deux selects côte à côte) -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">الولاية عند حدوث العنف</label>
     <select name="id_gouver_viol" class="form-select">
  <option value="">-- اختر الولاية --</option>
  @foreach($gouvernorats as $g)
    <option value="{{ $g->id_gouver }}"
      {{ (string) old('id_gouver_viol', optional($violence ?? null)->id_gouv_violence) === (string)$g->id_gouver ? 'selected' : '' }}>
      {{ $g->nom_ar }}
    </option>
  @endforeach
</select>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">المعتمدية عند حدوث العنف</label>
     <select name="id_municipalite_viol" class="form-select">
  <option value="">-- اختر المعتمدية --</option>
  @foreach($delegations as $d)
    <option value="{{ $d->id_delegation }}"
      {{ (string) old('id_municipalite_viol', optional($violence ?? null)->id_municip_violence) === (string)$d->id_delegation ? 'selected' : '' }}>
      {{ $d->nom_ar }}
    </option>
  @endforeach
</select>
        </div>

        <!-- السن -->
        <div class="col-12">
          <label class="form-label fw-semibold">السن </label>
          <input class="form-control" type="number" name="id_age" id="age"
                 value="{{ old('id_age', optional($victime ?? null)->id_age) }}">
        </div>

        <!-- الحالة المدنية + المستوى التعليمي (deux selects côte à côte) -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">الحالة المدنية</label>
          <select name="id_etat_civil" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($etatsCivil as $ec)
              <option value="{{ $ec->id }}" {{ (string) old('id_etat_civil', optional($victime ?? null)->id_etat_civil) === (string)$ec->id ? 'selected' : '' }}>
                {{ $ec->etat_ar ?? $ec->etat_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">المستوى التعليمي</label>
          <select name="id_niveau_edu" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($niveauxEdu as $n)
              <option value="{{ $n->id }}" {{ (string) old('id_niveau_edu', optional($victime ?? null)->id_niveau_edu) === (string)$n->id ? 'selected' : '' }}>
                {{ $n->niveau_ar ?? $n->niveau_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- الوضعية الصحية + ضحية حاملة لإعاقة (deux selects côte à côte) -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">الوضعية الصحية</label>
          <select name="id_etat_sante" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($etatsSante as $s)
              <option value="{{ $s->id }}" {{ (string) old('id_etat_sante', optional($victime ?? null)->id_etat_sante) === (string)$s->id ? 'selected' : '' }}>
                {{ $s->etat_ar ?? $s->etat_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">الضحية حاملة لإعاقة (النوع)</label>
          <select name="id_porteuse_handicap" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($porteuseHand as $p)
              <option value="{{ $p->id }}" {{ (string) old('id_porteuse_handicap', optional($victime ?? null)->id_porteuse_handicap) === (string)$p->id ? 'selected' : '' }}>
                {{ $p->porteuse_ar ?? $p->porteuse_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- درجة الإعاقة + التغطية الاجتماعية (deux selects côte à côte) -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">درجة إعاقة الضحية</label>
          <select name="id_niv_hand" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($niveauHand as $nh)
              <option value="{{ $nh->id }}"
                {{ (string) old('id_niv_handicap', optional($victime ?? null)->id_niv_handicap) === (string)$nh->id ? 'selected' : '' }}>
                {{ $nh->niveau_hand_ar ?? $nh->niveau_hand_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">نوع التغطية الاجتماعية للضحية</label>
          <select name="id_couv_sociale" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($couvSocialeList as $cov)
              <option value="{{ $cov->id }}" {{ (string) old('id_couv_sociale', optional($victime ?? null)->id_couv_sociale) === (string)$cov->id ? 'selected' : '' }}>
                {{ $cov->couv_sociale_ar ?? $cov->couv_sociale_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- القدرة على القيام بشؤونها الشخصية (radio) -->
  <div class="col-12">
  <label class="form-label fw-semibold">القدرة على القيام بشؤونها الشخصية</label>
  <div class="d-flex gap-3 align-items-center">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="id_autonomie_personnel" id="autonomie_yes" value="1"
        {{ (string) old('id_autonomie_personnel', optional($victime ?? null)->id_autonomie_personnel) === '1' ? 'checked' : '' }}>
      <label class="form-check-label" for="autonomie_yes">نعم</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="id_autonomie_personnel" id="autonomie_no" value="0"
        {{ (string) old('id_autonomie_personnel', optional($victime ?? null)->id_autonomie_personnel) === '0' ? 'checked' : '' }}>
      <label class="form-check-label" for="autonomie_no">لا</label>
    </div>
  </div>

  <div class="mt-2" id="raison-non-autonomie"
       data-initial="{{ old('id_autonomie_personnel', optional($victime ?? null)->id_autonomie_personnel) ?? '' }}"
       style="{{ old('id_autonomie_personnel', optional($victime ?? null)->id_autonomie_personnel) === '0' ? 'display:block;' : 'display:none;' }}">
    <label class="form-label">سبب عدم القدرة</label>
    <textarea name="raison_non_autonomie" class="form-control" rows="2">{{ old('raison_non_autonomie', optional($victime ?? null)->raison_non_autonomie) }}</textarea>
  </div>
</div>


        <!-- الوضعية المهنية + سبب غير مباشرة (deux selects côte à côte) -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">الوضعية المهنية</label>
          <select name="id_sit_pro" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($sitProList as $sp)
              <option value="{{ $sp->id }}" {{ (string) old('id_sit_pro', optional($victime ?? null)->id_sit_pro) === (string)$sp->id ? 'selected' : '' }}>
                {{ $sp->sit_pro_ar ?? $sp->sit_pro_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">في حالة "غير مباشرة للعمل" — سبب</label>
          <select name="id_sit_pro_inactif" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($sitProInactif as $spi)
              <option value="{{ $spi->id }}" {{ (string) old('id_sit_pro_inactif', optional($victime ?? null)->id_sit_pro_inactif) === (string)$spi->id ? 'selected' : '' }}>
                {{ $spi->raison_inactif_ar ?? $spi->raison_inactif_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- مهنة المجال + مكتب التشغيل (deux selects côte à côte) -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">مهنة الضحية (مجال)</label>
          <select name="id_domaine_pro" class="form-select">
            <option value="">-- اختر المجال --</option>
            @foreach($domaineProList as $d)
              <option value="{{ $d->id }}" {{ (string) old('id_domaine_pro', optional($victime ?? null)->id_domaine_pro) === (string)$d->id ? 'selected' : '' }}>
                {{ $d->domaine_ar ?? $d->domaine_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">انتفاع بخدمات مكتب التشغيل / عمل مستقل</label>
          <select name="id_bureau_emploi" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($servicesBureau as $s)
              <option value="{{ $s->id }}" {{ (string) old('id_bureau_emploi', optional($victime ?? null)->id_bureau_emploi) === (string)$s->id ? 'selected' : '' }}>
                {{ $s->service_emploi_ar ?? $s->service_emploi_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- نوع الإقامة + الانتفاع بالتمكين (deux selects côte à côte) -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">نوع إقامة الضحية</label>
          <select name="id_type_residence" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($typeResidence as $tr)
              <option value="{{ $tr->id }}" {{ (string) old('id_type_residence', optional($victime ?? null)->id_type_residence) === (string)$tr->id ? 'selected' : '' }}>
                {{ $tr->type_residence_ar ?? $tr->type_residence_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">الانتفاع ببرامج التمكين / المساعدة</label>
          <select name="id_aide_socioeco" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($aidesSocioeco as $a)
              <option value="{{ $a->id }}" {{ (string) old('id_aide_socioeco', optional($victime ?? null)->id_aide_socioeco) === (string)$a->id ? 'selected' : '' }}>
                {{ $a->aide_ar ?? $a->aide_fr }}
              </option>
            @endforeach
          </select>
        </div>
        <!-- تواتر العنف -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">تواتر العنف</label>
<select name="id_frequence_violence" class="form-select">
  <option value="">-- اختر --</option>
  @foreach($frequences as $f)
    <option value="{{ $f->id }}"
      {{ (string) old('id_frequence_violence', optional($violence ?? null)->id_frequence_violence) === (string)$f->id ? 'selected' : '' }}>
      {{ $f->frequence_ar ?? $f->frequence_fr }}
    </option>
  @endforeach
</select>
        </div>

        <!-- توقيت التعرض -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">توقيت التعرض إلى العنف</label>
          <select name="id_heure_violence" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($heuresViol as $h)
              <option value="{{ $h->id }}" {{ (string) old('id_heure_violence', optional($violence ?? null)->id_heure_violence) === (string)$h->id ? 'selected' : '' }}>
                {{ $h->heure_ar ?? $h->heure_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- نوع اليوم -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">نوع اليوم</label>
          <select name="id_type_jour" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($typeJour as $t)
              <option value="{{ $t->id }}" {{ (string) old('id_type_jour', optional($violence ?? null)->id_type_jour) === (string)$t->id ? 'selected' : '' }}>
                {{ $t->type_jr_ar ?? $t->type_jr_fr }}
              </option>
            @endforeach
          </select>
        </div>
@php
  // $violence injected from controller; convert to array of strings
  $existingTypes = $violence ? $violence->types->pluck('tp_type_violence_id')->map(function($v){ return (string)$v; })->toArray() : [];

  // If validation failed, old('type_violence') should override; otherwise use existingTypes
  $selectedTypes = old('type_violence', $existingTypes);
@endphp
        <!-- أشكال العنف (نوع العنف) -->
<div class="col-12">
  <label class="form-label fw-semibold">أشكال العنف (اختر واحد أو أكثر)</label>
  <div class="d-flex flex-wrap gap-2">
    @foreach($typeViolence as $tv)
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          name="type_violence[]"
          id="type_viol_{{ $tv->id }}"
          value="{{ $tv->id }}"
          {{ in_array((string) $tv->id, $selectedTypes) ? 'checked' : '' }}>
        <label class="form-check-label" for="type_viol_{{ $tv->id }}">
          {{ $tv->type_viol_ar ?? $tv->type_viol_fr }}
        </label>
      </div>
    @endforeach
  </div>
  @error('type_violence') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
</div>


        <!-- مكان العنف -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">مكان العنف</label>
          <select name="id_lieu_violence" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($lieuxViol as $lv)
              <option value="{{ $lv->id }}" {{ (string) old('id_lieu_violence', optional($violence ?? null)->id_lieu_violence) === (string)$lv->id ? 'selected' : '' }}>
                {{ $lv->lieu_ar ?? $lv->lieu_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- وسائل العنف في الفضاء الافتراضي -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">وسيلة العنف في الفضاء الافتراضي</label>
          <select name="id_moyens_violence_virtuelle" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($moyensVir as $mv)
              <option value="{{ $mv->id }}" {{ (string) old('id_moyens_violence_virtuelle', optional($violence ?? null)->id_moyens_violence_virtuelle) === (string)$mv->id ? 'selected' : '' }}>
                {{ $mv->moyen_ar ?? $mv->moyen_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- التعرض للعنف أثناء الطفولة -->
        <div class="col-12 col-md-6">
          <label class="form-label fw-semibold">التعرض للعنف أثناء الطفولة</label>
          <div class="d-flex gap-3 align-items-center">
            @foreach($violenceEnf as $ve)
              <div class="form-check">
                <input class="form-check-input" type="radio" name="id_violence_enfance" id="viol_enf_{{ $ve->id }}" value="{{ $ve->id }}"
                  {{ (string) old('id_violence_enfance', optional($violence ?? null)->id_violence_enfance) === (string)$ve->id ? 'checked' : '' }}>
                <label class="form-check-label" for="viol_enf_{{ $ve->id }}">{{ $ve->viol_enf_ar ?? $ve->viol_enf_fr }}</label>
              </div>
            @endforeach
          </div>
        </div>

        <!-- طلبات الضحية (multiple choices -> stockées en remarques) -->
<div class="col-12 col-md-6">
  <label class="form-label fw-semibold">طلب الضحية</label>
   <select name="id_demande" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($demandesList as $de)
              <option value="{{ $de->id }}" {{ (string) old('id_demande_victime', optional($signalement ?? null)->id_demande_victime) === (string)$de->id ? 'selected' : '' }}>
                {{ $de->demande_ar ?? $de->demande_ar}}
              </option>
            @endforeach
          </select>
</div>
      </div> <!-- /.row -->

    </div>
  </div>
</div>


        <!-- Section: الأطفال المرافقون -->
<div class="accordion-item">
        <div class="section-title">
   <h4 class="accordion-header" id="heading-timing">الأطفال المرافقون  </h4>
    </div>
       <div>
            <div class="accordion-body">   
   <div class="mb-3">
  
  @php
     // raw children collection from controller — may be Model objects or arrays
      $rawChildren = old('children') ?? ($children->isNotEmpty() ? $children->toArray() : []);

       // Build normalized children arrays so view and JS always use 'gender' key
      $initialChildren = collect($rawChildren)->map(function($c) {
      // if $c is model->toArray() or old() array, keys differ:
      // DB column is 'sex' but the form uses 'gender' as key.
      $sex = null;
      if (is_array($c)) {
          $sex = $c['sex'] ?? $c['gender'] ?? null;
          $id_age = $c['id_age_enf'] ?? $c['id_age_enf'] ?? null;
          $id_niv = $c['id_niveau_edu_enf'] ?? $c['id_niveau_edu_enf'] ?? null;
          $decroche = $c['decroche_scolaire'] ?? $c['decroche_scolaire'] ?? null;
          $porteur = $c['porteur_handicap'] ?? $c['porteur_handicap'] ?? null;
          $lien = $c['lien_parente'] ?? $c['lien_parente'] ?? null;
      } else {
          // object (Eloquent model)
          $sex = $c->sex ?? $c->gender ?? null;
          $id_age = $c->id_age_enf ?? null;
          $id_niv = $c->id_niveau_edu_enf ?? null;
          $decroche = $c->decroche_scolaire ?? null;
          $porteur = $c->porteur_handicap ?? null;
          $lien = $c->lien_parente ?? null;
      }

      return [
          'gender' => $sex,                    // normalized key for the view/JS
          'id_age_enf' => $id_age,
          'id_niveau_edu_enf' => $id_niv,
          'decroche_scolaire' => $decroche,
          'porteur_handicap' => $porteur,
          'lien_parente' => $lien,
      ];
  })->toArray();

     $initialCount = count($initialChildren);

     $agesEnfForJs = $agesEnf->map(fn($a) => ['id'=>$a->id,'age_ar'=>$a->age_ar,'age_fr'=>$a->age_fr])->toArray();
     $niveauxEduEnfForJs = $niveauxEduEnf->map(fn($n) => ['id'=>$n->id,'niveau_ar'=>$n->niveau_ar,'niveau_fr'=>$n->niveau_fr])->toArray();
  @endphp


<div class="row g-2 align-items-center mb-2">
  <div class="col-12 col-md-3">
    <label for="children_count" class="form-label">عدد الأطفال</label>
    <!-- Use children_count consistently -->
    <input type="number" id="children_count" name="children_count" class="form-control" min="0"
      value="{{ old('children_count', optional($victime ?? null)->nombre_enfants) }}" />
  </div>
  <div class="col-12 col-md-9">
    <label class="form-label">&nbsp;</label>
    <div>
      <button type="button" class="btn btn-outline-secondary btn-sm" id="children-toggle-table">تعبئة تفاصيل الأطفال</button>
    </div>
  </div>
</div>

<!-- Show wrapper if initialCount > 0 -->
<div id="children-table-wrapper" style="{{ ($initialCount ?? 0) > 0 ? 'display:block;' : 'display:none;' }}">
  <div class="table-responsive">
    <table class="table table-sm table-bordered text-center" id="children-table">
      <thead class="table-light">
        <tr>
          <th>#</th>
          <th>الجنس</th>
          <th>العمر (فئة)</th>
          <th>المستوى التعليمي</th>
          <th>منقطع عن الدراسة</th>
          <th>حامل لإعاقة</th>
          <th>صلة القرابة / ملاحظة</th>
        </tr>
      </thead>
      <tbody>
        {{-- server-rendered rows when editing or after validation error --}}
        @if($initialCount > 0)
          @foreach($initialChildren as $idx => $c)
            <tr>
              <td>{{ $idx + 1 }}</td>

               <td>
        <select class="form-select form-select-sm" name="children[{{ $idx }}][gender]">
          <option value="">--</option>
          <option value="female" {{ (isset($c['gender']) && $c['gender'] === 'female') ? 'selected' : '' }}>أنثى</option>
          <option value="male"   {{ (isset($c['gender']) && $c['gender'] === 'male') ? 'selected' : '' }}>ذكر</option>
        </select>
      </td>

              <td>
                <select class="form-select form-select-sm" name="children[{{ $idx }}][id_age_enf]">
                  <option value="">-- اختر فئة العمر --</option>
                  @foreach($agesEnf as $age)
                    @php $val = $age->id; $sel = ((string)($c['id_age_enf'] ?? '') === (string)$val); @endphp
                    <option value="{{ $val }}" {{ $sel ? 'selected' : '' }}>{{ $age->age_ar ?? $age->age_fr }}</option>
                  @endforeach
                </select>
              </td>

              <td>
                <select class="form-select form-select-sm" name="children[{{ $idx }}][id_niveau_edu_enf]">
                  <option value="">--</option>
                  @foreach($niveauxEduEnf as $n)
                    @php $val = $n->id; $sel = ((string)($c['id_niveau_edu_enf'] ?? '') === (string)$val); @endphp
                    <option value="{{ $val }}" {{ $sel ? 'selected' : '' }}>{{ $n->niveau_ar ?? $n->niveau_fr }}</option>
                  @endforeach
                </select>
              </td>

              <td>
                <div class="form-check">
                  @php $checked = isset($c['decroche_scolaire']) && ($c['decroche_scolaire'] == 1 || $c['decroche_scolaire'] === true); @endphp
                  <input class="form-check-input" type="checkbox" name="children[{{ $idx }}][decroche_scolaire]" value="1" {{ $checked ? 'checked' : '' }}>
                </div>
              </td>

              <td>
                <div class="form-check">
                  @php $checked2 = isset($c['porteur_handicap']) && ($c['porteur_handicap'] == 1 || $c['porteur_handicap'] === true); @endphp
                  <input class="form-check-input" type="checkbox" name="children[{{ $idx }}][porteur_handicap]" value="1" {{ $checked2 ? 'checked' : '' }}>
                </div>
              </td>

              <td>
                <input type="text" class="form-control form-control-sm" name="children[{{ $idx }}][lien_parente]"
                  value="{{ old("children.$idx.lien_parente", $c['lien_parente'] ?? '') }}" placeholder="صلة أو ملاحظة">
              </td>
            </tr>
          @endforeach
        @endif
      </tbody>
    </table>
  </div>

  <small class="text-muted">أدخل عدد الأطفال ثم اضغط "تعبئة تفاصيل الأطفال" أو غير العدد لتعديل الصفوف.</small>
</div>

{{-- expose option arrays for JS and old children data --}}
<script>
  window.__agesEnf = @json($agesEnfForJs);
  window.__niveauxEduEnf = @json($niveauxEduEnfForJs);
  // IMPORTANT: use normalized initialChildren which already contains 'gender'
  window.__oldChildren = @json($initialChildren);
  window.__initialCount = {{ $initialCount }};
</script>


</div>
</div>
{{-- expose lookup lists to JS --}}
<script>
  // server-populated arrays for selects
  window.__agesEnf = @json($agesEnf ?? []);
  window.__niveauxEduEnf = @json($niveauxEduEnf ?? []);
</script>
    
        </div>
        </div>
        <!-- Section: معلومات حول القائم بالعنف -->
        <div class="accordion-item">
        <div class="section-title">
    <h4 class="accordion-header" id="heading-timing">معلومات حول القائم بالعنف</h4>
        </div>
          <div>
            <div class="accordion-body">
            <div class="row g-3">

  <!-- Relation to victim (القائم بالعنف) -->
  <div class="col-12">
    <label class="form-label fw-semibold">القائم بالعنف (ضع علامة X في الخانة المناسبة)</label>
    <div class="d-flex flex-wrap gap-2">
@php
  // قيمة مُختارة: أولاً old من إعادة توجيه، وإلا من قاعدة البيانات ($agresseur)
  $selected_relation_victime = old('agresseur_id_relation_victime', optional($agresseur ?? null)->id_relation_victime);
@endphp

@foreach($relationsVictime as $rv)
  <div class="form-check">
    <input class="form-check-input" type="radio"
           name="agresseur_id_relation_victime"
           id="agresseur_relation_{{ $rv->id }}"
           value="{{ $rv->id }}"
           {{ (string) $selected_relation_victime === (string) $rv->id ? 'checked' : '' }}>
    <label class="form-check-label" for="agresseur_relation_{{ $rv->id }}">
      {{ $rv->relation_ar ?? $rv->relation_fr }}
    </label>
  </div>
@endforeach
    </div>
    @error('agresseur_id_relation_victime') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
  </div>

  <!-- Relation of intimate partner (shown also if partner) -->
  <div class="col-12 col-md-6">
    <label class="form-label fw-semibold">علاقة الشريك الحميمي بالضحية</label>
@php
  $selected_relation_part_intime = old('agresseur_id_relation_part_intime', optional($agresseur ?? null)->id_relation_part_intime);
@endphp

<select name="agresseur_id_relation_part_intime" class="form-select">
  <option value="">-- اختر --</option>
  @foreach($relationsPartIntime as $pi)
    <option value="{{ $pi->id }}" {{ (string) $selected_relation_part_intime === (string) $pi->id ? 'selected' : '' }}>
      {{ $pi->relation_int_ar ?? $pi->relation_int_fr }}
    </option>
  @endforeach
</select>
    @error('agresseur_id_relation_part_intime') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
  </div>

  <!-- Age group -->
  <div class="col-12 col-md-6">
    <label class="form-label fw-semibold">السن</label>
 @php $sel_age = old('agresseur_id_age', optional($agresseur)->id_age); @endphp
<select name="agresseur_id_age" class="form-select">
  <option value="">-- اختر الفئة العمرية --</option>
  @foreach($ages as $a)
    <option value="{{ $a->id }}" {{ (string)$sel_age === (string)$a->id ? 'selected' : '' }}>
      {{ $a->age_ar ?? $a->age_fr }}
    </option>
  @endforeach
</select>

    @error('agresseur_id_age') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
  </div>

  <!-- Niveau éducatif -->
  <div class="col-12 col-md-6">
    <label class="form-label fw-semibold">المستوى التعليمي</label>
@php $sel_niv = old('agresseur_id_niveau_edu', optional($agresseur)->id_niveau_edu); @endphp
<select name="agresseur_id_niveau_edu" class="form-select">
  <option value="">-- اختر --</option>
  @foreach($niveauxEdu as $n)
    <option value="{{ $n->id }}" {{ (string)$sel_niv === (string)$n->id ? 'selected' : '' }}>
      {{ $n->niveau_ar ?? $n->niveau_fr }}
    </option>
  @endforeach
</select>

    @error('agresseur_id_niveau_edu') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
  </div>

  <!-- Situation professionnelle -->
  <div class="col-12 col-md-6">
    <label class="form-label fw-semibold">الوضعية المهنية</label>
@php $sel_sit_pro = old('agresseur_id_sit_pro', optional($agresseur)->id_sit_pro); @endphp
<select name="agresseur_id_sit_pro" class="form-select">
  <option value="">-- اختر --</option>
  @foreach($sitProList as $sp)
    <option value="{{ $sp->id }}" {{ (string)$sel_sit_pro === (string)$sp->id ? 'selected' : '' }}>
      {{ $sp->sit_pro_ar ?? $sp->sit_pro_fr }}
    </option>
  @endforeach
</select>

    @error('agresseur_id_sit_pro') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
  </div>

  <!-- Si non direct au travail -->
  <div class="col-12 col-md-6">
    <label class="form-label fw-semibold">غير مباشر للعمل</label>
@php $sel_inactif = old('agresseur_id_sit_pro_inactif', optional($agresseur)->id_sit_pro_inactif); @endphp
<select name="agresseur_id_sit_pro_inactif" class="form-select">
  <option value="">-- اختر --</option>
  @foreach($sitProInactif as $spi)
    <option value="{{ $spi->id }}" {{ (string)$sel_inactif === (string)$spi->id ? 'selected' : '' }}>
      {{ $spi->raison_inactif_ar ?? $spi->raison_inactif_fr }}
    </option>
  @endforeach
</select>

    @error('agresseur_id_sit_pro_inactif') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
  </div>

  <!-- Domaine / profession when direct -->
  <div class="col-12 col-md-6">
    <label class="form-label fw-semibold">المهنة في حالة مباشرة</label>
@php $sel_domaine = old('agresseur_id_domaine_pro', optional($agresseur)->id_domaine_pro); @endphp
<select name="agresseur_id_domaine_pro" class="form-select">
  <option value="">-- اختر --</option>
  @foreach($domaineProList as $dp)
    <option value="{{ $dp->id }}" {{ (string)$sel_domaine === (string)$dp->id ? 'selected' : '' }}>
      {{ $dp->domaine_ar ?? $dp->domaine_fr }}
    </option>
  @endforeach
</select>

    @error('agresseur_id_domaine_pro') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
  </div>

</div> <!-- /.row -->
 
            </div>
          </div>
        </div>
 
<!-- Section: تقييم المخاطر -->
<!-- Risk evaluation dropdowns (copy this whole block) -->
<br>
<div class="accordion-item">
            <div class="section-title">    
    <h4 class="accordion-header" id="heading-timing">تقييم المخاطر</h4>
      </div>

  <div>
<br>

  @php
    $oldRv = old('risques_victime', []);
    $oldRa = old('risques_agresseur', []);
    $oldRvv = old('risques_violence', []);
  @endphp

  <!-- Layout: two dropdowns per line -->
  <div class="row g-3">
    <div class="col-md-6">
        @php
  // الحصول على الـ violence من الـ controller (يفضل أن يكون موجوداً في view)
  // نريد ثلاث مصفوفات تمثل القيم المحددة: old => fallback to DB => empty array
  $dbRv = isset($violence) && $violence && $violence->risquesVictime
            ? $violence->risquesVictime->pluck('id')->map(fn($i) => (string)$i)->toArray()
            : [];

  $dbRa = isset($violence) && $violence && $violence->risquesAgresseur
            ? $violence->risquesAgresseur->pluck('id')->map(fn($i) => (string)$i)->toArray()
            : [];

  $dbRvv = isset($violence) && $violence && $violence->risquesViolence
            ? $violence->risquesViolence->pluck('id')->map(fn($i) => (string)$i)->toArray()
            : [];

  // old(...) قد يرجع null أو مصفوفة أرقام/سلاسل -- نطبعها كمصفوفة سلاسل لسهولة المقارنة
  $oldRvRaw = old('risques_victime', $dbRv);
  $oldRaRaw = old('risques_agresseur', $dbRa);
  $oldRvvRaw = old('risques_violence', $dbRvv);

  // normalize to array of strings
  $oldRv = is_array($oldRvRaw) ? array_map('strval', $oldRvRaw) : [];
  $oldRa = is_array($oldRaRaw) ? array_map('strval', $oldRaRaw) : [];
  $oldRvv = is_array($oldRvvRaw) ? array_map('strval', $oldRvvRaw) : [];
@endphp

      <label class="form-label fw-semibold">مؤشرات الخطورة حسب نوعية الهشاشة الضحية</label>
      <div class="dropdown dropdown-checkbox-menu" data-bs-auto-close="outside">
        <button class="btn btn-outline-secondary dropdown-toggle risk-btn" type="button"
                id="btn-risques-victime" data-bs-toggle="dropdown" aria-expanded="false"   data-bs-offset="0,0"  >
          اختر مؤشرات...
          {{-- <span class="badge bg-secondary count-badge" id="count-risques-victime">0</span> --}}
        </button>
        <div class="dropdown-menu" aria-labelledby="btn-risques-victime" id="menu-risques-victime">
          @php
  $dbRv = isset($violence) && $violence && $violence->risquesVictime
            ? $violence->risquesVictime->pluck('id')->map(fn($i) => (string)$i)->toArray()
            : [];
  $oldRvRaw = old('risques_victime', $dbRv);
  $oldRv = is_array($oldRvRaw) ? array_map('strval', $oldRvRaw) : [];
@endphp

<div class="menu-list">
  @foreach($risquesVictime as $rv)
    <div class="form-check">
      <input class="form-check-input rv-checkbox" type="checkbox" name="risques_victime[]" id="rv-{{ $rv->id }}"
             value="{{ $rv->id }}" data-autre="{{ !empty($rv->is_autre) ? 1 : 0 }}"
             {{ in_array((string)$rv->id, $oldRv) ? 'checked' : '' }}>
      <label class="form-check-label" for="rv-{{ $rv->id }}">{{ $rv->risque_ar ?? $rv->risque_fr }}</label>
    </div>
  @endforeach
</div>
          <div class="dropdown-divider"></div>
       
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <label class="form-label fw-semibold">مؤشرات الخطورة حسب القائم بالعنف</label>
      <div class="dropdown dropdown-checkbox-menu" data-bs-auto-close="outside">
        <button class="btn btn-outline-secondary dropdown-toggle risk-btn" type="button"   data-bs-offset="0,0"  
                id="btn-risques-agresseur" data-bs-toggle="dropdown" aria-expanded="false">
          اختر مؤشرات...
          {{-- <span class="badge bg-secondary count-badge" id="count-risques-agresseur">0</span> --}}
        </button>
        <div class="dropdown-menu p-2" aria-labelledby="btn-risques-agresseur" id="menu-risques-agresseur">
          <div class="menu-list">
            @foreach($risquesAgresseur as $ra)
              <div class="form-check">
                <input class="form-check-input ra-checkbox" type="checkbox" name="risques_agresseur[]" id="ra-{{ $ra->id }}"
                       value="{{ $ra->id }}" data-autre="{{ !empty($ra->is_autre) ? 1 : 0 }}"
                       {{ in_array((string)$ra->id, $oldRa) ? 'checked' : '' }}>
                <label class="form-check-label" for="ra-{{ $ra->id }}">{{ $ra->risque_ar ?? $ra->risque_fr }}</label>
              </div>
            @endforeach
          </div>
          <div class="dropdown-divider"></div>
      
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <label class="form-label fw-semibold">مؤشرات الخطورة حسب خصوصية حالة العنف</label>
      <div class="dropdown dropdown-checkbox-menu" data-bs-auto-close="outside">
        <button class="btn btn-outline-secondary dropdown-toggle risk-btn" type="button"   data-bs-offset="0,0"  
                id="btn-risques-violence" data-bs-toggle="dropdown" aria-expanded="false">
          اختر مؤشرات...
          {{-- <span class="badge bg-secondary count-badge" id="count-risques-violence">0</span> --}}
        </button>
        <div class="dropdown-menu p-2" aria-labelledby="btn-risques-violence" id="menu-risques-violence">
          <div class="menu-list">
            @foreach($risquesViolence as $rvv)
              <div class="form-check">
                <input class="form-check-input rvv-checkbox" type="checkbox" name="risques_violence[]" id="rvv-{{ $rvv->id }}"
                       value="{{ $rvv->id }}" data-autre="{{ !empty($rvv->is_autre) ? 1 : 0 }}"
                       {{ in_array((string)$rvv->id, $oldRvv) ? 'checked' : '' }}>
                <label class="form-check-label" for="rvv-{{ $rvv->id }}">{{ $rvv->risque_viol_ar ?? $rvv->risque_viol_fr }}</label>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  </div>
</div>

<!-- JS: update badges & show/hide 'autre' inputs -->



<!-- Section: مسار التعهد -->
@php
  // $signalement, $parcours, $parcoursDestIds يجب أن يمرّرهما controller
  // Fallbacks: old() (بعد فشل التحقق) ثم DB value ثم افتراضي
  $parcoursObj = $parcours ?? null;

  // selected destinations (array of ids as strings)
  $selectedParcoursDest = old('parcours_destinations', $parcoursDestIds ?? []);
  if (!is_array($selectedParcoursDest)) {
    $selectedParcoursDest = $selectedParcoursDest ? (array)$selectedParcoursDest : [];
  }
  $selectedParcoursDest = array_map('strval', $selectedParcoursDest);

  // individual fields fallback
  $selDecisionPoursuite = (string) (old('id_decision_poursuite_anterieur', $parcoursObj->id_decision_poursuite_anterieur ?? '') ?? '');
  $selRequisitionMed = (string) (old('requisition_medicale', isset($parcoursObj->requisition_medicale) ? ($parcoursObj->requisition_medicale ? '1' : '0') : '') ?? '');
  $selTypeRequisition = (string) (old('id_type_requisition', $parcoursObj->id_type_requisition ?? '') ?? '');
  $selEngagementSanitaire = (string) (old('engagement_sanitaire', isset($parcoursObj->engagement_sanitaire) ? ($parcoursObj->engagement_sanitaire ? '1' : '0') : '') ?? '');
  $selTypeServiceSante = (string) (old('id_type_service_sante', $parcoursObj->id_type_service_sante ?? '') ?? '');
  $selCert48 = (string) (old('cert_med_48h', isset($parcoursObj->cert_med_48h) ? ($parcoursObj->cert_med_48h ? '1' : '0') : '') ?? '');
  $selCertFree = (string) (old('cert_med_gratuite', isset($parcoursObj->cert_med_gratuite) ? ($parcoursObj->cert_med_gratuite ? '1' : '0') : '') ?? '');
  $selCertReq = (string) (old('cert_med_par_requisition', isset($parcoursObj->cert_med_par_requisition) ? ($parcoursObj->cert_med_par_requisition ? '1' : '0') : '') ?? '');
  $selEngagementJud = (string) (old('engagement_judiciaire', isset($parcoursObj->engagement_judiciaire) ? ($parcoursObj->engagement_judiciaire ? '1' : '0') : '') ?? '');
  $selTypeServiceJud = (string) (old('id_type_service_judiciare', $parcoursObj->id_type_service_judiciare ?? '') ?? '');
  $selConseilJuridique = (string) (old('conseil_juridique', $signalement->conseil_juridique ?? '') ?? '');
  $selServicesOrientation = (string) (old('services_orientation', $signalement->services_orientation ?? '') ?? '');
  $selInstitutionOrientation = (string) (old('id_institution_orientation', $signalement->id_institution_orientation ?? '') ?? '');
  // remarks: prefer old(), then signalement->remarques, then parcours autres_services_sante
  $remarquesParcoursValue = old('remarques_parcours', $signalement->remarques ?? $parcoursObj->autres_services_sante ?? '');
 $requisition = (string) old('requisition_medicale', isset($parcours) ? (string)$parcours->requisition_medicale : '');
  $id_type_requisition_old = (string) old('id_type_requisition', isset($parcours) ? (string)($parcours->id_type_requisition ?? '') : '');
  $eng_san = (string) old('engagement_sanitaire', isset($parcours) ? (string)($parcours->engagement_sanitaire ?? '') : '');
  $cert48 = (string) old('cert_med_48h', isset($parcours) ? (string)($parcours->cert_med_48h ?? '') : '');
  $certFree = (string) old('cert_med_gratuite', isset($parcours) ? (string)($parcours->cert_med_gratuite ?? '') : '');
  $certReq = (string) old('cert_med_par_requisition', isset($parcours) ? (string)($parcours->cert_med_par_requisition ?? '') : '');
  $autres_services = (string) old('autres_services_sante', isset($parcours) ? (string)($parcours->autres_services_sante ?? '') : '');
  $id_type_service_sante_old = (string) old('id_type_service_sante', isset($parcours) ? (string)($parcours->id_type_service_sante ?? '') : '');
  $eng_jud = (string) old('engagement_judiciaire', isset($parcours) ? (string)($parcours->engagement_judiciaire ?? '') : '');
  $id_type_service_judiciare_old = (string) old('id_type_service_judiciare', isset($parcours) ? (string)($parcours->id_type_service_judiciare ?? '') : '');

@endphp
 <br>
<!-- Section: مسار التعهد -->
<div class="accordion-item">
                <div class="section-title">    
    <h4 class="accordion-header" id="heading-timing">مسار التعهد</h4>
    </div>
  <div>
    <div class="accordion-body">

      <div class="row g-3">

        <!-- 1) مؤسسات التوجيه (multiple checkbox dropdown) -->
        <div class="col-md-6">
          <label class="form-label fw-semibold">المؤسسة التي تم توجيه الضحية والأطفال المرافقون إليها</label>
          <div class="dropdown dropdown-checkbox-menu" data-bs-auto-close="outside">
            <button class="btn btn-outline-secondary dropdown-toggle risk-btn" type="button"
                    id="btn-parcours-dest" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,0">
              اختر مؤسسات...
            </button>
            <div class="dropdown-menu p-2" aria-labelledby="btn-parcours-dest" id="menu-parcours-dest">
              <div class="menu-list">
                @foreach($parcoursDestinations as $pd)
                  @php $isChecked = in_array((string)$pd->id, $selectedParcoursDest); @endphp
                  <div class="form-check">
                    <input class="form-check-input pd-checkbox" type="checkbox" name="parcours_destinations[]" id="pd-{{ $pd->id }}"
                           value="{{ $pd->id }}" {{ $isChecked ? 'checked' : '' }}>
                    <label class="form-check-label" for="pd-{{ $pd->id }}">{{ $pd->destination_ar ?? $pd->destination_fr }}</label>
                  </div>
                @endforeach
              </div>
            </div>
          </div>
          <small class="text-muted d-block mt-1">اختر واحدًا أو عدة مؤسسات — سيتم حفظها كمصفوفة.</small>
        </div>

        <!-- 2) موقف الضحية من التتبع (single select) -->
        <div class="col-md-6">
          <label class="form-label fw-semibold">موقف الضحية من التتبع</label>
          <select name="id_decision_poursuite_anterieur" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($decisionsPoursuite as $d)
              <option value="{{ $d->id }}" {{ $selDecisionPoursuite === (string)$d->id ? 'selected' : '' }}>
                {{ $d->decision_ar ?? $d->decision_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- 3) تسخير طبي (radio) و نوع التسخير (select) -->
<div class="row g-3">

  <!-- 1) تسخير طبي و التعهد الصحي (même ligne) -->
  <div class="col-md-6">
    <label class="form-label fw-semibold">تحصلت على تسخير طبي</label>
    <div class="d-flex gap-3 align-items-center mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="requisition_medicale" id="req_yes" value="1" {{ $requisition === '1' ? 'checked' : '' }}>
        <label class="form-check-label" for="req_yes">نعم</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="requisition_medicale" id="req_no" value="0" {{ $requisition === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="req_no">لا</label>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <label class="form-label small">في إطار التسخير — اختر النوع (إن وُجد)</label>
    <select id="id_type_requisition"
            name="id_type_requisition"
            class="form-select"
            {{ old('requisition_medicale', $parcours->requisition_medicale ?? '') === '1' ? '' : 'disabled' }}>
      <option value="">-- اختر --</option>
      @foreach($typeRequisitions as $tr)
        <option value="{{ $tr->id }}"
          {{ (string) old('id_type_requisition', $parcours->id_type_requisition ?? '') === (string) $tr->id ? 'selected' : '' }}>
          {{ $tr->requisition_ar ?? $tr->requisition_fr }}
        </option>
      @endforeach
    </select>
  </div>

  <div class="col-md-6">
    <label class="form-label fw-semibold">التعهد الصحي</label>
    <div class="d-flex gap-3 align-items-center mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="engagement_sanitaire" id="eng_san_yes" value="1" {{ $eng_san === '1' ? 'checked' : '' }}>
        <label class="form-check-label" for="eng_san_yes">نعم</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="engagement_sanitaire" id="eng_san_no" value="0" {{ $eng_san === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="eng_san_no">لا</label>
      </div>
    </div>
  </div>
  <!-- 2) شهادات طبية (deux par ligne) -->
 <div class="col-md-6">
    <label class="form-label fw-semibold">تحصلت على شهادة طبية أولية في ظرف 48 ساعة</label>
    <div class="d-flex gap-3 align-items-center mt-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="cert_med_48h" id="cert48_yes" value="1" {{ $cert48 === '1' ? 'checked' : '' }}>
        <label class="form-check-label" for="cert48_yes">نعم</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="cert_med_48h" id="cert48_no" value="0" {{ $cert48 === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="cert48_no">لا</label>
      </div>
    </div>
  </div>

  <!-- Cert gratuite -->
  <div class="col-md-6">
    <label class="form-label fw-semibold">الشهادة الطبية الأولية مجانية</label>
    <div class="d-flex gap-3 align-items-center mt-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="cert_med_gratuite" id="certFree_yes" value="1" {{ $certFree === '1' ? 'checked' : '' }}>
        <label class="form-check-label" for="certFree_yes">نعم</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="cert_med_gratuite" id="certFree_no" value="0" {{ $certFree === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="certFree_no">لا</label>
      </div>
    </div>
  </div>

  <!-- Cert par requisition -->
  <div class="col-md-6">
    <label class="form-label fw-semibold">تحصلت على شهادة طبية أولية في إطار تسخير</label>
    <div class="d-flex gap-3 align-items-center mt-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="cert_med_par_requisition" id="certReq_yes" value="1" {{ $certReq === '1' ? 'checked' : '' }}>
        <label class="form-check-label" for="certReq_yes">نعم</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="cert_med_par_requisition" id="certReq_no" value="0" {{ $certReq === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="certReq_no">لا</label>
      </div>
    </div>
  </div>

  <!-- Autres services sante -->
  <div class="col-md-6">
    <label class="form-label fw-semibold">تمتعت بخدمات صحية أخرى</label>
    <div class="d-flex gap-3 align-items-center mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="autres_services_sante" id="benefited_yes" value="1" {{ $autres_services === '1' ? 'checked' : '' }}>
        <label class="form-check-label" for="benefited_yes">نعم</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="autres_services_sante" id="benefited_no" value="0" {{ $autres_services === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="benefited_no">لا</label>
      </div>
    </div>
  </div>




  <div class="col-md-6">
    <label class="form-label small">خدمات صحية أخرى (إن أردت اختيار نوع ثابت من القاعدة)</label>
    <select id="id_type_service_sante"
            name="id_type_service_sante"
            class="form-select"
            {{ old('autres_services_sante', $parcours->autres_services_sante ?? '') === '1' ? '' : 'disabled' }}>
      <option value="">-- اختر --</option>
      @foreach($typeServicesSante as $ts)
        <option value="{{ $ts->id }}"
          {{ (string) old('id_type_service_sante', $parcours->id_type_service_sante ?? '') === (string) $ts->id ? 'selected' : '' }}>
          {{ $ts->service_ar ?? $ts->service_fr }}
        </option>
      @endforeach
    </select>
  </div>

  <!-- 4) التعهد القضائي و نوع الخدمات القضائية (même ligne si besoin) -->
  <div class="col-md-6">
    <label class="form-label fw-semibold">التعهد القضائي</label>
    <div class="d-flex gap-3 align-items-center mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="engagement_judiciaire" id="eng_jud_yes" value="1" {{ $eng_jud === '1' ? 'checked' : '' }}>
        <label class="form-check-label" for="eng_jud_yes">نعم</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="engagement_judiciaire" id="eng_jud_no" value="0" {{ $eng_jud === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="eng_jud_no">لا</label>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <label class="form-label small">خدمات إرشاد/قضائية (إن وُجدت) — اختر نوع الخدمة</label>
    <select id="id_type_service_judiciare"
            name="id_type_service_judiciare"
            class="form-select"
            {{ old('engagement_judiciaire', $parcours->engagement_judiciaire ?? '') === '1' ? '' : 'disabled' }}>
      <option value="">-- اختر --</option>
      @foreach($typeServicesJudiciare as $tj)
        <option value="{{ $tj->id }}"
          {{ (string) old('id_type_service_judiciare', $parcours->id_type_service_judiciare ?? '') === (string) $tj->id ? 'selected' : '' }}>
          {{ $tj->service_ar ?? $tj->service_fr }}
        </option>
      @endforeach
    </select>
  </div>

</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const toggleSelect = (radioName, selectId) => {
      const radios = Array.from(document.getElementsByName(radioName));
      const sel = document.getElementById(selectId);
      if (!sel || radios.length === 0) return;
      const update = () => {
        const yes = radios.find(r => r.checked && r.value === '1');
        sel.disabled = !Boolean(yes);
      };
      radios.forEach(r => r.addEventListener('change', update));
      update();
    };

    toggleSelect('requisition_medicale', 'id_type_requisition');
    toggleSelect('autres_services_sante', 'id_type_service_sante');
    toggleSelect('engagement_judiciaire', 'id_type_service_judiciare');
  });
</script>


        <h4>• خدمات الإرشاد والتوجيه الخاصة بالخط الأخضر 1899</h4>

        <div class="col-md-6">
          <label class="form-label fw-semibold">خدمات الإرشاد القانوني</label>
          <div class="d-flex gap-3 align-items-center mb-2">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="conseil_juridique" id="conseil_yes" value="1" {{ $selConseilJuridique === '1' ? 'checked' : '' }}>
              <label class="form-check-label" for="conseil_yes">نعم</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="conseil_juridique" id="conseil_no" value="0" {{ $selConseilJuridique === '0' ? 'checked' : '' }}>
              <label class="form-check-label" for="conseil_no">لا</label>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <label class="form-label fw-semibold">خدمات التوجيه</label>
          <div class="d-flex gap-3 align-items-center mb-2">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="services_orientation" id="serv_or_yes" value="1" {{ $selServicesOrientation === '1' ? 'checked' : '' }}>
              <label class="form-check-label" for="serv_or_yes">نعم</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="services_orientation" id="serv_or_no" value="0" {{ $selServicesOrientation === '0' ? 'checked' : '' }}>
              <label class="form-check-label" for="serv_or_no">لا</label>
            </div>
          </div>
        </div>

        <!-- 7) الجهة التي تم توجيه الضحية -->
        <div class="col-md-6">
          <label class="form-label fw-semibold">الجهة التي تم توجيه الضحية والأطفال المرافقون إليها (إن وُجد)</label>
          <select name="id_institution_orientation" class="form-select">
            <option value="">-- اختر --</option>
            @foreach($institutionsOrient as $ins)
              <option value="{{ $ins->id }}" {{ $selInstitutionOrientation === (string)$ins->id ? 'selected' : '' }}>
                {{ $ins->institut_ar ?? $ins->institut_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- 8) ملاحظات المكلفة بالإنصات -->
        <div class="col-12">
          <label class="form-label fw-semibold">ملاحظات المكلفة بالإنصات حول حالة العنف</label>
          <textarea name="remarques_parcours" class="form-control" rows="4">{{ $remarquesParcoursValue }}</textarea>
        </div>

      </div> <!-- /.row -->

    </div>
  </div>
</div>

{{-- Small script to update dropdown button label with selection count / labels --}}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    function updateParcoursBtnLabel() {
      const btn = document.getElementById('btn-parcours-dest');
      const checks = Array.from(document.querySelectorAll('#menu-parcours-dest .pd-checkbox'));
      const selected = checks.filter(c => c.checked);
      if (!btn) return;
      if (selected.length === 0) {
        btn.textContent = 'اختر مؤسسات...';
      } else if (selected.length <= 3) {
        btn.textContent = selected.map(c => c.nextElementSibling?.textContent?.trim() || c.value).join(' • ');
      } else {
        btn.textContent = `${selected.length} مؤسسات مختارة`;
      }
    }

    // initial
    updateParcoursBtnLabel();

    // listen for changes
    document.querySelectorAll('#menu-parcours-dest .pd-checkbox').forEach(cb => {
      cb.addEventListener('change', updateParcoursBtnLabel);
    });
  });
</script>


<!-- Section: المتابعة الميدانية -->
<div class="accordion-item">
  <div class="section-title">
    <h4 class="accordion-header" id="heading-followup">المتابعة الميدانية</h4>
  </div>
  <div>
    <div class="accordion-body">
      <div class="row g-3">

<!-- الحالة النفسية -->
<div class="col-md-6">
  <label class="form-label fw-semibold">الحالة النفسية للضحية</label>
  <select name="id_etat_psycho" class="form-select">
    <option value="">-- اختر --</option>
    @foreach($etatPsycho as $ep)
      <option value="{{ $ep->id }}"
        {{ old('id_etat_psycho', optional($victime)->id_sit_psycho ?? '') == $ep->id ? 'selected' : '' }}>
        {{ $ep->etat_psycho_ar }}
      </option>
    @endforeach
  </select>
</div>

<!-- التدخل الفوري للخط الأخضر -->
<div class="col-md-6">
  <label class="form-label fw-semibold">التدخل الفوري للخط الأخضر</label>
  <select name="id_interv_immediat" class="form-select">
    <option value="">-- اختر --</option>
    @foreach($interventions as $iv)
      <option value="{{ $iv->id }}"
        {{ old('id_interv_immediat', optional($signalement)->id_interv_immediat ?? '') == $iv->id ? 'selected' : '' }}>
        {{ $iv->interv_ar }}
      </option>
    @endforeach
  </select>
</div>

<!-- متابعة التعهد الميداني -->
<div class="col-md-6">
  <label class="form-label fw-semibold">متابعة التعهد الميداني</label>
  <select name="id_suivi_terrain" class="form-select">
    <option value="">-- اختر --</option>
    @foreach($suivis as $s)
      <option value="{{ $s->id }}"
        {{ old('id_suivi_terrain', optional($victime)->id_suivi_terrain ?? '') == $s->id ? 'selected' : '' }}>
        {{ $s->suivi_ar }}
      </option>
    @endforeach
  </select>
</div>

      

      </div>
    </div>
  </div>
</div>


      </div><!-- /.accordion -->
      <!-- Bottom card: switch + submit + back -->
<!-- Bottom card: switch + submit + back -->
<!-- Bottom card: switch + submit + back -->
<div class="card mt-3">
  <div class="card-body">

    <!-- Row 1: the switch (full width row) -->
<div class="mb-3 d-flex align-items-center">
  <!-- ensure a value is always posted: 0 when unchecked -->
  <input type="hidden" name="suivi_terrain" value="0">

  <div class="form-check form-switch">
    <input
      class="form-check-input"
      type="checkbox"
      id="suiviSwitch"
      name="suivi_terrain"
      value="1"
      {{-- use the correct key: 'suivi_terrain' (not id_suivi_terrain) --}}
      {{ (string) old('suivi_terrain', optional($victime)->suivi_terrain) === '1' ? 'checked' : '' }}>
    <label class="form-check-label ms-2" for="suiviSwitch">يتطلب متابعة ميدانية</label>
  </div>
</div>


    <!-- Row 2: buttons (stacked or inline depending on screen) -->
    <div class="d-flex flex-column flex-sm-row align-items-stretch gap-2">
      <button type="submit"  class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement" value="final" id="btnSaveForm" aria-label="حفظ الاستمارة">
        <i class="bx bx-save me-1"></i> حفظ
      </button>
  <button type="submit" name="save_type" value="draft" class="btn-download btn btn-sm d-flex align-items-center" id="btnSaveDraft" aria-label="حفظ كمسودة">
    <i class="bx bx-file me-1"></i> حفظ كمسودة
  </button>
  <button type="button"
        class="btn-download-signalement btn btn-sm d-flex align-items-center"
        aria-label="رجوع"
        id="btnBack">
  <i class="bx bx-arrow-back me-1"></i> رجوع
</button>
      {{-- <a href="javascript:history.back()" class="btn btn-outline-dark btn-sm" aria-label="رجوع">
        <i class="bx bx-arrow-back me-1"></i> رجوع
      </a> --}}
    </div>

  </div>
</div>



    </div><!-- /.card-body -->
</form>
  </div><!-- /.card -->

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const btn = document.getElementById('btnBack');
  if (!btn) return;

  btn.addEventListener('click', function (e) {
    // if there's a real history entry, go back, otherwise fallback to route
    if (window.history.length > 1) {
      window.history.back();
    } else {
      // fallback to your index route if no history
      window.location.href = "{{ route('form.index') }}";
    }
  });
});
</script>
@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  function initDropdownSet(prefix, checkboxSelector, countId, autreInputId) {
    const checkboxes = Array.from(document.querySelectorAll(checkboxSelector));
    const countEl = document.getElementById(countId);
    const autreInput = document.getElementById(autreInputId);



    // show/hide "autre" input when any data-autre checkbox is checked
    function updateAutreVisibility() {
      if (!autreInput) return;
      const anyAutre = checkboxes.some(cb => cb.dataset.autre === '1' && cb.checked);
      autreInput.closest('.px-2').style.display = anyAutre ? 'block' : 'none';
    }

    // set listeners
    checkboxes.forEach(cb => {
      cb.addEventListener('change', function () {
        // updateCount();
        updateAutreVisibility();
      });
    });

    // initial run (useful after validation repop)
    // updateCount();
    updateAutreVisibility();
  }

  // initialize three groups
  initDropdownSet('risques-victime', '.rv-checkbox', 'count-risques-victime', 'rv-autre-input');
  initDropdownSet('risques-agresseur', '.ra-checkbox', 'count-risques-agresseur', 'ra-autre-input');
  initDropdownSet('risques-violence', '.rvv-checkbox', 'count-risques-violence', 'rvv-autre-input');

  // Accessibility: close dropdown on Escape
  document.querySelectorAll('.dropdown-checkbox-menu .dropdown-menu').forEach(menu => {
    menu.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        const bs = bootstrap.Dropdown.getOrCreateInstance(menu.previousElementSibling);
        bs.hide();
      }
    });
  });

  // If you want the dropdown to close when clicking "outside", the data-bs-auto-close="outside" already does that.
});
</script>
@endpush
<!-- Small JS to ensure toggle behavior is reliable (no double-handling) -->
{{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> --}}
<script>
  (function () {
    const buttons = document.querySelectorAll('.accordion-button');

    buttons.forEach(btn => {
      btn.addEventListener('click', function (e) {
        // get target selector from data-bs-target attribute (we use that in markup)
        const target = btn.getAttribute('data-bs-target');
        if (!target) return;

        e.preventDefault();
        e.stopImmediatePropagation();

        const panel = document.querySelector(target);
        if (!panel) return;

        // Get existing instance or create a non-toggling instance
        let instance = bootstrap.Collapse.getInstance(panel);
        if (!instance) instance = new bootstrap.Collapse(panel, { toggle: false });

        // toggle manually
        instance.toggle();

        // Update aria-expanded and collapsed class shortly after the toggle (allow Bootstrap to add/remove show)
        setTimeout(() => {
          const isShown = panel.classList.contains('show');
          btn.classList.toggle('collapsed', !isShown);
          btn.setAttribute('aria-expanded', isShown ? 'true' : 'false');
        }, 10);
      });
    });

    // Optional: ensure only one panel open at a time (accordion behavior)
    document.querySelectorAll('.accordion-collapse').forEach(c => {
      c.addEventListener('show.bs.collapse', (ev) => {
        const parent = c.closest('.accordion');
        if (!parent) return;
        // close other open panels within same accordion
        parent.querySelectorAll('.accordion-collapse.show').forEach(open => {
          if (open !== c) {
            const inst = bootstrap.Collapse.getInstance(open) || new bootstrap.Collapse(open, { toggle:false });
            inst.hide();
          }
        });
      });
    });
  })();
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const radios = document.querySelectorAll('input[name="id_sujet_appel"]');
  const autreSection = document.getElementById('autre-section');
  const sourceRapporteurSection = document.getElementById('source-rapporteur-section');

  function toggleSections() {
    const selected = document.querySelector('input[name="id_sujet_appel"]:checked');
    const value = selected ? parseInt(selected.value) : null;

    // Si id = 1 → montrer source + rapporteur
    if (value === 1) {
      sourceRapporteurSection.style.display = 'flex';
      autreSection.style.display = 'none';
    }
    // Si id = 2 → montrer id_autre
    else if (value === 2) {
      autreSection.style.display = 'block';
      sourceRapporteurSection.style.display = 'none';
    }
    // Sinon, cacher les deux
    else {
      autreSection.style.display = 'none';
      sourceRapporteurSection.style.display = 'none';
    }
  }

  // Écoute du changement
  radios.forEach(r => r.addEventListener('change', toggleSections));

  // Exécuter au chargement (pour edit form)
  toggleSections();
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const childrenToggle = document.getElementById('children-toggle-table');
  const childrenWrapper = document.getElementById('children-table-wrapper');
  const childrenTableBody = document.querySelector('#children-table tbody');
  const childrenCountInput = document.getElementById('children_count');

  if (!childrenTableBody || !childrenCountInput) return; // defensive

  // build options
  function buildOptionsFromArr(arr, valueKey='id', labelKey='age_ar') {
    return (arr || []).map(item => `<option value="${item[valueKey]}">${item[labelKey] ?? item['niveau_ar'] ?? item['age_ar'] ?? ''}</option>`).join('');
  }
  const agesOptions = buildOptionsFromArr(window.__agesEnf || [], 'id', 'age_ar');
  const nivOptions = buildOptionsFromArr(window.__niveauxEduEnf || [], 'id', 'niveau_ar');

  function buildChildrenRows(n, initialData = null) {
    childrenTableBody.innerHTML = '';
    for (let i = 0; i < n; i++) {
      const data = (initialData && initialData[i]) ? initialData[i] : {};
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${i + 1}</td>
        <td>
          <select class="form-select form-select-sm" name="children[${i}][gender]">
            <option value="">--</option>
            <option value="female" ${data.gender === 'female' ? 'selected' : ''}>أنثى</option>
            <option value="male" ${data.gender === 'male' ? 'selected' : ''}>ذكر</option>
          </select>
        </td>
        <td>
          <select class="form-select form-select-sm" name="children[${i}][id_age_enf]">
            <option value="">-- اختر فئة العمر --</option>
            ${agesOptions}
          </select>
        </td>
        <td>
          <select class="form-select form-select-sm" name="children[${i}][id_niveau_edu_enf]">
            <option value="">--</option>
            ${nivOptions}
          </select>
        </td>
        <td>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="children[${i}][decroche_scolaire]" value="1" ${data.decroche_scolaire ? 'checked' : ''}>
          </div>
        </td>
        <td>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="children[${i}][porteur_handicap]" value="1" ${data.porteur_handicap ? 'checked' : ''}>
          </div>
        </td>
        <td>
          <input type="text" class="form-control form-control-sm" name="children[${i}][lien_parente]" value="${(data.lien_parente || '')}" placeholder="صلة أو ملاحظة">
        </td>
      `;
      childrenTableBody.appendChild(tr);

      // after row inserted set the selected options for the newly added selects
      if (data.id_age_enf) {
        const selAge = tr.querySelector(`[name="children[${i}][id_age_enf]"]`);
        if (selAge) selAge.value = data.id_age_enf;
      }
      if (data.id_niveau_edu_enf) {
        const selNiv = tr.querySelector(`[name="children[${i}][id_niveau_edu_enf]"]`);
        if (selNiv) selNiv.value = data.id_niveau_edu_enf;
      }
    }
  }

  // initial rendering: if server provided old data, use it
  if (Array.isArray(window.__oldChildren) && window.__oldChildren.length > 0) {
    childrenCountInput.value = window.__oldChildren.length;
    buildChildrenRows(window.__oldChildren.length, window.__oldChildren);
    if (childrenWrapper) childrenWrapper.style.display = 'block';
  } else if (Number.isInteger(window.__initialCount) && window.__initialCount > 0) {
    childrenCountInput.value = window.__initialCount;
    buildChildrenRows(window.__initialCount);
    if (childrenWrapper) childrenWrapper.style.display = 'block';
  }

  // button click toggles or populates
  childrenToggle.addEventListener('click', function () {
    const n = parseInt(childrenCountInput.value, 10) || 0;
    if (n > 0) {
      buildChildrenRows(n, Array.isArray(window.__oldChildren) ? window.__oldChildren : null);
      childrenWrapper.style.display = 'block';
    } else {
      // toggle
      childrenWrapper.style.display = childrenWrapper.style.display === 'none' ? 'block' : 'none';
    }
  });

  childrenCountInput.addEventListener('change', function () {
    const n = parseInt(this.value, 10);
    if (!n || n <= 0) {
      childrenWrapper.style.display = 'none';
      childrenTableBody.innerHTML = '';
    } else {
      buildChildrenRows(n);
      childrenWrapper.style.display = 'block';
    }
  });
});
</script>

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

  const saveBtn = document.getElementById('btnSaveForm') || form.querySelector('button[type="submit"], input[type="submit"]');

  form.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' && e.target && e.target.tagName !== 'TEXTAREA') {
      e.preventDefault();
    }
  });

  form.addEventListener('submit', function (e) {
    // Allow the browser to finish the submit event cycle, then disable the button.
    // This prevents a timing/race issue with some browsers/plugins that read the form right after submit begins.
    if (saveBtn) {
      // defer to next tick
      setTimeout(() => {
        saveBtn.disabled = true;
        saveBtn.classList.add('disabled');
      }, 0);
    }
    // do NOT call e.preventDefault() — we want the normal submit to proceed
  });

  window.addEventListener('pageshow', function () {
    if (saveBtn) {
      saveBtn.disabled = false;
      saveBtn.classList.remove('disabled');
    }
  });
});

</script>
<script>
document.addEventListener('DOMContentLoaded', function () {

  // helper to normalize delegation items (support both shapes)
  function normalizeDelegation(it) {
    return {
      id: it.id ?? it.id_delegation ?? it.idDelegation ?? it.id_deleg,
      nom: it.nom ?? it.nom_ar ?? it.nom_fr ?? it.nom_en
    };
  }

  // fill target select with items; keeps a default placeholder option
  function fillSelect(target, items, selectedId = null) {
    target.innerHTML = '';
    const def = document.createElement('option');
    def.value = '';
    def.textContent = target.getAttribute('data-placeholder') || '-- اختر المعتمدية --';
    target.appendChild(def);

    items.forEach(raw => {
      const it = normalizeDelegation(raw);
      // skip if no id
      if (typeof it.id === 'undefined' || it.id === null) return;
      const opt = document.createElement('option');
      opt.value = it.id;
      opt.textContent = it.nom ?? it.id;
      if (selectedId && String(selectedId) === String(it.id)) opt.selected = true;
      target.appendChild(opt);
    });
  }

  async function loadDelegations(gouverId, target, selectedId = null) {
    if (!gouverId) {
      // nothing selected — keep default placeholder
      fillSelect(target, []);
      return;
    }
    try {
      const url = '{{ url("delegations/by-gouver") }}/' + encodeURIComponent(gouverId);
      const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
      if (!res.ok) throw new Error('HTTP ' + res.status);
      const data = await res.json();

      // if server returned a wrapper object {data: [...]}, unwrap
      const items = Array.isArray(data) ? data : (Array.isArray(data.data) ? data.data : []);

      fillSelect(target, items, selectedId);
    } catch (err) {
      console.error('Cannot load delegations', err);
      // keep existing options if any, otherwise show empty list
      if (!target.options.length || target.options.length <= 1) fillSelect(target, []);
    }
  }

  const gouver = document.getElementById('id_gouver');
  const municip = document.getElementById('id_municipalite');

  if (gouver && municip) {
    gouver.addEventListener('change', function () {
      // when user selects a gouvernorat, load its delegations and clear selection
      loadDelegations(this.value, municip);
    });

    // initial population: only call AJAX if the municip select has no selected value
    const initialGouv = gouver.value || '{{ old("id_gouver", optional($victime ?? null)->id_gouver) ?? "" }}';
    const selectedMunicip = '{{ old("id_municipalite", optional($victime ?? null)->id_municipalite) ?? "" }}';

    // If municip already contains options and one of them is selected server-side,
    // we DON'T overwrite. But if it's only the placeholder or not matching victim,
    // request the delegations for accurate list and set selected.
    const hasSelected = municip.querySelector('option[selected], option:checked') !== null &&
                        municip.value !== '';

    if (initialGouv && !hasSelected) {
      loadDelegations(initialGouv, municip, selectedMunicip);
    } else if (initialGouv && hasSelected) {
      // ensure the correct deleg is selected if server rendered options include it
      if (selectedMunicip) {
        const existing = Array.from(municip.options).find(o => String(o.value) === String(selectedMunicip));
        if (existing) existing.selected = true;
      }
    }
  }

  // (Optional) If you have a second gouver/municip pair for violence, do same there:
  const gouverViol = document.querySelector('select[name="id_gouver_viol"]');
  const municipViol = document.querySelector('select[name="id_municipalite_viol"]');
  if (gouverViol && municipViol) {
    gouverViol.addEventListener('change', function () {
      loadDelegations(this.value, municipViol);
    });

    const initialGouvViol = '{{ old("id_gouver_viol", optional($violence ?? null)->id_gouv_violence ?? optional($victime ?? null)->id_gouver_viol) ?? "" }}';
    const selectedMunicipViol = '{{ old("id_municipalite_viol", optional($violence ?? null)->id_municip_violence ?? optional($victime ?? null)->id_municipalite_viol) ?? "" }}';

    const hasSelectedViol = municipViol.querySelector('option[selected], option:checked') !== null &&
                            municipViol.value !== '';

    if (initialGouvViol && !hasSelectedViol) {
      loadDelegations(initialGouvViol, municipViol, selectedMunicipViol);
    } else if (initialGouvViol && hasSelectedViol) {
      if (selectedMunicipViol) {
        const existing = Array.from(municipViol.options).find(o => String(o.value) === String(selectedMunicipViol));
        if (existing) existing.selected = true;
      }
    }
  }

});
</script>


<style>
/* container */
.dropdown-checkbox-menu { position: relative; display: block; width: 100%; max-width: 100%; }

/* Toggle/button styling (full-width like a select) */
.dropdown-checkbox-menu .risk-btn,
.dropdown-checkbox-menu .dropdown-toggle {
  width: 100%;
  text-align: right; /* RTL */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Make the dropdown menu align to the parent and take its width,
   remove extra gap so it sits flush under the button */
.dropdown-checkbox-menu .dropdown-menu {
  position: absolute !important;
  top: 100% !important; /* sit exactly under the button (no extra gap) */
  right: 0 !important;  /* RTL anchor to right */
  left: 0 !important;    /*stretch to left so menu width == parent width */
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0; /* no margin */
  box-sizing: border-box;
  z-index: 1060;
  border-radius: .25rem;
  padding: .25rem;
}

/* scrolling area inside dropdown */
.dropdown-checkbox-menu .menu-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 0.15rem 0.25rem;
}

/* each row: label on left, checkbox on the right (row-reverse) */
.dropdown-checkbox-menu .dropdown-menu .form-check {
  display: flex;
  flex-direction: row-reverse; /* put input to the right in RTL */
  align-items: center;
  justify-content: flex-start;
  gap: .5rem; /* space between text and checkbox */
  padding: .25rem .5rem;
  margin: 0;
}

/* ensure label wraps and is readable */
.dropdown-checkbox-menu .dropdown-menu .form-check-label {
  margin: 0;
  white-space: normal;
  text-align: right;
  cursor: pointer;
  flex: 1 1 auto;
}

/* make inputs visually aligned & not stretched */
.dropdown-checkbox-menu .dropdown-menu .form-check-input {
  flex: 0 0 auto;
  margin: 0; /* avoid default margins interfering */
  transform: scale(1); /* ensure normal size */
}

/* --- dropdown-checkbox-menu overrides (paste into your page or form.css) --- */
.dropdown-checkbox-menu { position: relative; display: block; width: 100%; max-width: 100%; }

/* Toggle/button: full width and RTL layout */
.dropdown-checkbox-menu .risk-btn,
.dropdown-checkbox-menu .dropdown-toggle {
  width: 100%;
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Force the menu to sit flush under the button (remove Bootstrap gap) */
.dropdown-checkbox-menu .dropdown-menu {
  position: absolute !important;
  top: calc(100% - 1px) !important;    /* -1px removes 1px hairline gap from border */
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;                 /* override bootstrap margin */
  box-sizing: border-box;
  z-index: 1060;
  padding: 0.25rem !important;         /* optional padding inside */
  border-radius: .25rem;
}

/* Scrolling area */
.dropdown-checkbox-menu .menu-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 0.15rem 0.25rem;
}

/* Layout each option as flex row-reverse so checkbox appears at the RIGHT for RTL */
.dropdown-checkbox-menu .dropdown-menu .form-check {
  display: flex !important;
  flex-direction: row-reverse !important; /* checkbox on the right */
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  margin: 0;
}

/* Make label text sit to the left, wrap, and be clickable */
.dropdown-checkbox-menu .dropdown-menu .form-check-label {
  margin: 0;
  white-space: normal;
  text-align: right;
  cursor: pointer;
  flex: 1 1 auto;
}

/* Override bootstrap negative margins / default spacing for inputs */
.dropdown-checkbox-menu .dropdown-menu .form-check-input {
  margin: 0 !important;        /* remove bootstrap negative margin */
  order: 1;                    /* ensure checkbox appears after label visually when row-reverse used */
  flex: 0 0 auto;
}

/* Ensure label follows the checkbox visually (order 2 keeps it readable) */
.dropdown-checkbox-menu .dropdown-menu .form-check-label {
  order: 2;
}

/* small polish: make dividers tighter */
.dropdown-checkbox-menu .dropdown-menu .dropdown-divider {
  margin: .25rem 0;
}
/* ensure wrapper can show absolute menu */
.dropdown-checkbox-menu {
  position: relative;
  overflow: visible; /* let menu overflow parent if necessary */
}

/* make button full-width and RTL-friendly */
.dropdown-checkbox-menu .dropdown-toggle,
.dropdown-checkbox-menu .risk-btn {
  width: 100%;
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* force the menu to sit flush under button and cancel popper transform */
.dropdown-checkbox-menu .dropdown-menu {
  position: absolute !important;
  top: calc(100% - 1px) !important;   /* -1px removes 1px hairline gap */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;                /* remove any bootstrap margin */
  box-sizing: border-box;
  transform: none !important;         /* cancel translate3d from popper */
  will-change: auto !important;       /* avoid popper animation transforms */
  z-index: 1060;
  padding: 0.15rem 0.25rem;           /* internal padding only */
  border-radius: .25rem;
}

/* keep the scroll area inside */
.dropdown-checkbox-menu .menu-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 0.15rem 0;
}

/* make form-check display row-reverse so the checkbox is on the right for RTL */
.dropdown-checkbox-menu .dropdown-menu .form-check {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  margin: 0;
}

/* remove bootstrap negative margin on inputs (this fixes left-shift) */
.dropdown-checkbox-menu .dropdown-menu .form-check-input {
  margin: 0 !important;
  flex: 0 0 auto;
  order: 1;
}

/* label wraps and is clickable */
.dropdown-checkbox-menu .dropdown-menu .form-check-label {
  order: 2;
  flex: 1 1 auto;
  text-align: right;
  white-space: normal;
  cursor: pointer;
}

/* responsive: keep two selects per row on md+ and single column on small screens (you already have that) */
</style>

<style>
/* --- corrected section title styling for RTL (title on the right) --- */
.section-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;    /* in RTL this places items toward the right */
  gap: .75rem;
  padding: .6rem .9rem;
  margin: .15rem 0 .5rem 0;
  border-radius: .55rem;
  /* gradient goes from right -> left: stronger on the right, softer on the left */
  background: linear-gradient(to left, rgba(11,118,255,0.10), rgba(250,250,252,0.02));
  border: 1px solid rgba(11,37,92,0.06);
  box-shadow: 0 6px 18px rgba(11,13,16,0.02);
  direction: rtl; /* ensure RTL flow */
}

/* ensure the title sticks to the start edge (right in RTL) */
.section-title h4.accordion-header {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgb(11,37,92);
  /* text-align: right; */
  /* Push other flex children away so title sits on the right */
  /* margin-inline-start: auto; */
}

/* optional subtitle (kept at left of title) */
.section-title .section-sub {
  font-size: .87rem;
  color: rgba(11,37,92,0.55);
  text-align: left; /* subtitle sits to the left of the title */
}

/* small right-side accent bar (RTL start is right) */
.section-title::before {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #0b76ff, #0b76ff33);
  /* place the accent at the start (right in RTL) */
  margin-inline-start: .75rem;
}

/* responsive */
@media (max-width:575.98px) {
  .section-title { padding:.5rem; }
  .section-title::before { display: none; }
}
</style>


@endsection