@extends('layouts.app')

@section('content')
{{-- <link rel="stylesheet" href="{{ asset('css/pages/form.css') }}"> --}}
@include('partials.unified-management-style')
@include('partials.form-editorial-style')
@include('partials.role-modal-system-style')
<div class="form-modern">
@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="" method="POST" class="needs-validation" novalidate>

  @csrf
 
  <!-- Title card -->
  <div class="card page-title-card-sommaires mb-3" dir="rtl">
    <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between">
      <div class="me-0 me-md-4 text-md-end" style="min-width:0;">
        <h3 class="h3 mb-1 banner-title">
          <i class="bx bx-show-alt ms-2"></i>
          عرض تفاصيل البلاغ
        </h3>
        <p class="mb-2 banner-subtitle">استعراض المعطيات المسجلة للبلاغ دون تعديل</p>

        <div class="banner-stats d-flex flex-wrap gap-2 mt-2 justify-content-md-end">
          <span class="banner-badge">
            <i class="bx bx-hash align-middle ms-1"></i>
            رقم البلاغ: <strong>{{ $signalement->id_signalement ?? '—' }}</strong>
          </span>
          <span class="banner-badge">
            <i class="bx bx-info-circle align-middle ms-1"></i>
            الوضعية: <strong>عرض</strong>
          </span>
        </div>
      </div>

      <div class="d-flex align-items-center gap-2 mt-2 mt-md-0">
        <a href="{{ route('form.index') }}" class="edit-role-btn-cancel" aria-label="رجوع">
          <i class="bx bx-arrow-back"></i>
          رجوع
        </a>
        <div class="banner-graphic d-none d-md-block" aria-hidden="true"></div>
      </div>
    </div>
  </div>

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



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

  {{-- ===== Simple presentational CSS for "consult" mode (no input borders, labels inline) ===== --}}
  <style>
    /* keep this after your main css so it overrides input/select default visuals */
    .view-row { display:flex; align-items:center; gap: .75rem; padding: .3rem 0; }
    .view-row .label { width: 220px; min-width: 160px; font-weight: 600; color: rgb(17,24,39); }
    .view-row .value {
      flex:1;
      padding: .45rem .6rem;
      border-bottom: 1px dashed rgba(11,37,92,0.06);
      color: rgba(10,10,10,0.9);
      background: transparent;
      line-height: 1.4;
      min-height: 36px;
      display:flex;
      align-items:center;
      gap: .5rem;
      word-break: break-word;
    }

    /* small helper for muted helper text */
    .view-help { font-size: .82rem; color: rgba(11,37,92,0.45); margin-top: .25rem; }

    /* chips / badges for multiple values (checkbox lists) */
    .chips { display:flex; gap: .5rem; flex-wrap:wrap; }
    .chip {
      padding: .25rem .5rem;
      border-radius: .5rem;
      background: rgba(11,37,92,0.05);
      border: 1px solid rgba(11,37,92,0.03);
      font-size: .88rem;
      color: rgb(11,37,92);
    }

    /* small emphasized value (yes/no) */
    .boolean-yes { color: #0b76ff; font-weight:700; }
    .boolean-no  { color: #e63737; font-weight:700; }

    /* keep layout responsive: on small screens, stack label above value */
    @media (max-width: 575.98px) {
      .view-row { flex-direction: column; align-items: flex-start; }
      .view-row .label { width: 100%; min-width: auto; }
      .view-row .value { width: 100%; }
    }

    /* remove default look of any stray form controls left in markup */
    .form-control, .form-select, .form-check-input { border: none !important; box-shadow:none !important; background: transparent !important; padding:0 !important; }
  </style>

  {{-- Prepare some server-side helpers so the template below stays readable --}}
  @php
    // helper to display yes/no/empty
    $showBool = function($v){
      if ($v === null || $v === '') return '—';
      if ((string)$v === '1') return '<span class="boolean-yes">نعم</span>';
      if ((string)$v === '0') return '<span class="boolean-no">لا</span>';
      return e($v);
    };

    // compute existing selected types for violence (strings)
    $existingTypes = $violence ? $violence->types->pluck('tp_type_violence_id')->map(function($v){ return (string)$v; })->toArray() : [];
    $selectedTypes = old('type_violence', $existingTypes);
  @endphp
<style>
/* --- corrected section title styling for RTL (title on the right) --- */
.section-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;    /* in RTL this places items toward the right */
  gap: .75rem;
  padding: .6rem .9rem;
  margin: .15rem 0 .5rem 0;
  border-radius: .55rem;
  /* gradient goes from right -> left: stronger on the right, softer on the left */
  background: linear-gradient(to left, rgba(11,118,255,0.10), rgba(250,250,252,0.02));
  border: 1px solid rgba(11,37,92,0.06);
  box-shadow: 0 6px 18px rgba(11,13,16,0.02);
  direction: rtl; /* ensure RTL flow */
}

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

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

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

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

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

        <div class="row g-3">

          <!-- Date d'écoute -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">تاريخ الإنصات</div>
              <div class="value">
                {{ optional($signalement ?? null)->date_appel ? \Carbon\Carbon::parse($signalement->date_appel)->format('Y-m-d') : '—' }}
              </div>
            </div>
            {{-- <div class="view-help">اليوم / الشهر / السنة</div> --}}
          </div>

          <!-- Heure de l'appel -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">توقيت المكالمة</div>
              <div class="value">
                {{ optional($signalement ?? null)->heure_ecoute ?? '—' }}
              </div>
            </div>
          </div>

          <!-- Séance -->
          <div class="col-12">
            <div class="view-row">
              <div class="label">توقيت الإنصات</div>
              <div class="value">
                @php
                  $selSeance = optional($seances->firstWhere('id', old('id_seance', optional($signalement ?? null)->id_seance)))->seance_ar
                              ?? optional($seances->firstWhere('id', old('id_seance', optional($signalement ?? null)->id_seance)))->seance_fr;
                echo $selSeance ? e($selSeance) : '—';
                @endphp
              </div>
            </div>
          </div>

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

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

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

    
    <div>
      <div dir="rtl">

        <div class="mb-3">
          <div class="view-row">
            <div class="label">موضوع المكالمة (الموضوع الرئيسي)</div>
            <div class="value">
              @php
                $selSujet = optional($sujets->firstWhere('id', old('id_sujet_appel', optional($signalement ?? null)->id_sujet_appel)))->sujet_ar
                           ?? optional($sujets->firstWhere('id', old('id_sujet_appel', optional($signalement ?? null)->id_sujet_appel)))->sujet_fr;
              echo $selSujet ? e($selSujet) : '—';
              @endphp
            </div>
          </div>
        </div>

        <div class="mb-3" id="autre-section">
          <div class="view-row">
            <div class="label">سبب (مسائل أخرى)</div>
            <div class="value">
              @php
                $selAutre = optional($autres->firstWhere('id', old('id_autre', optional($signalement ?? null)->id_autre)))->autre_ar
                            ?? optional($autres->firstWhere('id', old('id_autre', optional($signalement ?? null)->id_autre)))->autre_fr;
                echo $selAutre ? e($selAutre) : '—';
              @endphp
            </div>
          </div>
        </div>

        <div class="row g-3" id="source-rapporteur-section">
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">مصدر الإشعار</div>
              <div class="value">
                @php
                  $selSrc = optional($sources->firstWhere('id', old('id_source_signale', optional($signalement ?? null)->id_source_signale)))->source_ar
                           ?? optional($sources->firstWhere('id', old('id_source_signale', optional($signalement ?? null)->id_source_signale)))->source_fr;
                  echo $selSrc ? e($selSrc) : '—';
                @endphp
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">المبلغ (من قام بالإشعار)</div>
              <div class="value">
                @php
                  $selRapp = optional($rapporteurs->firstWhere('id', old('id_rapporteur', optional($signalement ?? null)->id_rapporteur)))->rapporteur_ar
                             ?? optional($rapporteurs->firstWhere('id', old('id_rapporteur', optional($signalement ?? null)->id_rapporteur)))->rapporteur_fr;
                  echo $selRapp ? e($selRapp) : '—';
                @endphp
              </div>
            </div>
          </div>
        </div>

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

  <br>

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


    <div>
      <div dir="rtl">
        <div class="row g-3">

          <!-- قبول الكشف بالهوية -->
          <div class="col-12">
            <div class="view-row">
              <div class="label">الموافقة على التصريح بهويّيتها</div>
              <div class="value">
                {!! $showBool(old('accept_identite', optional($victime ?? null)->accept_identite)) !!}
              </div>
            </div>
          </div>

          <!-- الاسم -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">السيدة (الإسم واللقب)</div>
              <div class="value">{{ old('nom_prenom', optional($victime ?? null)->nom_prenom) ?? '—' }}</div>
            </div>
          </div>

          <!-- معرف الضحية -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">معرف الضحية</div>
              <div class="value">{{ old('identifiant', optional($victime ?? null)->identifiant) ?? '—' }}</div>
            </div>
          </div>

          <!-- بطاقة تعريف غير متوفرة -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">بطاقة تعريف غير متوفرة</div>
              <div class="value">
                @php
                  $selCin = optional($cin->firstWhere('id', old('id_cin_non_dispo', optional($victime ?? null)->id_cin_non_dispo)))->cin_ar
                            ?? optional($cin->firstWhere('id', old('id_cin_non_dispo', optional($victime ?? null)->id_cin_non_dispo)))->cin_fr;
                  echo $selCin ? e($selCin) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- الجنسية -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الجنسية</div>
              <div class="value">{{ old('nationalite', optional($victime ?? null)->nationalite) ?? '—' }}</div>
            </div>
          </div>

          <!-- الهاتف للمتابعة -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الهاتف للمتابعة عند الضرورة</div>
              <div class="value">{{ old('num_tel_suivi', optional($victime ?? null)->num_tel_suivi) ?? '—' }}</div>
            </div>
          </div>

          <!-- الهاتف الشخصي -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الهاتف الشخصي للضحية</div>
              <div class="value">{{ old('num_tel', optional($victime ?? null)->num_tel) ?? '—' }}</div>
            </div>
          </div>

          <!-- العنوان -->
          <div class="col-12 col-md-12">
            <div class="view-row">
              <div class="label">العنوان</div>
              <div class="value">{{ old('adresse', optional($victime ?? null)->adresse) ?? '—' }}</div>
            </div>
          </div>

          <!-- الولاية -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الولاية</div>
              <div class="value">
                @php
                  $selGov = optional($gouvernorats->firstWhere('id_gouver', old('id_gouver', optional($victime ?? null)->id_gouver)))->nom_ar
                            ?? optional($gouvernorats->firstWhere('id_gouver', old('id_gouver', optional($victime ?? null)->id_gouver)))->nom;
                  echo $selGov ? e($selGov) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- المعتمدية -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">المعتمدية / العمادة</div>
              <div class="value">
                @php
                  $selDel = optional($delegations->firstWhere('id_delegation', old('id_municipalite', optional($victime ?? null)->id_municipalite)))->nom_ar
                            ?? optional($delegations->firstWhere('id_delegation', old('id_municipalite', optional($victime ?? null)->id_municipalite)))->nom;
                  echo $selDel ? e($selDel) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- مكان تواجد الضحية -->
          <div class="col-12">
            <div class="view-row">
              <div class="label">مكان تواجد الضحيّة عند الإتصال</div>
              <div class="value">{{ old('lieu_vict_appel', optional($victime ?? null)->lieu_vict_appel) ?? '—' }}</div>
            </div>
          </div>

          <!-- الولاية عند العنف -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الولاية عند حدوث العنف</div>
              <div class="value">
                @php
                  $selGovViol = optional($gouvernorats->firstWhere('id_gouver', old('id_gouver_viol', optional($violence ?? null)->id_gouv_violence)))->nom_ar
                                ?? optional($gouvernorats->firstWhere('id_gouver', old('id_gouver_viol', optional($violence ?? null)->id_gouv_violence)))->nom;
                  echo $selGovViol ? e($selGovViol) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- المعتمدية عند العنف -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">المعتمدية عند حدوث العنف</div>
              <div class="value">
                @php
                  $selDelViol = optional($delegations->firstWhere('id_delegation', old('id_municipalite_viol', optional($violence ?? null)->id_municip_violence)))->nom_ar
                               ?? optional($delegations->firstWhere('id_delegation', old('id_municipalite_viol', optional($violence ?? null)->id_municip_violence)))->nom;
                  echo $selDelViol ? e($selDelViol) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- السن -->
          <div class="col-12">
            <div class="view-row">
              <div class="label">السن</div>
              <div class="value">{{ old('id_age', optional($victime ?? null)->id_age) ?? '—' }}</div>
            </div>
          </div>

          <!-- الحالة المدنية -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الحالة المدنية</div>
              <div class="value">
                @php
                  $selEtat = optional($etatsCivil->firstWhere('id', old('id_etat_civil', optional($victime ?? null)->id_etat_civil)))->etat_ar
                             ?? optional($etatsCivil->firstWhere('id', old('id_etat_civil', optional($victime ?? null)->id_etat_civil)))->etat_fr;
                  echo $selEtat ? e($selEtat) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- المستوى التعليمي -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">المستوى التعليمي</div>
              <div class="value">
                @php
                  $selNiv = optional($niveauxEdu->firstWhere('id', old('id_niveau_edu', optional($victime ?? null)->id_niveau_edu)))->niveau_ar
                            ?? optional($niveauxEdu->firstWhere('id', old('id_niveau_edu', optional($victime ?? null)->id_niveau_edu)))->niveau_fr;
                  echo $selNiv ? e($selNiv) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- الوضعية الصحية -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الوضعية الصحية</div>
              <div class="value">
                @php
                  $selEtatS = optional($etatsSante->firstWhere('id', old('id_etat_sante', optional($victime ?? null)->id_etat_sante)))->etat_ar
                             ?? optional($etatsSante->firstWhere('id', old('id_etat_sante', optional($victime ?? null)->id_etat_sante)))->etat_fr;
                  echo $selEtatS ? e($selEtatS) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- الضحية حاملة لإعاقة -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الضحية حاملة لإعاقة (النوع)</div>
              <div class="value">
                @php
                  $selPH = optional($porteuseHand->firstWhere('id', old('id_porteuse_handicap', optional($victime ?? null)->id_porteuse_handicap)))->porteuse_ar
                           ?? optional($porteuseHand->firstWhere('id', old('id_porteuse_handicap', optional($victime ?? null)->id_porteuse_handicap)))->porteuse_fr;
                  echo $selPH ? e($selPH) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- درجة إعاقة + تغطية اجتماعية -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">درجة إعاقة الضحية</div>
              <div class="value">
                @php
                  $selDeg = optional($niveauHand->firstWhere('id', old('id_niv_handicap', optional($victime ?? null)->id_niv_handicap)))->niveau_hand_ar
                            ?? optional($niveauHand->firstWhere('id', old('id_niv_handicap', optional($victime ?? null)->id_niv_handicap)))->niveau_hand_fr;
                  echo $selDeg ? e($selDeg) : '—';
                @endphp
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">نوع التغطية الاجتماعية للضحية</div>
              <div class="value">
                @php
                  $selCov = optional($couvSocialeList->firstWhere('id', old('id_couv_sociale', optional($victime ?? null)->id_couv_sociale)))->couv_sociale_ar
                            ?? optional($couvSocialeList->firstWhere('id', old('id_couv_sociale', optional($victime ?? null)->id_couv_sociale)))->couv_sociale_fr;
                  echo $selCov ? e($selCov) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- القدرة على القيام بشؤونها الشخصية -->
          <div class="col-12">
            <div class="view-row">
              <div class="label">القدرة على القيام بشؤونها الشخصية</div>
              <div class="value">
                {!! $showBool(old('id_autonomie_personnel', optional($victime ?? null)->id_autonomie_personnel)) !!}
              </div>
            </div>

            <div class="mt-2" id="raison-non-autonomie" style="{{ old('id_autonomie_personnel', optional($victime ?? null)->id_autonomie_personnel) === '0' ? '' : 'display:none;' }}">
              <div class="view-row">
                <div class="label">سبب عدم القدرة</div>
                <div class="value">{{ old('raison_non_autonomie', optional($victime ?? null)->raison_non_autonomie) ?? '—' }}</div>
              </div>
            </div>
          </div>

          <!-- الوضعية المهنية -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الوضعية المهنية</div>
              <div class="value">
                @php
                  $selSP = optional($sitProList->firstWhere('id', old('id_sit_pro', optional($victime ?? null)->id_sit_pro)))->sit_pro_ar
                           ?? optional($sitProList->firstWhere('id', old('id_sit_pro', optional($victime ?? null)->id_sit_pro)))->sit_pro_fr;
                  echo $selSP ? e($selSP) : '—';
                @endphp
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">سبب "غير مباشرة للعمل"</div>
              <div class="value">
                @php
                  $selSPI = optional($sitProInactif->firstWhere('id', old('id_sit_pro_inactif', optional($victime ?? null)->id_sit_pro_inactif)))->raison_inactif_ar
                           ?? optional($sitProInactif->firstWhere('id', old('id_sit_pro_inactif', optional($victime ?? null)->id_sit_pro_inactif)))->raison_inactif_fr;
                  echo $selSPI ? e($selSPI) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- مهنة المجال -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">مهنة الضحية (مجال)</div>
              <div class="value">
                @php
                  $selDom = optional($domaineProList->firstWhere('id', old('id_domaine_pro', optional($victime ?? null)->id_domaine_pro)))->domaine_ar
                            ?? optional($domaineProList->firstWhere('id', old('id_domaine_pro', optional($victime ?? null)->id_domaine_pro)))->domaine_fr;
                  echo $selDom ? e($selDom) : '—';
                @endphp
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">انتفاع بخدمات مكتب التشغيل / عمل مستقل</div>
              <div class="value">
                @php
                  $selServ = optional($servicesBureau->firstWhere('id', old('id_bureau_emploi', optional($victime ?? null)->id_bureau_emploi)))->service_emploi_ar
                            ?? optional($servicesBureau->firstWhere('id', old('id_bureau_emploi', optional($victime ?? null)->id_bureau_emploi)))->service_emploi_fr;
                  echo $selServ ? e($selServ) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- نوع الإقامة -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">نوع إقامة الضحية</div>
              <div class="value">
                @php
                  $selRes = optional($typeResidence->firstWhere('id', old('id_type_residence', optional($victime ?? null)->id_type_residence)))->type_residence_ar
                            ?? optional($typeResidence->firstWhere('id', old('id_type_residence', optional($victime ?? null)->id_type_residence)))->type_residence_fr;
                  echo $selRes ? e($selRes) : '—';
                @endphp
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الانتفاع ببرامج التمكين / المساعدة</div>
              <div class="value">
                @php
                  $selAid = optional($aidesSocioeco->firstWhere('id', old('id_aide_socioeco', optional($victime ?? null)->id_aide_socioeco)))->aide_ar
                            ?? optional($aidesSocioeco->firstWhere('id', old('id_aide_socioeco', optional($victime ?? null)->id_aide_socioeco)))->aide_fr;
                  echo $selAid ? e($selAid) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- تواتر العنف -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">تواتر العنف</div>
              <div class="value">
                @php
                  $selFreq = optional($frequences->firstWhere('id', old('id_frequence_violence', optional($violence ?? null)->id_frequence_violence)))->frequence_ar
                            ?? optional($frequences->firstWhere('id', old('id_frequence_violence', optional($violence ?? null)->id_frequence_violence)))->frequence_fr;
                  echo $selFreq ? e($selFreq) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- توقيت التعرض -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">توقيت التعرض إلى العنف</div>
              <div class="value">
                @php
                  $selHeure = optional($heuresViol->firstWhere('id', old('id_heure_violence', optional($violence ?? null)->id_heure_violence)))->heure_ar
                             ?? optional($heuresViol->firstWhere('id', old('id_heure_violence', optional($violence ?? null)->id_heure_violence)))->heure_fr;
                  echo $selHeure ? e($selHeure) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- نوع اليوم -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">نوع اليوم</div>
              <div class="value">
                @php
                  $selTypeJour = optional($typeJour->firstWhere('id', old('id_type_jour', optional($violence ?? null)->id_type_jour)))->type_jr_ar
                                ?? optional($typeJour->firstWhere('id', old('id_type_jour', optional($violence ?? null)->id_type_jour)))->type_jr_fr;
                  echo $selTypeJour ? e($selTypeJour) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- أشكال العنف -->
          <div class="col-12">
            <div class="view-row">
              <div class="label">أشكال العنف</div>
              <div class="value">
                @php
                  $labels = [];
                  foreach($typeViolence as $tv){
                    if(in_array((string)$tv->id, (array)$selectedTypes)){
                      $labels[] = $tv->type_viol_ar ?? $tv->type_viol_fr;
                    }
                  }
                @endphp

                @if(count($labels))
                  <div class="chips">
                    @foreach($labels as $lab)
                      <span class="chip">{{ $lab }}</span>
                    @endforeach
                  </div>
                @else
                  — 
                @endif
              </div>
            </div>
          </div>

          <!-- مكان العنف -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">مكان العنف</div>
              <div class="value">
                @php
                  $selLieu = optional($lieuxViol->firstWhere('id', old('id_lieu_violence', optional($violence ?? null)->id_lieu_violence)))->lieu_ar
                            ?? optional($lieuxViol->firstWhere('id', old('id_lieu_violence', optional($violence ?? null)->id_lieu_violence)))->lieu_fr;
                  echo $selLieu ? e($selLieu) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- وسائل العنف في الفضاء الافتراضي -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">وسيلة العنف في الفضاء الافتراضي</div>
              <div class="value">
                @php
                  $selMoy = optional($moyensVir->firstWhere('id', old('id_moyens_violence_virtuelle', optional($violence ?? null)->id_moyens_violence_virtuelle)))->moyen_ar
                          ?? optional($moyensVir->firstWhere('id', old('id_moyens_violence_virtuelle', optional($violence ?? null)->id_moyens_violence_virtuelle)))->moyen_fr;
                  echo $selMoy ? e($selMoy) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- التعرض للعنف أثناء الطفولة -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">التعرض للعنف أثناء الطفولة</div>
              <div class="value">
                @php
                  $selEnf = optional($violenceEnf->firstWhere('id', old('id_violence_enfance', optional($violence ?? null)->id_violence_enfance)))->viol_enf_ar
                           ?? optional($violenceEnf->firstWhere('id', old('id_violence_enfance', optional($violence ?? null)->id_violence_enfance)))->viol_enf_fr;
                  echo $selEnf ? e($selEnf) : '—';
                @endphp
              </div>
            </div>
          </div>

          <!-- طلب الضحية -->
          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">طلب الضحية</div>
              <div class="value">
                @php
                  $selDem = optional($demandesList->firstWhere('id', old('id_demande', optional($signalement ?? null)->id_demande_victime)))->demande_ar
                            ?? optional($demandesList->firstWhere('id', old('id_demande', optional($signalement ?? null)->id_demande_victime)))->demande_fr;
                  echo $selDem ? e($selDem) : '—';
                @endphp
              </div>
            </div>
          </div>

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

  <br>
<div dir="rtl" style="max-width:98%;">

  {{-- Presentational CSS for consult / show mode (overrides inputs and aligns label+value inline) --}}
  <style>
    .view-row { display:flex; align-items:center; gap: .75rem; padding: .35rem 0; }
    .view-row .label { width: 220px; min-width: 150px; font-weight: 700; color: rgb(17,24,39); }
    .view-row .value {
      flex:1;
      padding: .45rem .6rem;
      border-bottom: 1px dashed rgba(11,37,92,0.06);
      color: rgba(10,10,10,0.9);
      background: transparent;
      line-height: 1.4;
      min-height: 36px;
      display:flex;
      align-items:center;
      gap: .5rem;
      word-break: break-word;
    }

    .view-help { font-size:.82rem; color: rgba(11,37,92,0.45); margin-top:.25rem; }

    .chips { display:flex; gap:.5rem; flex-wrap:wrap; }
    .chip {
      padding:.25rem .5rem;
      border-radius:.5rem;
      background: rgba(11,37,92,0.05);
      border: 1px solid rgba(11,37,92,0.03);
      font-size:.88rem;
      color: rgb(11,37,92);
    }

    .boolean-yes { color: #0b76ff; font-weight:700; }
    .boolean-no  { color: #e63737; font-weight:700; }

    @media (max-width:575.98px) {
      .view-row { flex-direction:column; align-items:flex-start; }
      .view-row .label { width:100%; min-width:auto; }
      .view-row .value { width:100%; }
    }

    /* make sure any leftover form controls don't visually appear */
    .form-control, .form-select, .form-check-input, textarea { border: none !important; box-shadow:none !important; background: transparent !important; padding:0 !important; margin:0 !important; }
    /* table visuals for children */
    #children-table { border-collapse:collapse; width:100%; }
    #children-table th, #children-table td { border: none; padding: .5rem; vertical-align: middle; }
    #children-table thead th { border-bottom: 1px dashed rgba(11,37,92,0.06); font-weight:700; background:transparent; }
    .small-muted { font-size:.85rem; color: rgba(11,37,92,0.45); }
  </style>

  @php
    // helper to render yes/no nicely
    $showBool = function($v){
      if ($v === null || $v === '') return '—';
      if ((string)$v === '1') return '<span class="boolean-yes">نعم</span>';
      if ((string)$v === '0') return '<span class="boolean-no">لا</span>';
      return e($v);
    };

    // Normalize children as in your original snippet
    $rawChildren = old('children') ?? ($children->isNotEmpty() ? $children->toArray() : []);
    $initialChildren = collect($rawChildren)->map(function($c) {
        $sex = null;
        if (is_array($c)) {
            $sex = $c['sex'] ?? $c['gender'] ?? null;
            $id_age = $c['id_age_enf'] ?? $c['id_age_enf'] ?? null;
            $id_niv = $c['id_niveau_edu_enf'] ?? $c['id_niveau_edu_enf'] ?? null;
            $decroche = $c['decroche_scolaire'] ?? $c['decroche_scolaire'] ?? null;
            $porteur = $c['porteur_handicap'] ?? $c['porteur_handicap'] ?? null;
            $lien = $c['lien_parente'] ?? $c['lien_parente'] ?? null;
        } else {
            $sex = $c->sex ?? $c->gender ?? null;
            $id_age = $c->id_age_enf ?? null;
            $id_niv = $c->id_niveau_edu_enf ?? null;
            $decroche = $c->decroche_scolaire ?? null;
            $porteur = $c->porteur_handicap ?? null;
            $lien = $c->lien_parente ?? null;
        }

        return [
            'gender' => $sex,
            'id_age_enf' => $id_age,
            'id_niveau_edu_enf' => $id_niv,
            'decroche_scolaire' => $decroche,
            'porteur_handicap' => $porteur,
            'lien_parente' => $lien,
        ];
    })->toArray();

    $initialCount = count($initialChildren);

    // risks normalization (from your snippet)
    $dbRv = isset($violence) && $violence && $violence->risquesVictime ? $violence->risquesVictime->pluck('id')->map(fn($i)=>(string)$i)->toArray() : [];
    $dbRa = isset($violence) && $violence && $violence->risquesAgresseur ? $violence->risquesAgresseur->pluck('id')->map(fn($i)=>(string)$i)->toArray() : [];
    $dbRvv = isset($violence) && $violence && $violence->risquesViolence ? $violence->risquesViolence->pluck('id')->map(fn($i)=>(string)$i)->toArray() : [];

    $oldRvRaw = old('risques_victime', $dbRv); $oldRaRaw = old('risques_agresseur', $dbRa); $oldRvvRaw = old('risques_violence', $dbRvv);
    $oldRv = is_array($oldRvRaw) ? array_map('strval', $oldRvRaw) : [];
    $oldRa = is_array($oldRaRaw) ? array_map('strval', $oldRaRaw) : [];
    $oldRvv = is_array($oldRvvRaw) ? array_map('strval', $oldRvvRaw) : [];
  @endphp

  <!-- Section: الأطفال المرافقون -->
  <div>

        <div class="section-title">
   <h4 class="accordion-header" id="heading-timing">الأطفال المرافقون  </h4>
    </div>
 
    
    <div>
      <div>

        <div class="row g-2 align-items-center mb-2">
          <div class="col-12 col-md-3">
            <div class="view-row">
              <div class="label">عدد الأطفال</div>
              <div class="value">{{ old('children_count', optional($victime ?? null)->nombre_enfants) ?? '—' }}</div>
            </div>
          </div>

          <div class="col-12 col-md-9">
            <!-- keep the hint button visually but non-interactive in consult mode -->
            <div class="view-row">
              <div class="label">&nbsp;</div>
              <div class="value">
                {{-- <button type="button" class="btn btn-outline-secondary btn-sm" disabled>تعبئة تفاصيل الأطفال</button> --}}
                {{-- <span class="small-muted ms-2">عرض تفاصيل الأطفال (عرض فقط)</span> --}}
              </div>
            </div>
          </div>
        </div>

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

                      <td>
                        @php
                          $genderLabel = (isset($c['gender']) && $c['gender'] === 'female') ? 'أنثى' : ((isset($c['gender']) && $c['gender'] === 'male') ? 'ذكر' : '—');
                        @endphp
                        <div class="small">{{ $genderLabel }}</div>
                      </td>

                      <td>
                        @php
                          $ageLabel = $c['id_age_enf'] ? (optional($agesEnf->firstWhere('id', $c['id_age_enf']))->age_ar ?? optional($agesEnf->firstWhere('id', $c['id_age_enf']))->age_fr) : null;
                        @endphp
                        <div class="small">{{ $ageLabel ?? '—' }}</div>
                      </td>

                      <td>
                        @php
                          $nivLabel = $c['id_niveau_edu_enf'] ? (optional($niveauxEduEnf->firstWhere('id', $c['id_niveau_edu_enf']))->niveau_ar ?? optional($niveauxEduEnf->firstWhere('id', $c['id_niveau_edu_enf']))->niveau_fr) : null;
                        @endphp
                        <div class="small">{{ $nivLabel ?? '—' }}</div>
                      </td>

                      <td>
                        @php $dec = isset($c['decroche_scolaire']) && ($c['decroche_scolaire'] == 1 || $c['decroche_scolaire'] === true); @endphp
                        <div>{!! $dec ? '<span class="boolean-yes">نعم</span>' : '<span class="boolean-no">لا</span>' !!}</div>
                      </td>

                      <td>
                        @php $ph = isset($c['porteur_handicap']) && ($c['porteur_handicap'] == 1 || $c['porteur_handicap'] === true); @endphp
                        <div>{!! $ph ? '<span class="boolean-yes">نعم</span>' : '<span class="boolean-no">لا</span>' !!}</div>
                      </td>

                      <td>
                        <div class="small">{{ $c['lien_parente'] ?? '—' }}</div>
                      </td>
                    </tr>
                  @endforeach
                @else
                  <tr><td colspan="7" class="text-center small-muted">لا يوجد أطفال مدخلين</td></tr>
                @endif
              </tbody>
            </table>
          </div>
          <div class="small-muted">تفاصيل عرض فقط — لا يوجد تعديل في وضع الاستعراض</div>
        </div>

        {{-- expose arrays for potential JS read-only features (kept for compatibility) --}}
        <script>
          window.__agesEnf = @json($agesEnf ?? []);
          window.__niveauxEduEnf = @json($niveauxEduEnf ?? []);
          window.__initialChildren = @json($initialChildren);
        </script>

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

  <br>

  <!-- Section: معلومات حول القائم بالعنف -->
  <div>
        <div class="section-title">
    <h4 class="accordion-header" id="heading-timing">معلومات حول القائم بالعنف</h4>
        </div>
    <div>
      <div>
        <div class="row g-3">

          <div class="col-12">
            <div class="view-row">
              <div class="label">القائم بالعنف</div>
              <div class="value">
                @php
                  $selected_relation_victime = old('agresseur_id_relation_victime', optional($agresseur ?? null)->id_relation_victime);
                  $relLabel = $selected_relation_victime ? (optional($relationsVictime->firstWhere('id', $selected_relation_victime))->relation_ar ?? optional($relationsVictime->firstWhere('id', $selected_relation_victime))->relation_fr) : null;
                @endphp
                {{ $relLabel ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">علاقة الشريك الحميمي بالضحية</div>
              <div class="value">
                @php
                  $selPart = old('agresseur_id_relation_part_intime', optional($agresseur ?? null)->id_relation_part_intime);
                  $partLabel = $selPart ? (optional($relationsPartIntime->firstWhere('id', $selPart))->relation_int_ar ?? optional($relationsPartIntime->firstWhere('id', $selPart))->relation_int_fr) : null;
                @endphp
                {{ $partLabel ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">السن</div>
              <div class="value">
                @php $sel_age = old('agresseur_id_age', optional($agresseur)->id_age); $ageLabel = $sel_age ? (optional($ages->firstWhere('id',$sel_age))->age_ar ?? optional($ages->firstWhere('id',$sel_age))->age_fr) : null; @endphp
                {{ $ageLabel ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">المستوى التعليمي</div>
              <div class="value">
                @php $sel_niv = old('agresseur_id_niveau_edu', optional($agresseur)->id_niveau_edu); $nivLabel = $sel_niv ? (optional($niveauxEdu->firstWhere('id',$sel_niv))->niveau_ar ?? optional($niveauxEdu->firstWhere('id',$sel_niv))->niveau_fr) : null; @endphp
                {{ $nivLabel ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">الوضعية المهنية</div>
              <div class="value">
                @php $sel_sit_pro = old('agresseur_id_sit_pro', optional($agresseur)->id_sit_pro); $sitProLabel = $sel_sit_pro ? (optional($sitProList->firstWhere('id',$sel_sit_pro))->sit_pro_ar ?? optional($sitProList->firstWhere('id',$sel_sit_pro))->sit_pro_fr) : null; @endphp
                {{ $sitProLabel ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">غير مباشر للعمل</div>
              <div class="value">
                @php $sel_inactif = old('agresseur_id_sit_pro_inactif', optional($agresseur)->id_sit_pro_inactif); $inactifLabel = $sel_inactif ? (optional($sitProInactif->firstWhere('id',$sel_inactif))->raison_inactif_ar ?? optional($sitProInactif->firstWhere('id',$sel_inactif))->raison_inactif_fr) : null; @endphp
                {{ $inactifLabel ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="view-row">
              <div class="label">المهنة في حالة مباشرة</div>
              <div class="value">
                @php $sel_domaine = old('agresseur_id_domaine_pro', optional($agresseur)->id_domaine_pro); $domLabel = $sel_domaine ? (optional($domaineProList->firstWhere('id',$sel_domaine))->domaine_ar ?? optional($domaineProList->firstWhere('id',$sel_domaine))->domaine_fr) : null; @endphp
                {{ $domLabel ?? '—' }}
              </div>
            </div>
          </div>

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

  <br>

  <!-- Section: تقييم المخاطر -->
  <div>
            <div class="section-title">    
    <h4 class="accordion-header" id="heading-timing">تقييم المخاطر</h4>
      </div>
    <div>
      <div>

        <div class="row g-3">
          <div class="col-md-6">
            <div class="view-row">
              <div class="label">مؤشرات الخطورة حسب نوعية الهشاشة الضحية</div>
              <div class="value">
                @php
                  $labelsRv = [];
                  foreach($risquesVictime as $rv){
                    if(in_array((string)$rv->id, $oldRv)) $labelsRv[] = $rv->risque_ar ?? $rv->risque_fr;
                  }
                @endphp
                @if(count($labelsRv))
                  <div class="chips">@foreach($labelsRv as $l)<span class="chip">{{ $l }}</span>@endforeach</div>
                @else
                  — 
                @endif
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">مؤشرات الخطورة حسب القائم بالعنف</div>
              <div class="value">
                @php
                  $labelsRa = [];
                  foreach($risquesAgresseur as $ra){
                    if(in_array((string)$ra->id, $oldRa)) $labelsRa[] = $ra->risque_ar ?? $ra->risque_fr;
                  }
                @endphp
                @if(count($labelsRa))
                  <div class="chips">@foreach($labelsRa as $l)<span class="chip">{{ $l }}</span>@endforeach</div>
                @else
                  — 
                @endif
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">مؤشرات الخطورة حسب خصوصية حالة العنف</div>
              <div class="value">
                @php
                  $labelsRvv = [];
                  foreach($risquesViolence as $rvv){
                    if(in_array((string)$rvv->id, $oldRvv)) $labelsRvv[] = $rvv->risque_viol_ar ?? $rvv->risque_viol_fr;
                  }
                @endphp
                @if(count($labelsRvv))
                  <div class="chips">@foreach($labelsRvv as $l)<span class="chip">{{ $l }}</span>@endforeach</div>
                @else
                  — 
                @endif
              </div>
            </div>
          </div>
        </div>

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

  <br>

  <!-- Section: مسار التعهد -->
  @php
    $parcoursObj = $parcours ?? null;
    $selectedParcoursDest = old('parcours_destinations', $parcoursDestIds ?? []);
    if (!is_array($selectedParcoursDest)) $selectedParcoursDest = $selectedParcoursDest ? (array)$selectedParcoursDest : [];
    $selectedParcoursDest = array_map('strval', $selectedParcoursDest);
    $selDecisionPoursuite = (string) (old('id_decision_poursuite_anterieur', $parcoursObj->id_decision_poursuite_anterieur ?? '') ?? '');
    $requisition = (string) old('requisition_medicale', isset($parcoursObj) ? (string)($parcoursObj->requisition_medicale ?? '') : '');
    $selTypeRequisition = (string) old('id_type_requisition', $parcoursObj->id_type_requisition ?? '');
    $eng_san = (string) old('engagement_sanitaire', isset($parcoursObj) ? (string)($parcoursObj->engagement_sanitaire ?? '') : '');
    $selTypeServiceSante = (string) old('id_type_service_sante', $parcoursObj->id_type_service_sante ?? '');
    $cert48 = (string) old('cert_med_48h', isset($parcoursObj) ? (string)($parcoursObj->cert_med_48h ?? '') : '');
    $certFree = (string) old('cert_med_gratuite', isset($parcoursObj) ? (string)($parcoursObj->cert_med_gratuite ?? '') : '');
    $certReq = (string) old('cert_med_par_requisition', isset($parcoursObj) ? (string)($parcoursObj->cert_med_par_requisition ?? '') : '');
    $autres_services = (string) old('autres_services_sante', isset($parcoursObj) ? (string)($parcoursObj->autres_services_sante ?? '') : '');
    $selEngagementJud = (string) old('engagement_judiciaire', isset($parcoursObj) ? (string)($parcoursObj->engagement_judiciaire ?? '') : '');
    $selTypeServiceJud = (string) old('id_type_service_judiciare', $parcoursObj->id_type_service_judiciare ?? '');
    $selConseilJuridique = (string) (old('conseil_juridique', $signalement->conseil_juridique ?? '') ?? '');
    $selServicesOrientation = (string) (old('services_orientation', $signalement->services_orientation ?? '') ?? '');
    $selInstitutionOrientation = (string) (old('id_institution_orientation', $signalement->id_institution_orientation ?? '') ?? '');
    $remarquesParcoursValue = old('remarques_parcours', $signalement->remarques ?? $parcoursObj->autres_services_sante ?? '');
  @endphp

  <div>
                <div class="section-title">    
    <h4 class="accordion-header" id="heading-timing">مسار التعهد</h4>
    </div>
    <div>
      <div>
        <div class="row g-3">

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">المؤسسة التي تم توجيه الضحية والأطفال المرافقون إليها</div>
              <div class="value">
                @php
                  $labelsPd = [];
                  foreach($parcoursDestinations as $pd){
                    if(in_array((string)$pd->id, $selectedParcoursDest)) $labelsPd[] = $pd->destination_ar ?? $pd->destination_fr;
                  }
                @endphp
                @if(count($labelsPd))
                  <div class="chips">@foreach($labelsPd as $l)<span class="chip">{{ $l }}</span>@endforeach</div>
                @else
                  — 
                @endif
              </div>
            </div>
          
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">موقف الضحية من التتبع</div>
              <div class="value">
                @php $selDec = $selDecisionPoursuite ? (optional($decisionsPoursuite->firstWhere('id',$selDecisionPoursuite))->decision_ar ?? optional($decisionsPoursuite->firstWhere('id',$selDecisionPoursuite))->decision_fr) : null; @endphp
                {{ $selDec ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">تحصلت على تسخير طبي</div>
              <div class="value">{!! $showBool($requisition) !!}</div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">نوع التسخير (إن وُجد)</div>
              <div class="value">
                @php $selTR = $selTypeRequisition ? (optional($typeRequisitions->firstWhere('id',$selTypeRequisition))->requisition_ar ?? optional($typeRequisitions->firstWhere('id',$selTypeRequisition))->requisition_fr) : null; @endphp
                {{ $selTR ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">التعهد الصحي</div>
              <div class="value">{!! $showBool($eng_san) !!}</div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">شهادة طبية أولية خلال 48 ساعة</div>
              <div class="value">{!! $showBool($cert48) !!}</div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">الشهادة الطبية الأولية مجانية</div>
              <div class="value">{!! $showBool($certFree) !!}</div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">شهادة طبية في إطار تسخير</div>
              <div class="value">{!! $showBool($certReq) !!}</div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">تمتعت بخدمات صحية أخرى</div>
              <div class="value">{!! $showBool($autres_services) !!}</div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">نوع خدمات صحية (إن وُجد)</div>
              <div class="value">
                @php $selTS = $selTypeServiceSante ? (optional($typeServicesSante->firstWhere('id',$selTypeServiceSante))->service_ar ?? optional($typeServicesSante->firstWhere('id',$selTypeServiceSante))->service_fr) : null; @endphp
                {{ $selTS ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">التعهد القضائي</div>
              <div class="value">{!! $showBool($selEngagementJud) !!}</div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">نوع خدمات إرشاد/قضائية</div>
              <div class="value">
                @php $selTSJ = $selTypeServiceJud ? (optional($typeServicesJudiciare->firstWhere('id',$selTypeServiceJud))->service_ar ?? optional($typeServicesJudiciare->firstWhere('id',$selTypeServiceJud))->service_fr) : null; @endphp
                {{ $selTSJ ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">خدمات الإرشاد القانوني</div>
              <div class="value">{!! $showBool($selConseilJuridique) !!}</div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">خدمات التوجيه</div>
              <div class="value">{!! $showBool($selServicesOrientation) !!}</div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="view-row">
              <div class="label">الجهة التي تم التوجيه إليها</div>
              <div class="value">
                @php $selIns = $selInstitutionOrientation ? (optional($institutionsOrient->firstWhere('id',$selInstitutionOrientation))->institut_ar ?? optional($institutionsOrient->firstWhere('id',$selInstitutionOrientation))->institut_fr) : null; @endphp
                {{ $selIns ?? '—' }}
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="view-row">
              <div class="label">ملاحظات المكلفة بالإنصات</div>
              <div class="value">{{ $remarquesParcoursValue ? e($remarquesParcoursValue) : '—' }}</div>
            </div>
          </div>

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

  <br>

  {{-- small client-side helper to show label of parcours selection if needed (read-only) --}}
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // kept intentionally light — no interactive behaviour in consult mode
    });
  </script>
</div>


<!-- Section: المتابعة الميدانية (read-only, inline label+value) -->
<div>
  <br>
  <div class="section-title">
    <h4 class="accordion-header" id="heading-followup">المتابعة الميدانية</h4>
  </div>

  <div>
    <div>
      <div class="row g-3">

        <!-- الحالة النفسية -->
        <div class="col-md-6">
          <div class="view-row">
            <div class="label">الحالة النفسية للضحية</div>
            <div class="value">
              @php
                $selPsy = optional($etatPsycho->firstWhere('id', old('id_etat_psycho', optional($victime)->id_sit_psycho ?? '')))->etat_psycho_ar
                          ?? optional($etatPsycho->firstWhere('id', old('id_etat_psycho', optional($victime)->id_sit_psycho ?? '')))->etat_psycho_fr;
              @endphp
              {{ $selPsy ? e($selPsy) : '—' }}
            </div>
          </div>
        </div>

        <!-- التدخل الفوري للخط الأخضر -->
        <div class="col-md-6">
          <div class="view-row">
            <div class="label">التدخل الفوري للخط الأخضر</div>
            <div class="value">
              @php
                $selInterv = optional($interventions->firstWhere('id', old('id_interv_immediat', optional($signalement)->id_interv_immediat ?? '')))->interv_ar
                             ?? optional($interventions->firstWhere('id', old('id_interv_immediat', optional($signalement)->id_interv_immediat ?? '')))->interv_fr;
              @endphp
              {{ $selInterv ? e($selInterv) : '—' }}
            </div>
          </div>
        </div>

        <!-- متابعة التعهد الميداني -->
        <div class="col-md-6">
          <div class="view-row">
            <div class="label">متابعة التعهد الميداني</div>
            <div class="value">
              @php
                $selSuivi = optional($suivis->firstWhere('id', old('id_suivi_terrain', optional($victime)->id_suivi_terrain ?? '')))->suivi_ar
                           ?? optional($suivis->firstWhere('id', old('id_suivi_terrain', optional($victime)->id_suivi_terrain ?? '')))->suivi_fr;
              @endphp
              {{ $selSuivi ? e($selSuivi) : '—' }}
            </div>
          </div>
        </div>

      </div> <!-- /.row -->
    </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 disabled type="hidden" name="suivi_terrain" value="0">
      <div class="form-check form-switch">
        <input disabled
          class="form-check-input"
          type="checkbox"
          id="suiviSwitch"
          name="suivi_terrain"
          value="1"
          {{ old('id_suivi_terrain', optional($victime ?? null)->id_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">
      {{-- <button type="submit" class="btn btn-primary" id="btnSaveForm" aria-label="حفظ الاستمارة">
        <i class="bx bx-save me-1"></i> حفظ
      </button> --}}

      {{-- <a href="javascript:history.back()" class="btn btn-outline-dark btn-sm" aria-label="رجوع">
        <i class="bx bx-arrow-back me-1"></i> رجوع
      </a> --}}
    </div>

  </div>
</div>



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


@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  function initDropdownSet(prefix, checkboxSelector, countId, autreInputId) {
    const checkboxes = Array.from(document.querySelectorAll(checkboxSelector));
    const countEl = document.getElementById(countId);
    const autreInput = document.getElementById(autreInputId);



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

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

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

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

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

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

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

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

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

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

        // toggle manually
        instance.toggle();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

});
</script>


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


</div>
@endsection