@extends('layouts.app')

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

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

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

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

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

    .swal-text {
        font-size: 15px;
        line-height: 1.8;
        text-align: center;
    }
</style>
@endsection

@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.investment.breadcrumb.home') }}</span>
    </a>
</li>
<li class="breadcrumb-item">
    <a href="{{ route('investissement_choix') }}">
        <span>{{ __('site.investment.breadcrumb.index') }}</span>
    </a>
</li>
<li class="breadcrumb-item">
    <a href="{{ route('salle-sport.index2') }}">
        <span>{{ __('site.investment.breadcrumb.salles_list') }}</span>
    </a>
</li>
<li class="breadcrumb-item active" aria-current="page">{{ __('site.investment.breadcrumb.add_salle') }}</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('salle-sport.store2') }}" method="POST" enctype="multipart/form-data" id="salleSportForm"> 

    @csrf
    <input type="hidden" name="id_formulaire" value="{{ $formulaire->id_type }}">
    
    <h3>{{ trans_field($formulaire, 'type') }}  </h3>
    <div class="form-section">
    
               <h4>{{ __('site.investment.form.identity.title') }}</h4>

            <div class="form-group row">
                 <label class="col-sm-2 col-form-label">{{ __('site.investment.form.label.full_name') }}</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" style="text-transform: none;" value="{{ $user->nom_prenom }}" disabled>
                </div>
            </div>
            <div class="form-group row">
                 <label class="col-sm-2 col-form-label">{{ __('site.investment.form.label.email') }}</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" style="text-transform: none;" value="{{ $user->email }}" disabled>
                </div>
            </div>

            <div class="form-group row align-items-center">
                <label class="col-sm-2 col-form-label" for="id_type_identite"> {{ __('site.investment.form.label.identity_type') }}</label>
                <div class="col-sm-4">
                    <input type="text" id="id_type_identite" style="text-transform: none;" class="form-control" 
                        value="{{ $user->typeIdentite->{ 'type_' . app()->getLocale() } ?? ($user->typeIdentite->type_ar ?? '') }}" disabled>
                    
                </div>
                @if(old('id_type_identite', $user->id_type_identite ?? '') == 1)
                    <label class="col-sm-2 col-form-label" for="cin_input">{{ __('site.investment.form.label.cin') }}  </label>
                    <div class="col-sm-4">
                        <input type="text" id="cin_input" name="cin" class="form-control" 
                            value="{{ old('cin', $user->cin ?? '') }}" placeholder="{{ __('site.investment.form.placeholder.cin') }}" style="text-transform: none;" disabled>
                        
                    </div>
                @elseif(old('id_type_identite', $user->id_type_identite ?? '') == 2)
                    <label class="col-sm-2 col-form-label" for="passport_input">{{ __('site.investment.form.label.passport') }}  </label>
                    <div class="col-sm-4">
                        <input type="text" id="passport_input" name="passport" class="form-control" 
                            value="{{ old('passport', $user->passport ?? '') }}" placeholder="{{ __('site.investment.form.placeholder.passport') }}" style="text-transform: none;" disabled>
                       
                    </div>
                @elseif(old('id_type_identite', $user->id_type_identite ?? '') == 3)
                    <label class="col-sm-2 col-form-label" for="num_fiscal_input">  {{ __('site.investment.form.label.fiscal_id') }}</label>
                    <div class="col-sm-4">
                        <input type="text" id="num_fiscal_input" name="num_fiscal" class="form-control" 
                            value="{{ old('num_fiscal', $user->num_fiscal ?? '') }}" placeholder="{{ __('site.investment.form.placeholder.fiscal') }}" style="text-transform: none;" disabled>
                        
                    </div>
                @endif
            </div>
            <div class="form-group row" id="cin_details_wrapper" 
                style="{{ old('id_type_identite', $user->id_type_identite ?? '') == 1 ? '' : 'display:none;' }}">
                <label for="date_delivrance_cin" class="col-sm-2 col-form-label"> {{ __('site.investment.form.label.cin_issue_date') }}</label>
                <div class="col-sm-4">
                    <input type="date" id="date_delivrance_cin" name="date_delivrance_cin" 
                        value="{{ old('date_delivrance_cin', isset($user->date_delivrance_cin) && $user->date_delivrance_cin ? \Carbon\Carbon::parse($user->date_delivrance_cin)->format('Y-m-d') : '') }}" 
                        class="form-control" style="text-transform: none;" disabled>
                    
                </div>


                <label for="lieu_delivrance_cin" class="col-sm-2 col-form-label">  {{ __('site.investment.form.label.cin_issue_place') }}</label>
                <div class="col-sm-4">
                    <input type="text" id="lieu_delivrance_cin" name="lieu_delivrance_cin" 
                        value="{{ old('lieu_delivrance_cin', $user->lieu_delivrance_cin ?? '') }}" 
                        placeholder="{{ __('site.investment.form.placeholder.cin_issue_place') }}" class="form-control" style="text-transform: none;" disabled >
                    
                </div>
            </div>
            <div class="form-group row align-items-center">
                <label class="col-sm-2 col-form-label" for="tel">  {{ __('site.investment.form.label.phone') }}</label>
                <div class="col-sm-4">
                    <input 
						type="text" 
						required 
						id="tel" 
						 name="tel"
						class="form-control @error('tel') is-invalid @enderror"
						value="{{ old('tel', $user->tel) }}"
						maxlength="12"
						minlength="8"
						pattern="\d{8,12}"
						oninput="this.value = this.value.replace(/\D/g,'');" >
                </div>
                <label class="col-sm-2 col-form-label" for="adresse"> {{ __('site.investment.form.label.address') }}</label>
                <div class="col-sm-4">
					<input required oninput="this.value = this.value.slice(0, 100)" type="text" maxlength="100" name="adresse" id="adresse" class="form-control @error('adresse') is-invalid @enderror"
						value="{{ old('adresse', auth()->user()->adresse) }}">	
				</div>
            </div>

            <h4>  {{ __('site.investment.form.property.title') }} </h4> 
            <div class="form-group row">
                <label for="nom_victime" class="col-sm-2 col-form-label">  {{ __('site.investment.form.label.property_address') }} </label>
                <div class="col-sm-10">
                    <input required maxlength="100" type="text" style="text-transform: none;" class="form-control @error('adresse_imm') is-invalid @enderror" id="adresse_imm" name="adresse_imm" placeholder=" " 
                        oninvalid="this.setCustomValidity('{{ __('site.investment.form.validation.property_address_max') }}')" 
                        oninput="this.setCustomValidity('')">
						
				</div>
				
            </div>
            <div class="form-group row">
				<label class="col-sm-2 col-form-label"> {{ __('site.investment.form.label.gouvernorat') }} </label>
				<div class="col-sm-4 postbox__select">
					<select required class="form-control @error('gouvernorat_id') is-invalid @enderror" id="gouvernorat_id" 
						name="gouvernorat_id">
						<option value="" disabled selected>{{ __('site.investment.form.placeholder.choose') }}</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.investment.form.label.delegation') }}  </label>
				<div class="col-sm-4 postbox__select">
					<select required class="form-control @error('delegation_id') is-invalid @enderror"  id="delegation_id" 
						name="delegation_id">
						<option value="" disabled selected>{{ __('site.investment.form.placeholder.choose') }}</option>
					</select>
				</div>
			</div>

            
            <div class="form-group row">
				<label for="type_imm_id" class="col-sm-2 col-form-label">{{ __('site.investment.form.label.property_type') }}</label>
			   <div class="col-sm-4">
					<select required class="form-control" id="type_imm_id" name="type_imm_id">
						<option value="" disabled selected>{{ __('site.investment.form.placeholder.choose') }}</option>
						@foreach($typesImmobilier as $type)
							<option value="{{ $type->id_type }}">{{ trans_field($type, 'type') }}</option>
						@endforeach
					</select>
				</div>


				<label for="superfici_m2" class="col-sm-2 col-form-label">{{ __('site.investment.form.label.surface_total') }}</label>
				<div class="col-sm-4">
					<input type="number" required
						   class="form-control @error('superfici_m2') is-invalid @enderror"
						   id="superfici_m2"
						   name="superfici_m2"
						   value="{{ old('superfici_m2', $immobilier->superfici_m2 ?? '') }}"
						   placeholder=" "
						   min="100"
						   max="99999"
						   oninvalid="this.setCustomValidity('{{ __('site.investment.form.validation.surface_range') }}')"
						   oninput="this.setCustomValidity('')">

					

					<span class="d-block">
						{{ __('site.investment.form.validation.surface_hint') }}
					</span>
				</div>

							
			</div>

            <div class="form-group row">
                <label for="usage_id" class="col-sm-2 col-form-label">  {{ __('site.investment.form.label.usage_type') }}</label>
                <div class="col-sm-4">
                     <select required class="form-control @error('usage_id') is-invalid @enderror" id="usage_id" name="usage_id">
                        <option value="" disabled selected>{{ __('site.investment.form.placeholder.choose') }}</option>
                        @foreach($usagesImmobilier as $usage)
                            <option value="{{ $usage->id_usage_imm }}">{{ trans_field($usage, 'usage') }}</option>
                        @endforeach
                    </select>
					
                </div>
                <label for="document_propriete" class="col-sm-2 col-form-label"> {{ __('site.investment.form.label.document_property') }}</label>
                <div class="col-sm-4">
					<input required type="file" 
					   class="form-control @error('document_propriete') is-invalid @enderror" 
					   id="document_propriete" 
					   name="document_propriete">
				
                </div>
            </div>
            <h4>{{ __('site.investment.form.components.title') }}</h4>
		
            



			<div class="form-group row">
    <label for="salle_exercice" class="col-sm-2 col-form-label">{{ __('site.investment.form.components.exercise_hall') }}</label>
    <div class="col-sm-4">
        <select required class="form-control @error('salle_exercice') is-invalid @enderror" 
                id="salle_exercice" 
                name="salle_exercice" 
                onchange="toggleSection('salle_exercice', 'id_salle_exercice')">
            <option value="" disabled {{ old('salle_exercice', '') === '' ? 'selected' : '' }}>
                {{ __('site.investment.form.placeholder.choose') }}
            </option>
            <option value="1" {{ old('salle_exercice') === '1' ? 'selected' : '' }}>{{ __('site.yes') }}</option>
            <option value="0" {{ old('salle_exercice') === '0' ? 'selected' : '' }}>{{ __('site.no') }}</option>
        </select>
        
    </div>

    <div class="col-sm-6" id="id_salle_exercice" style="display: {{ old('salle_exercice') === '1' ? 'block' : 'none' }};">
		<div class="mb-2">
			<input type="number"
				   class="form-control @error('nbr_salle_exercice') is-invalid @enderror"
				   id="nbr_salle_exercice"
				   name="nbr_salle_exercice"
				   placeholder="{{ __('site.investment.form.placeholder.count') }}"
				   value="{{ old('nbr_salle_exercice') }}"
				   min="1" max="100"
				   oninput="this.value = Math.max(1, Math.min(100, this.value))">
			
		</div>
		<div>
			<input type="number"
				   class="form-control @error('superface_salle_exercice') is-invalid @enderror"
				   id="superface_salle"
				   name="superface_salle_exercice"
				   placeholder="{{ __('site.investment.form.placeholder.surface') }}"
				   value="{{ old('superface_salle_exercice') }}"
				   min="1" max="9999"
				   oninput="this.value = Math.max(1, Math.min(9999, this.value))">
			<small class="text-danger d-none surface-warning">
     {{ __('site.surface_exceeded') }}
</small>
		</div>
	</div>

</div>


			<div class="form-group row">
				<label for="piscine" class="col-sm-2 col-form-label">{{ __('site.investment.form.components.pool') }}</label>
				<div class="col-sm-4">
					<select required class="form-control @error('piscine') is-invalid @enderror" 
							id="piscine" 
							name="piscine" 
							onchange="toggleSection('piscine', 'id_piscine')">
						<option value="" disabled {{ old('piscine', '') === '' ? 'selected' : '' }}>
							{{ __('site.investment.form.placeholder.choose') }}
						</option>
						<option value="1" {{ old('piscine') === '1' ? 'selected' : '' }}>{{ __('site.yes') }}</option>
						<option value="0" {{ old('piscine') === '0' ? 'selected' : '' }}>{{ __('site.no') }}</option>
					</select>
					
				</div>

				<div class="col-sm-6" id="id_piscine" style="display: {{ old('piscine') === '1' ? 'block' : 'none' }};">
					<div class="mb-2">
						<input type="number"
							   class="form-control @error('nbr_piscine') is-invalid @enderror"
							   id="nbr_piscine"
							   name="nbr_piscine"
							   placeholder="{{ __('site.investment.form.placeholder.count') }}"
							   value="{{ old('nbr_piscine') }}" min="1" max="100"
               oninput="this.value = Math.max(1, Math.min(100, this.value))">
						
					</div>
					<div>
						<input type="number"
							   class="form-control @error('superface_piscine') is-invalid @enderror"
							   id="superface_piscine"
							   name="superface_piscine"
							   placeholder="{{ __('site.investment.form.placeholder.surface') }}"
							   value="{{ old('superface_piscine') }}" min="1" max="9999"
               oninput="this.value = Math.max(1, Math.min(9999, this.value))">
						<small class="text-danger d-none surface-warning">
     {{ __('site.surface_exceeded') }}
</small>
					</div>
				</div>
			</div>

			<div class="form-group row">
    <label for="vestiaire" class="col-sm-2 col-form-label">{{ __('site.investment.form.components.changing_rooms') }}</label>

    <div class="col-sm-4">
        <select required class="form-control @error('vestiaire') is-invalid @enderror" 
                id="vestiaire" 
                name="vestiaire" 
                onchange="toggleSection('vestiaire', 'id_vestiaire')">
            <option value="" disabled {{ old('vestiaire', '') === '' ? 'selected' : '' }}>
                {{ __('site.investment.form.placeholder.choose') }}
            </option>
            <option value="1" {{ old('vestiaire') === '1' ? 'selected' : '' }}>{{ __('site.yes') }}</option>
            <option value="0" {{ old('vestiaire') === '0' ? 'selected' : '' }}>{{ __('site.no') }}</option>
        </select>
        
    </div>

    <div class="col-sm-6" id="id_vestiaire" style="display: {{ old('vestiaire') === '1' ? 'block' : 'none' }};">
        <div class="mb-2">
            <input type="number"
                   class="form-control @error('nbr_vestiaire') is-invalid @enderror"
                   id="nbr_vestiaire"
                   name="nbr_vestiaire"
                   placeholder="{{ __('site.investment.form.placeholder.count') }}"
                   value="{{ old('nbr_vestiaire') }}" min="1" max="100"
               oninput="this.value = Math.max(1, Math.min(100, this.value))">
            
        </div>
        <div>
            <input type="number"
                   class="form-control @error('superface_vestiaire') is-invalid @enderror"
                   id="superface_vestiaire"
                   name="superface_vestiaire"
                   placeholder="{{ __('site.investment.form.placeholder.surface') }}"
                   value="{{ old('superface_vestiaire') }}" min="1" max="9999"
               oninput="this.value = Math.max(1, Math.min(9999, this.value))">
            <small class="text-danger d-none surface-warning">
     {{ __('site.surface_exceeded') }}
</small>
        </div>
    </div>
</div>


            <div class="form-group row">
    <label for="unitaires_sanitaire" class="col-sm-2 col-form-label">{{ __('site.investment.form.components.sanitary_units') }}</label>

    <div class="col-sm-4">
        <select required class="form-control @error('unitaires_sanitaire') is-invalid @enderror" 
                id="unitaires_sanitaire" 
                name="unitaires_sanitaire" 
                onchange="toggleSection('unitaires_sanitaire', 'id_unitaires_sanitaire')">
            <option value="" disabled {{ old('unitaires_sanitaire', '') === '' ? 'selected' : '' }}>
                {{ __('site.investment.form.placeholder.choose') }}
            </option>
            <option value="1" {{ old('unitaires_sanitaire') === '1' ? 'selected' : '' }}>{{ __('site.yes') }}</option>
            <option value="0" {{ old('unitaires_sanitaire') === '0' ? 'selected' : '' }}>{{ __('site.no') }}</option>
        </select>
        
    </div>

    <div class="col-sm-6" id="id_unitaires_sanitaire" style="display: {{ old('unitaires_sanitaire') === '1' ? 'block' : 'none' }};">
        <input type="number"
               class="form-control @error('superface_unitaires_sanitaire') is-invalid @enderror"
               id="superface_unitaires_sanitaire"
               name="superface_unitaires_sanitaire"
               placeholder="{{ __('site.investment.form.placeholder.surface') }}" min="1" max="9999"
               oninput="this.value = Math.max(1, Math.min(9999, this.value))"
               value="{{ old('superface_unitaires_sanitaire') }}">
        <small class="text-danger d-none surface-warning">
     {{ __('site.surface_exceeded') }}
</small>
    </div>
</div>

<div class="form-group row">
    <label for="stockage_conservation" class="col-sm-2 col-form-label">{{ __('site.investment.form.components.storage_space') }}</label>

    <div class="col-sm-4">
        <select required class="form-control @error('stockage_conservation') is-invalid @enderror" 
                id="stockage_conservation" 
                name="stockage_conservation" 
                onchange="toggleSection('stockage_conservation', 'id_stockage_conservation')">
            <option value="" disabled {{ old('stockage_conservation', '') === '' ? 'selected' : '' }}>
                {{ __('site.investment.form.placeholder.choose') }}
            </option>
            <option value="1" {{ old('stockage_conservation') === '1' ? 'selected' : '' }}>{{ __('site.yes') }}</option>
            <option value="0" {{ old('stockage_conservation') === '0' ? 'selected' : '' }}>{{ __('site.no') }}</option>
        </select>
        
    </div>

    <div class="col-sm-6" id="id_stockage_conservation" style="display: {{ old('stockage_conservation') === '1' ? 'block' : 'none' }};">
        <input type="number"
               class="form-control @error('superface_stockage_conservation') is-invalid @enderror"
               id="superface_stockage_conser"
               name="superface_stockage_conservation"
               placeholder="{{ __('site.investment.form.placeholder.surface') }}"
               value="{{ old('superface_stockage_conservation') }}" min="1" max="9999"
               oninput="this.value = Math.max(1, Math.min(9999, this.value))">
        <small class="text-danger d-none surface-warning">
     {{ __('site.surface_exceeded') }}
</small>
    </div>
</div>

            <div class="form-group row">
    <label for="espace_exterieur" class="col-sm-2 col-form-label">{{ __('site.investment.form.components.outdoor_space') }}</label>
    <div class="col-sm-4">
        <select required class="form-control @error('espace_exterieur') is-invalid @enderror" 
                id="espace_exterieur" 
                name="espace_exterieur" 
                onchange="toggleSection('espace_exterieur', 'id_espace_exterieur')">
            <option value="" disabled {{ old('espace_exterieur', '') === '' ? 'selected' : '' }}>
                {{ __('site.investment.form.placeholder.choose') }}
            </option>
            <option value="1" {{ old('espace_exterieur') === '1' ? 'selected' : '' }}>{{ __('site.yes') }}</option>
            <option value="0" {{ old('espace_exterieur') === '0' ? 'selected' : '' }}>{{ __('site.no') }}</option>
        </select>
       
    </div>

    <div class="col-sm-6" id="id_espace_exterieur" style="display: {{ old('espace_exterieur') === '1' ? 'block' : 'none' }};">
        <input type="number"
               class="form-control @error('superface_espace_exterieur') is-invalid @enderror"
               id="superface_espace_exterieur"
               name="superface_espace_exterieur"
               placeholder="{{ __('site.investment.form.placeholder.surface') }}" min="1" max="9999"
               oninput="this.value = Math.max(1, Math.min(9999, this.value))"
               value="{{ old('superface_espace_exterieur') }}">
        <small class="text-danger d-none surface-warning">
     {{ __('site.surface_exceeded') }}
</small>
    </div>
</div>

<div class="form-group row">
    <label for="garage" class="col-sm-2 col-form-label">{{ __('site.investment.form.components.garage') }}</label>
    <div class="col-sm-4">
        <select required class="form-control @error('garage') is-invalid @enderror" 
                id="garage" 
                name="garage" 
                onchange="toggleSection('garage', 'id_garage')">
            <option value="" disabled {{ old('garage', '') === '' ? 'selected' : '' }}>
                {{ __('site.investment.form.placeholder.choose') }}
            </option>
            <option value="1" {{ old('garage') === '1' ? 'selected' : '' }}>{{ __('site.yes') }}</option>
            <option value="0" {{ old('garage') === '0' ? 'selected' : '' }}>{{ __('site.no') }}</option>
        </select>
       
    </div>

    <div class="col-sm-6" id="id_garage" style="display: {{ old('garage') === '1' ? 'block' : 'none' }};">
        <input type="number"
               class="form-control @error('superface_garage') is-invalid @enderror"
               id="superface_garage"
               name="superface_garage"
               placeholder="{{ __('site.investment.form.placeholder.surface') }}"
               value="{{ old('superface_garage') }}" min="1" max="9999"
               oninput="this.value = Math.max(1, Math.min(9999, this.value))">
       <small class="text-danger d-none surface-warning">
     {{ __('site.surface_exceeded') }}
</small>
    </div>
</div>








            <div class="form-group row">
                <label for="autres_surfaces" class="col-sm-2 col-form-label"> {{ __('site.investment.form.label.other_surfaces') }} </label>
                <div class="col-sm-10">
                    <input  type="number" class="form-control" disabled id="autres_surfaces" name="autres_surfaces" placeholder="{{ __('site.investment.form.placeholder.count') }}">
                </div>
            </div>
        </div>
            <div class="form-group row text-center">
                <button type="button" class="btn btn-success font-weight-medium" id="confirmSubmitBtn">
					{{ __('site.investment.form.button.submit') }}
				</button>
            </div>
		

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const submitBtn = document.getElementById('confirmSubmitBtn');
    const form = document.getElementById('salleSportForm');

    submitBtn.addEventListener('click', function (e) {
        e.preventDefault(); // Empêche la soumission directe

        // Supprimer tous les styles d'erreur précédents
        form.querySelectorAll('.is-invalid').forEach(el => {
            el.classList.remove('is-invalid');
        });

        let firstInvalidElement = null;

        // 1. Vérifier les champs required (sans afficher le message du navigateur)
        const requiredFields = form.querySelectorAll('[required]');
        
        requiredFields.forEach(field => {
            // Pour les selects, vérifier si la valeur est vide
            if (field.tagName === 'SELECT') {
                if (!field.value) {
                    if (!firstInvalidElement) {
                        firstInvalidElement = field;
                    }
                    field.classList.add('is-invalid');
                }
            } 
            // Pour les inputs
            else if (field.tagName === 'INPUT') {
                if (!field.value.trim()) {
                    if (!firstInvalidElement) {
                        firstInvalidElement = field;
                    }
                    field.classList.add('is-invalid');
                }
            }
        });

        // Si un champ required est vide, retourner dessus
        if (firstInvalidElement) {
            firstInvalidElement.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
            
            firstInvalidElement.focus();
            
            // NE PAS appeler reportValidity() pour éviter le message du navigateur
            return;
        }

        // 2. Vérifier les champs conditionnels (si "Oui" est sélectionné)
        const conditionalFields = [
            {selectId: 'salle_exercice', inputIds: ['nbr_salle_exercice', 'superface_salle']},
            {selectId: 'piscine', inputIds: ['nbr_piscine', 'superface_piscine']},
            {selectId: 'vestiaire', inputIds: ['nbr_vestiaire', 'superface_vestiaire']},
            {selectId: 'unitaires_sanitaire', inputIds: ['superface_unitaires_sanitaire']},
            {selectId: 'stockage_conservation', inputIds: ['superface_stockage_conser']},
            {selectId: 'espace_exterieur', inputIds: ['superface_espace_exterieur']},
            {selectId: 'garage', inputIds: ['superface_garage']}
        ];

        let invalidConditionalField = null;
        
        conditionalFields.forEach(fieldGroup => {
            const select = document.getElementById(fieldGroup.selectId);
            if (select && select.value === '1') {
                // Si "Oui" est sélectionné, vérifier les champs correspondants
                fieldGroup.inputIds.forEach(inputId => {
                    const input = document.getElementById(inputId);
                    if (input && !input.value.trim()) {
                        invalidConditionalField = input;
                        return;
                    }
                });
            }
            if (invalidConditionalField) return;
        });

        if (invalidConditionalField) {
            invalidConditionalField.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
            invalidConditionalField.focus();
            invalidConditionalField.classList.add('is-invalid');
            return;
        }

        // 3. Vérifier également les surfaces
        const totalSurfaceInput = document.getElementById('superfici_m2');
        const autresSurfacesInput = document.getElementById('autres_surfaces');
        const surfaceFields = [
            'superface_salle',
            'superface_piscine',
            'superface_vestiaire',
            'superface_unitaires_sanitaire',
            'superface_stockage_conser',
            'superface_espace_exterieur',
            'superface_garage'
        ];

        function getValue(id) {
            const el = document.getElementById(id);
            return el && el.value ? parseFloat(el.value) : 0;
        }

        const totalSurface = parseFloat(totalSurfaceInput.value) || 0;
        let sum = 0;
        surfaceFields.forEach(id => {
            sum += getValue(id);
        });

        // Vérifier si la somme des surfaces dépasse la surface totale
        if (sum > totalSurface) {
            // Trouver le champ de surface total
            totalSurfaceInput.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
            
            totalSurfaceInput.focus();
            totalSurfaceInput.classList.add('is-invalid');
            
            // Afficher un message d'alerte simple pour les surfaces
            Swal.fire({
                title: "{{ __('site.surface_exceeded_title') }}",
                text: "{{ __('site.surface_exceeded') }}",
                icon: 'error',
                confirmButtonText: "{{ __('site.ok') }}",
                customClass: {
                    popup: 'swal-wide',
                    title: 'swal-title-center'
                }
            });
            return;
        }

        // 4. Si tout est bon, afficher la popup de confirmation
        Swal.fire({
            title: "{{ __('validation.title') }}",
            icon: 'warning',
            width: '1000px',
            padding: '1.5rem',
            html: `
                <div class="swal-text">
                    <p class="mb-2">
                        {{ __('validation.message_main') }}
                    </p>
                    <p class="text-muted">
                        {{ __('validation.message_note') }}
                    </p>
                </div>
            `,
            showCancelButton: true,
            reverseButtons: true,
            focusCancel: true,
            confirmButtonText: "{{ __('site.confirm') }}",
            cancelButtonText: "{{ __('site.cancel') }}",
            buttonsStyling: false,
            customClass: {
                popup: 'swal-wide',
                title: 'swal-title-center',
                confirmButton: 'btn btn-danger px-4',
                cancelButton: 'btn btn-outline-secondary px-4'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>{{ __("site.investment.form.button.submit") }}';
                form.submit();
            }
        });
    });

    // Supprimer la classe is-invalid quand l'utilisateur commence à taper
    form.querySelectorAll('input, select, textarea').forEach(element => {
        element.addEventListener('input', function() {
            this.classList.remove('is-invalid');
        });
        element.addEventListener('change', function() {
            this.classList.remove('is-invalid');
        });
    });
});
</script>

		
<script>
document.addEventListener('DOMContentLoaded', function () {
    const totalSurfaceInput = document.getElementById('superfici_m2');
    const autresSurfacesInput = document.getElementById('autres_surfaces');
    const surfaceFields = [
        'superface_salle',
        'superface_piscine',
        'superface_vestiaire',
        'superface_unitaires_sanitaire',
        'superface_stockage_conser',
        'superface_espace_exterieur',
        'superface_garage'
    ];

    function hideAllWarnings() {
        document.querySelectorAll('.surface-warning')
            .forEach(w => w.classList.add('d-none'));
    }

    function getValue(id) {
        const el = document.getElementById(id);
        return el && el.value ? parseFloat(el.value) : 0;
    }

    function calculateSurfaces(changedField = null) {
        const totalSurface = parseFloat(totalSurfaceInput.value) || 0;
        let sum = 0;

        surfaceFields.forEach(id => sum += getValue(id));

        hideAllWarnings();

        if (!totalSurface) {
            autresSurfacesInput.value = '';
            return;
        }

        // ❌ dépassement
        if (sum > totalSurface && changedField) {
            changedField.value = ''; // supprimer la valeur
            const warning = changedField.nextElementSibling;

            if (warning && warning.classList.contains('surface-warning')) {
                warning.classList.remove('d-none'); // afficher message
            }

            autresSurfacesInput.value = '';
            return;
        }

        // ✅ calcul normal
        autresSurfacesInput.value = (totalSurface - sum).toFixed(2);
    }

    totalSurfaceInput.addEventListener('input', () => calculateSurfaces());

    surfaceFields.forEach(id => {
        const el = document.getElementById(id);
        if (el) {
            el.addEventListener('input', function () {
                calculateSurfaces(this);
            });
        }
    });
});
</script>

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

@endsection

@section('scripts')
{{-- Scripts spécifiques au formulaire --}}
<script src="{{ asset('BackOfficeAR/js/salle_sport_form.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Désactiver nice-select pour tous les selects dans le formulaire
        const formSelects = document.querySelectorAll('.salle-sport-form select');
        formSelects.forEach(select => {
            const niceSelect = select.nextElementSibling;
            if (niceSelect && niceSelect.classList.contains('nice-select')) {
                niceSelect.remove();
            }
        });

        // Initialiser notre gestionnaire de formulaire
        if (typeof SalleSportForm !== 'undefined') {
            SalleSportForm.init();
        }
    });
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const gouvernoratSelect = document.getElementById('gouvernorat_id');
    const delegationSelect = document.getElementById('delegation_id');
    const locale = @json(app()->getLocale());
    const oldDelegation = @json(old('delegation_id', ''));

    function setLoading() {
        delegationSelect.innerHTML = `<option value="" disabled selected>{{ __('site.investment.form.placeholder.loading') }}</option>`;
        delegationSelect.disabled = true;
    }

    function setEmptyChoose() {
        delegationSelect.innerHTML = `<option value="" disabled selected>{{ __('site.investment.form.placeholder.choose') }}</option>`;
        delegationSelect.disabled = false;
    }

    async function loadDelegationsFor(gouvId) {
        if (!gouvId) {
            setEmptyChoose();
            return;
        }

        setLoading();

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

        try {
            const resp = await fetch(url);
            if (!resp.ok) throw new Error('Network response was not ok');
            const data = await resp.json();

            // Reset and add choose placeholder
            delegationSelect.innerHTML = `<option value="" disabled selected>{{ __('site.investment.form.placeholder.choose') }}</option>`;

            data.forEach(d => {
                const option = document.createElement('option');
                option.value = d.id_delegation;

                // trans_field-like logic in JS:
                // try to use the locale-specific column first (e.g. nom_ar / nom_fr / nom_en),
                // then fall back to other known fields.
                let text = '';

                // direct locale key like nom_ar, nom_fr, nom_en
                if (d[`nom_${locale}`]) {
                    text = d[`nom_${locale}`];
                } else {
                    // try common fallbacks
                    text = d.nom_fr || d.nom_en || d.nom_ar || d.name || d.nom || '';
                }

                option.text = text;
                // restore old selection if present
                if (oldDelegation && String(oldDelegation) === String(d.id_delegation)) {
                    option.selected = true;
                }

                delegationSelect.add(option);
            });

            delegationSelect.disabled = false;
        } catch (err) {
            console.error('Failed to load delegations:', err);
            // Graceful fallback: keep choose placeholder enabled
            setEmptyChoose();
        }
    }

    // attach change listener
    if (gouvernoratSelect) {
        gouvernoratSelect.addEventListener('change', function () {
            loadDelegationsFor(this.value);
        });

        // initialize on page load if a gouvernorat is already selected
        if (gouvernoratSelect.value) {
            loadDelegationsFor(gouvernoratSelect.value);
        }
    }
});
</script>

<script>
function toggleSection(selectId, sectionId) {
    const select = document.getElementById(selectId);
    const section = document.getElementById(sectionId);

    if (!select || !section) return;

    const inputs = section.querySelectorAll('input');

    if (select.value === '1') {
        // AFFICHER
        section.style.display = 'block';

        inputs.forEach(input => {
            input.required = true;
        });

    } else {
        // CACHER
        section.style.display = 'none';

        inputs.forEach(input => {
            input.required = false;
            input.value = ''; 
        });
    }
}
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Initialiser les sections au chargement de la page
    toggleSection('salle_exercice', 'id_salle_exercice');
    toggleSection('piscine', 'id_piscine');
    toggleSection('vestiaire', 'id_vestiaire');
    toggleSection('unitaires_sanitaire', 'id_unitaires_sanitaire');
    toggleSection('stockage_conservation', 'id_stockage_conservation');
    toggleSection('espace_exterieur', 'id_espace_exterieur');
    toggleSection('garage', 'id_garage');
});
</script>

@endsection

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