@extends('layouts.app') 

@section('styles')
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire_edit.css') }}">
@endsection

@section('content')
@if ($errors->any())
    <ul class="alert alert-warning">
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
@endif
@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('manifestation_choix') }}"><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 class="card shadow-sm p-4" action="{{ route('manifestation2.store') }}" method="POST" enctype="multipart/form-data" lang="ar">
    @csrf
            <input type="hidden" name="type_formulaire_id" value="12">

        <!-- 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  type="text" class="form-control" name="org[nom]" placeholder="{{ __('site.mainifestations.key.org_name_placeholder') }}" maxlength="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  type="number" 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  type="date" class="form-control" name="org[date_enregistrement]">
                    </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 type="number" name="org[identifiant_fiscal]" class="form-control" placeholder="{{ __('site.mainifestations.key.tax_id_placeholder') }}" max="999999999999">
                    </div>
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.bank_account_label') }}</label>
                    <div class="col-sm-4">
                        <input  type="text" class="form-control" name="org[num_compte_bancaire]" placeholder="{{ __('site.mainifestations.key.bank_account_placeholder') }}" maxlength="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  type="text" class="form-control" 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  type="text" class="form-control" name="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="text" class="form-control" name="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]" 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="">
            <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 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 -->
        <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  type="text" class="form-control" 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') }}</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') }}</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  type="date" class="form-control" name="date" value="{{ old('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') }}">
                    </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 }}">{{ 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-12 col-form-label">{{ __('site.mainifestations.key.installations_label') }}</label>
                    <div class="col-sm-12">
                        <textarea name="instalation_sportives" class="form-control" rows="2">{{ old('instalation_sportives') }}</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') }}">
                    </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" class="form-control" name="estimation_evenement" value="{{ old('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" class="form-control" name="cout_total_evenement" value="{{ old('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" class="form-control" name="difference_estimee" value="{{ old('difference_estimee') }}">
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.mainifestations.key.rewards_label') }}</label>
                    <div class="col-sm-10">
                        <textarea name="recompense" class="form-control" rows="2">{{ old('recompense') }}</textarea>
                    </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 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>
                        </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 type="text" name="invites[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="invites[0][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[0][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>
                        </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 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>
                            </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>
            <br>

            <div class="form-section">
                <div class="form-group row">
                    <label class="col-sm-12 col-form-label">{{ __('site.mainifestations.key.individual_athletes_label') }}</label>
                    <div class="table-responsive">
                        <table id="athletes-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:25%">{{ __('site.mainifestations.key.col_athlete_name') }}</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="athletes-body">
                                <tr>
                                    <td class="row-number">1</td>
                                    <td><input type="text" name="athletes[0][nom_prenom_sportif]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_athlete_name_placeholder') }}"></td>
                                    <td><input type="number" name="athletes[0][num_athlete_h]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_males') }}" min="0"></td>
                                    <td><input type="number" name="athletes[0][num_athlete_f]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_females') }}" min="0"></td>
                                    <td><input type="number" name="athletes[0][accompagnants]" class="form-control text-center" placeholder="{{ __('site.mainifestations.key.col_escorts') }}" min="0"></td>
                                    <td><input type="number" name="athletes[0][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>
                                </tr>
                            </tbody>

                            <tfoot>
                                <tr class="fw-bold">
                                    <td colspan="2" class="text-center">{{ __('site.mainifestations.key.total_label') }}</td>
                                    <td><input type="number" id="total2-males" class="form-control text-center" readonly value="0"></td>
                                    <td><input type="number" id="total2-females" class="form-control text-center" readonly value="0"></td>
                                    <td><input type="number" id="total2-accompagnants" class="form-control text-center" readonly value="0"></td>
                                    <td><input type="number" id="total2-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="addAthleteRow()">{{ __('site.mainifestations.key.add_row') }}</button>
                </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>
            <br>

            <div class="form-section">
                <div class="form-group row">
                    <label class="col-sm-12 col-form-label">{{ __('site.mainifestations.key.athletes_participating_label') }}</label>
                    <div class="table-responsive">
                        <table id="sportifs-table" class="custom-table table table-bordered text-center align-middle">
                            <thead>
                                <tr>
                                    <th>{{ __('site.mainifestations.key.col_athlete_name') }}</th>
                                    <th>{{ __('site.mainifestations.key.col_age_group') }}</th>
                                    <th>{{ __('site.mainifestations.key.col_birth_date') }}</th>
                                    <th>{{ __('site.mainifestations.key.col_id_number') }}</th>
                                    <th>{{ __('site.mainifestations.key.col_action') }}</th>
                                </tr>
                            </thead>
                            <tbody id="sportifs-body">
                                <tr>
                                    <td data-label="{{ __('site.mainifestations.key.col_athlete_name') }}">
                                        <input type="text" name="sportifs[0][nom_prenom]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_athlete_name_placeholder') }}">
                                    </td>
                                    <td data-label="{{ __('site.mainifestations.key.col_age_group') }}">
                                        <input type="text" name="sportifs[0][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[0][date_naissance]" class="form-control">
                                    </td>
                                    <td data-label="{{ __('site.mainifestations.key.col_id_number') }}">
                                        <input type="text" name="sportifs[0][num_cin]" class="form-control" 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>
                                </tr>
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-success mt-2" onclick="addSportifRow()">
                            {{ __('site.mainifestations.key.add_row') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>


        <div class="container">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire8->id_type }}">
            <input type="hidden" name="demande_id" value="{{ $demande->id_demande ?? '' }}">  

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

            <div class="form-section">
                <div class="form-group row">
                    <label class="col-sm-6 col-form-label">{{ __('site.mainifestations.key.tourists_list_label') }}</label>
                    <table id="touristes-table" class="custom-table table table-bordered text-center align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('site.mainifestations.key.col_name') }}</th>
                                <th>{{ __('site.mainifestations.key.col_country') }}</th>
                                <th>{{ __('site.mainifestations.key.col_passport') }}</th>
                                <th>{{ __('site.mainifestations.key.col_arrival_date') }}</th>
                                <th>{{ __('site.mainifestations.key.col_residence') }}</th>
                                <th>{{ __('site.mainifestations.key.col_departure_date') }}</th>
                                <th>{{ __('site.mainifestations.key.col_action') }}</th>
                            </tr>
                        </thead>
                        <tbody id="touristes-body">
                            <tr>
                                <td>
                                    <input type="text" name="touristes[0][nom_prenom]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}">
                                </td>
                                <td>
                                    <input type="text" name="touristes[0][pays_origine]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_country_placeholder') }}">
                                </td>
                                <td>
                                    <input type="text" name="touristes[0][num_passport ]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_passport_placeholder') }}">
                                </td>
                                <td>
                                    <input type="date" name="touristes[0][date_arrive]" class="form-control">
                                </td>
                                <td>
                                    <input type="text" name="touristes[0][lieu_residence]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_residence_placeholder') }}">
                                </td>
                                <td>
                                    <input type="date" name="touristes[0][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>
                            </tr>
                        </tbody>
                    </table>

                    <button type="button" class="btn btn-success mt-2" onclick="addTouristeRow()">
                        <i class="la la-plus"></i> {{ __('site.mainifestations.key.add_row') }}
                    </button>
                </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>
                    <table id="touriste2s-table" class="custom-table table table-bordered text-center align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('site.mainifestations.key.col_name') }}</th>
                                <th>{{ __('site.mainifestations.key.col_country') }}</th>
                                <th>{{ __('site.mainifestations.key.col_passport') }}</th>
                                <th>{{ __('site.mainifestations.key.col_arrival_date') }}</th>
                                <th>{{ __('site.mainifestations.key.col_residence') }}</th>
                                <th>{{ __('site.mainifestations.key.col_departure_date') }}</th>
                                <th>{{ __('site.mainifestations.key.col_action') }}</th>
                            </tr>
                        </thead>
                        <tbody id="touriste2s-body">
                            <tr>
                                <td>
                                    <input type="text" name="touriste2s[0][nom_prenom]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}">
                                </td>
                                <td>
                                    <input type="text" name="touriste2s[0][pays_origine]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_country_placeholder') }}">
                                </td>
                                <td>
                                    <input type="text" name="touriste2s[0][num_passport ]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_passport_placeholder') }}">
                                </td>
                                <td>
                                    <input type="date" name="touriste2s[0][date_arrive]" class="form-control">
                                </td>
                                <td>
                                    <input type="text" name="touriste2s[0][lieu_residence]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_residence_placeholder') }}">
                                </td>
                                <td>
                                    <input type="date" name="touriste2s[0][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>
                            </tr>
                        </tbody>
                    </table>

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

        <div class="container">
            <input type="hidden" name="id_formulaire" value="{{ $formulaire9->id_type }}">
            <input type="hidden" name="demande_id" value="">  
            <h3 style="font-size:25px;">{{ trans_field($formulaire9, 'type') }}</h3>
            <br>
            <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>
                    <table id="touriste3s-table" class="custom-table table table-bordered text-center align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('site.mainifestations.key.col_name') }}</th>
                                <th>{{ __('site.mainifestations.key.col_country') }}</th>
                                <th>{{ __('site.mainifestations.key.col_passport') }}</th>
                                <th>{{ __('site.mainifestations.key.col_arrival_date') }}</th>
                                <th>{{ __('site.mainifestations.key.col_residence') }}</th>
                                <th>{{ __('site.mainifestations.key.col_departure_date') }}</th>
                                <th>{{ __('site.mainifestations.key.col_action') }}</th>
                            </tr>
                        </thead>
                        <tbody id="touriste3s-body">
                            <tr>
                                <td>
                                    <input type="text" name="touriste3s[0][nom_prenom]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_name_placeholder') }}">
                                </td>
                                <td>
                                    <input type="text" name="touriste3s[0][pays_origine]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_country_placeholder') }}">
                                </td>
                                <td>
                                    <input type="text" name="touriste3s[0][num_passport]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_passport_placeholder') }}">
                                </td>
                                <td>
                                    <input type="date" name="touriste3s[0][date_arrive]" class="form-control">
                                </td>
                                <td>
                                    <input type="text" name="touriste3s[0][lieu_residence]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_residence_placeholder') }}">
                                </td>
                                <td>
                                    <input type="date" name="touriste3s[0][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>
                            </tr>
                        </tbody>
                    </table>

                    <button type="button" class="btn btn-success mt-2" onclick="addTouriste3Row()">
                        <i class="la la-plus"></i> {{ __('site.mainifestations.key.add_row') }}
                    </button>
                </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 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="">

            <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_inter.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 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 = 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 = 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) {
        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 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 = 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 type="text" name="sportifs[${sportifIndex}][nom_prenom]" class="form-control" placeholder="{{ __('site.mainifestations.key.col_athlete_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" 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);
        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 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');
        row.remove();
    }
</script>

<script>
    let touriste2Index = 1;

    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');
        row.remove();
    }
</script>

<script>
    let touriste3Index = 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) {
        const row = button.closest('tr');
        row.remove();
    }
</script>


<script>
  let loadingText = "{{ __('site.mainifestations.key.loading') }}";
  let chooseText  = "{{ __('site.mainifestations.key.choose_placeholder') }}";

  document.getElementById('gouvernorat_id').addEventListener('change', function() {

      let gouvId = this.value;
      let delegationSelect = document.getElementById('delegation_id');

      delegationSelect.innerHTML = `<option value="" disabled selected>${loadingText}</option>`;
      delegationSelect.disabled = true;

      let url = "{{ route('delegations_manifestation.get', ['gouvernoratId' => 'ID_PLACEHOLDER']) }}";
      url = url.replace("ID_PLACEHOLDER", gouvId);

      fetch(url)
          .then(response => response.json())
          .then(data => {
              delegationSelect.innerHTML = `<option value="" disabled selected>${chooseText}</option>`;

              data.forEach(d => {
                  const option = document.createElement('option');
                  option.value = d.id_delegation;
                  // Use the single localized 'nom' returned by the server
                  option.text = d.nom ?? '—';
                  delegationSelect.appendChild(option);
              });

              delegationSelect.disabled = false;
          })
          .catch(err => {
              console.error('Failed loading delegations', err);
              delegationSelect.innerHTML = `<option value="" disabled selected>${chooseText}</option>`;
              delegationSelect.disabled = true;
          });
  });
</script>


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