@extends('layouts.app') 

@section('styles')
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire_edit.css') }}">
@endsection
@if ($errors->any())
    <ul class="alert alert-warning">
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
@endif
@section('content')

@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 active" aria-current="page">{{ __('site.mainifestations.key.breadcrumb_edit_international') }}</li>
  </ol></nav>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
  <form class="card shadow-sm p-4" action="{{ route('manifestation2.update', $demande->id_demande) }}" method="POST" enctype="multipart/form-data" lang="ar">
    @csrf
    @method('PUT')
@php
    // compute initial value server-side (blade) for clarity
    $initialTypeFormulaire = old('type_formulaire_id', $demande->type_formulaire_id ?? $currentFormulaireId ?? null);
@endphp

<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
                   {{ ((string) $initialTypeFormulaire === '12') ? 'checked' : '' }}>
            <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
                   {{ ((string) $initialTypeFormulaire === '13') ? 'checked' : '' }}>
            <span class="form-type-text">{{ __('site.form_type.international') }}</span>
        </label>
    </div>
</div>
    

        <!-- step1 -->
        <div class="container">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire2->id_type }}">
                     <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', $org->nom ?? '') }}">                    
                    </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="number" class="form-control" name="org[num_visa]" value="{{ old('org.num_visa', $org->num_visa ?? '') }}" 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]"  max="999999999999"  >
                    </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" value="{{ old('org.date_enregistrement', $org->date_enregistrement ?? '') }}" name="org[date_enregistrement]">
                    </div>
                </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">

      <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>
		<label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.bank_account_label') }}</label>
						<div class="col-sm-4">
							<input required type="number" class="form-control" value="{{ old('org.num_compte_bancaire', $org->num_compte_bancaire ?? '') }}" name="org[num_compte_bancaire]" placeholder="{{ __('site.mainifestations.key.bank_account_placeholder') }}" maxlength="20">
						</div>
</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>
				
				

                <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" value="{{ old('org.adresse', $org->adresse ?? '') }}" name="org[adresse]" placeholder="{{ __('site.mainifestations.key.address_placeholder') }}" maxlength="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 pattern="[0-9]{8}" maxlength="8" inputmode="numeric" type="number" class="form-control" name="org[tel]" value="{{ old('org.tel', $org->tel ?? '') }}" placeholder="{{ __('site.mainifestations.key.phone_placeholder') }}" maxlength="12">
                    </div>
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.fax_label') }}</label>
                    <div class="col-sm-4">
                        <input  type="number" pattern="[0-9]{8}" maxlength="8" inputmode="numeric" class="form-control" name="org[fax]" value="{{ old('org.fax', $org->fax ?? '') }}" placeholder="{{ __('site.mainifestations.key.fax_placeholder') }}" maxlength="12">
                    </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  type="email" class="form-control" name="org[email]" value="{{ old('org.email', $org->email ?? '') }}" placeholder="{{ __('site.mainifestations.key.email_placeholder') }}" maxlength="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="{{ $demande->id ?? '' }}">  

            <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">
                        @if($demande->assuranceFile)
                            <p> {{ __('site.mainifestations.key.current_file') }} :
                                <a href="{{ asset('storage/' . $demande->assuranceFile->file) }}" target="_blank">{{ __('site.mainifestations.key.view_file') }}</a>
                            </p>
                        @endif

                        
                        <input required type="file" class="form-control" name="assurance_file" accept=".pdf,.jpg,.jpeg,.png">
                        @error('assurance_file')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div-->
					
					<div class="col-sm-12">
                        @if($demande->assuranceFile)
                            <p>
                                {{ __('site.mainifestations.key.current_file') }} :
                                <a href="{{ route('manifestation2.attachment.show', $demande->assuranceFile->id_attach) }}"
                                target="_blank">
                                    {{ __('site.mainifestations.key.view_file') }}
                                </a>
                            </p>
                        @endif

                        <input type="file"
                            class="form-control"
                            name="assurance_file"
                            accept=".pdf,.jpg,.jpeg,.png">

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

        <!-- step2 -->
         @php
            $evenement = $demande->evenementSportifs->first(); // On prend le premier événement lié
        @endphp

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

         
            <div class="form-section">
                <div class="form-group row mb-3" style="padding-top:20px;">
                    <label class="col-sm-4 col-form-label">{{ __('site.mainifestations.key.event_name_label') }}</label>
                    <div class="col-sm-12">
                        <input required type="text" class="form-control" value="{{ old('nom_even', $evenement->nom_even ?? '') }}" name="nom_even" placeholder="{{ __('site.mainifestations.key.event_name_placeholder') }}" maxlength="100" value="{{ old('nom_even') }}">
                    </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 name="objectifs" class="form-control" rows="3">{{ old('objectifs', $evenement->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 name="contenus" class="form-control" rows="3">{{ old('contenus', $evenement->contenus ?? '') }}</textarea>
                    </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 type="date" class="form-control" name="date" value="{{ old('date', $evenement->date ?? '') }}">
                        
                    </div>
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.event_time_label') }}</label>
                    <div class="col-sm-4">
                        <input type="time" class="form-control" name="heure"
                            value="{{ old('heure', isset($evenement->heure) ? \Carbon\Carbon::parse($evenement->heure)->format('H:i') : '') }}">
                    </div>

                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.gouvernorat_label') }}</label>
                    <div class="col-sm-4">
                        <select required class="form-control" name="gouvernorat_id" id="gouvernorat_id">
                            <option value="" disabled selected>{{ __('site.mainifestations.key.choose_placeholder') }}</option>
                            @foreach($gouvernorats as $gouv)
                                <option value="{{ $gouv->id_gouver }}" 
                                    {{ (old('gouvernorat_id', $evenement->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">
                        <select required class="form-control" name="delegation_id" id="delegation_id"
                            {{ old('delegation_id', $evenement->delegation_id ?? '') ? '' : 'disabled' }}>
                            <option value="" disabled {{ !old('delegation_id', $evenement->delegation_id ?? '') ? 'selected' : '' }}>{{ __('site.mainifestations.key.choose_placeholder') }}</option>

                            @foreach($delegations as $deleg)
                                <option value="{{ $deleg->id_delegation }}"
                                    {{ old('delegation_id', $evenement->delegation_id ?? '') == $deleg->id_delegation ? 'selected' : '' }}>
                                   {{ trans_field($deleg, 'nom') }}
                                </option>
                            @endforeach
                        </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 name="instalation_sportives" class="form-control" rows="2">{{ old('instalation_sportives', $evenement->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)">{{ old('routes_pub_utilise', $evenement->routes_pub_utilise ?? $demande->routes_pub_utilise ?? '') }}</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', $evenement->reference ?? '') }}">
                    </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" value="{{ old('estimation_evenement', $evenement->estimation_evenement ?? '') }}">
                    </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" value="{{ old('cout_total_evenement', $evenement->cout_total_evenement ?? '') }}">
                    </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" value="{{ old('difference_estimee', $evenement->difference_estimee ?? '') }}">
                    </div>
                </div>
                @php
                    $prixEspecesUrl = $prixEspecesUrl ?? ($demande->prix_especes ? route('shared.uploads', ['filename' => basename($demande->prix_especes)]) : null);
                    $prixObjetUrl   = $prixObjetUrl   ?? ($demande->prix_objet   ? route('shared.uploads', ['filename' => basename($demande->prix_objet)])   : null);
                @endphp

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.rewards_label') }}</label>
                </div>
				   <div class="mb-4">
                        <label class="form-label d-block">{{ __('site.mainifestations.key.financial_grants') }}</label>

                        @if(!empty($demande->prix_especes))
                            <div class="mb-2">
                                @if($prixEspecesUrl)
                                    <a href="{{ $prixEspecesUrl }}" target="_blank" rel="noopener" class="d-inline-block">
                                       {{ __('site.mainifestations.key.view_file') }}
                                    </a>
                                @else
                                    <span class="text-muted d-inline-block">{{ __('site.mainifestations.key.no_file') }}</span>
                                @endif

                                <input type="hidden" name="existing_prix_especes" value="{{ $demande->prix_especes }}">
                            </div>
                        @endif

                        <input type="file" class="form-control text-end" name="prix_especes"
                               accept=".pdf,.jpg,.jpeg,.png"
                               onchange="validateFile(this, 2048)">
                    </div>
     <!-- منح عينية -->
                    <div class="mb-3">
                        <label class="form-label d-block">{{ __('site.mainifestations.key.in_kind_grants') }}</label>

                        @if(!empty($demande->prix_objet))
                            <div class="mb-2">
                                @if($prixObjetUrl)
                                    <a href="{{ $prixObjetUrl }}" target="_blank" rel="noopener" class="d-inline-block">
                                      {{ __('site.mainifestations.key.view_file') }}
                                    </a>
                                @else
                                    <span class="text-muted d-inline-block">{{ __('site.mainifestations.key.no_file') }}</span>
                                @endif

                                <input type="hidden" name="existing_prix_objet" value="{{ $demande->prix_objet }}">
                            </div>
                        @endif

                        <input type="file" class="form-control text-end" name="prix_objet"
                               accept=".pdf,.jpg,.jpeg,.png"
                               onchange="validateFile(this, 2048)">
                    </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">
                            @php
                                $membres = $evenement && $evenement->membres
                                    ? $evenement->membres->where('type_membre_id', 1)
                                    : collect();
                            @endphp

                            @if($membres->count())
                                @foreach($membres as $index => $membre)
                                    <tr>
                                        <td data-label="{{ __('site.mainifestations.key.col_name') }}">
                                            <input type="text" name="membres[{{ $index }}][nom_prenom]" 
                                                value="{{ old('membres.'.$index.'.nom_prenom', $membre->nom_prenom) }}" 
                                                class="form-control" placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}">
                                        </td>
                                        <td data-label="{{ __('site.mainifestations.key.col_role') }}">
                                            <input type="text" name="membres[{{ $index }}][role]" 
                                                value="{{ old('membres.'.$index.'.role', $membre->role) }}" 
                                                class="form-control" placeholder="{{ __('site.mainifestations.key.col_role_placeholder') }}">
                                        </td>
                                        <td data-label="{{ __('site.mainifestations.key.col_nationality') }}">
                                            <input type="text" name="membres[{{ $index }}][nationalite]" 
                                                value="{{ old('membres.'.$index.'.nationalite', $membre->nationalite) }}" 
                                                class="form-control" placeholder="{{ __('site.mainifestations.key.col_nationality_placeholder') }}">
                                        </td>
                                        <td class="action-buttons">
                                            <button type="button" class="btn btn-icon btn-icon--danger" onclick="removeRow(this)">{{ __('site.mainifestations.key.delete') }}</button>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td data-label="{{ __('site.mainifestations.key.col_name') }}">
                                        <input type="text" name="membres[0][nom_prenom]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}">
                                    </td>
                                    <td data-label="{{ __('site.mainifestations.key.col_role') }}">
                                        <input 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 type="text" name="membres[0][nationalite]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_nationality_placeholder') }}">
                                    </td>
                                    <td class="action-buttons">
                                        <div style="width: 40px; height: 31px;"></div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-success mt-2" 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">
                             @php
                                $invites = $evenement && $evenement->membres
                                    ? $evenement->membres->where('type_membre_id', 2)
                                    : collect();
                            @endphp

                            @if($invites->count())
                                @foreach($invites as $index => $invite)
                                    <tr>
                                        <td><input required type="text" name="invites[{{ $index }}][nom_prenom]" value="{{ old('invites.'.$index.'.nom_prenom', $invite->nom_prenom) }}" class="form-control" placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}"></td>
                                        <td><input required type="text" name="invites[{{ $index }}][role]" value="{{ old('invites.'.$index.'.role', $invite->role) }}" class="form-control" placeholder="{{ __('site.mainifestations.key.col_role_placeholder') }}"></td>
                                        <td><input required type="text" name="invites[{{ $index }}][nationalite]" value="{{ old('invites.'.$index.'.nationalite', $invite->nationalite) }}" class="form-control" placeholder="{{ __('site.mainifestations.key.col_nationality_placeholder') }}"></td>
                                        <td><button type="button" class="btn btn-icon btn-icon--danger" onclick="removeRow(this)">{{ __('site.mainifestations.key.delete') }}</button></td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td><input type="text" name="invites[0][nom_prenom]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}"></td>
                                    <td><input type="text" name="invites[0][role]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_role_placeholder') }}"></td>
                                    <td><input type="text" name="invites[0][nationalite]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_nationality_placeholder') }}"></td>
                                    <td><button type="button" class="btn btn-icon btn-icon--danger" onclick="removeRow(this)">{{ __('site.mainifestations.key.delete') }}</button></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-success mt-2" 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>

                            @php
                                $assocParticipantes = collect();
                                if ($demande->evenementSportifs && $demande->evenementSportifs->first()) {
                                    $assocParticipantes = $demande->evenementSportifs->first()->assocParticipantes ?? collect();
                                }
                            @endphp

                            <tbody id="assoc_participantes-body">
                                @if($assocParticipantes->count())
                                    @foreach($assocParticipantes as $index => $assoc)
                                        <tr>
                                            <td class="row-number">{{ $index + 1 }}</td>
                                            <td>
                                                <input required type="text" name="assoc_participantes[{{ $index }}][nom]"
                                                    value="{{ old('assoc_participantes.'.$index.'.nom', $assoc->nom) }}"
                                                    class="form-control" placeholder="{{ __('site.mainifestations.key.assoc_name_placeholder') }}">
                                            </td>
                                            <td>
                                                <input required type="number" name="assoc_participantes[{{ $index }}][num_athlete_h]"
                                                    value="{{ old('assoc_participantes.'.$index.'.num_athlete_h', $assoc->num_athlete_h) }}"
                                                    class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_males') }}" min="0">
                                            </td>
                                            <td>
                                                <input required type="number" name="assoc_participantes[{{ $index }}][num_athlete_f]"
                                                    value="{{ old('assoc_participantes.'.$index.'.num_athlete_f', $assoc->num_athlete_f) }}"
                                                    class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_females') }}" min="0">
                                            </td>
                                            <td>
                                                <input required type="number" name="assoc_participantes[{{ $index }}][accompagnants]"
                                                    value="{{ old('assoc_participantes.'.$index.'.accompagnants', $assoc->accompagnants) }}"
                                                    class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_escorts') }}" min="0">
                                            </td>
                                            <td>
                                                <input required type="number" name="assoc_participantes[{{ $index }}][total]"
                                                    value="{{ old('assoc_participantes.'.$index.'.total', $assoc->total) }}"
                                                    class="form-control text-center" readonly>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-icon btn-icon--danger" onclick="removeAssocRow(this)">{{ __('site.mainifestations.key.delete') }}</button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    {{-- Si aucune donnée n’existe --}}
                                    <tr>
                                        <td class="row-number">1</td>
                                        <td><input type="text" name="assoc_participantes[0][nom]" class="form-control" placeholder="{{ __('site.mainifestations.key.assoc_name_placeholder') }}"></td>
                                        <td><input type="number" name="assoc_participantes[0][num_athlete_h]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_males') }}" min="0"></td>
                                        <td><input type="number" name="assoc_participantes[0][num_athlete_f]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_females') }}" min="0"></td>
                                        <td><input type="number" name="assoc_participantes[0][accompagnants]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_escorts') }}" min="0"></td>
                                        <td><input type="number" name="assoc_participantes[0][total]" class="form-control text-center" readonly placeholder="0"></td>
                                        <td><button type="button" class="btn btn-icon btn-icon--danger" onclick="removeAssocRow(this)">{{ __('site.mainifestations.key.delete') }}</button></td>
                                    </tr>
                                @endif
                            </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>
  


  <!-- step5 -->
<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-4 col-form-label">{{ __('site.mainifestations.key.individual_athletes_label') }}</label>

            <div class="col-sm-12">
			      @if(!empty($existingFiles['liste_prel_ath_ind']['url']))
                    <p> {{ __('site.mainifestations.key.current_file') }} :
                        <a href="{{ $existingFiles['liste_prel_ath_ind']['url'] }}" target="_blank" rel="noopener">
                              {{ __('site.mainifestations.key.view_file') }}
                        </a>
                        <input type="hidden" name="existing_liste_prel_ath_ind" value="{{ $existingFiles['liste_prel_ath_ind']['path'] }}">
                    </p>
                @elseif(!empty($existingFiles['liste_prel_ath_ind']['path']))
                    {{-- file found but URL couldn't be resolved --}}
                    <div class="mt-2 text-muted">
                        ملف محفوظ: {{ basename($existingFiles['liste_prel_ath_ind']['path']) }}
                        <input type="hidden" name="existing_liste_prel_ath_ind" value="{{ $existingFiles['liste_prel_ath_ind']['path'] }}">
                    </div>
                @endif
                <input type="file" class="form-control" name="liste_prel_ath_ind"
                       accept=".pdf,.jpg,.jpeg,.png" onchange="validateFile(this, 2048)">

          
            </div>
        </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-4 col-form-label">{{ __('site.mainifestations.key.athletes_participating_label') }}</label>

            <div class="col-sm-12">
			     @if(!empty($existingFiles['liste_ath_ass_cat']['url']))
                    <p>{{ __('site.mainifestations.key.current_file') }} :
                        <a href="{{ $existingFiles['liste_ath_ass_cat']['url'] }}" target="_blank" rel="noopener">
                             {{ __('site.mainifestations.key.view_file') }}
                        </a>
                        <input type="hidden" name="existing_liste_ath_ass_cat" value="{{ $existingFiles['liste_ath_ass_cat']['path'] }}">
                    </p>
                @elseif(!empty($existingFiles['liste_ath_ass_cat']['path']))
                    <div class="mt-2 text-muted">
                        ملف محفوظ: {{ basename($existingFiles['liste_ath_ass_cat']['path']) }}
                        <input type="hidden" name="existing_liste_ath_ass_cat" value="{{ $existingFiles['liste_ath_ass_cat']['path'] }}">
                    </div>
                @endif
                <input type="file" class="form-control" name="liste_ath_ass_cat"
                       accept=".pdf,.jpg,.jpeg,.png" onchange="validateFile(this, 2048)">
            </div>
        </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-4 col-form-label">{{ __('site.mainifestations.key.tourists_list_label') }}</label>

          
                <div class="col-sm-12">
				          @if(!empty($existingFiles['fiche_visite_pers_off_etran']['url']))
                        <p>{{ __('site.mainifestations.key.current_file') }}  :
                            <a href="{{ $existingFiles['fiche_visite_pers_off_etran']['url'] }}" target="_blank" rel="noopener">
                                 {{ __('site.mainifestations.key.view_file') }}
                            </a>
                            <input type="hidden" name="existing_fiche_visite_pers_off_etran" value="{{ $existingFiles['fiche_visite_pers_off_etran']['path'] }}">
                        </p>
                    @elseif(!empty($existingFiles['fiche_visite_pers_off_etran']['path']))
                        <div class="mt-2 text-muted">
                            ملف محفوظ: {{ basename($existingFiles['fiche_visite_pers_off_etran']['path']) }}
                            <input type="hidden" name="existing_fiche_visite_pers_off_etran" value="{{ $existingFiles['fiche_visite_pers_off_etran']['path'] }}">
                        </div>
                    @endif
                    <input type="file" class="form-control" name="fiche_visite_pers_off_etran"
                           accept=".pdf,.jpg,.jpeg,.png" onchange="validateFile(this, 2048)">

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

        <div class="form-section">
            <div class="form-group row">
                <label class="col-sm-4 col-form-label">{{ __('site.mainifestations.key.judges_officials_list_label') }}</label>

                <div class="col-sm-12">
				      @if(!empty($existingFiles['liste_arbitres_res']['url']))
                        <p> {{ __('site.mainifestations.key.current_file') }} :
                            <a href="{{ $existingFiles['liste_arbitres_res']['url'] }}" target="_blank" rel="noopener" >
                                {{ __('site.mainifestations.key.view_file') }}
                            </a>
                            <input type="hidden" name="existing_liste_arbitres_res" value="{{ $existingFiles['liste_arbitres_res']['path'] }}">
                        </p>
                    @elseif(!empty($existingFiles['liste_arbitres_res']['path']))
                        <div class="mt-2 text-muted">
                            ملف محفوظ: {{ basename($existingFiles['liste_arbitres_res']['path']) }}
                            <input type="hidden" name="existing_liste_arbitres_res" value="{{ $existingFiles['liste_arbitres_res']['path'] }}">
                        </div>
                    @endif
                    <input type="file" class="form-control" name="liste_arbitres_res"
                           accept=".pdf,.jpg,.jpeg,.png" onchange="validateFile(this, 2048)">

              
                </div>
            </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-4 col-form-label">{{ __('site.mainifestations.key.foreign_officials_list_label') }}</label>
      
                <div class="col-sm-12">
				     @if(!empty($existingFiles['fiche_visite_dele_etran']['url']))
                        <p> {{ __('site.mainifestations.key.current_file') }} :
                            <a href="{{ $existingFiles['fiche_visite_dele_etran']['url'] }}" target="_blank" rel="noopener">
                             {{ __('site.mainifestations.key.view_file') }}
                            </a>
                            <input type="hidden" name="existing_fiche_visite_dele_etran" value="{{ $existingFiles['fiche_visite_dele_etran']['path'] }}">
                        </p>
                    @elseif(!empty($existingFiles['fiche_visite_dele_etran']['path']))
                        <div class="mt-2 text-muted">
                            ملف محفوظ: {{ basename($existingFiles['fiche_visite_dele_etran']['path']) }}
                            <input type="hidden" name="existing_fiche_visite_dele_etran" value="{{ $existingFiles['fiche_visite_dele_etran']['path'] }}">
                        </div>
                    @endif
                    <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>
        <div class="container">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire3->id_type }}">
            <input type="hidden" name="demande_id" value="{{ $demande->id ?? '' }}">  

            <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">
                        @if($demande->accordFile)
                            <p>
                                {{ __('site.mainifestations.key.current_file') }} :
                                <a href="{{ route('manifestation2.attachment.show', $demande->accordFile->id_attach) }}"
                                target="_blank">
                                    {{ __('site.mainifestations.key.view_file') }}
                                </a>
                            </p>
                        @endif

                        <input type="file"
                            class="form-control"
                            name="accord_file"
                            accept=".pdf,.jpg,.jpeg,.png">

                        @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="{{ $demande->id ?? '' }}">  

            <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">
                        @if($demande->techniqueFile)
                            <p>
                                {{ __('site.mainifestations.key.current_file') }} :
                                <a href="{{ route('manifestation2.attachment.show', $demande->techniqueFile->id_attach) }}"
                                target="_blank">
                                    {{ __('site.mainifestations.key.view_file') }}
                                </a>
                            </p>
                        @endif

                        <input type="file"
                            class="form-control"
                            name="technique_file"
                            accept=".pdf,.jpg,.jpeg,.png">

                        @error('technique_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="{{ $demande->id ?? '' }}">  

            <h3 style="font-size:25px;">{{ __('site.mainifestations.key.request_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.request_label') }}
                    </label>
                    <div class="col-sm-12">
                        @if($demande->demandeFile)
                            <p>
                                {{ __('site.mainifestations.key.current_file') }} :
                                <a href="{{ route('manifestation2.attachment.show', $demande->demandeFile->id_attach) }}"
                                target="_blank">
                                    {{ __('site.mainifestations.key.view_file') }}
                                </a>
                            </p>
                        @endif

                        <input type="file"
                            class="form-control"
                            name="demande_file"
                            accept=".pdf,.jpg,.jpeg,.png">

                        @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="submit" class="btn btn-success font-weight-medium" style="width:100px;margin-right:250px;">{{ __('site.mainifestations.key.submit') }}</button>
            </div>
           
        </div>

    </form>
</div>


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

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

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

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

<script>
    let assocIndex = {{ $assocParticipantes->count() ?? 1 }};

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

        newRow.innerHTML = `
            <td class="row-number"></td>
            <td><input type="text" name="assoc_participantes[${assocIndex}][nom]" class="form-control" placeholder="{{ __('site.mainifestations.key.assoc_name_placeholder') }}"></td>
            <td><input type="number" name="assoc_participantes[${assocIndex}][num_athlete_h]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_males') }}" min="0"></td>
            <td><input type="number" name="assoc_participantes[${assocIndex}][num_athlete_f]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_females') }}" min="0"></td>
            <td><input type="number" name="assoc_participantes[${assocIndex}][accompagnants]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_escorts') }}" min="0"></td>
            <td><input type="number" name="assoc_participantes[${assocIndex}][total]" class="form-control text-center" readonly placeholder="0"></td>
            <td><button type="button" class="btn btn-icon btn-icon--danger" onclick="removeAssocRow(this)">{{ __('site.mainifestations.key.delete') }}</button></td>
        `;
        tbody.appendChild(newRow);
        assocIndex++;
        updateAssocRowNumbers();
        updateTotals();
    }

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

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

    document.addEventListener('input', function(e) {
        if (!e.target.closest('#assoc_participantes-body')) return;

        const row = e.target.closest('tr');

        const males = Number(row.querySelector('input[name$="[num_athlete_h]"]').value) || 0;
        const females = Number(row.querySelector('input[name$="[num_athlete_f]"]').value) || 0;
        const escorts = Number(row.querySelector('input[name$="[accompagnants]"]').value) || 0;

        const rowTotal = males + females + escorts;
        const totalInput = row.querySelector('input[name$="[total]"]');
        if (totalInput) totalInput.value = rowTotal;

        updateTotals();
    });

    function updateTotals() {
        let totalMales = 0;
        let totalFemales = 0;
        let totalAccompagnants = 0;
        let totalGeneral = 0;

        document.querySelectorAll('#assoc_participantes-body tr').forEach(row => {
            totalMales += Number(row.querySelector('input[name$="[num_athlete_h]"]').value) || 0;
            totalFemales += Number(row.querySelector('input[name$="[num_athlete_f]"]').value) || 0;
            totalAccompagnants += Number(row.querySelector('input[name$="[accompagnants]"]').value) || 0;
            totalGeneral += Number(row.querySelector('input[name$="[total]"]').value) || 0;
        });

        document.getElementById('total-males').value = totalMales;
        document.getElementById('total-females').value = totalFemales;
        document.getElementById('total-accompagnants').value = totalAccompagnants;
        document.getElementById('total-general').value = totalGeneral;
    }

    updateTotals();
</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 type="text" name="athletes[${athleteIndex}][nom_prenom_sportif]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_athlete_name_placeholder') }}"></td>
        <td><input type="number" name="athletes[${athleteIndex}][num_athlete_h]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_males') }}" min="0"></td>
        <td><input type="number" name="athletes[${athleteIndex}][num_athlete_f]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_females') }}" min="0"></td>
        <td><input type="number" name="athletes[${athleteIndex}][accompagnants]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_escorts') }}" min="0"></td>
        <td><input type="number" name="athletes[${athleteIndex}][total]" class="form-control text-center" readonly placeholder="0"></td>
        <td><button type="button" class="btn btn-icon btn-icon--danger" onclick="removeAthleteRow(this)">{{ __('site.mainifestations.key.delete') }}</button></td>
    `;
    tbody.appendChild(newRow);
    athleteIndex++;
    updateAthleteRowNumbers();
    update2Totals();
}

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

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

document.addEventListener('input', function(e) {
    if (!e.target.closest('#athletes-body')) return;

    const row = e.target.closest('tr');

    const males = Number(row.querySelector('input[name$="[num_athlete_h]"]').value) || 0;
    const females = Number(row.querySelector('input[name$="[num_athlete_f]"]').value) || 0;
    const escorts = Number(row.querySelector('input[name$="[accompagnants]"]').value) || 0;

    const rowTotal = males + females + escorts;
    const totalInput = row.querySelector('input[name$="[total]"]');
    if (totalInput) totalInput.value = rowTotal;

    update2Totals();
});

function update2Totals() {
    let total2Males = 0;
    let total2Females = 0;
    let total2Accompagnants = 0;
    let total2General = 0;

    document.querySelectorAll('#athletes-body tr').forEach(row => {
        total2Males += Number(row.querySelector('input[name$="[num_athlete_h]"]').value) || 0;
        total2Females += Number(row.querySelector('input[name$="[num_athlete_f]"]').value) || 0;
        total2Accompagnants += Number(row.querySelector('input[name$="[accompagnants]"]').value) || 0;
        total2General += Number(row.querySelector('input[name$="[total]"]').value) || 0;
    });

    document.getElementById('total2-males').value = total2Males;
    document.getElementById('total2-females').value = total2Females;
    document.getElementById('total2-accompagnants').value = total2Accompagnants;
    document.getElementById('total2-general').value = total2General;
}

update2Totals();
</script>

<script>
    let sportifIndex = {{ $sportifIndex ?? 1 }};

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

        newRow.innerHTML = `
            <td data-label="{{ __('site.mainifestations.key.col_name') }}">
                <input type="text" name="sportifs[${sportifIndex}][nom_prenom]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}">
            </td>
            <td data-label="{{ __('site.mainifestations.key.col_age_group') }}">
                <input type="text" name="sportifs[${sportifIndex}][tranch_age]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_age_group_placeholder') }}">
            </td>
            <td data-label="{{ __('site.mainifestations.key.col_birth_date') }}">
                <input type="date" name="sportifs[${sportifIndex}][date_naissance]" class="form-control">
            </td>
            <td data-label="{{ __('site.mainifestations.key.col_id_number') }}">
                <input type="text" name="sportifs[${sportifIndex}][num_cin]" class="form-control cin-input" placeholder="{{ __('site.mainifestations.key.col_id_number_placeholder') }}">
            </td>
            <td class="action-buttons">
                <button type="button" class="btn btn-icon btn-icon--danger" onclick="removeSportifRow(this)">{{ __('site.mainifestations.key.delete') }}</button>
            </td>
        `;

        tbody.appendChild(newRow);

        const cinInput = newRow.querySelector('.cin-input');
    cinInput.addEventListener('input', function() {
        // Supprime tout ce qui n'est pas un chiffre
        this.value = this.value.replace(/\D/g, '');
        // Limite à 8 caractères
        if(this.value.length > 8) this.value = this.value.slice(0, 8);
    });


        sportifIndex++;
    }

    function removeSportifRow(button) {
        button.closest('tr').remove();
    }

</script>

<script>
    let touristeIndex = document.querySelectorAll('#touristes-body tr').length;

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

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

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

    function removeTouristeRow(button) {
        const row = button.closest('tr');
        const hiddenId = row.querySelector('input[name$="[id]"]');

        if (hiddenId) {
            const idValue = hiddenId.value;
            const deletedInput = document.createElement('input');
            deletedInput.type = 'hidden';
            deletedInput.name = 'delete_touristes[]';
            deletedInput.value = idValue;
            document.querySelector('form').appendChild(deletedInput);
        }

        row.remove();
    }
</script>

<script>
    let touriste2Index = document.querySelectorAll('#touriste2s-body tr').length;

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

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

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

    function removeTouriste2Row(button) {
        const row = button.closest('tr');
        const hiddenId = row.querySelector('input[name$="[id]"]');

        if (hiddenId) {
            const deletedInput = document.createElement('input');
            deletedInput.type = 'hidden';
            deletedInput.name = 'delete_touriste2s[]';
            deletedInput.value = hiddenId.value;
            document.querySelector('form').appendChild(deletedInput);
        }

        row.remove();
    }
</script>

<script>
    let touriste3Index = {{ isset($evenement) && $evenement->etrangeres ? $evenement->etrangeres->where('type_etranger_id', 3)->count() : 1 }};

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

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

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

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

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

    // current app locale, provided by Blade
    const locale = "{{ app()->getLocale() }}";

    // localized placeholder texts (provided by Blade translations)
    const tChoose  = "{{ __('site.mainifestations.key.choose_placeholder') }}";
    const tLoading = "{{ __('site.mainifestations.key.loading') }}";

    function getDelegationDisplayName(obj) {
        // try properties in order: nom_<locale>, nom, nom_ar, nom_fr, nom_en, name
        const preferred = `nom_${locale}`;
        return obj[preferred] ?? obj.nom ?? obj.nom_ar ?? obj.nom_fr ?? obj.nom_en ?? obj.name ?? '';
    }

    gouvSelect.addEventListener('change', function () {
        let gouvId = this.value;

        // reset delegation select
        delSelect.innerHTML = '';
        delSelect.disabled = true;

        // loading placeholder (localized)
        const loadingOption = document.createElement('option');
        loadingOption.disabled = true;
        loadingOption.selected = true;
        loadingOption.textContent = tLoading || 'Loading...';
        delSelect.appendChild(loadingOption);

        // build route URL (replace placeholder with selected id)
        let url = "{{ route('delegations2_manifestation.get', ['gouvernoratId' => 'ID_PLACEHOLDER']) }}";
        url = url.replace("ID_PLACEHOLDER", encodeURIComponent(gouvId));

        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                // clear and add choose placeholder (localized)
                delSelect.innerHTML = '';
                const chooseOption = document.createElement('option');
                chooseOption.disabled = true;
                chooseOption.selected = true;
                chooseOption.textContent = tChoose || 'Choose...';
                delSelect.appendChild(chooseOption);

                // if data is empty, leave select disabled but with placeholder
                if (!Array.isArray(data) || data.length === 0) {
                    delSelect.disabled = true;
                    return;
                }

                // append delegations using the best localized field available
                data.forEach(d => {
                    const option = document.createElement('option');
                    option.value = d.id_delegation ?? d.id ?? '';
                    option.text = getDelegationDisplayName(d) || (d.nom_ar ?? d.nom_fr ?? d.nom_en ?? '');
                    delSelect.appendChild(option);
                });

                delSelect.disabled = false;

                // if there is an old/selected value, try to re-select it
                const oldDelegation = "{{ old('delegation_id', $evenement->delegation_id ?? '') }}";
                if (oldDelegation) {
                    delSelect.value = oldDelegation;
                }
            })
            .catch(err => {
                console.error('Failed loading delegations:', err);
                delSelect.innerHTML = '';
                const errorOpt = document.createElement('option');
                errorOpt.disabled = true;
                errorOpt.selected = true;
                errorOpt.textContent = tChoose || 'Choose...';
                delSelect.appendChild(errorOpt);
                delSelect.disabled = true;
            });
    });

    // Optionally: if a gouvernorat is already selected on page load, trigger change to populate delegations
    const preselectedGouv = gouvSelect.value;
    if (preselectedGouv) {
        // small timeout to allow other scripts/DOM to finish
        setTimeout(() => {
            gouvSelect.dispatchEvent(new Event('change'));
        }, 50);
    }
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // server-provided initial value (string or null)
    const initial = @json(old('type_formulaire_id', $demande->type_formulaire_id ?? $currentFormulaireId ?? null));

    const partsFor13 = document.getElementById('parts-for-13');
    const radios = Array.from(document.querySelectorAll('input[name="type_formulaire_id"]'));

    function setPartsVisibility(val) {
        if (!partsFor13) return;
        if (String(val) === '13') {
            partsFor13.style.display = 'block';
            // optionally focus first input inside (nice UX)
            const firstInput = partsFor13.querySelector('input, textarea, select');
            if (firstInput) firstInput.focus();
        } else {
            partsFor13.style.display = 'none';
        }
    }

    // attach change listeners
    radios.forEach(r => r.addEventListener('change', function (e) {
        setPartsVisibility(e.target.value);
    }));

    // 1) If there's a server initial value, ensure radio is checked and toggle accordingly
    if (initial !== null && initial !== undefined && initial !== '') {
        // mark the matching radio as checked (covers case where blade didn't set it for any reason)
        const match = radios.find(r => String(r.value) === String(initial));
        if (match) match.checked = true;
        setPartsVisibility(initial);
    } else {
        // 2) fallback: read currently checked radio or default to hide
        const checked = radios.find(r => r.checked);
        setPartsVisibility(checked ? checked.value : null);
    }

    // Optional: when the page is submitted, ensure we don't keep hidden values for parts-for-13 fields
    // (Not strictly needed if you keep hidden existing_* inputs; uncomment if you want to clear file inputs when hidden)
    /*
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function () {
            if (!partsFor13 || partsFor13.style.display === 'none') {
                // clear any file / text inputs inside parts-for-13 so they aren't submitted
                const els = partsFor13.querySelectorAll('input, textarea, select');
                els.forEach(el => {
                    if (el.type === 'file') el.value = '';
                    // if hidden fields like existing_* should be preserved even when hidden, skip them
                    if (/^existing_/.test(el.name)) return;
                    if (el.type !== 'file') el.disabled = true;
                });
            }
        });
    }
    */
});
</script>
@else
    <script>
        window.location.href = "{{ route('login') }}";
    </script>
@endif
@endsection