@extends('backoffice.dashboard')
@section('content')
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire.css') }}">

@if(Auth::check())
<div class="container">
    <style>
        .numero-cadre {
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 25px;
            margin-right: 5px;
            text-align: center;
            border-radius: 5px;
            font-family: Arial, sans-serif;
            font-weight: bold;
            font-size: 12px;
            color: #ffffff;
            background-color: #d82b2a;
            vertical-align: middle;
        }
		.field-error {
        color: #d9534f;
        font-size: .9rem;
        margin-top: .25rem;
        display: block; /* important */
		}
		.is-invalid { border-color: #d9534f !important; }
    </style>


    
    <form action="{{ route('auberges.store') }}" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>

        @csrf 
        <h3 class="mb-4 text-center"> استمارة اضافة مركب او مركز اقامة </h3>
        <h4 class="mt-3">المعطيات</h4>

		<div class="row mt-3 text-end">
        <label class="col-sm-2 col-form-label">الإسم بالعربية<span class="text-danger">*</span></label>
        <div class="col-sm-4">
           <input name="nom_ar" type="text" required 
       class="form-control @error('nom_ar') is-invalid @enderror"
       value="{{ old('nom_ar') }}"
       maxlength="100">
            @error('nom_ar')
                <span class="text-danger small">{{ $message }}</span>
            @enderror
        </div>

        <label class="col-sm-2 col-form-label">الإسم بالفرنسية<span class="text-danger">*</span></label>
        <div class="col-sm-4">
            <input name="nom_fr" type="text" required
                   class="form-control @error('nom_fr') is-invalid @enderror" maxlength="100"
                   value="{{ old('nom_fr') }}">
            @error('nom_fr')
                <span class="text-danger small">{{ $message }}</span>
            @enderror
        </div>
    </div>

    <!-- Ligne 2 : Nom anglais et EPA -->
    <div class="row mt-3 text-end">
        <label class="col-sm-2 col-form-label">الإسم بالإنقليزية<span class="text-danger">*</span></label>
        <div class="col-sm-4">
            <input name="nom_en" type="text" required maxlength="100"
                   class="form-control @error('nom_en') is-invalid @enderror"
                   value="{{ old('nom_en') }}">
            @error('nom_en')
                <span class="text-danger small">{{ $message }}</span>
            @enderror
        </div>

        <label class="col-sm-2 col-form-label">الصبغة<span class="text-danger">*</span></label>
        <div class="col-sm-4">
            <select name="epa" required
                    class="form-control @error('epa') is-invalid @enderror">
                <option value="">-- اختر الصبغة --</option>
                <option value="EPA" {{ old('epa') == 'EPA' ? 'selected' : '' }}>EPA</option>
                <option value="Non EPA" {{ old('epa') == 'Non EPA' ? 'selected' : '' }}>Non EPA</option>
            </select>
            @error('epa')
                <span class="text-danger small">{{ $message }}</span>
            @enderror
        </div>
    </div>


	<script>
(function () {
    'use strict';
    var forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
})();
</script>

        <div class="form-group mt-3">
			<label for="description_ar" class="col-sm-6 col-form-label">تعريف المركز بالعربية<span class="text-danger">*</span></label>
			<textarea name="description_ar" id="description_ar" required maxlength="2000" 
					  class="form-control @error('description_ar') is-invalid @enderror" 
					  rows="4">{{ old('description_ar') }}</textarea>
			@error('description_ar')
				<span class="text-danger small">{{ $message }}</span>
			@enderror
		</div>

		<div class="form-group mt-3">
			<label for="description_fr" class="col-sm-6 col-form-label">تعريف المركز بالفرنسية<span class="text-danger">*</span></label>
			<textarea name="description_fr" id="description_fr" required maxlength="2000" 
					  class="form-control @error('description_fr') is-invalid @enderror" 
					  rows="4">{{ old('description_fr') }}</textarea>
			@error('description_fr')
				<span class="text-danger small">{{ $message }}</span>
			@enderror
		</div>

		<div class="form-group mt-3">
			<label for="description_en" class="col-sm-6 col-form-label">تعريف المركز بالإنقليزية<span class="text-danger">*</span></label>
			<textarea name="description_en" id="description_en" required maxlength="2000" 
					  class="form-control @error('description_en') is-invalid @enderror" 
					  rows="4">{{ old('description_en') }}</textarea>
			@error('description_en')
				<span class="text-danger small">{{ $message }}</span>
			@enderror
		</div>

		


<!--div class="row mt-3">
    <div class="col-12">
        <h5 class="text-end">تحديد موقع المركز على الخريطة</h5>
    </div>
</div>
<div class="row mt-3 text-end">
    <div class="col-sm-12">
        <div class="mb-3">
            <label for="map_link" class="form-label fw-bold">رابط موقع المركز على Google Maps <span class="text-danger">*</span></label>
			<input type="url" 
       id="map_link" 
       name="map_link"  
       class="form-control @error('map_link') is-invalid @enderror" 
       placeholder="مثال: https://www.google.com/maps/place/... أو https://www.google.com/maps/embed?..."
       value="{{ old('map_link') }}" 
       required
       maxlength="500"
       title="يجب أن يكون رابط صحيح من Google Maps (مثال: https://www.google.com/maps/place/... أو https://www.google.com/maps/embed?...)"
>

            <div class="d-flex justify-content-between align-items-center mt-1">
                <small class="form-text text-muted">
                    الرجاء نسخ الرابط الكامل من موقع المركز على Google Maps
                </small>
                <small id="charCount" class="text-muted">0/500</small>
            </div>
            
            <div id="map_link_error" class="invalid-feedback" style="display: none;">
				الرابط غير صحيح. يجب أن يكون رابط Google Maps مثل: 
				https://www.google.com/maps/place/... أو https://goo.gl/maps/...
			</div>
			@error('map_link')
				<div class="invalid-feedback d-block">
					{{ $message }}
				</div>
			@enderror
        </div>
    </div>
</div-->

<script>
document.addEventListener('DOMContentLoaded', function() {
    const mapLinkInput = document.getElementById('map_link');
    const charCount = document.getElementById('charCount');
    const mapLinkError = document.getElementById('map_link_error');
    
    if (mapLinkInput) {
        // Fonction améliorée pour vérifier les liens Google Maps
        function isValidGoogleMapsLink(url) {
            url = url.trim().toLowerCase();
            
            // Liste des patterns Google Maps acceptés
            // Ajoutez ce pattern à la liste des patterns
const googleMapsPatterns = [
    // Format standard: https://www.google.com/maps/place/...
    /^(https?:\/\/)?(www\.)?(google\.[a-z]{2,3}(\.[a-z]{2})?\/maps\/)/,
    
    // Format maps.google.com/...
    /^(https?:\/\/)?(maps\.google\.[a-z]{2,3}(\.[a-z]{2})?\/)/,
    
    // Format raccourci goo.gl/maps/...
    /^(https?:\/\/)?(goo\.gl\/maps\/)/,
    
    // Format maps.app.goo.gl/...
    /^(https?:\/\/)?(maps\.app\.goo\.gl\/)/,
    
    // Format avec paramètres ?q=...
    /^(https?:\/\/)?(www\.)?(google\.[a-z]{2,3}(\.[a-z]{2})?\/maps\?q=)/,
    
    // Format avec paramètres /dir/...
    /^(https?:\/\/)?(www\.)?(google\.[a-z]{2,3}(\.[a-z]{2})?\/maps\/dir\/)/,
    
    // ★ AJOUTEZ CE PATTERN POUR LES LIENS EMBED ★
    /^(https?:\/\/)?(www\.)?(maps\.)?google\.[a-z]{2,3}(\.[a-z]{2})?\/maps\/embed/
];
            
            // Vérifier si l'URL correspond à l'un des patterns
            for (const pattern of googleMapsPatterns) {
                if (pattern.test(url)) {
                    return true;
                }
            }
            
            // Vérifier aussi si l'URL contient des mots-clés Google Maps
            const keywords = [
                'google.com/maps',
                'maps.google.com',
                'goo.gl/maps',
                'maps.app.goo.gl',
                'google.fr/maps',
                'google.tn/maps',
                'google.co.uk/maps',
                'google.de/maps',
                'google.es/maps',
                'google.it/maps',
                'google.ma/maps'
            ];
            
            for (const keyword of keywords) {
                if (url.includes(keyword)) {
                    return true;
                }
            }
            
            return false;
        }
        
        // Mettre à jour le compteur de caractères
        function updateCharCount() {
            if (charCount) {
                const length = mapLinkInput.value.length;
                charCount.textContent = `${length}/500`;
                
                if (length > 490) {
                    charCount.className = 'text-danger';
                } else if (length > 450) {
                    charCount.className = 'text-warning';
                } else {
                    charCount.className = 'text-muted';
                }
            }
        }
        
        // Limiter les caractères en temps réel
        mapLinkInput.addEventListener('input', function() {
            if (this.value.length > 500) {
                this.value = this.value.substring(0, 500);
            }
            updateCharCount();
            validateMapLink(this);
        });
        
        // Validation lors de la perte de focus
        mapLinkInput.addEventListener('blur', function() {
            validateMapLink(this);
        });
        
        // Validation lors du focus
        mapLinkInput.addEventListener('focus', function() {
            updateCharCount();
        });
        
        function validateMapLink(input) {
            const value = input.value.trim();
            
            if (value === '') {
                input.classList.remove('is-valid', 'is-invalid');
                if (mapLinkError) mapLinkError.style.display = 'none';
                return;
            }
            
            // Vérifier la longueur
            if (value.length > 500) {
                input.classList.remove('is-valid');
                input.classList.add('is-invalid');
                if (mapLinkError) {
                    mapLinkError.textContent = 'الرابط طويل جدًا (الحد الأقصى 500 حرف)';
                    mapLinkError.style.display = 'block';
                }
                return;
            }
            
            // Vérifier si c'est une URL valide
            try {
                if (value && !value.startsWith('http://') && !value.startsWith('https://')) {
                    new URL('https://' + value);
                } else {
                    new URL(value);
                }
            } catch (err) {
                input.classList.remove('is-valid');
                input.classList.add('is-invalid');
                if (mapLinkError) {
                    mapLinkError.textContent = 'الرابط غير صحيح. الرجاء التأكد من صيغة الرابط (ابدأ بـ http:// أو https://)';
                    mapLinkError.style.display = 'block';
                }
                return;
            }
            
            // Vérifier le format Google Maps
            if (isValidGoogleMapsLink(value)) {
                input.classList.remove('is-invalid');
                input.classList.add('is-valid');
                if (mapLinkError) mapLinkError.style.display = 'none';
            } else {
                input.classList.remove('is-valid');
                input.classList.add('is-invalid');
                if (mapLinkError) {
                    mapLinkError.innerHTML = 'الرابط يجب أن يكون من Google Maps.<br>' +
                                           'مثال: https://www.google.com/maps/place/...<br>' +
                                           'أو: https://goo.gl/maps/...<br>' +
                                           'أو: https://www.google.fr/maps/place/...';
                    mapLinkError.style.display = 'block';
                }
            }
        }
        
        // Éviter la validation HTML5 par défaut
        mapLinkInput.addEventListener('invalid', function(e) {
            e.preventDefault();
            validateMapLink(this);
        });
        
        // Pré-validation si le champ a déjà une valeur
        if (mapLinkInput.value) {
            updateCharCount();
            validateMapLink(mapLinkInput);
        }
        
        // Validation avant soumission
        const form = mapLinkInput.closest('form');
        if (form) {
            form.addEventListener('submit', function(e) {
                const value = mapLinkInput.value.trim();
                
                if (!value) {
                    e.preventDefault();
                    showAlert('error', 'الرجاء إدخال رابط Google Maps.');
                    mapLinkInput.focus();
                    return;
                }
                
                if (value.length > 500) {
                    e.preventDefault();
                    showAlert('error', 'رابط Google Maps يجب ألا يتجاوز 500 حرف.');
                    mapLinkInput.focus();
                    return;
                }
                
                if (!isValidGoogleMapsLink(value)) {
                    e.preventDefault();
                    showAlert('error', 'الرابط غير صحيح. يجب أن يكون رابط Google Maps مثل:\nhttps://www.google.com/maps/place/\nأو https://goo.gl/maps/\nأو https://www.google.fr/maps/place/');
                    mapLinkInput.focus();
                    return;
                }
                
                // Vérifier que c'est une URL valide
                try {
                    if (value && !value.startsWith('http://') && !value.startsWith('https://')) {
                        new URL('https://' + value);
                    } else {
                        new URL(value);
                    }
                } catch (err) {
                    e.preventDefault();
                    showAlert('error', 'الرابط غير صحيح. الرجاء التأكد من صحة الرابط.');
                    mapLinkInput.focus();
                    return;
                }
            });
        }
        
        // Fonction pour afficher des alertes personnalisées
        function showAlert(type, message) {
            // Utiliser SweetAlert2 si disponible, sinon alert() natif
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: type,
                    title: type === 'error' ? 'خطأ' : 'تنبيه',
                    text: message,
                    confirmButtonText: 'حسنًا',
                    confirmButtonColor: '#dc3545'
                });
            } else {
                alert(message);
            }
        }
        
        // Afficher un exemple quand on clique sur le placeholder
        mapLinkInput.addEventListener('click', function() {
            if (!this.value) {
                this.value = 'https://www.google.com/maps/place/...';
                updateCharCount();
                validateMapLink(this);
                setTimeout(() => this.select(), 100);
            }
        });
    }
});
</script>

<style>
/* Style pour le compteur de caractères */
#charCount {
    font-family: monospace;
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: #f8f9fa;
}

/* Style pour l'état valide/invalide */
.form-control.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Style pour le message d'erreur personnalisé */
#map_link_error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.25rem;
    padding: 0.75rem 1.25rem;
    margin-top: 0.5rem;
    color: #721c24;
    font-size: 0.875rem;
}
</style>



        <div class="row mt-3 text-end">
			<label class="col-sm-2 col-form-label"> الوسط الذي توجد به المؤسسة <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<select name="id_milieu_auberge" 
						class="form-control @error('id_milieu_auberge') is-invalid @enderror" required>
					<option value="">-- اختر الوسط --</option>
					@foreach($milieux as $milieu)
						<option value="{{ $milieu->id_type }}" 
							{{ old('id_milieu_auberge') == $milieu->id_type ? 'selected' : '' }}>
							{{ $milieu->type_ar }}
						</option>
					@endforeach
				</select>
				@error('id_milieu_auberge')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>           
		</div> 

		<div class="row mt-3 text-end">
			<label class="col-sm-2 col-form-label"> العنوان بالعربية <span class="text-danger">*</span> </label>
			<div class="col-sm-4">
				<input type="text" name="adresse_ar" required
					   class="form-control @error('adresse_ar') is-invalid @enderror" maxlength="200"
					   value="{{ old('adresse_ar') }}">
				@error('adresse_ar')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>

			<label class="col-sm-2 col-form-label"> العنوان بالفرنسية <span class="text-danger">*</span> </label>
			<div class="col-sm-4">
				<input type="text" name="adresse_fr" required
					   class="form-control @error('adresse_fr') is-invalid @enderror" maxlength="200"
					   value="{{ old('adresse_fr') }}">
				@error('adresse_fr')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>
		</div>

		<div class="row mt-3 text-end">
			<label class="col-sm-2 col-form-label"> العنوان بالإنجليزية <span class="text-danger">*</span> </label>
			<div class="col-sm-4">
				<input type="text" name="adresse_en" required
					   class="form-control @error('adresse_en') is-invalid @enderror" maxlength="200"
					   value="{{ old('adresse_en') }}">
				@error('adresse_en')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>

			<label class="col-sm-2 col-form-label"> الترقيم البريدي <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<input type="text" name="code_postal"  required  pattern="[0-9]{4}" maxlength="4" inputmode="numeric"
					   class="form-control @error('code_postal') is-invalid @enderror"
					   value="{{ old('code_postal') }}">
				@error('code_postal')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>
		</div>


        <div class="row mt-3 text-end">
			<label class="col-sm-2 col-form-label"> الولاية <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<select name="gouvernorat_id" id="gouvernorat_id" 
						class="form-control @error('gouvernorat_id') is-invalid @enderror" required>
					<option value="" disabled selected>اختر الولاية...</option>
					@foreach($gouvernorats as $gouv)
						<option value="{{ $gouv->id_gouver }}" 
							{{ old('gouvernorat_id') == $gouv->id_gouver ? 'selected' : '' }}>
							{{ $gouv->nom_ar }}
						</option>
					@endforeach
				</select>
				@error('gouvernorat_id') 
					<span class="text-danger small d-block">{{ $message }}</span> 
				@enderror
			</div>

			<label class="col-sm-2 col-form-label"> المعتمدية <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<select name="delegation_id" id="delegation_id" 
						class="form-control @error('delegation_id') is-invalid @enderror" required disabled>
					<option value="" disabled selected>اختر...</option>
				</select>
				@error('delegation_id') 
					<span class="text-danger small d-block">{{ $message }}</span> 
				@enderror
			</div>
		</div>

		<div class="row mt-3 text-end">
			<label class="col-sm-2 col-form-label"> الهاتف القار <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<input type="text" name="contact_tel" required
					   class="form-control @error('contact_tel') is-invalid @enderror" pattern="[0-9]{8}"  maxlength="8" inputmode="numeric"
					   value="{{ old('contact_tel') }}">
				@error('contact_tel')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>

			<label class="col-sm-2 col-form-label"> الفاكس <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<input type="text" name="fax" 
					   class="form-control @error('fax') is-invalid @enderror" required pattern="[0-9]{8}"  maxlength="8" inputmode="numeric"
					   value="{{ old('fax') }}">
				@error('fax')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>
		</div>

		<div class="row mt-3 text-end">
			<label class="col-sm-2 col-form-label"> البريد الإلكتروني للمؤسسة <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<input type="email" name="contact_email"  id="contactEmail"
					   class="form-control @error('contact_email') is-invalid @enderror"
       value="{{ old('contact_email') }}"
       required
       maxlength="100"
       placeholder="exemple@email.com">
	   <span id="emailError" class="text-danger small"></span>
				@error('contact_email')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>

			<!--label class="col-sm-2 col-form-label"> صورة المركب<span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<input type="file" name="image" id="image"  required
					   class="form-control @error('image') is-invalid @enderror" accept="image/*">
				@error('image')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div-->
		</div>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const emailInput = document.getElementById('contactEmail');
    const emailError = document.getElementById('emailError');

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    emailInput.addEventListener('input', () => {
        const val = emailInput.value;

        if (val.length > 100) {
            emailInput.classList.add('is-invalid');
            emailError.textContent = 'البريد الإلكتروني يجب ألا يتجاوز 100 حرف';
        }
        else if (!emailRegex.test(val)) {
            emailInput.classList.add('is-invalid');
            emailError.textContent = 'البريد الإلكتروني غير صالح';
        }
        else {
            emailInput.classList.remove('is-invalid');
            emailError.textContent = '';
        }
    });

});
</script>

		<!--div class="row mt-3 text-end">
			<label class="col-sm-2 col-form-label">سعر الليلة (سرير) <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<input type="number" name="prix_lit" step="0.01" min="0" 
					   class="form-control @error('prix_lit') is-invalid @enderror"
					   value="{{ old('prix_lit') }}">
				@error('prix_lit')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>
		</div-->


        <h4 class="mt-3"> مدير المؤسسة </h4>

		<div class="row mt-3 text-end">
			<label class="col-sm-2 col-form-label"> الإسم واللقب <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<input type="text" name="nom_directeur" 
					   class="form-control @error('nom_directeur') is-invalid @enderror" required maxlength="100"
					   value="{{ old('nom_directeur') }}">
				@error('nom_directeur')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>

			<label class="col-sm-2 col-form-label"> الهاتف الجوال <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<input type="text" name="tel_directeur" required
					   class="form-control @error('tel_directeur') is-invalid @enderror" pattern="[0-9]{8}"  maxlength="8" inputmode="numeric"
					   value="{{ old('tel_directeur') }}">
				@error('tel_directeur')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>
		</div>

		<h4 class="mt-3"> الخدمات</h4>

		<div class="row mt-3 text-end">
			<label class="col-sm-2 col-form-label"> هل يوجد فضاء للمشروبات ؟ <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<select name="espace_boisson" id="espace_boisson"  required
						class="form-control @error('espace_boisson') is-invalid @enderror" required>
					<option value="" disabled selected>اختر...</option>
					<option value="1">نعم</option>
					<option value="0">لا</option>
				</select>
				@error('espace_boisson')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>

			<label class="col-sm-2 col-form-label"> مسبح  <span class="text-danger">*</span></label>
			<div class="col-sm-4">
				<select name="piscine" required
						class="form-control @error('piscine') is-invalid @enderror" required>
					<option value="" disabled selected>اختر...</option>
					<option value="1">نعم</option>
					<option value="0">لا</option>
				</select>
				@error('piscine')
					<span class="text-danger small">{{ $message }}</span>
				@enderror
			</div>
		</div>

<div class="form-group row mt-4">
    <h5 class="text-center mb-3">تعريفات الإقامة</h5>
    <table id="tarifs-table" class="table table-bordered">
        <thead class="table-light">
            <tr>
                <th>فرادى / مجموعات</th>
                <th>نوع الوفد المقيم</th>
                <th>
                    <div class="d-flex justify-content-around">
                        <span> بالمباني </span>
                        <span>تحت الخيام</span>
                    </div>
                </th>
                <th>ملاحظات</th>
                <th>إجراء</th>
            </tr>
        </thead>
        <tbody id="tarifs-body">
            <tr>
				<td>
					<select class="form-control" name="tarifs[0][type]" required>
						<option value="" disabled selected>اختر...</option>
						<option value="groupe">مجموعات</option>
						<option value="single">أفراد</option>
					</select>
				</td>

				<td>
					<select class="form-control" name="tarifs[0][id_type_tarif]" required>
						<option value="" disabled selected>اختر...</option>
						@foreach($typeTarif as $type)
							<option value="{{ $type->id_type }}">
								{{ $type->type_ar }}
							</option>
						@endforeach
					</select>
				</td>

				<td>
					<div class="d-flex gap-2">
						<input type="text"
							class="form-control"
							name="tarifs[0][tarif_chambre]"
							placeholder="بالمباني"
							step="0.001"
							min="0"
							max="9999999.999"
							inputmode="decimal">

						<input type="text"
							class="form-control"
							name="tarifs[0][tarif_tente]"
							placeholder="تحت الخيام"
							step="0.001"
							min="0"
							max="9999999.999"
							inputmode="decimal">
					</div>

				</td>

				<td>
					<input type="text" class="form-control"
						name="tarifs[0][remarque]" placeholder="ملاحظات"  maxlength="150">
				</td>

				<td>
					<button type="button" class="btn btn-danger btn-sm"
							onclick="deleteTarifRow(this)">حذف</button>
				</td>
			</tr>

        </tbody>
    </table>
    <div class="text-center mt-3">
            <button type="button" class="btn btn-success px-4" onclick="addTarifRow()">
                إضافة سطر جديد (إقامة)
            </button>
        </div>
        <hr class="my-4">
</div>

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

    document.addEventListener('input', function (e) {
        if (!e.target.matches('input[name^="tarifs"][name$="[tarif_chambre]"], input[name^="tarifs"][name$="[tarif_tente]"]')) {
            return;
        }

        const input = e.target;

        input.value = input.value.replace(',', '.');

        const regex = /^\d{1,7}(\.\d{0,3})?$/;

        if (!regex.test(input.value)) {
            input.classList.add('is-invalid');
        } else {
            input.classList.remove('is-invalid');
        }
    });

});
</script>



<div class="mb-3">
    <div class="d-flex align-items-center gap-3">
        <label class="col-form-label m-0">
            وقف عربات التخييم داخل المركز (في اليوم الواحد)
        </label>
    </div>
	<input type="text"
       name="tarif_camping_cars"
       class="form-control"
       style="width:100px;"
       placeholder="0.000"
       inputmode="decimal"
      >

    <span class="text-muted small d-block mt-1">
         اضف القيمة
    </span>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {

    const input = document.querySelector('input[name="tarif_camping_cars"]');

    input.addEventListener('input', () => {
        input.value = input.value.replace(',', '.');

        const regex = /^\d{1,7}(\.\d{0,3})?$/;

        if (!regex.test(input.value)) {
            input.classList.add('is-invalid');
        } else {
            input.classList.remove('is-invalid');
        }
    });

});
</script>


<script>
	let tarifIndex = 1;

	function addTarifRow() {
		const tableBody = document.getElementById('tarifs-body');

		const row = `
		<tr>
			<td>
				<select class="form-control" name="tarifs[${tarifIndex}][type]" required>
					<option value="" disabled selected>اختر...</option>
					<option value="groupe">مجموعات</option>
					<option value="single">أفراد</option>
				</select>
			</td>

			<td>
				<select class="form-control" name="tarifs[${tarifIndex}][id_type_tarif]" required>
					<option value="" disabled selected>اختر...</option>
					@foreach($typeTarif as $type)
						<option value="{{ $type->id_type }}">{{ $type->type_ar }}</option>
					@endforeach
				</select>
			</td>

			<td>
				<div class="d-flex gap-2">
					<input type="text" step="0.001"
							min="0"
							max="9999999.999"
							inputmode="decimal" class="form-control"
						name="tarifs[${tarifIndex}][tarif_chambre]">
					<input type="text" step="0.001" class="form-control" step="0.001"
							min="0"
							max="9999999.999"
							inputmode="decimal"
						name="tarifs[${tarifIndex}][tarif_tente]">
				</div>
			</td>

			<td>
				<input type="text" class="form-control"
					name="tarifs[${tarifIndex}][remarque]" maxlength="150">
			</td>

			<td>
				<button type="button" class="btn btn-danger btn-sm"
						onclick="deleteTarifRow(this)">حذف</button>
			</td>
		</tr>
		`;

		tableBody.insertAdjacentHTML('beforeend', row);
		tarifIndex++;
	}

	function deleteTarifRow(btn) {
		btn.closest('tr').remove();
	}
</script>

<style>
	/* Appliquer les icônes seulement aux champs required */
.was-validated input:required:valid,
.was-validated select:required:valid,
.was-validated textarea:required:valid {
    border-color: #198754; /* vert */
    background-image: url("data:image/svg+xml,..."); /* Bootstrap icon vert */
}

.was-validated input:required:invalid,
.was-validated select:required:invalid,
.was-validated textarea:required:invalid {
    border-color: #dc3545; /* rouge */
    background-image: url("data:image/svg+xml,..."); /* Bootstrap icon rouge */
}

/* Champ non-required : pas de coche, pas de croix */
.was-validated input:not([required]),
.was-validated select:not([required]),
.was-validated textarea:not([required]) {
    border-color: #ced4da; /* couleur neutre */
    background-image: none; /* pas de coche ni croix */
}

</style>

        <div class="form-group row mt-4">
			<h5 class="text-center mb-3">الفضاءات المتوفرة</h5>

			<table id="espaces-table" class="table table-bordered">
				<thead>
					<tr>
						<th></th>
						<th>الإسم بالعربية</th>
						<th>الإسم بالفرنسية</th>
						<th>الإسم بالانقليزية</th>
						<th>إجراء</th>
					</tr>
				</thead>
				<tbody id="espaces-body">
					<tr>
						<td class="row-number">1</td>
						<td><input type="text" name="espaces[0][nom_ar]" maxlength="100" class="form-control" ></td>
						<td><input type="text" name="espaces[0][nom_fr]" maxlength="100" class="form-control" ></td>
						<td><input type="text" name="espaces[0][nom_en]" maxlength="100" class="form-control" ></td>
						<td>
							<button type="button" class="btn btn-danger btn-sm" onclick="removeEspaceRow(this)">حذف</button>
						</td>
					</tr>
				</tbody>
			</table>

			<button type="button" class="btn btn-success mt-2" onclick="addEspaceRow()">إضافة فضاء جديد</button>
		</div>

		<div class="form-group row mt-4">
			<h5 class="text-center mb-3">الغرف <span class="text-danger">*</span></h5>

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

			<table id="chambres-table" class="custom-table">
				<thead>
					<tr>
						<th></th>
						<th>نوع الغرفة</th>
						<th>الطاقة</th>
						<th>رقم الغرفة</th>
						<th>إجراء</th>
					</tr>
				</thead>
				<tbody id="chambres-body">
					@php
						$oldChambres = old('chambres', [
							['type_chambre_id'=>'', 'capacite'=>'', 'num_chambre'=>'']
						]);
					@endphp

					@foreach($oldChambres as $i => $chambre)
					<tr>
						<td class="row-number">{{ $i + 1 }}</td>

						<td>
							<select name="chambres[{{ $i }}][type_chambre_id]" 
									class="form-control type-chambre @error('chambres.'.$i.'.type_chambre_id') is-invalid @enderror" required>
								<option value="">-- اختر النوع --</option>
								@foreach($typesChambres as $t)
									<option value="{{ $t->id_type }}" 
										{{ $chambre['type_chambre_id'] == $t->id_type ? 'selected' : '' }}>
										{{ $t->type_ar }}
									</option>
								@endforeach
							</select>
							@error('chambres.'.$i.'.type_chambre_id')
								<span class="text-danger small">{{ $message }}</span>
							@enderror
						</td>

						<td>
							<input type="number" name="chambres[{{ $i }}][capacite]" 
								   class="form-control nb-lits @error('chambres.'.$i.'.capacite') is-invalid @enderror" 
								   value="{{ $chambre['capacite'] }}" required max=999>
							@error('chambres.'.$i.'.capacite')
								<span class="text-danger small">{{ $message }}</span>
							@enderror
						</td>

						<td>
							<input type="text" name="chambres[{{ $i }}][num_chambre]" maxlength="5"
								   class="form-control @error('chambres.'.$i.'.num_chambre') is-invalid @enderror" 
								   value="{{ $chambre['num_chambre'] }}" required>
							@error('chambres.'.$i.'.num_chambre')
								<span class="text-danger small">{{ $message }}</span>
							@enderror
						</td>

						<td>
							<button type="button" class="btn btn-danger btn-sm" onclick="removeChambreRow(this)">حذف</button>
						</td>
					</tr>
					@endforeach
				</tbody>
			</table>

			<button type="button" class="btn btn-success mt-2" onclick="addChambreRow()">إضافة غرفة جديدة</button>
		</div>


		<div class="row mt-3 text-end">
            <label class="col-sm-2 col-form-label">
               طاقة الإستيعاب تحت المباني <span class="text-danger">*</span></label>
            <div class="col-sm-4">
                <input type="number" name="capacite_batiment" id="capacite_batiment" class="form-control" readonly>
            </div>
            <label class="col-sm-2 col-form-label">
                 عدد الغرف <span class="text-danger">*</span></label>
            <div class="col-sm-4">
                <input type="number" name="nb_chambres" id="nb_chambres" class="form-control" readonly>
            </div>
        </div>
        <div class="row mt-3 text-end">
            <label class="col-sm-2 col-form-label">
               عدد الغرف الفردية</label>
            <div class="col-sm-4">
                <input type="number" name="nb_chambres_single" id="nb_chambres_single" class="form-control" readonly>
            </div>
            <label class="col-sm-2 col-form-label">
                 عدد الغرف ثنائي</label>
            <div class="col-sm-4">
                <input type="number" name="nb_chambres_double" id="nb_chambres_double" class="form-control" readonly>
            </div>
        </div>
        <div class="row mt-3 text-end">
            <label class="col-sm-2 col-form-label">
               عدد الغرف ثلاثي</label>
            <div class="col-sm-4">
                <input type="number" name="nb_chambres_triple" id="nb_chambres_triple" class="form-control" readonly>
            </div>
            <label class="col-sm-2 col-form-label">
                 عدد الغرف رباعي</label>
            <div class="col-sm-4">
                <input type="number" name="nb_chambres_quadra" id="nb_chambres_quadra" class="form-control" readonly>
            </div>
        </div>
        <div class="row mt-3 text-end">
            <label class="col-sm-2 col-form-label">
               عدد الغرف أكثر من رباعي</label>
            <div class="col-sm-4">
                <input type="number" name="nb_chambres_plus" id="nb_chambres_plus" class="form-control" readonly>
            </div>

            <label class="col-sm-2 col-form-label">
                 عدد الوحدات الصحية داخل الغرف</label>
            <div class="col-sm-4">
                <input type="number" name="nb_salles_de_bain" max=999 class="form-control" value="{{ old('nb_salles_de_bain') }}">
            </div>
        </div>

        <div class="row mt-3 text-end">
            <label class="col-sm-2 col-form-label">
               عدد الوحدات الصحية المشتركة</label>
            <div class="col-sm-4">
                <input type="number" name="nb_salles_de_bain_comm" max=999 class="form-control" value="{{ old('nb_salles_de_bain_comm') }}">
            </div>
            <label class="col-sm-2 col-form-label">
               عدد الغرف التي تحتوي على تلفاز</label>
            <div class="col-sm-4">
                <input type="number" name="nb_chambres_tv"  max=999 class="form-control" value="{{ old('nb_chambres_tv') }}">
            </div>
        </div>

        <div class="row mt-3 text-end">
            <label class="col-sm-2 col-form-label">
               عدد الغرف المكيفة</label>
            <div class="col-sm-4">
                <input type="number" name="nb_chambres_clim" max=999 class="form-control" value="{{ old('nb_chambres_clim') }}">
            </div>
            <label class="col-sm-2 col-form-label">
               عدد الغرف التي تحتوي على ثلاجة</label>
            <div class="col-sm-4">
                <input type="number" name="nb_chambres_frigo" max=999 class="form-control" value="{{ old('nb_chambres_frigo') }}">
            </div>
        </div>

        <div class="row mt-3 text-end">
            <label class="col-sm-2 col-form-label">
              طاقة الإستيعاب تحت الخيام إن وجدت</label>
            <div class="col-sm-4">
                <input type="number" name="capacite_tentes" max=999 class="form-control" value="{{ old('capacite_tentes') }}">
            </div>
            <label for="cuisine_fonctionnelle" class="col-sm-2 col-form-label">المطبخ وظيفي</label>
            <div class="col-sm-4">
                <select name="cuisine_fonctionnelle" id="cuisine_fonctionnelle" class="form-control">
                    <option value="" disabled selected>اختر...</option>
                    <option value="1">نعم</option>
                    <option value="0">لا</option>
                </select>
            </div>
        </div>

        

        <div class="form-group row mt-4">
			<h5 class="text-center mb-3">الملاعب الرياضية</h5>

			<table id="terrains-table" class="table table-bordered">
				<thead>
					<tr>
						<th></th>
						<th>الإسم بالعربية</th>
						<th>الإسم بالفرنسية</th>
						<th>الإسم بالانقليزية</th>
						<th>إجراء</th>
					</tr>
				</thead>
				<tbody id="terrains-body">
					<tr>
						<td class="row-number">1</td>
						<td><input type="text" name="terrains[0][nom_ar]" class="form-control" maxlength="150"></td>
						<td><input type="text" name="terrains[0][nom_fr]" class="form-control" maxlength="150"></td>
						<td><input type="text" name="terrains[0][nom_en]" class="form-control" maxlength="150"></td>
						<td>
							<button type="button" class="btn btn-danger btn-sm" onclick="removeTerrainRow(this)">حذف</button>
						</td>
					</tr>
				</tbody>
			</table>

			<button type="button" class="btn btn-success mt-2" onclick="addTerrainRow()">إضافة فضاء جديد</button>
		</div>

		<div class="form-group row mt-4">
			<h5 class="text-center mb-3">الخدمات المقدمة من طرف المؤسسة</h5>

			<table id="services_auberge-table" class="table table-bordered">
				<thead>
					<tr>
						<th></th>
						<th>الإسم بالعربية</th>
						<th>الإسم بالفرنسية</th>
						<th>الإسم بالانقليزية</th>
						<th>إجراء</th>
					</tr>
				</thead>
				<tbody id="services_auberge-body">
					<tr>
						<td class="row-number">1</td>
						<td><input type="text" name="services_auberge[0][nom_ar]" maxlength="150" class="form-control" ></td>
						<td><input type="text" name="services_auberge[0][nom_fr]" maxlength="150" class="form-control" ></td>
						<td><input type="text" name="services_auberge[0][nom_en]" maxlength="150" class="form-control" ></td>
						<td>
							<button type="button" class="btn btn-danger btn-sm" onclick="removeservices_aubergeRow(this)">حذف</button>
						</td>
					</tr>
				</tbody>
			</table>

			<button type="button" class="btn btn-success mt-2" onclick="addservices_aubergeRow()">إضافة فضاء جديد</button>
		</div>

        <div class="form-group row mt-4">
			<h5 class="text-center mb-3">🍽️ قسم خدمات المطعم</h5>

			<table id="restauration-table" class="custom-table">
				<thead>
					<tr>
						<th></th>
						<th>الإسم بالعربية</th>
						<th>الإسم بالفرنسية</th>
						<th>الإسم بالإنجليزية</th>
						<th>الوصف بالعربية</th>
						<th>الوصف بالفرنسية</th>
						<th>الوصف بالإنجليزية</th>
						<th>التعريفة (د.ت)</th>
						<th>إجراء</th>
					</tr>
				</thead>

				<tbody id="restauration-body">
					<tr>
						<td class="row-number">1</td>

						<td><input type="text" name="restaurations[0][nom_ar]" maxlength="100" class="form-control" ></td>
						<td><input type="text" name="restaurations[0][nom_fr]" maxlength="100" class="form-control" ></td>
						<td><input type="text" name="restaurations[0][nom_en]" maxlength="100" class="form-control" ></td>

						<td><textarea name="restaurations[0][description_ar]" maxlength="150" class="form-control" rows="3"></textarea></td>
						<td><textarea name="restaurations[0][description_fr]" maxlength="150" class="form-control" rows="3"></textarea></td>
						<td><textarea name="restaurations[0][description_en]" maxlength="150" class="form-control" rows="3"></textarea></td>

						<td>
							<input type="text" name="restaurations[0][tarif]" class="form-control" placeholder="0.00" inputmode="decimal"></td>
						<td>
							<button type="button" class="btn btn-danger btn-sm" onclick="removeRestaurationRow(this)">حذف</button>
						</td>
					</tr>
				</tbody>
			</table>

			<button type="button" class="btn btn-success mt-2" onclick="addRestaurationRow()">إضافة خدمة جديدة</button>
		</div>

        <div class="form-group mt-3">
            <label for="lieux_culturels" class="col-sm-6 col-form-label">    المعالم الأثرية والمتاحف والفضاءات الثقافية المجاورة للمؤسسة بالعربية</label>
            <textarea name="lieux_culturels" id="lieux_culturels" maxlength="250" class="form-control" rows="4">{{ old('lieux_culturels') }}</textarea>
        </div>

        <div class="form-group mt-3">
            <label for="lieux_culturels" class="col-sm-6 col-form-label">     المعالم الأثرية والمتاحف والفضاءات الثقافية المجاورة للمؤسسة بالفرنسية</label>
            <textarea name="lieux_culturels_fr" id="lieux_culturels" maxlength="250" class="form-control" rows="4">{{ old('lieux_culturels_fr') }}</textarea>
        </div>


        <div class="form-group mt-3">
            <label for="lieux_culturels" class="col-sm-6 col-form-label">   المعالم الأثرية والمتاحف والفضاءات الثقافية المجاورة للمؤسسة بالإنقليزية </label>
            <textarea name="lieux_culturels_en" id="lieux_culturels" maxlength="250" class="form-control" rows="4">{{ old('lieux_culturels_en') }}</textarea>
        </div>


        <div class="form-group mt-3">
            <label for="autres_services" class="col-sm-6 col-form-label">     خدمات أخرى بالعربية</label>
            <textarea name="autres_services" maxlength="250" placeholder="أذكر الخدمات الإضافية إن وجدت..." id="autres_services" class="form-control" rows="4">{{ old('autres_services') }}</textarea>
        </div>



        <div class="form-group mt-3">
            <label for="autres_services" class="col-sm-6 col-form-label">    خدمات أخرى  بالفرنسية </label>
            <textarea name="autres_services_fr" maxlength="250" placeholder="أذكر الخدمات الإضافية إن وجدت..." id="autres_services" class="form-control" rows="4">{{ old('autres_services_fr') }}</textarea>
        </div>

        <div class="form-group mt-3">
            <label for="autres_services" class="col-sm-6 col-form-label">  خدمات أخرى  بالإنقليزية</label>
            <textarea name="autres_services_en" maxlength="250" placeholder="أذكر الخدمات الإضافية إن وجدت..." id="autres_services" class="form-control" rows="4">{{ old('autres_services_en') }}</textarea>
        </div>
<script>
document.addEventListener('DOMContentLoaded', () => {

    document.addEventListener('input', function (e) {

        if (!e.target.matches('input[name^="restaurations"][name$="[tarif]"]')) {
            return;
        }

        const input = e.target;

        // normaliser , → .
        input.value = input.value.replace(',', '.');

        const regex = /^\d{1,7}(\.\d{0,2})?$/;

        if (!regex.test(input.value)) {
            input.classList.add('is-invalid');
        } else {
            input.classList.remove('is-invalid');
        }
    });

});
</script>


        

		 <div class="block-card-footer mt-3 mb-3 text-center">
			<button type="submit" id="submitBtn" class="btn bg-rgb-primary1 font-weight-medium">
			<i class="la la-save mr-1"></i> حفظ
			</button>
			<a href="{{ route('auberges.index') }}" class="btn bg-rgb-primary1 font-weight-medium">
			<i class="la la-times mr-1"></i> إلغاء
			</a>
		</div>

    </form>
</div>


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

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

    delegationSelect.innerHTML = '<option value="" disabled selected>تحميل...</option>';
    delegationSelect.disabled = true;

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

    fetch(url)
        .then(response => response.json())
        .then(data => {

            delegationSelect.innerHTML = '<option value="" disabled selected>اختر...</option>';

            data.forEach(d => {
                let option = document.createElement('option');
                option.value = d.id_delegation;
                option.text = d.nom_ar;
                delegationSelect.add(option);
            });

            delegationSelect.disabled = false;
        });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    function updateRowNumbers() {
        document.querySelectorAll('#chambres-body .row-number').forEach((cell, i) => {
            cell.textContent = i + 1;
        });
    }

    function recalculer() {
        const rows = document.querySelectorAll('#chambres-body tr');
        let totalChambres = 0;
        let capaciteTotale = 0;
        let nb_single = 0, nb_double = 0, nb_triple = 0, nb_quadra = 0, nb_plus = 0;

        rows.forEach(row => {
            const typeEl = row.querySelector('.type-chambre');
            const litsEl = row.querySelector('.nb-lits');
            if (!typeEl || !litsEl) return;
            const type = typeEl.value;
            const lits = parseInt(litsEl.value || 0);
            totalChambres++;
            capaciteTotale += lits;
            switch (type) {
                case "1": nb_single++; break;
                case "2": nb_double++; break;
                case "3": nb_triple++; break;
                case "4": nb_quadra++; break;
                case "6": nb_plus++; break;
            }
        });

        if(document.getElementById('nb_chambres')) document.getElementById('nb_chambres').value = totalChambres;
        if(document.getElementById('capacite_batiment')) document.getElementById('capacite_batiment').value = capaciteTotale;
        if(document.getElementById('nb_chambres_single')) document.getElementById('nb_chambres_single').value = nb_single;
        if(document.getElementById('nb_chambres_double')) document.getElementById('nb_chambres_double').value = nb_double;
        if(document.getElementById('nb_chambres_triple')) document.getElementById('nb_chambres_triple').value = nb_triple;
        if(document.getElementById('nb_chambres_quadra')) document.getElementById('nb_chambres_quadra').value = nb_quadra;
        if(document.getElementById('nb_chambres_plus')) document.getElementById('nb_chambres_plus').value = nb_plus;
    }

    window.addChambreRow = function() {
        const tbody = document.getElementById('chambres-body');
        const index = tbody.querySelectorAll('tr').length;

        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td class="row-number">${index + 1}</td>
            <td>
                <select name="chambres[${index}][type_chambre_id]" 
                        class="form-control type-chambre" required>
                    <option value="">-- اختر النوع --</option>
                    @foreach($typesChambres as $t)
                        <option value="{{ $t->id_type }}">{{ $t->type_ar }}</option>
                    @endforeach
                </select>
            </td>
            <td><input type="number" name="chambres[${index}][capacite]" max=999 class="form-control nb-lits" required></td>
            <td><input type="text" name="chambres[${index}][num_chambre]" maxlength="5" class="form-control" required></td>
            <td><button type="button" class="btn btn-danger btn-sm" onclick="removeChambreRow(this)">حذف</button></td>
        `;
        tbody.appendChild(tr);
        updateRowNumbers();
        recalculer();
    }

    window.removeChambreRow = function(btn) {
        btn.closest('tr').remove();
        updateRowNumbers();
        recalculer();
    }

    document.addEventListener('input', e => {
        if (e.target.classList.contains('type-chambre') || e.target.classList.contains('nb-lits')) {
            recalculer();
        }
    });

    document.addEventListener('change', e => {
        if (e.target.classList.contains('type-chambre')) {
            recalculer();
        }
    });

    updateRowNumbers();
    recalculer();
});
</script>

<script>
    let restaurationIndex = 1;

    function addRestaurationRow() {
        let tableBody = document.getElementById('restauration-body');

        let newRow = `
            <tr>
                <td class="row-number"></td>

                <td><input type="text" name="restaurations[${restaurationIndex}][nom_ar]" maxlength="100" class="form-control" ></td>
                <td><input type="text" name="restaurations[${restaurationIndex}][nom_fr]" maxlength="100" class="form-control" ></td>
                <td><input type="text" name="restaurations[${restaurationIndex}][nom_en]" maxlength="100" class="form-control" ></td>

                <td><textarea name="restaurations[${restaurationIndex}][description_ar]" maxlength="150" class="form-control" rows="3"></textarea></td>
                <td><textarea name="restaurations[${restaurationIndex}][description_fr]" maxlength="150" class="form-control" rows="3"></textarea></td>
                <td><textarea name="restaurations[${restaurationIndex}][description_en]" maxlength="150" class="form-control" rows="3"></textarea></td>

                <td><input type="text" laceholder="0.00" inputmode="decimal" name="restaurations[${restaurationIndex}][tarif]" class="form-control" ></td>

                <td>
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeRestaurationRow(this)">حذف</button>
                </td>
            </tr>
        `;

        tableBody.insertAdjacentHTML('beforeend', newRow);
        restaurationIndex++;
        updateRowNumbers();
    }

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

    function updateRowNumbers() {
        document.querySelectorAll('#restauration-body .row-number')
            .forEach((cell, index) => cell.textContent = index + 1);
    }

    updateRowNumbers();
</script>

<script>
let espaceIndex = 1;

function addEspaceRow() {
    let tableBody = document.getElementById('espaces-body');

    let newRow = `
        <tr>
            <td class="row-number">${espaceIndex + 1}</td>
            <td><input type="text" name="espaces[${espaceIndex}][nom_ar]" maxlength="100" class="form-control" ></td>
            <td><input type="text" name="espaces[${espaceIndex}][nom_fr]" maxlength="100" class="form-control" ></td>
            <td><input type="text" name="espaces[${espaceIndex}][nom_en]" maxlength="100" class="form-control" ></td>
            <td>
                <button type="button" class="btn btn-danger btn-sm" onclick="removeEspaceRow(this)">حذف</button>
            </td>
        </tr>
    `;
    tableBody.insertAdjacentHTML('beforeend', newRow);
    espaceIndex++;
    updateEspaceRowNumbers();
}

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

function updateEspaceRowNumbers() {
    document.querySelectorAll('#espaces-body .row-number')
        .forEach((cell, index) => cell.textContent = index + 1);
}
</script>
<script>
let terrainIndex = 1;

function addTerrainRow() {
    let tableBody = document.getElementById('terrains-body');

    let newRow = `
        <tr>
            <td class="row-number">${terrainIndex + 1}</td>
            <td><input type="text" name="terrains[${terrainIndex}][nom_ar]" class="form-control" maxlength="150"></td>
            <td><input type="text" name="terrains[${terrainIndex}][nom_fr]" class="form-control" maxlength="150"></td>
            <td><input type="text" name="terrains[${terrainIndex}][nom_en]" class="form-control" maxlength="150"></td>
            <td>
                <button type="button" class="btn btn-danger btn-sm" onclick="removeTerrainRow(this)">حذف</button>
            </td>
        </tr>
    `;
    tableBody.insertAdjacentHTML('beforeend', newRow);
    terrainIndex++;
    updateEspaceRowNumbers();
}

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

function updateTerrainRowNumbers() {
    document.querySelectorAll('#terrains-body .row-number')
        .forEach((cell, index) => cell.textContent = index + 1);
}
</script>
<script>
let services_aubergeIndex = 1;

function addservices_aubergeRow() {
    let tableBody = document.getElementById('services_auberge-body');

    let newRow = `
        <tr>
            <td class="row-number">${services_aubergeIndex + 1}</td>
            <td><input type="text" name="services_auberge[${services_aubergeIndex}][nom_ar]" maxlength="150" class="form-control" ></td>
            <td><input type="text" name="services_auberge[${services_aubergeIndex}][nom_fr]" maxlength="150"  class="form-control" ></td>
            <td><input type="text" name="services_auberge[${services_aubergeIndex}][nom_en]" maxlength="150" class="form-control" ></td>
            <td>
                <button type="button" class="btn btn-danger btn-sm" onclick="removeservices_aubergeRow(this)">حذف</button>
            </td>
        </tr>
    `;
    tableBody.insertAdjacentHTML('beforeend', newRow);
    services_aubergeIndex++;
    updateservices_aubergeRowNumbers();
}

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

function updateservices_aubergeRowNumbers() {
    document.querySelectorAll('#services_auberge-body .row-number')
        .forEach((cell, index) => cell.textContent = index + 1);
}
</script>
@endsection

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