@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.store') }}" method="POST" class="needs-validation" novalidate>
  @csrf
  <!-- 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">استمارة الخط الاخضر 1899</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">
      <h2 class="accordion-header" id="heading-timing">
        <button class="accordion-button collapsed" type="button" data-bs-target="#collapse-timing"
                aria-expanded="false" aria-controls="collapse-timing">
          توقيت المكالمة
        </button>
      </h2>

      <div id="collapse-timing" class="accordion-collapse collapse" aria-labelledby="heading-timing"
           data-bs-parent="#sectionsAccordion">
        <div class="accordion-body" 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"
    required
    data-auto="1"  {{-- client script will fill only if empty --}}
    value="{{ old('date_appel',
                optional($signalement ?? null)->date_appel
                  ? \Carbon\Carbon::parse($signalement->date_appel)->format('Y-m-d')
                  : \Carbon\Carbon::now()->format('Y-m-d')
               ) }}">
  @error('date_appel') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
  <div class="form-text">اليوم / الشهر / السنة</div>
</div>

<div class="col-12 col-md-6">
  <label class="form-label fw-semibold">توقيت المكالمة</label>
  <input
  data-force-client="1"
    name="heure_ecoute"
    type="time"
    class="form-control"
    required
    data-auto="1"
    value="{{ old('heure_ecoute',
                optional($signalement ?? null)->heure_ecoute
                  ? \Carbon\Carbon::parse($signalement->heure_ecoute)->format('H:i')
                  : \Carbon\Carbon::now()->format('H:i')
               ) }}">
  @error('heure_ecoute') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
</div>

<!-- توقيت الإنصات: -->
<div class="col-12">
  <label class="form-label fw-semibold mb-2"> توقيت الإنصات:</label>
  <div class="d-flex flex-wrap align-items-center gap-2" id="seances-group">
    @foreach($seances as $s)

      <div class="form-check form-check-inline">
        <input
          class="form-check-input seance-radio"
          required
          type="radio"
          name="id_seance"
          id="seance-{{ $s->id }}"
          value="{{ $s->id }}"
          data-start="{{ $s->heure_debut ?? $s->start_time ?? '' }}"
          data-end="{{ $s->heure_fin   ?? $s->end_time   ?? '' }}"
          {{ 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>

<!-- Section: موضوع المكالمة -->
<div class="accordion-item">
  <h2 class="accordion-header" id="heading-subject">
    <button class="accordion-button collapsed" type="button" data-bs-target="#collapse-subject"
            aria-expanded="false" aria-controls="collapse-subject">
      موضوع المكالمة
    </button>
  </h2>

  <div id="collapse-subject" class="accordion-collapse collapse" aria-labelledby="heading-subject"
       data-bs-parent="#sectionsAccordion">
    <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" required
                     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
  <hr>
</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>
  
      <hr>
</div>

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


 <!-- Section: معلومات عن الضحية -->
<div class="accordion-item">
  <h2 class="accordion-header" id="heading-victim">
    <button class="accordion-button collapsed" type="button" data-bs-target="#collapse-victim"
      aria-expanded="false" aria-controls="collapse-victim">
      معلومات عن الضحية
    </button>
  </h2>

  <div id="collapse-victim" class="accordion-collapse collapse" aria-labelledby="heading-victim"
       data-bs-parent="#sectionsAccordion">
    <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" required name="accept_identite" id="accept_identite_yes" value="1"
                {{ 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" required name="accept_identite" id="accept_identite_no" value="0"
                {{ 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" maxlength="100"
                 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" maxlength="15"
                 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" maxlength="100" 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" 
         pattern="\d{8}" 
         maxlength="8"
         title="Le numéro doit contenir exactement 8 chiffres"
         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" 
         pattern="\d{8}" 
         maxlength="8"
         title="Le numéro doit contenir exactement 8 chiffres"
         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" maxlength="150" 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 }}">
                  {{ $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" maxlength="150" 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($victime ?? null)->id_gouver_viol) === (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($victime ?? null)->id_municipalite_viol) === (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" 
         min="1" 
         max="100" 
         name="id_age" 
         id="age"
         value="{{ old('id_age', optional($victime ?? null)->id_age) }}"
         >
  @error('id_age')
    <div class="text-danger small mt-1"><span>error </span></div>
  @enderror
</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_hand', optional($victime ?? null)->id_niv_hand) === (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') === (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') === (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') === (string)$t->id ? 'selected' : '' }}>
                {{ $t->type_jr_ar ?? $t->type_jr_fr }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- أشكال العنف (نوع العنف) -->
<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, old('type_violence', [])) ? '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') === (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') === (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') === (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 }}">
                {{ $de->demande_ar ?? $de->demande_ar}}
              </option>
            @endforeach
          </select>
</div>
      </div> <!-- /.row -->

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


        <!-- Section: الأطفال المرافقون -->
        <div class="accordion-item">
     <h2 class="accordion-header" id="heading-perp">
            <button class="accordion-button collapsed" type="button" data-bs-target="#collapse-enf"
                    aria-expanded="false" aria-controls="collapse-perp">الأطفال المرافقون
            </button>
          </h2>
       <div id="collapse-enf" class="accordion-collapse collapse" aria-labelledby="heading-perp"
               data-bs-parent="#sectionsAccordion">
            <div class="accordion-body">   
<div class="mb-3">
  
  <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>
      <input type="number" id="children_count" name="children_count" min="0" max="15" class="form-control" min="0" value="{{ old('children_count', 0) }}" />
    </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>

<div id="children-table-wrapper" style="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>
          <th>الإجراءات</th> <!-- nouvelle colonne actions -->
        </tr>
      </thead>
      <tbody>
        <!-- rows created dynamically -->
      </tbody>
    </table>
  </div>

  <div class="d-flex gap-2 mt-2">
    <button type="button" id="children-add-row" class="btn btn-sm btn-outline-primary">إضافة صف</button>
    <small class="text-muted">أدخل عدد الأطفال ثم اضغط "تعبئة تفاصيل الأطفال" أو استخدم أزرار + / - لإدارة الصفوف.</small>
  </div>
</div>
</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">
          <h2 class="accordion-header" id="heading-perp">
            <button class="accordion-button collapsed" type="button" data-bs-target="#collapse-perp"
                    aria-expanded="false" aria-controls="collapse-perp">
              معلومات حول القائم بالعنف
            </button>
          </h2>
          <div id="collapse-perp" class="accordion-collapse collapse" aria-labelledby="heading-perp"
               data-bs-parent="#sectionsAccordion">
            <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">
      @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) old('agresseur_id_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>
    <select name="agresseur_id_relation_part_intime" class="form-select">
      <option value="">-- اختر --</option>
      @foreach($relationsPartIntime as $pi)
        <option value="{{ $pi->id }}" {{ (string) old('agresseur_id_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>
    <select name="agresseur_id_age" class="form-select">
      <option value="">-- اختر الفئة العمرية --</option>
      @foreach($ages as $a)
        <option value="{{ $a->id }}" {{ (string) old('agresseur_id_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>
    <select name="agresseur_id_niveau_edu" class="form-select">
      <option value="">-- اختر --</option>
      @foreach($niveauxEdu as $n)
        <option value="{{ $n->id }}" {{ (string) old('agresseur_id_niveau_edu') === (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>
    <select name="agresseur_id_sit_pro" class="form-select">
      <option value="">-- اختر --</option>
      @foreach($sitProList as $sp)
        <option value="{{ $sp->id }}" {{ (string) old('agresseur_id_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>
    <select name="agresseur_id_sit_pro_inactif" class="form-select">
      <option value="">-- اختر --</option>
      @foreach($sitProInactif as $spi)
        <option value="{{ $spi->id }}" {{ (string) old('agresseur_id_sit_pro_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>
    <select name="agresseur_id_domaine_pro" class="form-select">
      <option value="">-- اختر --</option>
      @foreach($domaineProList as $dp)
        <option value="{{ $dp->id }}" {{ (string) old('agresseur_id_domaine_pro') === (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) -->
<div class="accordion-item">
  <h2 class="accordion-header" id="heading-risk">
    <button class="accordion-button collapsed" type="button" data-bs-target="#collapse-risk"
            aria-expanded="false" aria-controls="collapse-risk">
      تقييم المخاطر
    </button>
  </h2>

  <div id="collapse-risk" class="accordion-collapse collapse" aria-labelledby="heading-risk"
       data-bs-parent="#sectionsAccordion">
   <div class="accordion-body">



  @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">
      <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">
          <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: مسار التعهد -->
<div class="accordion-item">
  <h2 class="accordion-header" id="heading-parcours">
    <button class="accordion-button collapsed" type="button" data-bs-target="#collapse-parcours"
            aria-expanded="false" aria-controls="collapse-parcours">
      مسار التعهد
    </button>
  </h2>
  <div id="collapse-parcours" class="accordion-collapse collapse" aria-labelledby="heading-parcours"
       data-bs-parent="#sectionsAccordion">
    <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">
              اختر مؤسسات...
            </button>
            <div class="dropdown-menu p-2" aria-labelledby="btn-parcours-dest" id="menu-parcours-dest">
              <div class="menu-list">
                @foreach($parcoursDestinations as $pd)
                  <div class="form-check">
                    <input class="form-check-input pd-checkbox" type="checkbox" name="parcours_destinations[]" id="pd-{{ $pd->id }}"
                           value="{{ $pd->id }}" {{ in_array((string)$pd->id, old('parcours_destinations', [])) ? 'checked' : '' }}>
                    <label class="form-check-label" for="pd-{{ $pd->id }}">{{ $pd->destination_ar ?? $pd->destination_fr }}</label>
                  </div>
                @endforeach
              </div>
            </div>
          </div>
        </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 }}" {{ (string) old('id_decision_poursuite_anterieur') === (string)$d->id ? 'selected' : '' }}>
                {{ $d->decision_ar ?? $d->decision_fr }}
              </option>
            @endforeach
          </select>
        </div>


  <!-- 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" {{ old('requisition_medicale') === '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" {{ old('requisition_medicale') === '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') === '1' ? '' : 'disabled' }}>
      <option value="">-- اختر --</option>
      @foreach($typeRequisitions as $tr)
        <option value="{{ $tr->id }}" {{ (string) old('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" {{ old('engagement_sanitaire') === '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" {{ old('engagement_sanitaire') === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="eng_san_no">لا</label>
      </div>
    </div>
    <!-- si tu veux un select associé plus tard, tu peux l'ajouter ici -->
  </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" {{ old('cert_med_48h') === '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" {{ old('cert_med_48h') === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="cert48_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 mt-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="cert_med_gratuite" id="certFree_yes" value="1" {{ old('cert_med_gratuite') === '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" {{ old('cert_med_gratuite') === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="certFree_no">لا</label>
      </div>
    </div>
  </div>

  <!-- 3) شهادة طبية في إطار تسخير و خدمات صحية أخرى (même ligne) -->
  <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" {{ old('cert_med_par_requisition') === '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" {{ old('cert_med_par_requisition') === '0' ? 'checked' : '' }}>
        <label class="form-check-label" for="certReq_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="autres_services_sante" id="benefited_yes" value="1" {{ old('autres_services_sante') === '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" {{ old('autres_services_sante') === '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') === '1' ? '' : 'disabled' }}>
      <option value="">-- اختر --</option>
      @foreach($typeServicesSante as $ts)
        <option value="{{ $ts->id }}" {{ (string) old('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" {{ old('engagement_judiciaire') == '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" {{ old('engagement_judiciaire') === '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') == '1' ? '' : 'disabled' }}>
      <option value="">-- اختر --</option>
      @foreach($typeServicesJudiciare as $tj)
        <option value="{{ $tj->id }}" {{ (string) old('id_type_service_judiciare') === (string)$tj->id ? 'selected' : '' }}>
          {{ $tj->service_ar ?? $tj->service_fr }}
        </option>
      @endforeach
    </select>
  </div>



<!-- Petit script pour activer/désactiver les selects selon la réponse (inutile mais utile UX) -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const toggleSelect = (radioName, selectId) => {
      const radios = document.getElementsByName(radioName);
      const sel = document.getElementById(selectId);
      const update = () => {
        const yes = Array.from(radios).find(r => r.checked && r.value === '1');
        if (sel) {
          sel.disabled = !yes;
        }
      };
      radios.forEach(r => r.addEventListener('change', update));
      update(); // état initial
    };

    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>


        <!-- 3) تسخير طبي (radio) و نوع التسخير (select) -->
        <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="req_yes" value="1" {{ old('conseil_juridique') == '1' ? 'checked' : '' }}>
              <label class="form-check-label" for="req_yes">نعم</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="conseil_juridique" id="req_no" value="0" {{ old('conseil_juridique') === '0' ? 'checked' : '' }}>
              <label class="form-check-label" for="req_no">لا</label>
            </div>
          </div>

       
        </div>

        <!-- 4) التعهد الصحي: نعم/لا و أنواع الخدمات الصحية (select) -->
<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"
             {{ old('services_orientation') == '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"
             {{ old('services_orientation') === '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 }}" {{ (string) old('id_institution_orientation') === (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" maxlength="2000" class="form-control" rows="4">{{ old('remarques_parcours') }}</textarea>
        </div>

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

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


<!-- Section: المتابعة الميدانية -->
<div class="accordion-item">
  <h2 class="accordion-header" id="heading-followup">
    <button class="accordion-button collapsed" type="button" data-bs-target="#collapse-followup"
            aria-expanded="false" aria-controls="collapse-followup">
      المتابعة الميدانية
    </button>
  </h2>
  <div id="collapse-followup" class="accordion-collapse collapse" aria-labelledby="heading-followup"
       data-bs-parent="#sectionsAccordion">
    <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') == $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') == $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') == $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"
          {{ old('suivi_terrain', optional($signalement ?? null)->suivi_terrain) ? '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">
  <!-- Save (final) -->
  <button type="submit" name="save_type" value="final"  class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement" id="btnSaveForm" aria-label="حفظ الاستمارة">
    <i class="bx bx-save me-1"></i> حفظ
  </button>

  <!-- Save as draft -->
  <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>
   <a href="{{ route('form.index') }}" class="btn-download-signalement btn btn-sm d-flex align-items-center"  aria-label="رجوع">
          <i class="bx bx-arrow-back me-1"></i> رجوع
        </a>
  {{-- <a href="{{ route('form.index') }}" 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 () {
  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>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  // Helper : pad number
  function z2(n){ return String(n).padStart(2,'0'); }

  // get local date in YYYY-MM-DD
  function localDateISO(d = new Date()){
    return d.getFullYear() + '-' + z2(d.getMonth()+1) + '-' + z2(d.getDate());
  }
  // get local time in HH:MM
  function localTimeHM(d = new Date()){
    return z2(d.getHours()) + ':' + z2(d.getMinutes());
  }

  // Fill inputs (only if empty and have data-auto="1")
// Fill inputs (if empty OR forced via data-force-client="1")
['date_appel','heure_ecoute'].forEach(name => {
  const el = document.querySelector(`[name="${name}"]`);
  if (!el) return;
  const shouldAuto = el.dataset.auto === '1';
  if (!shouldAuto) return;
  const force = el.dataset.forceClient === '1' || el.dataset.forceClient === 'true';
  if (force || !el.value || el.value.trim() === '') {
    if (el.type === 'date') el.value = localDateISO();
    else if (el.type === 'time') el.value = localTimeHM();
  }
});


  // Auto-select seance radio based on current client time
// Auto-select seance radio based on current client time (robust vs UTC/local)
(function autoSelectSeance() {
  try {
    const now = new Date();

    // current minutes local & UTC
    const curMinLocal = now.getHours() * 60 + now.getMinutes();
    const curMinUTC   = now.getUTCHours() * 60 + now.getUTCMinutes();

    function toMinutes(hm) {
      if (!hm) return null;
      const m = hm.match(/^(\d{1,2}):(\d{2})$/);
      if (!m) return null;
      return parseInt(m[1],10)*60 + parseInt(m[2],10);
    }

    const radios = Array.from(document.querySelectorAll('.seance-radio'));
    if (!radios.length) return;

    // Respect edit-state: if one already checked, do nothing
    const alreadyChecked = radios.some(r => r.checked);
    if (alreadyChecked) return;

    let chosen = null;

    // 1) try strict match against local time
    for (const r of radios) {
      const ds = r.dataset.start ? r.dataset.start.trim() : '';
      const de = r.dataset.end   ? r.dataset.end.trim()   : '';
      const sMin = toMinutes(ds);
      const eMin = toMinutes(de);
      if (sMin === null || eMin === null) continue;

      // normal interval
      if (sMin <= eMin) {
        if (curMinLocal >= sMin && curMinLocal < eMin) { chosen = r; break; }
      } else {
        // wraps midnight
        if (curMinLocal >= sMin || curMinLocal < eMin) { chosen = r; break; }
      }
    }

    // 2) if none found, try again but comparing with UTC time (handles server-stored UTC times)
    if (!chosen) {
      for (const r of radios) {
        const ds = r.dataset.start ? r.dataset.start.trim() : '';
        const de = r.dataset.end   ? r.dataset.end.trim()   : '';
        const sMin = toMinutes(ds);
        const eMin = toMinutes(de);
        if (sMin === null || eMin === null) continue;

        if (sMin <= eMin) {
          if (curMinUTC >= sMin && curMinUTC < eMin) { chosen = r; break; }
        } else {
          if (curMinUTC >= sMin || curMinUTC < eMin) { chosen = r; break; }
        }
      }
    }

    // 3) fallback: pick first with start time, otherwise first radio
    if (!chosen) {
      chosen = radios.find(r => r.dataset.start) || radios[0];
    }

    if (chosen) chosen.checked = true;
  } catch (err) {
    console.warn('Auto seance selection skipped (robust):', err);
  }
})();

});
</script>
@endpush

<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 () {
  // éléments (peuvent être absents si le markup diffère)
  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');
  const addRowBtn = document.getElementById('children-add-row');

  // safely build options from arrays injected from server as window.__agesEnf / window.__niveauxEduEnf
  function buildOptionsFromArr(arr, valueKey = 'id', labelKey = 'age_ar') {
    if (!Array.isArray(arr)) return '';
    return arr.map(item => {
      const label = (item[labelKey] ?? item['niveau_ar'] ?? item['age_ar'] ?? item[valueKey]);
      return `<option value="${item[valueKey]}">${label}</option>`;
    }).join('');
  }
  const agesOptions = buildOptionsFromArr(window.__agesEnf || [], 'id', 'age_ar');
  const nivOptions = buildOptionsFromArr(window.__niveauxEduEnf || [], 'id', 'niveau_ar');

  // crée une ligne DOM pour l'index donné; data optionnel pour pré-remplir
  function createRow(index, data = {}) {
    const tr = document.createElement('tr');
    tr.dataset.index = index;

    tr.innerHTML = `
      <td class="row-index">${index + 1}</td>
      <td>
        <select class="form-select form-select-sm" name="children[${index}][gender]">
          <option value="">--</option>
          <option value="female">أنثى</option>
          <option value="male">ذكر</option>
        </select>
      </td>
      <td>
        <select class="form-select form-select-sm" name="children[${index}][id_age_enf]">
          <option value="">-- اختر فئة العمر --</option>
          ${agesOptions}
        </select>
      </td>
      <td>
        <select class="form-select form-select-sm" name="children[${index}][id_niveau_edu_enf]">
          <option value="">--</option>
          ${nivOptions}
        </select>
      </td>
      <td>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="children[${index}][decroche_scolaire]" value="1">
        </div>
      </td>
      <td>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="children[${index}][porteur_handicap]" value="1">
        </div>
      </td>
      <td>
        <input type="text" class="form-control form-control-sm" name="children[${index}][lien_parente]" placeholder="صلة أو ملاحظة">
      </td>
      <td>
        <div class="btn-group" role="group" aria-label="actions">
          <button type="button" class="btn btn-sm btn-success btn-add-row" title="إضافة صف بعد هذا الصف">+</button>
          <button type="button" class="btn btn-sm btn-danger btn-remove-row" title="حذف هذا الصف">−</button>
        </div>
      </td>
    `;

    // pré-remplissage si data présent
    try {
      if (data.gender) tr.querySelector(`[name="children[${index}][gender]"]`).value = data.gender;
      if (data.id_age_enf) tr.querySelector(`[name="children[${index}][id_age_enf]"]`).value = data.id_age_enf;
      if (data.id_niveau_edu_enf) tr.querySelector(`[name="children[${index}][id_niveau_edu_enf]"]`).value = data.id_niveau_edu_enf;
      if (data.decroche_scolaire) tr.querySelector(`[name="children[${index}][decroche_scolaire]"]`).checked = (data.decroche_scolaire == 1 || data.decroche_scolaire === true);
      if (data.porteur_handicap) tr.querySelector(`[name="children[${index}][porteur_handicap]"]`).checked = (data.porteur_handicap == 1 || data.porteur_handicap === true);
      if (data.lien_parente) tr.querySelector(`[name="children[${index}][lien_parente]"]`).value = data.lien_parente;
    } catch (err) {
      // safe-ignore si un champ manque
      console.warn('Pré-remplissage enfant échoué', err);
    }

    return tr;
  }

  // réindexation : met à jour l'index visible et les name des inputs
  function reindexRows() {
    if (!childrenTableBody) return;
    const rows = Array.from(childrenTableBody.querySelectorAll('tr'));
    rows.forEach((tr, idx) => {
      tr.dataset.index = idx;
      const idxCell = tr.querySelector('.row-index');
      if (idxCell) idxCell.textContent = idx + 1;

      tr.querySelectorAll('input, select, textarea').forEach(el => {
        const name = el.getAttribute('name') || '';
        // remplace children[OLD][field] => children[idx][field]
        const newName = name.replace(/^children\[\d+\]\[(.+)\]$/, `children[${idx}][$1]`);
        if (newName !== name) el.setAttribute('name', newName);
      });
    });

    if (childrenCountInput) {
      childrenCountInput.value = rows.length;
    }
  }

  // insère une ligne après targetTr (si targetTr null => fin)
  function addRowAfter(targetTr, rowData = {}) {
    if (!childrenTableBody) return;
    const currentRows = Array.from(childrenTableBody.querySelectorAll('tr'));
    const insertIndex = targetTr ? currentRows.indexOf(targetTr) + 1 : currentRows.length;
    const tr = createRow(insertIndex, rowData);
    if (insertIndex >= currentRows.length) {
      childrenTableBody.appendChild(tr);
    } else {
      childrenTableBody.insertBefore(tr, currentRows[insertIndex]);
    }
    reindexRows();
    if (childrenWrapper) childrenWrapper.style.display = 'block';
  }

  // supprime une ligne
  function removeRow(targetTr) {
    if (!targetTr || !childrenTableBody) return;
    targetTr.remove();
    if (!childrenTableBody.querySelector('tr')) {
      if (childrenWrapper) childrenWrapper.style.display = 'none';
      if (childrenCountInput) childrenCountInput.value = '';
    } else {
      reindexRows();
    }
  }

  // crée N lignes (utilisé lors du remplissage via children_count)
  function buildChildrenRows(n) {
    if (!childrenTableBody) return;
    childrenTableBody.innerHTML = '';
    for (let i = 0; i < n; i++) {
      const row = createRow(i);
      childrenTableBody.appendChild(row);
    }
    if (childrenWrapper) childrenWrapper.style.display = (n > 0 ? 'block' : 'none');
  }

  // délégation d'événements pour boutons + / -
  if (childrenTableBody) {
    childrenTableBody.addEventListener('click', function (e) {
      const addBtn = e.target.closest('.btn-add-row');
      const remBtn = e.target.closest('.btn-remove-row');
      if (addBtn) {
        const tr = addBtn.closest('tr');
        addRowAfter(tr);
        return;
      }
      if (remBtn) {
        const tr = remBtn.closest('tr');
        // option : confirmation
        if (confirm('هل أنت متأكد من حذف هذا الصف؟')) {
          removeRow(tr);
        }
        return;
      }
    });
  }

  // bouton haut "ajouter un row" (si présent)
  if (addRowBtn) {
    addRowBtn.addEventListener('click', function () {
      addRowAfter(null);
    });
  }

  // comportement toggle (si bouton existe)
  if (childrenToggle && childrenCountInput) {
    childrenToggle.addEventListener('click', function () {
      const n = parseInt(childrenCountInput.value, 10) || 0;
      if (n > 0) {
        buildChildrenRows(n);
      } else if (childrenWrapper) {
        childrenWrapper.style.display = (childrenWrapper.style.display === 'none' ? 'block' : 'none');
      }
    });
  }

  // input numeric tidy pour children_count
  if (childrenCountInput) {
    childrenCountInput.addEventListener('input', function () {
      // remove leading zeros but keep single "0"
      if (this.value.length > 1) this.value = this.value.replace(/^0+(?=\d)/, '');
    });
    childrenCountInput.addEventListener('change', function () {
      const n = parseInt(this.value, 10) || 0;
      if (n <= 0) {
        if (childrenTableBody) childrenTableBody.innerHTML = '';
        if (childrenWrapper) childrenWrapper.style.display = 'none';
      } else {
        buildChildrenRows(n);
      }
    });
  }

  /* ---------- RÉHYDRATATION des anciennes valeurs (old('children')) ----------
     Nous utilisons ici une injection JSON sûre côté serveur. Remplace si besoin:
     {!! json_encode(old('children') ?? null, JSON_UNESCAPED_UNICODE) !!}
  */
  try {
    const oldChildren = {!! json_encode(old('children') ?? null, JSON_UNESCAPED_UNICODE) !!};
    if (Array.isArray(oldChildren) && oldChildren.length > 0) {
      // vide et recrée
      if (childrenTableBody) childrenTableBody.innerHTML = '';
      oldChildren.forEach((c, idx) => {
        const row = createRow(idx, c || {});
        childrenTableBody.appendChild(row);
      });
      reindexRows();
      if (childrenWrapper) childrenWrapper.style.display = 'block';
    } else {
      // si pas d'old, on peut initialiser depuis children_count si présent
      const initialCount = (childrenCountInput && childrenCountInput.value) ? parseInt(childrenCountInput.value, 10) : 0;
      if (initialCount > 0) buildChildrenRows(initialCount);
    }
  } catch (err) {
    // si la json injection est mal formée, on ignore proprement
    console.warn('Children rehydrate skipped or invalid JSON', err);
    // fallback : build from children_count si possible
    const fallbackCount = (childrenCountInput && childrenCountInput.value) ? parseInt(childrenCountInput.value, 10) : 0;
    if (fallbackCount > 0) buildChildrenRows(fallbackCount);
  }

});
</script>

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

  // Buttons should set save_type value (a hidden input)
  const saveTypeInput = form.querySelector('input[name="save_type"]') || (function(){
    const i = document.createElement('input');
    i.type = 'hidden'; i.name = 'save_type'; i.value = '';
    form.appendChild(i); return i;
  })();

  // Hook up save buttons:
  document.querySelectorAll('[data-save-type]').forEach(btn => {
    btn.addEventListener('click', (ev) => {
      saveTypeInput.value = btn.getAttribute('data-save-type');
      // Allow event to continue to submit the form normally
    });
  });

  form.addEventListener('submit', function (ev) {
    const isDraft = saveTypeInput.value === 'draft';

    if (isDraft) {
      // Skip strict required checks (but still allow server-side to validate lightly)
      return; // allow submit
    }

    // Use Constraint Validation API
    form.classList.remove('was-validated');
    if (!form.checkValidity()) {
      ev.preventDefault();
      ev.stopPropagation();
      form.classList.add('was-validated');
      // scroll to first invalid
      const firstInvalid = form.querySelector(':invalid');
      if (firstInvalid) firstInvalid.focus();
      return;
    }

    // Time format check (HH:MM)
    const heure = form.querySelector('input[name="heure_ecoute"]')?.value;
    if (heure && !/^\d{2}:\d{2}$/.test(heure)) {
      ev.preventDefault();
      ev.stopPropagation();
      const tf = form.querySelector('input[name="heure_ecoute"]');
      tf.classList.add('is-invalid');
      let fb = tf.nextElementSibling;
      if (!fb || !fb.classList.contains('invalid-feedback')) {
        fb = document.createElement('div');
        fb.className = 'invalid-feedback';
        tf.parentNode.insertBefore(fb, tf.nextSibling);
      }
      fb.textContent = 'صيغة التوقيت يجب أن تكون HH:MM.';
      tf.focus();
      return;
    }

    // If we reach here, allow submit (server-side will re-validate)
  }, true);

  // Remove server-side invalid markers on input
  form.querySelectorAll('input,select,textarea').forEach(el => {
    el.addEventListener('input', () => {
      el.classList.remove('is-invalid');
    });
  });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // helper to fill select
  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(it => {
      const opt = document.createElement('option');
      opt.value = it.id;
      opt.textContent = it.nom;
      if (selectedId && String(selectedId) === String(it.id)) opt.selected = true;
      target.appendChild(opt);
    });
  }

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

  // wiring for the two pairs
  const gouver = document.getElementById('id_gouver');
  const municip = document.getElementById('id_municipalite');
  if (gouver && municip) {
    gouver.addEventListener('change', function () {
      loadDelegations(this.value, municip);
    });

    // initial population (old/model)
    const initialGouv = gouver.value || '{{ old("id_gouver", optional($victime ?? null)->id_gouver) ?? "" }}';
    const selectedMunicip = '{{ old("id_municipalite", optional($victime ?? null)->id_municipalite) ?? "" }}';
    if (initialGouv) loadDelegations(initialGouv, municip, selectedMunicip);
  }

  // second pair for violence location (if present)
  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($victime ?? null)->id_gouver_viol) ?? "" }}';
    const selectedMunicipViol = '{{ old("id_municipalite_viol", optional($victime ?? null)->id_municipalite_viol) ?? "" }}';
    if (initialGouvViol) loadDelegations(initialGouvViol, municipViol, selectedMunicipViol);
  }
});
</script>
@push('scripts')
@verbatim
<script>
document.addEventListener('DOMContentLoaded', function () {
  // Helper: open accordion that contains el (or nearest ancestor group)
  function openAccordionForElement(el) {
    if (!el) return;
    // find the collapse panel that contains the element
    let panel = el.closest('.accordion-collapse');
    if (!panel) {
      // maybe element is inside an .accordion-item but not inside collapse
      const item = el.closest('.accordion-item');
      panel = item ? item.querySelector('.accordion-collapse') : null;
    }
    if (!panel) return; // nothing to open

    // ensure panel has an id (so header selector can target it)
    if (!panel.id) panel.id = 'panel-' + Math.random().toString(36).slice(2,9);

    // show using bootstrap Collapse API
    const inst = bootstrap.Collapse.getOrCreateInstance(panel, { toggle: false });
    inst.show();

    // find header button that targets this panel and update its aria/visual state
    const headerBtn = document.querySelector('[data-bs-target="#' + panel.id + '"],[data-bs-target=\'' + '#' + panel.id + '\']');
    if (headerBtn) {
      headerBtn.classList.remove('collapsed');
      headerBtn.setAttribute('aria-expanded', 'true');
    }

    // after the show animation, scroll and focus the element
    setTimeout(() => {
      try {
        panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
        // focus the actual form control if possible
        if (el.focus && typeof el.focus === 'function') {
          el.focus({ preventScroll: true });
          // also attempt to set selection for text inputs
          if (el.select && typeof el.select === 'function') try { el.select(); } catch(e){}
        } else {
          // fallback: focus first input/select/textarea inside the panel
          const firstField = panel.querySelector('input,select,textarea,button');
          if (firstField && typeof firstField.focus === 'function') firstField.focus({ preventScroll: true });
        }
      } catch (err) {
        console.warn('openAccordionForElement: focus/scroll failed', err);
      }
    }, 260); // permit bootstrap animation (~250ms)
  }

  // Given an error node (e.g. the <div class="text-danger"> from @error),
  // attempt to find the related form control.
  function findControlFromErrorNode(errNode) {
    if (!errNode) return null;
    // If the node itself is a form control
    if (errNode.matches && errNode.matches('input,select,textarea')) return errNode;

    // Prefer: find input/select/textarea inside the same column/group
    const container = errNode.closest('.col-12, .col-md-6, .mb-3, .form-group, .input-group, .accordion-body') || errNode.parentElement;
    if (container) {
      const ctrl = container.querySelector('input,select,textarea');
      if (ctrl) return ctrl;
      // maybe it's a radio group or checkboxes: try to find a radio/checkbox inside container
      const radioOrCheck = container.querySelector('input[type="radio"], input[type="checkbox"]');
      if (radioOrCheck) return radioOrCheck;
    }

    // If error node is placed after a control, try previous siblings
    let prev = errNode.previousElementSibling;
    while (prev) {
      if (prev.matches && prev.matches('input,select,textarea')) return prev;
      const inside = prev.querySelector && prev.querySelector('input,select,textarea');
      if (inside) return inside;
      prev = prev.previousElementSibling;
    }

    // As last resort, look upward to closest form and try to find controls by name similarity:
    const form = errNode.closest('form') || document.querySelector('form');
    if (form) {
      // try using aria-describedby linking: if errNode has id and input aria-describedby references it
      if (errNode.id) {
        const byAria = form.querySelector('[aria-describedby="' + errNode.id + '"]');
        if (byAria) return byAria;
      }
      // else return first input/select/textarea inside the same accordion item (if present)
      const accItem = errNode.closest('.accordion-item');
      if (accItem) {
        const ctrl = accItem.querySelector('input,select,textarea');
        if (ctrl) return ctrl;
      }
    }

    return null;
  }

  // Hook into form submit handling (client-side validation)
  const form = document.querySelector('form.needs-validation') || document.querySelector('form');
  if (form) {
    form.addEventListener('submit', function (ev) {
      // If the browser will prevent the submit because of constraint validation,
      // open the accordion that contains the first invalid control.
      // We run in capture so this runs before other handlers that may call preventDefault.
      // But some code may already call checkValidity() and add was-validated; we cover both.
      try {
        if (!form.checkValidity()) {
          // find first invalid element
          const firstInvalid = form.querySelector(':invalid');
          if (firstInvalid) {
            ev.preventDefault();
            ev.stopPropagation();
            // open containing accordion
            openAccordionForElement(firstInvalid);
            // ensure visual validation classes are added
            form.classList.add('was-validated');
            // focus after slight delay
            setTimeout(()=> {
              try { firstInvalid.focus({ preventScroll: true }); } catch(e){}
            }, 300);
          }
        }
      } catch (err) {
        // ignore and allow normal flow (server-side will validate)
        console.warn('form submit validation hook error', err);
      }
    }, true); // capture
  }

  // On initial page load, if server-side validation printed error messages, open the panel that contains the first error
  // We wait a little bit so other scripts that may modify DOM (delegation loaders) have time to run.
  setTimeout(() => {
    try {
      const rootForm = document.querySelector('form.needs-validation') || document.querySelector('form');
      if (!rootForm) return;

      // Candidate error nodes: your Blade @error markup (div.text-danger.small) or .invalid-feedback
      const errorNodes = Array.from(rootForm.querySelectorAll('.text-danger.small, .invalid-feedback'));
      if (errorNodes.length === 0) {
        // also consider inputs marked is-invalid by server
        const invalidField = rootForm.querySelector('input.is-invalid, select.is-invalid, textarea.is-invalid');
        if (invalidField) {
          openAccordionForElement(invalidField);
          return;
        }
        return; // nothing to do
      }

      // pick first error node that has a nearby control
      let chosenCtrl = null;
      for (const en of errorNodes) {
        const c = findControlFromErrorNode(en);
        if (c) { chosenCtrl = c; break; }
      }
      // fallback: if none found, just use the node itself (to scroll)
      if (!chosenCtrl) {
        const en = errorNodes[0];
        const accItem = en.closest('.accordion-item');
        const panel = accItem ? accItem.querySelector('.accordion-collapse') : null;
        if (panel) {
          // open the panel and scroll to the error text
          const inst = bootstrap.Collapse.getOrCreateInstance(panel, { toggle: false });
          inst.show();
          setTimeout(()=> en.scrollIntoView({ behavior: 'smooth', block: 'center' }), 280);
        } else {
          errorNodes[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
        return;
      }

      // open accordion containing chosen control and focus it
      openAccordionForElement(chosenCtrl);
    } catch (err) {
      console.warn('accordion auto-open on load failed', err);
    }
  }, 120); // small delay
});
</script>
@endverbatim
@endpush


<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>


@endsection