@extends('layouts.app') 

@section('styles')
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire_edit.css') }}">
<style>
    /* Style pour les champs invalides */
    .is-invalid {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }

    /* Animation pour attirer l'attention */
    @keyframes highlight-invalid {
        0% { background-color: rgba(220, 53, 69, 0.1); }
        50% { background-color: rgba(220, 53, 69, 0.2); }
        100% { background-color: rgba(220, 53, 69, 0.1); }
    }

    .is-invalid:focus {
        animation: highlight-invalid 1s ease-in-out;
    }

    .swal-wide {
        width: 1000px !important;
        max-width: 95vw !important;
    }

    .swal-title-center {
        text-align: center !important;
        font-size: 22px !important;
        font-weight: 600;
    }

    .swal-text {
        font-size: 15px;
        line-height: 1.8;
        text-align: center;
    }

    .is-invalid-file {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }
</style>
@endsection

@section('content')

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

@if ($errors->any())
    <ul class="alert alert-warning">
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
@endif


<!-- Manifestation internationales -->


@if(Auth::check())
<div class="salle-sport-edit it-about-3-area p-relative pt-30 pb-125">  
  <img class="it-about-shape-1" src="{{ asset('assets/img/shape/about-1-1.png') }}" alt="">    
  <div class="container">    
      <nav class="breadcrumb-nav" aria-label="breadcrumb">   
      <ol class="breadcrumb mb-0">        
          <li class="breadcrumb-item">  
			  <a href="{{ route('dashboard') }}">               
			  <i class="bi bi-house-fill"></i>             
			  <span>{{ __('site.mainifestations.key.breadcrumb_home') }}</span>            
			  </a>        
		  </li>   
      <li class="breadcrumb-item"><a href="{{ route('manifestation2.index') }}"><span>{{ __('site.mainifestations.key.breadcrumb_events') }}</span></a></li> 
    <!--  <li class="breadcrumb-item">            <a href="{{ route('manifestation2.index') }}"><span>{{ __('site.mainifestations.key.breadcrumb_international_index') }}</span></a></li>  --> 
      <li class="breadcrumb-item active" aria-current="page">{{ __('site.mainifestations.key.breadcrumb_add_international') }}</li>
      </ol></nav>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
     <form action="{{ route('manifestation2.store') }}"
      method="POST"
      enctype="multipart/form-data"
      id="manifestationForm" lang="ar" class="card shadow-sm p-4">
    @csrf

           <!-- ===== choix du type de formulaire (radio) ===== -->
<div class="form-group mb-3">
    <label class="d-block fw-bold">{{ __('site.form_type.choose_label') }} <span class="text-danger">*</span></label>

    <div class="form-type-row d-flex align-items-center gap-3 mt-2">
        <label class="form-type-option">
            <input type="radio" name="type_formulaire_id" value="12" required >
            <span class="form-type-text">{{ __('site.form_type.national') }}</span>
        </label>

        <label class="form-type-option">
            <input type="radio" name="type_formulaire_id" value="13" required >
            <span class="form-type-text">{{ __('site.form_type.international') }}</span>
        </label>
    </div>

    <!-- single hidden value submitted to server -->

</div>

<style>
/* small, simple styles for the radio options */
.form-type-row { flex-wrap: wrap; }
.form-type-option {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .6rem;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-type-option input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: #394190; /* modern browsers; matches site accent */
}
.form-type-option:hover {
    border-color: #d0d0d0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.form-type-option input[type="radio"]:checked + .form-type-text,
.form-type-option input[type="radio"]:focus + .form-type-text {
    font-weight: 600;
    color: #d82b2a;
}
.form-type-text {
    font-size: 0.95rem;
}
@media (max-width: 576px) {
    .form-type-row { gap: .5rem; }
    .form-type-option { padding: .3rem .45rem; font-size: .92rem; }
}
</style>


        <!-- step1 -->
        <div class="container">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire2->id_type }}">
           <h3 style="font-size:25px;">{{ trans_field($formulaire2, 'type') }}</h3>
            <br>
            <div class="form-section">
                <div class="form-group row mb-3"  style="padding-top:20px;">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.org_name_label') }}</label>
                    <div class="col-sm-10">
                        <input required type="text" class="form-control" name="org[nom]" 
                               placeholder="{{ __('site.mainifestations.key.org_name_placeholder') }}" 
                               maxlength="100"
                               value="{{ old('org.nom') }}"
                               oninput="this.value = this.value.slice(0, 100)">
                    </div>
                </div> 

                <div class="form-group row mb-3" >
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.visa_number_label') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" 
                               maxlength="12"
                               inputmode="numeric"
                               pattern="[0-9]{1,12}"
                               oninput="this.value = this.value.replace(/[^0-9]/g,'').slice(0,12);" 
                               class="form-control" 
                               name="org[num_visa]" 
                               value="{{ old('org.num_visa') }}"
                               onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                    </div>
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.reg_date_label') }}</label>
                    <div class="col-sm-4">
                        <input required type="date" class="form-control" name="org[date_enregistrement]" value="{{ old('org.date_enregistrement') }}" max="{{ now()->toDateString() }}">
                    </div>
                </div>
                
             <!--   <div class="form-group row mb-3" >
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.tax_id_label') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" 
                             name="org[identifiant_fiscal]" 
                             class="form-control" 
                             id="identifiant_fiscal" 
                             maxlength="16"
                             pattern="(?:\d{7}[A-Z](?:\/[A-Z0-9]+)*\/000|\d{7}[A-Z])"
                             value="{{ old('org.identifiant_fiscal') }}"
							 placeholder="{{ __('site.identifiant_fiscal.placeholder') }}"
                          
                            >
                    </div>
					 <div id="identifiantError"
         class="invalid-feedback"
         role="alert"
         data-msg="{{ __('site.identifiant_fiscal.invalid') }}">
        @error('num_identification_fiscale')
            {{ __('site.identifiant_fiscal.invalid') }}
        @else
            &nbsp; {{-- keep one line of height when there's no error --}}
        @enderror
    </div> -->
	
	<div class="form-group row mb-3">
    <label style="color:black;" class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.tax_id_label') }}</label>
    <div class="col-sm-4">
        <!-- compact inline inputs -->
      <!-- compact inline inputs (remplacer l'ancien bloc par celui-ci) -->
      <div class="mf-group d-flex align-items-center" role="group" aria-label="Matricule fiscal">
    <!-- 7 chiffres -->
    <div class="mf-part mf-digits">
        <input type="text"
               id="mf-digits"
               maxlength="7"
               class="form-control form-control-sm step1-field"
               placeholder="0123456"
               oninput="handleMatriculeDigitsInput(this)"
               aria-label="7 chiffres">
    </div>

    <!-- lettre T -->
    <div class="mf-part mf-letter">
        <input type="text"
               id="mf-letterT"
               maxlength="1"
               class="form-control form-control-sm step1-field text-uppercase"
               placeholder="A"
               oninput="handleMatriculeLetterInput(this)"
               aria-label="lettre">
    </div>

    <div class="mf-sep">/</div>

    <!-- lettre 1 -->
    <div class="mf-part mf-letter">
        <input type="text"
               id="mf-letter1"
               maxlength="1"
               class="form-control form-control-sm step1-field text-uppercase"
               placeholder="B"
               oninput="handleMatriculeLetterInput(this)"
               aria-label="lettre">
    </div>

		<div class="mf-sep">/</div>

				<!-- lettre 2 -->
			<div class="mf-part mf-letter">
				<input type="text"
					   id="mf-letter2"
					   maxlength="1"
					   class="form-control form-control-sm step1-field text-uppercase"
					   placeholder="C"
					   oninput="handleMatriculeLetterInput(this)"
					   aria-label="lettre">
			</div>

       <div class="mf-sep">/</div>

			<!-- 3 chiffres code -->
			<div class="mf-part mf-code">
				<input type="text"
					   id="mf-code"
					   maxlength="3"
					   class="form-control form-control-sm step1-field"
					   placeholder="000"
					   oninput="handleMatriculeCodeInput(this)"
					   aria-label="3 chiffres">
			</div>
</div>
  <input type="hidden" id="mf-complete"     name="org[identifiant_fiscal]"  value="">

    </div>

					
					<!-- num fiscal control de saisie  -->
	<script>
document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  // Elements (ensure these IDs match your markup)
  const elDigits = document.getElementById('mf-digits');
  const elLetterT = document.getElementById('mf-letterT');
  const elLetter1 = document.getElementById('mf-letter1');
  const elLetter2 = document.getElementById('mf-letter2');
  const elCode = document.getElementById('mf-code');
  const elHidden = document.getElementById('mf-complete');
  const form = document.getElementById('manifestationForm');

  // defensive: stop if required nodes missing
  if (!elDigits || !elLetterT || !elLetter1 || !elLetter2 || !elCode || !elHidden) {
    console.warn('Matricule inputs or hidden field missing — check IDs: mf-digits, mf-letterT, mf-letter1, mf-letter2, mf-code, mf-complete');
    return;
  }

  // Visual helpers (keeps your original behaviour)
  function markValid(el) { if (!el) return; el.classList.add('is-valid'); el.classList.remove('is-invalid'); }
  function markInvalid(el) { if (!el) return; el.classList.add('is-invalid'); el.classList.remove('is-valid'); }
  function markNeutral(el) { if (!el) return; el.classList.remove('is-invalid','is-valid'); }

  // sanitize & length-limiting handlers
  function handleMatriculeDigitsInput(input) {
    input.value = input.value.replace(/[^0-9]/g, '').slice(0,7);
    if (input.value.length === 7) {
      markValid(input);
      elLetterT.focus();
    } else if (input.value.length > 0) markInvalid(input);
    else markNeutral(input);
    updateMatriculeResult();
  }

  function handleMatriculeLetterInput(input) {
    input.value = input.value.replace(/[^A-Za-z]/g, '').toUpperCase().slice(0,1);
    if (input.value.length === 1) {
      markValid(input);
      if (input.id === 'mf-letterT') elLetter1.focus();
      else if (input.id === 'mf-letter1') elLetter2.focus();
      else if (input.id === 'mf-letter2') elCode.focus();
    } else if (input.value.length === 0) markNeutral(input);
    else markInvalid(input);
    updateMatriculeResult();
  }

  function handleMatriculeCodeInput(input) {
    input.value = input.value.replace(/[^0-9]/g, '').slice(0,3);
    if (input.value.length === 3) markValid(input);
    else if (input.value.length > 0) markInvalid(input);
    else markNeutral(input);
    updateMatriculeResult();
  }

  // Compose the final value and set hidden
  function updateMatriculeResult() {
    const digits = (elDigits.value || '').trim();
    const letterT = (elLetterT.value || '').trim();
    const letter1 = (elLetter1.value || '').trim();
    const letter2 = (elLetter2.value || '').trim();
    const code = (elCode.value || '').trim();

    // Only set when fully completed (keeps backend clean)
    if (digits.length === 7 && letterT.length === 1 && letter1.length === 1 && letter2.length === 1 && code.length === 3) {
      elHidden.value = `${digits}${letterT}/${letter1}/${letter2}/${code}`;
    } else {
      elHidden.value = ''; // clear when incomplete
    }
  }

  // Populate the parts from an existing combined value (best-effort parsing)
  function populateFromExisting(val) {
    if (!val) return;
    val = String(val).trim();

    // common exact format: 7digits + 1 letter + /L1/L2/3digits
    const rxFull = /^\s*(\d{7})([A-Za-z])\/([A-Za-z])\/([A-Za-z])\/(\d{3})\s*$/;
    const m = val.match(rxFull);
    if (m) {
      elDigits.value = m[1];
      elLetterT.value = m[2].toUpperCase();
      elLetter1.value = m[3].toUpperCase();
      elLetter2.value = m[4].toUpperCase();
      elCode.value = m[5];
      markValid(elDigits); markValid(elLetterT); markValid(elLetter1); markValid(elLetter2); markValid(elCode);
      updateMatriculeResult();
      return;
    }

    // fallback: extract 7-digit block, extract last 3-digit block, and first 3 letters found
    const dMatch = val.match(/\d{7}/);
    if (dMatch) elDigits.value = dMatch[0];

    const codeMatch = val.match(/(\d{3})(?!\d)/g);
    if (codeMatch) elCode.value = codeMatch[codeMatch.length - 1];

    const letters = (val.replace(/[^A-Za-z]/g,'') || '').slice(0,3).toUpperCase();
    elLetterT.value = letters.charAt(0) || '';
    elLetter1.value = letters.charAt(1) || '';
    elLetter2.value = letters.charAt(2) || '';

    // mark states and update
    [elDigits, elLetterT, elLetter1, elLetter2, elCode].forEach(i => {
      if (!i) return;
      if (i.value && (i.id === 'mf-digits' ? i.value.length === 7 : i.value.length >= 1)) markValid(i);
      else if (!i.value) markNeutral(i);
      else markInvalid(i);
    });

    updateMatriculeResult();
  }

  // --- Attach listeners for your inline attributes compatibility ---
  elDigits.addEventListener('input', () => handleMatriculeDigitsInput(elDigits));
  elLetterT.addEventListener('input', () => handleMatriculeLetterInput(elLetterT));
  elLetter1.addEventListener('input', () => handleMatriculeLetterInput(elLetter1));
  elLetter2.addEventListener('input', () => handleMatriculeLetterInput(elLetter2));
  elCode.addEventListener('input', () => handleMatriculeCodeInput(elCode));

  // also watch paste/blur/keyup/change to catch autofill or programmatic changes
  [elDigits, elLetterT, elLetter1, elLetter2, elCode].forEach(el => {
    ['change','blur','keyup','paste'].forEach(evt => el.addEventListener(evt, () => updateMatriculeResult()));
  });

  // final safety: ensure hidden is up-to-date just before form submit
  if (form) {
    form.addEventListener('submit', function (ev) {
      try { updateMatriculeResult(); } catch (e) { /* ignore */ }
      // allow submit to continue: server-side validation will accept empty (nullable) or the constructed value
    });
  }

  // --- Initialization: prefer hidden field value if Blade filled it, else try a server-provided JS var ---
  // If you previously set a JS var `initialMatricule`, prefer that. But THE MOST RELIABLE: check the hidden input value itself (Blade can render old value there).
  (function init() {
    try {
      const fromHidden = (elHidden.value || '').trim();
      if (fromHidden) {
        populateFromExisting(fromHidden);
        return;
      }
      // If you still have a server-provided JS variable called initialMatricule (legacy), use it:
      if (typeof initialMatricule !== 'undefined' && initialMatricule) {
        populateFromExisting(initialMatricule);
        return;
      }
      // nothing prefilled: ensure hidden empty and marks neutral
      updateMatriculeResult();
    } catch (e) {
      console.error('Matricule init error', e);
    }
  })();

}); // DOMContentLoaded
</script>
			<!--	-->
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.bank_account_label') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" 
                               class="form-control" 
                               name="org[num_compte_bancaire]" 
                               placeholder="{{ __('site.mainifestations.key.bank_account_placeholder') }}" 
                               maxlength="20"
                               value="{{ old('org.num_compte_bancaire') }}"
                               oninput="this.value = this.value.replace(/\D/g,'').slice(0, 20)">
                    </div>
                </div>

                <div class="form-group row mb-3" >
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.address_label') }}</label>
                    <div class="col-sm-10">
                        <input required type="text" 
                               class="form-control" 
                               name="org[adresse]" 
                               placeholder="{{ __('site.mainifestations.key.address_placeholder') }}" 
                               maxlength="150"
                               value="{{ old('org.adresse') }}"
                               oninput="this.value = this.value.slice(0, 150)">
                    </div>
                </div>

                <div class="form-group row mb-3" >
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.phone_label') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" 
                               class="form-control" 
                               name="org[tel]" 
                               placeholder="{{ __('site.mainifestations.key.phone_placeholder') }}" 
                               maxlength="12"
                               pattern="\d{8,12}"
                               oninput="this.value = this.value.replace(/\D/g,'').slice(0, 12)"
                               value="{{ old('org.tel') }}">
                    </div>
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.fax_label') }}</label>
                    <div class="col-sm-4">
                        <input type="text" 
                               class="form-control" 
                               name="org[fax]" 
                               placeholder="{{ __('site.mainifestations.key.fax_placeholder') }}" 
                               maxlength="12"
                               pattern="\d{8,12}"
                               oninput="this.value = this.value.replace(/\D/g,'').slice(0, 12)"
                               value="{{ old('org.fax') }}">
                    </div>
                </div>

                <div class="form-group row mb-3" >
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.email_label') }}</label>
                    <div class="col-sm-4">
                        <input required type="email" 
                               class="form-control" 
                               name="org[email]" 
                               placeholder="{{ __('site.mainifestations.key.email_placeholder') }}" 
                               maxlength="100"
                               value="{{ old('org.email') }}"
                               oninput="this.value = this.value.slice(0, 100)">
                    </div>
                </div>
            </div>   
        </div>

        <div class="container">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire3->id_type }}">
            <input type="hidden" name="demande_id" value="">
            <h3 style="font-size:25px;">{{ __('site.mainifestations.key.insurance_file_title') }}</h3>
            <br>
            <div class="form-section">
                <div class="form-group row mb-3" style="padding-top:20px;">
                    <label class="col-sm-6 col-form-label">
                        {{ __('site.mainifestations.key.insurance_file_label') }}
                    </label>
                    <div class="col-sm-12">
                        <input required type="file" class="form-control" name="assurance_file" 
                               accept=".pdf,.jpg,.jpeg,.png"
                               onchange="validateFile(this, 2048)">
                        @error('assurance_file')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- step2 -->
        <div class="container">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire3->id_type }}">
            <input type="hidden" name="demande_id" value="">

            
            <h3 style="font-size:25px;">{{ trans_field($formulaire3, 'type') }}</h3>
            <br>

            <div class="form-section">
                <div class="form-group row mb-3" style="padding-top:20px;">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.event_name_label') }}</label>
                    <div class="col-sm-10">
                        <input required type="text" class="form-control" name="nom_even" 
                               placeholder="{{ __('site.mainifestations.key.event_name_placeholder') }}" 
                               maxlength="100" 
                               value="{{ old('nom_even') }}"
                               oninput="this.value = this.value.slice(0, 100)">
                    </div>
                </div>
                <div class="form-group row mb-3">
                    <label class="col-sm-12 col-form-label">{{ __('site.mainifestations.key.objectives_label') }}</label>
                    <div class="col-sm-12">
                        <textarea required name="objectifs" class="form-control" rows="3"
                                  maxlength="1000"
                                  oninput="this.value = this.value.slice(0, 1000)">{{ old('objectifs') }}</textarea>
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-12 col-form-label">{{ __('site.mainifestations.key.contents_label') }}</label>
                    <div class="col-sm-12">
                        <textarea required name="contenus" class="form-control" rows="3"
                                  maxlength="1000"
                                  oninput="this.value = this.value.slice(0, 1000)">{{ old('contenus') }}</textarea>
                    </div>
                </div>
      <div class="container">
          <input type="hidden" name="id_formulaire" value="{{ $formulaire3->id_type }}">
          <input type="hidden" name="demande_id" value="">  
       <!--   <h3 style="font-size:25px;">{{ __('site.mainifestations.key.technical_file_title') }}</h3> -->
          <br>
          <div class="form-section">
              <div class="form-group row mb-3" style="padding-top:20px;">
                  <label class="col-sm-6 col-form-label">
                      {{ __('site.mainifestations.key.technical_file_label') }}
                  </label>
                  <div class="col-sm-12">
                      <input required type="file" class="form-control" name="technique_file" 
                             accept=".pdf,.jpg,.jpeg,.png"
                             onchange="validateFile(this, 2048)">
                      @error('technique_file')
                          <small class="text-danger">{{ $message }}</small>
                      @enderror
                  </div> 
              </div>
          </div>
      </div>
<div class="form-group row mb-3">
    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.event_date_label') }}</label>
    <div class="col-sm-4">
        <input required id="event_date" type="date" class="form-control" name="date"
               value="{{ old('date') }}"
               min="{{ date('Y-m-d', strtotime('+30 days')) }}">

        <!-- small hint shown always (muted) -->
       

        <!-- inline error filled by JS if client validation fails -->
        <div id="event_date_error" class="text-danger small mt-1" style="display:none;">
            {{-- message filled by JS --}}
        </div>
    </div>

    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.event_time_label') }}</label>
    <div class="col-sm-4">
        <input required type="time" class="form-control" name="heure" value="{{ old('heure') }}">
    </div>
	<div class="col-sm-12">
	 <small id="event_date_hint" class="form-text text-muted mt-1">
            {{ __('site.mainifestations.key.event_date_hint') }}
        </small>
	</div>
</div>



                <div class="form-group row">
                <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.gouvernorat_label') }}</label>
                <div class="col-sm-4 postbox__select">
                    <select required class="form-control" id="gouvernorat_id" name="gouvernorat_id">
                        <option value="" disabled selected>{{ __('site.mainifestations.key.choose_placeholder') }}</option>
                        @foreach($gouvernorats as $gouv)
                            <option value="{{ $gouv->id_gouver }}" {{ old('gouvernorat_id') == $gouv->id_gouver ? 'selected' : '' }}>{{ trans_field($gouv, 'nom') }}</option>
                        @endforeach
                    </select>
                </div>
                <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.delegation_label') }}</label>
                <div class="col-sm-4 postbox__select">
                    <select required class="form-control" id="delegation_id" name="delegation_id" disabled>
                        <option value="" disabled selected>{{ __('site.mainifestations.key.choose_placeholder') }}</option>
                    </select>
                </div>
            </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.installations_label') }}</label>
                    <div class="col-sm-10">
                        <textarea required name="instalation_sportives" class="form-control" rows="2"
                                  maxlength="200"
                                  oninput="this.value = this.value.slice(0, 200)">{{ old('instalation_sportives') }}</textarea>
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.public_routes_used') }}</label>
                    <div class="col-sm-10">
                        <textarea required name="routes_pub_utilise" class="form-control" rows="2"
                                  maxlength="1000"
                                  oninput="this.value = this.value.slice(0, 1000)"></textarea>
                    </div>
                </div>
                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.reference_label') }}</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="reference" maxlength="100" value="{{ old('reference') }}"
                               oninput="this.value = this.value.slice(0, 100)">
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.estimated_revenue_label') }}</label>
                    <div class="col-sm-4">
                        <input type="number" 
                               step="0.001" 
                               min="0" 
                               max="999999999.999"  
                               class="form-control" 
                               name="estimation_evenement" 
                               id="estimation_evenement" 
                               value="{{ old('estimation_evenement') }}"
                               oninput="calculateDifference()">
                    </div>
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.estimated_cost_label') }}</label>
                    <div class="col-sm-4">
                        <input type="number" 
                               step="0.001" 
                               min="0" 
                               max="999999999.999"  
                               class="form-control" 
                               name="cout_total_evenement" 
                               id="cout_total_evenement" 
                               value="{{ old('cout_total_evenement') }}"
                               oninput="calculateDifference()">
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.difference_label') }}</label>
                    <div class="col-sm-4">
                        <input type="number" 
                               step="0.001" 
                               min="0" 
                               max="999999999.999"  
                               class="form-control" 
                               name="difference_estimee" 
                               id="difference_estimee" 
                               value="{{ old('difference_estimee') }}" readonly>
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.financial_grants') }}</label>
                    <div class="col-sm-4">
                        <input required type="file" class="form-control" name="prix_especes" 
                             accept=".pdf,.jpg,.jpeg,.png"
                             onchange="validateFile(this, 2048)">
                    </div>
					  <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.in_kind_grants') }}</label>
                    <div class="col-sm-4">
                        <input required type="file" class="form-control" name="prix_objet" 
                             accept=".pdf,.jpg,.jpeg,.png"
                             onchange="validateFile(this, 2048)">
                    </div>
                </div>
                <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
            </div>
        </div>

        <!-- step3 -->
        <div class="container">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire4->id_type }}">
            <h3 style="font-size:25px;">{{ trans_field($formulaire4, 'type') }}</h3>
            <br>

            <div class="form-section">
                <div class="form-group row">
                    <label class="col-sm-6 col-form-label">{{ __('site.mainifestations.key.organizers_list_label') }}</label>
                    <table id="membres-table" class="custom-table">
                        <thead>
                            <tr>
                                <th>{{ __('site.mainifestations.key.col_name') }}</th>
                                <th>{{ __('site.mainifestations.key.col_role') }}</th>
                                <th>{{ __('site.mainifestations.key.col_nationality') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="membres-body">
                            <tr>
                                <td data-label="{{ __('site.mainifestations.key.col_name') }}">
                                    <input required type="text" name="membres[0][nom_prenom]" 
                                           class="form-control" 
                                           placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}"
                                           maxlength="255"
                                           oninput="this.value = this.value.slice(0, 255)">
                                </td>
                                <td data-label="{{ __('site.mainifestations.key.col_role') }}">
                                    <input required type="text" name="membres[0][role]"  
                                           readonly value="{{ __('site.mainifestations.key.organizer_chair') }}" 
                                           class="form-control bg-white" 
                                           placeholder="{{ __('site.mainifestations.key.col_role_placeholder') }}">
                                </td>
                                <td data-label="{{ __('site.mainifestations.key.col_nationality') }}">
                                    <input required type="text" name="membres[0][nationalite]" 
                                           class="form-control" 
                                           placeholder="{{ __('site.mainifestations.key.col_nationality_placeholder') }}"
                                           maxlength="255"
                                           oninput="this.value = this.value.slice(0, 255)">
                                </td>
                                <td class="action-buttons">
                                    <div style="width: 40px; height: 31px;"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-success" onclick="addOrganisateurRow()">
                        {{ __('site.mainifestations.key.add_row') }}
                    </button>
                </div>

                <div class="form-group row mt-4">
                    <label class="col-sm-6 col-form-label">{{ __('site.mainifestations.key.officials_invited_label') }} </label>
                    <table id="invites-table" class="custom-table">
                        <thead>
                            <tr>
                                <th>{{ __('site.mainifestations.key.col_name') }}</th>
                                <th>{{ __('site.mainifestations.key.col_role') }}</th>
                                <th>{{ __('site.mainifestations.key.col_nationality') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="invites-body">
                            <tr>
                                <td data-label="{{ __('site.mainifestations.key.col_name') }}">
                                    <input required type="text" name="invites[0][nom_prenom]" 
                                           class="form-control" 
                                           placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}"
                                           maxlength="255"
                                           oninput="this.value = this.value.slice(0, 255)">
                                </td>
                                <td data-label="{{ __('site.mainifestations.key.col_role') }}">
                                    <input required type="text" name="invites[0][role]" 
                                           class="form-control" 
                                           placeholder="{{ __('site.mainifestations.key.col_role_placeholder') }}"
                                           maxlength="255"
                                           oninput="this.value = this.value.slice(0, 255)">
                                </td>
                                <td data-label="{{ __('site.mainifestations.key.col_nationality') }}">
                                    <input required type="text" name="invites[0][nationalite]" 
                                           class="form-control" 
                                           placeholder="{{ __('site.mainifestations.key.col_nationality_placeholder') }}"
                                           maxlength="255"
                                           oninput="this.value = this.value.slice(0, 255)">
                                </td>
                                <td class="action-buttons">
                                    <button type="button" class="btn-icon btn-icon--danger" onclick="removeRow(this)">{{ __('site.mainifestations.key.delete') }}</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-success" onclick="addInviteRow()">
                        {{ __('site.mainifestations.key.add_row') }}
                    </button>
                </div>
            </div>
        </div>

        <!-- step4 -->
        <div class="container">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire5->id_type }}">
            <h3 style="font-size:25px;">{{ trans_field($formulaire5, 'type') }}</h3>
            <br>

           <div class="form-section">
                <div class="form-group row">
                    <label class="col-sm-12 col-form-label">{{ __('site.mainifestations.key.assocs_participating_label') }}</label>
                    <div class="table-responsive">
                        <table id="assoc-table" class="custom-table table table-bordered text-center align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th rowspan="2" style="width:4%">{{ __('site.mainifestations.key.col_index') }}</th>
                                    <th rowspan="2" style="width:20%">{{ __('site.mainifestations.key.col_association') }}</th>
                                    <th colspan="2" style="width:20%">{{ __('site.mainifestations.key.col_num_athletes') }}</th>
                                    <th rowspan="2" style="width:10%">{{ __('site.mainifestations.key.col_escorts') }}</th>
                                    <th rowspan="2" style="width:10%">{{ __('site.mainifestations.key.col_total') }}</th>
                                    <th rowspan="2" style="width:8%">{{ __('site.mainifestations.key.col_action') }}</th>
                                </tr>
                                <tr>
                                    <th style="width:10%">{{ __('site.mainifestations.key.col_males') }}</th>
                                    <th style="width:10%">{{ __('site.mainifestations.key.col_females') }}</th>
                                </tr>
                            </thead>

                            <tbody id="assoc_participantes-body">
                                <tr>
                                    <td class="row-number">1</td>
                                    <td><input required type="text" name="assoc_participantes[0][nom]" 
                                               class="form-control" 
                                               placeholder="{{ __('site.mainifestations.key.assoc_name_placeholder') }}"
                                               maxlength="100"
                                               oninput="this.value = this.value.slice(0, 100)"></td>
                                    <td><input required type="text" 
                                               name="assoc_participantes[0][num_athlete_h]" 
                                               class="form-control text-center" 
                                               placeholder="{{ __('site.mainifestations.key.col_males') }}" 
                                               min="0"
                                               max="999999"
                                               maxlength="6"
                                               oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); calculateRowTotal(this);"></td>
                                    <td><input required type="text" 
                                               name="assoc_participantes[0][num_athlete_f]" 
                                               class="form-control text-center" 
                                               placeholder="{{ __('site.mainifestations.key.col_females') }}" 
                                               min="0"
                                               max="999999"
                                               maxlength="6"
                                               oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); calculateRowTotal(this);"></td>
                                    <td><input required type="text" 
                                               name="assoc_participantes[0][accompagnants]" 
                                               class="form-control text-center" 
                                               placeholder="{{ __('site.mainifestations.key.col_escorts') }}" 
                                               min="0"
                                               max="999999"
                                               maxlength="6"
                                               oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); calculateRowTotal(this);"></td>
                                    <td><input required type="number" name="assoc_participantes[0][total]" 
                                               class="form-control text-center" readonly placeholder="0"></td>
                                    <td><button type="button" class="btn-icon btn-icon--danger" onclick="removeAssocRow(this)">{{ __('site.mainifestations.key.delete') }}</button></td>
                                </tr>
                            </tbody>

                            <tfoot>
                                <tr class="fw-bold">
                                    <td colspan="2" class="text-center">{{ __('site.mainifestations.key.total_label') }}</td>
                                    <td>
                                        <input type="number" id="total-males" class="form-control text-center" readonly value="0">
                                    </td>
                                    <td>
                                        <input type="number" id="total-females" class="form-control text-center" readonly value="0">
                                    </td>
                                    <td>
                                        <input type="number" id="total-accompagnants" class="form-control text-center" readonly value="0">
                                    </td>
                                    <td>
                                        <input type="number" id="total-general" class="form-control text-center fw-bold" readonly value="0">
                                    </td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    <button type="button" class="btn btn-success mt-2" onclick="addAssocRow()">{{ __('site.mainifestations.key.add_row') }}</button>
                </div>
            </div>
        </div>

 <div class="container">
        <input type="hidden" name="id_formulaire" value="{{ $formulaire6->id_type }}">
        <h3 style="font-size:25px;">{{ trans_field($formulaire6, 'type') }}</h3>
        <div class="form-section">
            <div class="form-group row">
                <label class="col-sm-12 col-form-label">{{ __('site.mainifestations.key.individual_athletes_label') }}</label>
                <input type="file" class="form-control" name="liste_prel_ath_ind"
                       accept=".pdf,.jpg,.jpeg,.png" onchange="validateFile(this, 2048)">
            </div>
        </div>
    </div>

    <!-- step6 -->
    <div class="container">
        <input type="hidden" name="id_formulaire" value="{{ $formulaire7->id_type }}">
        <h3 style="font-size:25px;">{{ trans_field($formulaire7, 'type') }}</h3>
        <div class="form-section">
            <div class="form-group row">
                <label class="col-sm-12 col-form-label">{{ __('site.mainifestations.key.athletes_participating_label') }}</label>
                <input type="file" class="form-control" name="liste_ath_ass_cat"
                       accept=".pdf,.jpg,.jpeg,.png" onchange="validateFile(this, 2048)">
            </div>
        </div>
    </div>

    <!-- conditional block (parts-for-13) — do NOT disable inputs here -->
    <div id="parts-for-13" style="display:none;">
        <div class="container" id="formulaire8-block">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire8->id_type }}">
            <h3 style="font-size:25px;">{{ trans_field($formulaire8, 'type') }}</h3>

            <div class="form-section">
                <div class="form-group row">
                    <label class="col-sm-6 col-form-label">{{ __('site.mainifestations.key.tourists_list_label') }}</label>
                    <input type="file" class="form-control" name="fiche_visite_pers_off_etran"
                           accept=".pdf,.jpg,.jpeg,.png" onchange="validateFile(this, 2048)">
                </div>
            </div>

            <div class="form-section">
                <div class="form-group row">
                    <label class="col-sm-6 col-form-label">{{ __('site.mainifestations.key.judges_officials_list_label') }}</label>
                    <input type="file" class="form-control" name="liste_arbitres_res"
                           accept=".pdf,.jpg,.jpeg,.png" onchange="validateFile(this, 2048)">
                </div>
            </div>
        </div>

        <div class="container" id="formulaire9-block">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire9->id_type }}">
            <h3 style="font-size:25px;">{{ trans_field($formulaire9, 'type') }}</h3>
            <div class="form-section">
                <div class="form-group row">
                    <label class="col-sm-6 col-form-label">{{ __('site.mainifestations.key.foreign_officials_list_label') }}</label>
                    <input type="file" class="form-control" name="fiche_visite_dele_etran"
                           accept=".pdf,.jpg,.jpeg,.png" onchange="validateFile(this, 2048)">
                </div>
            </div>
        </div>
    </div>

         <div class="container">
          <input type="hidden" name="id_formulaire" value="{{ $formulaire3->id_type }}">
          <input type="hidden" name="demande_id" value="">  
          <h3 style="font-size:25px;">{{ __('site.mainifestations.key.preliminary_agreement_title') }}</h3>
          <br>
          <div class="form-section">
              <div class="form-group row mb-3" style="padding-top:20px;">
                  <label class="col-sm-10 col-form-label">
                      {{ __('site.mainifestations.key.preliminary_agreement_label') }}
                  </label>
                  <div class="col-sm-12">
                      <input required type="file" class="form-control" name="accord_file" 
                             accept=".pdf,.jpg,.jpeg,.png"
                             onchange="validateFile(this, 2048)">
                      @error('accord_file')
                          <small class="text-danger">{{ $message }}</small>
                      @enderror
                  </div>
              </div>
          </div>
      </div>



        <div class="container">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire3->id_type }}">
            <input type="hidden" name="demande_id" value="">

            <h3 style="font-size:25px; text-align:center;">{{ __('site.mainifestations.key.request_title') }}</h3>
            <br>

            <div class="form-section" style="direction: rtl; text-align: right;">
                <div class="form-group row mb-3" style="padding-top:20px;">
                    <label class="col-sm-12 col-form-label" style="font-size: 18px;">
                        {{ __('site.mainifestations.key.request_instructions') }}
                    </label>

                    <div class="col-sm-12 mt-2">
                        <a href="{{ asset('storage/manifestations/demande_manifestation_intern.pdf') }}" 
                        class="btn btn-outline-primary" 
                        target="_blank" 
                        style="font-size:16px;">
                            <i class="la la-download me-1"></i> {{ __('site.mainifestations.key.download_request') }}
                        </a>
                    </div>

                    <div class="col-sm-12 mt-4">
                        <label for="demande_file" class="form-label" style="font-size: 16px;">
                            {{ __('site.mainifestations.key.upload_signed_request_label') }}
                        </label>
                        <input required type="file" class="form-control" name="demande_file" 
                               accept=".pdf,.jpg,.jpeg,.png"
                               onchange="validateFile(this, 2048)">

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

       <div class="form-group row text-center" style="padding-top:50px;">
             <div class="d-flex justify-content-end mb-4">
                <button type="button" class="btn btn-success font-weight-medium" id="confirmSubmitBtn">
                    {{ __('site.mainifestations.key.submit') }}
                </button>
            </div>
        </div>

    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  const form = document.getElementById('manifestationForm');
  const submitBtn = document.getElementById('confirmSubmitBtn');
  const partsContainer = document.getElementById('parts-for-13'); // block to show/hide
  const radios = Array.from(document.querySelectorAll('input[name="type_formulaire_id"]')); // CORRECT name

  if (!form) {
    console.warn('manifestationForm not found — script halted.');
    return;
  }

  // --- text resources (use data attributes on the <form> to set translations) ---
  const SWAL_TITLE = form.dataset.swalTitle || 'Confirm submission';
  const SWAL_MAIN = form.dataset.swalMainMsg || 'Are you sure you want to submit this form?';
  const SWAL_NOTE = form.dataset.swalNoteMsg || '';
  const SWAL_CONFIRM = form.dataset.confirmText || 'Confirm';
  const SWAL_CANCEL = form.dataset.cancelText || 'Cancel';
  const SWAL_SUBMITTING = form.dataset.submittingText || (submitBtn ? submitBtn.textContent.trim() : 'Submitting');

  // --- helpers / validators ---
  const RX_PHONE = /^\d{8,12}$/;
  const RX_EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const RX_CIN = /^\d{8}$/;

  function validatePhoneValue(v) { return RX_PHONE.test(String(v).replace(/\D/g, '')); }
  function validateEmailValue(v) { return RX_EMAIL.test(String(v).trim()); }
  function validateCinValue(v) { return RX_CIN.test(String(v).trim()); }

  function clearInvalidVisuals(scope = document) {
    (scope || document).querySelectorAll('.is-invalid, .is-invalid-file').forEach(el => el.classList.remove('is-invalid','is-invalid-file'));
    (scope || document).querySelectorAll('.form-type-option.is-invalid').forEach(el => el.classList.remove('is-invalid'));
  }

  function markRadioGroupInvalid(radioName) {
    Array.from(form.querySelectorAll('input[type="radio"][name="' + radioName + '"]')).forEach(inp => {
      const wrapper = inp.closest('.form-type-option');
      if (wrapper) wrapper.classList.add('is-invalid');
      inp.setAttribute('aria-invalid', 'true');
    });
  }

  function clearRadioGroupInvalid(radioName) {
    Array.from(form.querySelectorAll('input[type="radio"][name="' + radioName + '"]')).forEach(inp => {
      const wrapper = inp.closest('.form-type-option');
      if (wrapper) wrapper.classList.remove('is-invalid');
      inp.removeAttribute('aria-invalid');
    });
  }

  function getRequiredRadioNames() {
    const radiosReq = Array.from(form.querySelectorAll('input[type="radio"][required]'));
    return Array.from(new Set(radiosReq.map(r => r.name).filter(Boolean)));
  }

  // --- expose some helpers for inline handlers used elsewhere in Blade (keeps compatibility) ---
  window.calculateDifference = function () {
    try {
      const revenue = parseFloat((document.getElementById('estimation_evenement')?.value) || 0);
      const cost = parseFloat((document.getElementById('cout_total_evenement')?.value) || 0);
      const diffEl = document.getElementById('difference_estimee');
      if (diffEl) diffEl.value = (revenue - cost).toFixed(3);
    } catch (e) { /* ignore */ }
  };

  window.calculateRowTotal = function (input) {
    try {
      if (!input) return;
      const row = input.closest('tr');
      if (!row) return;
      const males = parseInt(row.querySelector('input[name$="[num_athlete_h]"]')?.value) || 0;
      const females = parseInt(row.querySelector('input[name$="[num_athlete_f]"]')?.value) || 0;
      const escorts = parseInt(row.querySelector('input[name$="[accompagnants]"]')?.value) || 0;
      const totalInput = row.querySelector('input[name$="[total]"]');
      if (totalInput) totalInput.value = males + females + escorts;
      if (typeof window.updateAssocTotals === 'function') window.updateAssocTotals();
    } catch (e) {}
  };

  window.calculateAthleteRowTotal = function (input) {
    try {
      if (!input) return;
      const row = input.closest('tr');
      if (!row) return;
      const males = parseInt(row.querySelector('input[name$="[num_athlete_h]"]')?.value) || 0;
      const females = parseInt(row.querySelector('input[name$="[num_athlete_f]"]')?.value) || 0;
      const escorts = parseInt(row.querySelector('input[name$="[accompagnants]"]')?.value) || 0;
      const totalInput = row.querySelector('input[name$="[total]"]');
      if (totalInput) totalInput.value = males + females + escorts;
      if (typeof window.updateAthleteTotals === 'function') window.updateAthleteTotals();
    } catch (e) {}
  };

  window.updateAssocTotals = function () {
    try {
      let tm = 0, tf = 0, ta = 0, tg = 0;
      document.querySelectorAll('#assoc_participantes-body tr').forEach(row => {
        tm += parseInt(row.querySelector('input[name$="[num_athlete_h]"]')?.value) || 0;
        tf += parseInt(row.querySelector('input[name$="[num_athlete_f]"]')?.value) || 0;
        ta += parseInt(row.querySelector('input[name$="[accompagnants]"]')?.value) || 0;
        tg += parseInt(row.querySelector('input[name$="[total]"]')?.value) || 0;
      });
      const set = (id, v) => { const el = document.getElementById(id); if (el) el.value = v; };
      set('total-males', tm); set('total-females', tf); set('total-accompagnants', ta); set('total-general', tg);
    } catch (e) {}
  };

  window.updateAthleteTotals = function () {
    try {
      let tm = 0, tf = 0, ta = 0, tg = 0;
      document.querySelectorAll('#athletes-body tr').forEach(row => {
        tm += parseInt(row.querySelector('input[name$="[num_athlete_h]"]')?.value) || 0;
        tf += parseInt(row.querySelector('input[name$="[num_athlete_f]"]')?.value) || 0;
        ta += parseInt(row.querySelector('input[name$="[accompagnants]"]')?.value) || 0;
        tg += parseInt(row.querySelector('input[name$="[total]"]')?.value) || 0;
      });
      const set = (id, v) => { const el = document.getElementById(id); if (el) el.value = v; };
      set('total2-males', tm); set('total2-females', tf); set('total2-accompagnants', ta); set('total2-general', tg);
    } catch (e) {}
  };

  // --- parts-for-13 toggle: uses correct radio name and looks up hidden id_formulaire via name attr (not id) ---
  if (partsContainer && radios.length) {
    // snapshot initial required for controls inside parts
    function snapshotInitialRequired(container) {
      container.querySelectorAll('input, select, textarea, button').forEach(el => {
        el.dataset.initialRequired = el.hasAttribute('required') ? '1' : '0';
      });
    }
    snapshotInitialRequired(partsContainer);

    function applyPartsState(show) {
      partsContainer.querySelectorAll('input, select, textarea, button').forEach(el => {
        if (el.tagName === 'BUTTON') { el.disabled = !show; return; }
        if (show) {
          el.disabled = false;
          if (el.dataset.initialRequired === '1') el.setAttribute('required', 'required'); else el.removeAttribute('required');
        } else {
          el.disabled = true;
          el.removeAttribute('required');
          el.classList.remove('is-invalid','is-invalid-file');
        }
      });
    }

    function updatePartsUI(value) {
      // set the hidden input 'id_formulaire' used for submission if present
      const hidden = form.querySelector('input[name="id_formulaire"]');
      if (hidden) hidden.value = value;
      if (String(value) === '13') {
        partsContainer.style.display = '';
        applyPartsState(true);
        // optional: focus first control inside parts
        const first = partsContainer.querySelector('input, select, textarea, button');
        if (first) first.scrollIntoView({ behavior: 'smooth', block: 'center' });
      } else {
        partsContainer.style.display = 'none';
        applyPartsState(false);
      }
    }

    // wire radios
    radios.forEach(r => r.addEventListener('change', function () { updatePartsUI(this.value); }));

    // initialize: prefer checked radio in DOM, else fallback to form hidden or '12'
    const checked = radios.find(r => r.checked);
    const initial = checked ? checked.value : (form.querySelector('input[name="id_formulaire"]')?.value || '12');
    // set radio checked if not set
    const radioToCheck = radios.find(r => r.value === String(initial));
    if (radioToCheck) radioToCheck.checked = true;
    updatePartsUI(initial);

    // MutationObserver to snapshot required attributes for dynamically added nodes
    const mo = new MutationObserver(muts => {
      if (muts.some(m => m.addedNodes && m.addedNodes.length)) {
        snapshotInitialRequired(partsContainer);
        const cur = Array.from(radios).find(r => r.checked)?.value || '12';
        applyPartsState(String(cur) === '13');
      }
    });
    mo.observe(partsContainer, { childList: true, subtree: true });
  } // end parts toggle

  // --- combined validation used before submit ---
  function combinedValidation() {
    clearInvalidVisuals(form);
    let ok = true;
    let firstInvalid = null;

    // 1. required radios groups
    getRequiredRadioNames().forEach(name => {
      const set = Array.from(form.querySelectorAll('input[type="radio"][name="' + name + '"]'));
      const any = set.some(s => s.checked);
      if (!any) { markRadioGroupInvalid(name); if (!firstInvalid && set.length) firstInvalid = set[0]; ok = false; }
      else clearRadioGroupInvalid(name);
    });

    // 2. other required controls (exclude radio inputs)
    const requiredControls = Array.from(form.querySelectorAll('[required]')).filter(c => !(c.tagName === 'INPUT' && c.type === 'radio')).filter(c => !c.disabled);
    requiredControls.forEach(field => {
      let fieldOk = true;
      const tag = field.tagName;
      const type = (field.type || '').toLowerCase();

      if (tag === 'SELECT') { if (!field.value) fieldOk = false; }
      else if (tag === 'INPUT') {
        if (type === 'file') { if (!field.files || field.files.length === 0) fieldOk = false; }
        else if (!String(field.value).trim()) fieldOk = false;

        if (field.value.trim()) {
          if (type === 'email' && !validateEmailValue(field.value)) fieldOk = false;
          if ((field.name && (field.name.includes('[tel]') || field.name.includes('[fax]'))) && !validatePhoneValue(field.value)) fieldOk = false;
          if (field.name && field.name.includes('[num_cin]') && !validateCinValue(field.value)) fieldOk = false;
        }
      } else if (tag === 'TEXTAREA') { if (!String(field.value).trim()) fieldOk = false; }

      if (!fieldOk) {
        if (type === 'file') field.classList.add('is-invalid-file'); else field.classList.add('is-invalid');
        if (!firstInvalid) firstInvalid = field;
        ok = false;
      }
    });

    // 3. event date not past
    const eventDate = form.querySelector('input[name="date"]:not([disabled])');
    if (eventDate && eventDate.value) {
      const ed = new Date(eventDate.value); const today = new Date(); today.setHours(0,0,0,0);
      if (ed < today) { eventDate.classList.add('is-invalid'); if (!firstInvalid) firstInvalid = eventDate; ok = false; }
    }

    // 4. birth dates not future
    Array.from(form.querySelectorAll('input[name$="[date_naissance]"]:not([disabled])')).forEach(f => {
      if (f.value) { const bd = new Date(f.value); if (bd > new Date()) { f.classList.add('is-invalid'); if (!firstInvalid) firstInvalid = f; ok = false; } }
    });

    // 5. dynamic tables (only enabled)
    const tableIds = ['membres-body','invites-body','assoc_participantes-body','athletes-body','sportifs-body','touristes-body','touriste2s-body','touriste3s-body'];
    tableIds.forEach(id => {
      const tb = document.getElementById(id);
      if (!tb || tb.closest('[disabled]')) return;
      Array.from(tb.querySelectorAll('tr')).forEach(row => {
        Array.from(row.querySelectorAll('input[required], select[required], textarea[required]')).forEach(inp => {
          if (!inp.disabled && !String(inp.value).trim()) { inp.classList.add('is-invalid'); if (!firstInvalid) firstInvalid = inp; ok = false; }
          if (inp.name && inp.name.includes('[num_cin]') && inp.value.trim() && !validateCinValue(inp.value)) { inp.classList.add('is-invalid'); if (!firstInvalid) firstInvalid = inp; ok = false; }
        });
      });
    });

    // 6. tourist arrival/departure constraints
    ['touristes-body','touriste2s-body','touriste3s-body'].forEach(id => {
      const tb = document.getElementById(id);
      if (!tb || tb.closest('[disabled]')) return;
      Array.from(tb.querySelectorAll('tr')).forEach(row => {
        const a = row.querySelector('input[name$="[date_arrive]"]:not([disabled])');
        const d = row.querySelector('input[name$="[date_depart]"]:not([disabled])');
        if (a && d && a.value && d.value && (new Date(d.value) < new Date(a.value))) { d.classList.add('is-invalid'); if (!firstInvalid) firstInvalid = d; ok = false; }
      });
    });

    // scroll/focus first invalid
    if (!ok && firstInvalid) {
      try {
        if (firstInvalid.type === 'radio') {
          const w = firstInvalid.closest('.form-type-option'); if (w) w.scrollIntoView({ behavior:'smooth', block:'center' });
          firstInvalid.focus();
        } else {
          firstInvalid.scrollIntoView({ behavior:'smooth', block:'center' });
          firstInvalid.focus();
        }
      } catch (e) {}
    }

    return ok;
  }

  // --- submit handling: support clicking confirmSubmitBtn OR pressing Enter (native submit) ---
  function doSubmitUI() {
    // set spinner and submit
    try {
      submitBtn.disabled = true;
      submitBtn.dataset.origHtml = submitBtn.innerHTML;
      submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>' + SWAL_SUBMITTING;
    } catch (e) {}
    form.submit();
  }

  if (submitBtn) {
    submitBtn.addEventListener('click', function (ev) {
      ev.preventDefault();

      if (!combinedValidation()) return;

      // open confirmation (uses messages from data- attrs if present)
     if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: "{{ __('validation.title') }}",
                    icon: 'warning',
                    width: '1000px',
                    padding: '1.5rem',
                    html: `
                        <div class="swal-text">
                            <p class="mb-2">{{ __('validation.message_main') }}</p>
                            <p class="text-muted">{{ __('validation.message_note') }}</p>
                        </div>
                    `,
                    showCancelButton: true,
                    reverseButtons: true,
                    focusCancel: true,
                    confirmButtonText: "{{ __('site.confirm') }}",
                    cancelButtonText: "{{ __('site.cancel') }}",
                    buttonsStyling: false,
                    customClass: {
                        popup: 'swal-wide',
                        title: 'swal-title-center',
                        confirmButton: 'btn btn-danger px-4',
                        cancelButton: 'btn btn-outline-secondary px-4'
                    }
                }).then(result => { if (result.isConfirmed) doSubmitUI(); });
      } else {
        if (confirm(SWAL_MAIN + (SWAL_NOTE ? '\n\n' + SWAL_NOTE : ''))) doSubmitUI();
      }
    });
  }

  // If user submits form via Enter (native submit) intercept to validate & confirm
  form.addEventListener('submit', function (ev) {
    // if submitBtn exists, prefer using its flow (gives modal). Prevent double submission.
	try {
      if (typeof updateMatriculeResult === 'function') updateMatriculeResult();
    } catch (err) { /* ignore */ }
	
    if (submitBtn) {
      ev.preventDefault();
      submitBtn.click();
      return false;
    }

    // otherwise validate inline and allow submission if ok
    if (!combinedValidation()) {
      ev.preventDefault();
      return false;
    }
    return true;
  });

  // --- realtime clearing of invalid classes & radio UX ---
  form.addEventListener('input', function (e) {
    const t = e.target;
    if (!t) return;
    if (t.matches('input, select, textarea')) t.classList.remove('is-invalid','is-invalid-file');
  }, { passive: true });

  form.addEventListener('change', function (e) {
    const t = e.target;
    if (!t) return;
    if (t.matches('input, select, textarea')) t.classList.remove('is-invalid','is-invalid-file');
    if (t.type === 'radio' && t.name) clearRadioGroupInvalid(t.name);
  }, true);

  document.querySelectorAll('.form-type-option').forEach(lbl => {
    lbl.addEventListener('click', function () {
      const r = lbl.querySelector('input[type="radio"]');
      if (r && r.name) clearRadioGroupInvalid(r.name);
    });
  });

  // --- blur validators for phone / email / cin fields (UX nicety) ---
  form.querySelectorAll('input[name$="[tel]"], input[name$="[fax]"]').forEach(f => {
    f.addEventListener('blur', function () { if (this.value.trim() && !validatePhoneValue(this.value)) this.classList.add('is-invalid'); });
  });
  form.querySelectorAll('input[type="email"]').forEach(f => {
    f.addEventListener('blur', function () { if (this.value.trim() && !validateEmailValue(this.value)) this.classList.add('is-invalid'); });
  });
  form.querySelectorAll('input[name$="[num_cin]"]').forEach(f => {
    f.addEventListener('blur', function () { if (this.value.trim() && !validateCinValue(this.value)) this.classList.add('is-invalid'); });
  });

  // --- init totals/difference ---
  try { if (typeof window.updateAssocTotals === 'function') window.updateAssocTotals(); } catch (e) {}
  try { if (typeof window.updateAthleteTotals === 'function') window.updateAthleteTotals(); } catch (e) {}
  try { window.calculateDifference(); } catch (e) {}

}); // DOMContentLoaded
</script>

<script src="{{ asset('BackOfficeAR/js/salle_sport_form.js') }}"></script>

<script>
    let orgIndex = 1;
    function addOrganisateurRow() {
        let tableBody = document.getElementById('membres-body');
        let newRow = `
            <tr>
                <td data-label="{{ __('site.mainifestations.key.col_name') }}">
                    <input required type="text" name="membres[${orgIndex}][nom_prenom]" 
                           class="form-control" 
                           placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}"
                           maxlength="100"
                           oninput="this.value = this.value.slice(0, 100)">
                </td>
                <td data-label="{{ __('site.mainifestations.key.col_role') }}">
                    <input required type="text" name="membres[${orgIndex}][role]" 
                           class="form-control" 
                           placeholder="{{ __('site.mainifestations.key.col_role_placeholder') }}"
                           maxlength="50"
                           oninput="this.value = this.value.slice(0, 50)">
                </td>
                <td data-label="{{ __('site.mainifestations.key.col_nationality') }}">
                    <input required type="text" name="membres[${orgIndex}][nationalite]" 
                           class="form-control" 
                           placeholder="{{ __('site.mainifestations.key.col_nationality_placeholder') }}"
                           maxlength="100"
                           oninput="this.value = this.value.slice(0, 100)">
                </td>
                <td class="action-buttons">
                    <button type="button" class="btn-icon btn-icon--danger" onclick="removeRow(this)">{{ __('site.mainifestations.key.delete') }}</button>
                </td>
            </tr>
        `;
        tableBody.insertAdjacentHTML('beforeend', newRow);
        orgIndex++;
    }

    let inviteIndex = 1;
    function addInviteRow() {
        let tableBody = document.getElementById('invites-body');
        let newRow = `
            <tr>
                <td data-label="{{ __('site.mainifestations.key.col_name') }}">
                    <input required type="text" name="invites[${inviteIndex}][nom_prenom]" 
                           class="form-control" 
                           placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}"
                           maxlength="100"
                           oninput="this.value = this.value.slice(0, 100)">
                </td>
                <td data-label="{{ __('site.mainifestations.key.col_role') }}">
                    <input required type="text" name="invites[${inviteIndex}][role]" 
                           class="form-control" 
                           placeholder="{{ __('site.mainifestations.key.col_role_placeholder') }}"
                           maxlength="50"
                           oninput="this.value = this.value.slice(0, 50)">
                </td>
                <td data-label="{{ __('site.mainifestations.key.col_nationality') }}">
                    <input required type="text" name="invites[${inviteIndex}][nationalite]" 
                           class="form-control" 
                           placeholder="{{ __('site.mainifestations.key.col_nationality_placeholder') }}"
                           maxlength="100"
                           oninput="this.value = this.value.slice(0, 100)">
                </td>
                <td class="action-buttons">
                    <button type="button" class="btn-icon btn-icon--danger" onclick="removeRow(this)">{{ __('site.mainifestations.key.delete') }}</button>
                </td>
            </tr>
        `;
        tableBody.insertAdjacentHTML('beforeend', newRow);
        inviteIndex++;
    }

    function removeRow(button) {
        let row = button.closest('tr');
        row.remove();
    }
</script>

<script>
    let assocIndex = 1;

    function addAssocRow() {
        const tbody = document.getElementById('assoc_participantes-body');
        const newRow = document.createElement('tr');

        newRow.innerHTML = `
            <td class="row-number"></td>
            <td><input required type="text" name="assoc_participantes[${assocIndex}][nom]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.assoc_name_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)"></td>
            <td><input required type="text" 
                       name="assoc_participantes[${assocIndex}][num_athlete_h]" 
                       class="form-control text-center" 
                       placeholder="{{ __('site.mainifestations.key.col_males') }}" 
                       min="0"
                       max="999999"
                       maxlength="6"
                       oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); calculateRowTotal(this);"></td>
            <td><input required type="text" 
                       name="assoc_participantes[${assocIndex}][num_athlete_f]" 
                       class="form-control text-center" 
                       placeholder="{{ __('site.mainifestations.key.col_females') }}" 
                       min="0"
                       max="999999"
                       maxlength="6"
                       oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); calculateRowTotal(this);"></td>
            <td><input required type="text" 
                       name="assoc_participantes[${assocIndex}][accompagnants]" 
                       class="form-control text-center" 
                       placeholder="{{ __('site.mainifestations.key.col_escorts') }}" 
                       min="0"
                       max="999999"
                       maxlength="6"
                       oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); calculateRowTotal(this);"></td>
            <td><input required type="number" name="assoc_participantes[${assocIndex}][total]" 
                       class="form-control text-center" readonly placeholder="0"></td>
            <td><button type="button" class="btn-icon btn-icon--danger" onclick="removeAssocRow(this)">{{ __('site.mainifestations.key.delete') }}</button></td>
        `;
        tbody.appendChild(newRow);
        assocIndex++;
        updateAssocRowNumbers();
        updateAssocTotals();
    }

    function removeAssocRow(button) {
        button.closest('tr').remove();
        updateAssocRowNumbers();
        updateAssocTotals();
    }

    function updateAssocRowNumbers() {
        const rows = document.querySelectorAll('#assoc_participantes-body tr');
        rows.forEach((row, index) => {
            row.querySelector('.row-number').textContent = index + 1;
        });
    }
</script>

<script>
    let athleteIndex = 1;

    function addAthleteRow() {
        const tbody = document.getElementById('athletes-body');
        const newRow = document.createElement('tr');

        newRow.innerHTML = `
            <td class="row-number"></td>
            <td><input required type="text" name="athletes[${athleteIndex}][nom_prenom_sportif]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_athlete_name_placeholder') }}"
                       maxlength="150"
                       oninput="this.value = this.value.slice(0, 150)"></td>
            <td><input required type="text" 
                       name="athletes[${athleteIndex}][num_athlete_h]" 
                       class="form-control text-center" 
                       placeholder="{{ __('site.mainifestations.key.col_males') }}" 
                       min="0"
                       max="999999"
                       maxlength="6"
                       oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); calculateAthleteRowTotal(this);"></td>
            <td><input required type="text" 
                       name="athletes[${athleteIndex}][num_athlete_f]" 
                       class="form-control text-center" 
                       placeholder="{{ __('site.mainifestations.key.col_females') }}" 
                       min="0"
                       max="999999"
                       maxlength="6"
                       oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); calculateAthleteRowTotal(this);"></td>
            <td><input required type="text" 
                       name="athletes[${athleteIndex}][accompagnants]" 
                       class="form-control text-center" 
                       placeholder="{{ __('site.mainifestations.key.col_escorts') }}" 
                       min="0"
                       max="999999"
                       maxlength="6"
                       oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); calculateAthleteRowTotal(this);"></td>
            <td><input required type="number" name="athletes[${athleteIndex}][total]" 
                       class="form-control text-center" readonly placeholder="0"></td>
            <td><button type="button" class="btn-icon btn-icon--danger" onclick="removeAthleteRow(this)">{{ __('site.mainifestations.key.delete') }}</button></td>
        `;
        tbody.appendChild(newRow);
        athleteIndex++;
        updateAthleteRowNumbers();
        updateAthleteTotals();
    }

    function removeAthleteRow(button) {
        button.closest('tr').remove();
        updateAthleteRowNumbers();
        updateAthleteTotals();
    }

    function updateAthleteRowNumbers() {
        const rows = document.querySelectorAll('#athletes-body tr');
        rows.forEach((row, index) => {
            row.querySelector('.row-number').textContent = index + 1;
        });
    }
</script>

<script>
    let sportifIndex = 1; 

    function addSportifRow() {
        const tbody = document.getElementById('sportifs-body');
        const newRow = document.createElement('tr');

        newRow.innerHTML = `
            <td data-label="{{ __('site.mainifestations.key.col_athlete_name') }}">
                <input required type="text" name="sportifs[${sportifIndex}][nom_prenom]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_athlete_name_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)">
            </td>
            <td data-label="{{ __('site.mainifestations.key.col_age_group') }}">
                <input required type="text" name="sportifs[${sportifIndex}][tranch_age]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_age_group_placeholder') }}"
                       maxlength="50"
                       oninput="this.value = this.value.slice(0, 50)">
            </td>
            <td data-label="{{ __('site.mainifestations.key.col_birth_date') }}">
                <input required type="date" name="sportifs[${sportifIndex}][date_naissance]" 
                       class="form-control"
                       max="{{ date('Y-m-d') }}">
            </td>
            <td data-label="{{ __('site.mainifestations.key.col_id_number') }}">
                <input required 
                       type="text" 
                       name="sportifs[${sportifIndex}][num_cin]" 
                       class="form-control cin-input" 
                       placeholder="{{ __('site.mainifestations.key.col_id_number_placeholder') }}"
                       maxlength="8"
                       minlength="8"
                       pattern="\\d{8}"
                       oninput="this.value = this.value.replace(/\\D/g,'').slice(0,8);">
            </td>
            <td class="action-buttons">
                <button type="button" class="btn-icon btn-icon--danger" onclick="removeSportifRow(this)">{{ __('site.mainifestations.key.delete') }}</button>
            </td>
        `;

        tbody.appendChild(newRow);
        sportifIndex++;
    }

    function removeSportifRow(button) {
        button.closest('tr').remove();
    }
</script>

<script>
    let touristeIndex = 1;

    function addTouristeRow() {
        const tbody = document.getElementById('touristes-body');
        const row = document.createElement('tr');

        row.innerHTML = `
            <td><input required type="text" name="touristes[${touristeIndex}][nom_prenom]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)"></td>
            <td><input required type="text" name="touristes[${touristeIndex}][pays_origine]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_country_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)"></td>
            <td><input required type="text" name="touristes[${touristeIndex}][num_passport]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_passport_placeholder') }}"
                        maxlength="12"
                       oninput="this.value = this.value.slice(0, 12)"></td>
            <td><input required type="date" name="touristes[${touristeIndex}][date_arrive]" class="form-control"></td>
            <td><input required type="text" name="touristes[${touristeIndex}][lieu_residence]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_residence_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)"></td>
            <td><input required type="date" name="touristes[${touristeIndex}][date_depart]" class="form-control"></td>
            <td class="text-center">
                <button type="button" class="btn-icon btn-icon--danger" onclick="removeTouristeRow(this)">
                 {{ __('site.mainifestations.key.delete') }}
                </button>
            </td>
        `;

        tbody.appendChild(row);
        touristeIndex++;
    }

    function removeTouristeRow(button) {
        const row = button.closest('tr');
        row.remove();
    }
</script>

<script>
    let touriste2Index = 1;

    function addTouriste2Row() {
        const tbody = document.getElementById('touriste2s-body');
        const row = document.createElement('tr');

        row.innerHTML = `
            <td>
                <input required type="text" name="touriste2s[${touriste2Index}][nom_prenom]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)">
            </td>
            <td>
                <input required type="text" name="touriste2s[${touriste2Index}][pays_origine]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_country_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)">
            </td>
            <td>
                <input required type="text" name="touriste2s[${touriste2Index}][num_passport]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_passport_placeholder') }}"
                        maxlength="12"
                       oninput="this.value = this.value.slice(0, 12)">
            </td>
            <td>
                <input required type="date" name="touriste2s[${touriste2Index}][date_arrive]" class="form-control">
            </td>
            <td>
                <input required type="text" name="touriste2s[${touriste2Index}][lieu_residence]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_residence_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)">
            </td>
            <td>
                <input required type="date" name="touriste2s[${touriste2Index}][date_depart]" class="form-control">
            </td>
            <td class="text-center">
                <button type="button" class="btn-icon btn-icon--danger" onclick="removeTouriste2Row(this)">
                 {{ __('site.mainifestations.key.delete') }}
                </button>
            </td>
        `;

        tbody.appendChild(row);
        touriste2Index++;
    }

    function removeTouriste2Row(button) {
        const row = button.closest('tr');
        row.remove();
    }
</script>

<script>
    let touriste3Index = 1;

    function addTouriste3Row() {
        const tbody = document.getElementById('touriste3s-body');
        const row = document.createElement('tr');

        row.innerHTML = `
            <td>
                <input required type="text" name="touriste3s[${touriste3Index}][nom_prenom]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)">
            </td>
            <td>
                <input required type="text" name="touriste3s[${touriste3Index}][pays_origine]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_country_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)">
            </td>
            <td>
                <input required type="text" name="touriste3s[${touriste3Index}][num_passport]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_passport_placeholder') }}"
                        maxlength="12"
                       oninput="this.value = this.value.slice(0, 12)">
            </td>
            <td>
                <input required type="date" name="touriste3s[${touriste3Index}][date_arrive]" class="form-control">
            </td>
            <td>
                <input required type="text" name="touriste3s[${touriste3Index}][lieu_residence]" 
                       class="form-control" 
                       placeholder="{{ __('site.mainifestations.key.col_residence_placeholder') }}"
                       maxlength="100"
                       oninput="this.value = this.value.slice(0, 100)">
            </td>
            <td>
                <input required type="date" name="touriste3s[${touriste3Index}][date_depart]" class="form-control">
            </td>
            <td class="text-center">
                <button type="button" class="btn-icon btn-icon--danger" onclick="removeTouriste3Row(this)">
                  {{ __('site.mainifestations.key.delete') }}
                </button>
            </td>
        `;

        tbody.appendChild(row);
        touriste3Index++;
    }

    function removeTouriste3Row(button) {
        const row = button.closest('tr');
        row.remove();
    }
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const gouvSelect = document.getElementById('gouvernorat_id');
    const delSelect  = document.getElementById('delegation_id');

    // Blade-provided initial values (kept as JS literals)
    const initialGouv = {!! json_encode(old('gouvernorat_id', '')) !!};
    const initialDel  = {!! json_encode(old('delegation_id', '')) !!};
    const locale = {!! json_encode(app()->getLocale()) !!};

    // Localized placeholders (Blade / Lang)
    const placeChoose = {!! json_encode(__('site.investment.form.placeholder.choose')) !!};
    const placeLoading = {!! json_encode(__('site.investment.form.placeholder.loading')) !!};

    if (!gouvSelect || !delSelect) return;

    // Utility: clear & set a single disabled placeholder option
    function setPlaceholder(selectEl, text) {
        selectEl.innerHTML = '';
        const opt = document.createElement('option');
        opt.disabled = true;
        opt.selected = true;
        opt.textContent = text;
        selectEl.appendChild(opt);
    }

    // Fill delegations list (prefers nom_localized returned by server)
    function populateDelegations(list, selectedId = null) {
        setPlaceholder(delSelect, placeChoose);

        list.forEach(item => {
            const opt = document.createElement('option');
            opt.value = item.id_delegation;

            // Prefer server-provided localized name; otherwise fall back to locale-specific raw fields or id
            opt.text = item.nom_localized
                || item['nom_' + locale]
                || item.nom_en
                || item.nom_fr
                || item.nom_ar
                || String(item.id_delegation);

            if (selectedId && String(selectedId) === String(item.id_delegation)) {
                opt.selected = true;
            }

            delSelect.appendChild(opt);
        });

        delSelect.disabled = list.length === 0;
    }

    // Fetch delegations for a gouvernorat id (uses your named route pattern)
    async function fetchDelegations(gouvId, preselectId = null) {
        if (!gouvId) {
            setPlaceholder(delSelect, placeChoose);
            delSelect.disabled = true;
            return;
        }

        delSelect.disabled = true;
        setPlaceholder(delSelect, placeLoading);

        // Build URL using the same named route pattern you used in blade earlier.
        // Replace the placeholder with the real id.
        let url = "{{ route('delegations.get', ['gouvernoratId' => 'ID_PLACEHOLDER']) }}";
        url = url.replace('ID_PLACEHOLDER', encodeURIComponent(gouvId));

        try {
            const resp = await fetch(url, { credentials: 'same-origin' });
            if (!resp.ok) throw new Error('Network response was not ok');

            const data = await resp.json();

            // data expected as array of objects with 'id_delegation' and 'nom_localized' (controller provides this)
            if (!Array.isArray(data)) {
                console.error('Unexpected delegations response:', data);
                setPlaceholder(delSelect, placeChoose);
                delSelect.disabled = true;
                return;
            }

            populateDelegations(data, preselectId);
        } catch (err) {
            console.error('Failed to fetch delegations:', err);
            setPlaceholder(delSelect, placeChoose);
            delSelect.disabled = true;
        }
    }

    // on change: fetch and populate
    gouvSelect.addEventListener('change', function () {
        const gouvId = this.value;
        // clear current delegation and fetch
        fetchDelegations(gouvId, null);
    });

    // Init: if the form has an initial gouvernorat, load its delegations and preselect delegation if present
    if (initialGouv) {
        // if delegation select already has options (server-side rendered), we still want to ensure labels are correct for locale
        // so fetch and replace with locale-aware labels, preselect previous delegation
        fetchDelegations(initialGouv, initialDel);
    } else {
        // No gov preselected — ensure delegation select is disabled and shows placeholder
        setPlaceholder(delSelect, placeChoose);
        delSelect.disabled = true;
    }

    // Small enhancement: preserve previously selected delegation when user submits with validation errors
    // (handled by preselecting using old() values injected above)
});
</script>

<script>
document.addEventListener('input', function (e) {
    if (e.target.name === 'org[tel]' || e.target.name === 'org[fax]') {
        e.target.value = e.target.value.replace(/\D/g, '').slice(0, 12);
    }
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const dateInput = document.getElementById('event_date');
  const errorEl  = document.getElementById('event_date_error');
  const form     = dateInput ? dateInput.closest('form') : null;

  if (!dateInput || !form) return;

  // compute client-side min = today + 30 days (local timezone)
  function computeMinDate(days = 30) {
    const d = new Date();
    d.setHours(0,0,0,0);
    d.setDate(d.getDate() + days);
    return d.toISOString().slice(0,10); // YYYY-MM-DD
  }

  // set min attribute from client clock (overrides server fallback if different)
  const clientMin = computeMinDate(30);
  dateInput.min = clientMin;

  // friendly message (Arabic). Replace with localized string if needed.
  const message = 'يجب أن يكون تاريخ التظاهرة بعد 30 يوماً على الأقل من اليوم.';

  function isDateValid() {
    const val = dateInput.value;
    if (!val) return false;
    return val >= dateInput.min;
  }

  function showError() {
    if (errorEl) {
      errorEl.textContent = message;
      errorEl.style.display = 'block';
    } else {
      alert(message);
    }
    dateInput.classList.add('is-invalid');
  }

  function hideError() {
    if (errorEl) {
      errorEl.textContent = '';
      errorEl.style.display = 'none';
    }
    dateInput.classList.remove('is-invalid');
  }

  // live feedback
  dateInput.addEventListener('input', function () {
    if (isDateValid()) hideError();
    else {
      // optionally show immediate feedback
      // showError();
      hideError(); // keep UX less noisy; final check at submit
    }
  });

  // On submit block if invalid
  form.addEventListener('submit', function (e) {
    // ensure min set in case script ran late
    dateInput.min = dateInput.min || computeMinDate(30);

    if (!isDateValid()) {
      e.preventDefault();
      showError();
      // focus and scroll to date field
      dateInput.focus();
      dateInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
      return false;
    }
    // ok -> allow submit
    return true;
  });
});
</script>

@else
    <script>
        window.location.href = "{{ route('login') }}";
    </script>
@endif
@endsection