{% extends 'base.html.twig' %}

{% block title %}Inscription - Eolia Normandie
{% endblock %}

{% block body %}
	<div class="container py-5">
		<div class="row g-5">
			<div class="col-lg-8 wow fadeInLeft" data-wow-delay="0.1s">
				<div class="card shadow-lg border-0 rounded-lg">
					<div class="card-header bg-eolia text-white py-3">
						<h3 class="mb-0">
							<i class="fas fa-user-plus me-2"></i>
							Formulaire d'inscription</h3>
					</div>
					<div class="card-body p-4">
						<div class="alert alert-info d-flex align-items-center mb-4" role="alert">
							<i class="fas fa-info-circle me-2 fs-4"></i>
							<div>
								<p class="mb-0">Espace réservé aux membres du club Eolia. Si vous n'êtes pas membre,
									<a href="https://www.eolia-normandie.com/sport-index.php" class="alert-link">cliquez ici</a>.</p>
								<p class="mb-0">Si vous possédez déjà un compte :
									<a href="{{ path('app_login') }}" class="alert-link">Se connecter</a>
								</p>
							</div>
						</div>

						{% if valide is defined and valide == false and not is_granted('ROLE_ADMIN') %}
							<script>
								function accountNotValidated() {
Swal.fire({icon: "error", title: "Veillez patienter", text: "Votre compte est en train d'être validé", footer: '<a href="  {{ path('accueil') }}">retourner à l\'accueil</a>'});
}
window.onload = accountNotValidated;
							</script>
						{% endif %}

						{{ form_errors(registrationForm) }}
						{{ form_start(registrationForm, {'attr': {'id': 'registerForm', 'onsubmit': 'return validateForm()'}}) }}

						<div
							class="row g-4">
							<!-- Section Informations de compte -->
							<div class="col-12">
								<h5 class="border-bottom pb-2 mb-3">
									<i class="fas fa-user-circle me-2 text-eolia"></i>Informations de compte</h5>
							</div>

							<div class="col-md-12">
								<div class="form-floating mb-3">
									{{ form_widget(registrationForm.username, {
            'attr': {
                'class': 'form-control',
                'placeholder': 'Nom d\'utilisateur'
            }
        }) }}
        <label for="{{ registrationForm.username.vars.id }}"><i class="fas fa-user me-2"></i>Nom d'utilisateur</label>
        {{ form_errors(registrationForm.username) }}
								</div>
							</div>

							<div class="col-md-6">
								<div class="form-floating mb-3">
									{{ form_widget(registrationForm.plainPassword.first, {
            'attr': {
                'class': 'form-control',
                'placeholder': 'Mot de passe'
            }
        }) }}
									<label for="{{ registrationForm.plainPassword.first.vars.id }}">
										<i class="fas fa-lock me-2"></i>Mot de passe</label>
									{{ form_errors(registrationForm.plainPassword.first) }}
								</div>
							</div>

							<div class="col-md-6">
								<div class="form-floating mb-3">
									{{ form_widget(registrationForm.plainPassword.second, {
            'attr': {
                'class': 'form-control',
                'placeholder': 'Confirmer le mot de passe'
            }
        }) }}
									<label for="{{ registrationForm.plainPassword.second.vars.id }}">
										<i class="fas fa-lock me-2"></i>Confirmer le mot de passe</label>
									{{ form_errors(registrationForm.plainPassword.second) }}
								</div>
							</div>

							<div class="col-md-12">
								<div class="form-floating">
									{{ form_widget(registrationForm.mail, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Email'
                                        }
                                    }) }}
									<label for="{{ registrationForm.mail.vars.id }}">
										<i class="fas fa-envelope me-2"></i>Adresse email</label>
									{{ form_errors(registrationForm.mail) }}
								</div>
							</div>

							<!-- Section Informations personnelles -->
							<div class="col-12">
								<h5 class="border-bottom pb-2 mb-3 mt-2">
									<i class="fas fa-id-card me-2 text-eolia"></i>Informations personnelles</h5>
							</div>

							<div class="col-md-4">
								<div class="form-floating">
									{{ form_widget(registrationForm.civilite, {
                                        'attr': {
                                            'class': 'form-select',
                                            'placeholder': 'Civilité'
                                        }
                                    }) }}
									<label for="{{ registrationForm.civilite.vars.id }}">
										<i class="fas fa-user-tag me-2"></i>Civilité</label>
									{{ form_errors(registrationForm.civilite) }}
								</div>
							</div>

							<div class="col-md-4">
								<div class="form-floating">
									{{ form_widget(registrationForm.prenom, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Prénom'
                                        }
                                    }) }}
									<label for="{{ registrationForm.prenom.vars.id }}">
										<i class="fas fa-user me-2"></i>Prénom</label>
									{{ form_errors(registrationForm.prenom) }}
								</div>
							</div>

							<div class="col-md-4">
								<div class="form-floating">
									{{ form_widget(registrationForm.nom, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Nom'
                                        }
                                    }) }}
									<label for="{{ registrationForm.nom.vars.id }}">
										<i class="fas fa-user me-2"></i>Nom</label>
									{{ form_errors(registrationForm.nom) }}
								</div>
							</div>

							<div class="col-md-6">
								<div class="form-floating">
									{{ form_widget(registrationForm.dateNaiss, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Date de naissance'
                                        }
                                    }) }}
									<label for="{{ registrationForm.dateNaiss.vars.id }}">
										<i class="fas fa-birthday-cake me-2"></i>Date de naissance</label>
									{{ form_errors(registrationForm.dateNaiss) }}
								</div>
							</div>

							<div class="col-md-6">
								<div class="form-floating">
									{{ form_widget(registrationForm.telephone, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Téléphone'
                                        }
                                    }) }}
									<label for="{{ registrationForm.telephone.vars.id }}">
										<i class="fas fa-phone me-2"></i>Téléphone</label>
									{{ form_errors(registrationForm.telephone) }}
								</div>
							</div>

							<!-- Section Adresse -->
							<div class="col-12">
								<h5 class="border-bottom pb-2 mb-3 mt-2">
									<i class="fas fa-map-marked-alt me-2 text-eolia"></i>Adresse</h5>
							</div>

							<div class="col-md-8">
								<div class="form-floating">
									{{ form_widget(registrationForm.rue, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Rue'
                                        }
                                    }) }}
									<label for="{{ registrationForm.rue.vars.id }}">
										<i class="fas fa-road me-2"></i>Rue</label>
									{{ form_errors(registrationForm.rue) }}
								</div>
							</div>

							<div class="col-md-4">
								<div class="form-floating">
									{{ form_widget(registrationForm.codePostal, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Code postal'
                                        }
                                    }) }}
									<label for="{{ registrationForm.codePostal.vars.id }}">
										<i class="fas fa-map-pin me-2"></i>Code postal</label>
									{{ form_errors(registrationForm.codePostal) }}
								</div>
							</div>

							<div class="col-md-12">
								<div class="form-floating">
									{{ form_widget(registrationForm.ville, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Ville'
                                        }
                                    }) }}
									<label for="{{ registrationForm.ville.vars.id }}">
										<i class="fas fa-city me-2"></i>Ville</label>
									{{ form_errors(registrationForm.ville) }}
								</div>
							</div>

							<!-- Section Informations sportives -->
							<div class="col-12">
								<h5 class="border-bottom pb-2 mb-3 mt-2">
									<i class="fas fa-running me-2 text-eolia"></i>Informations sportives</h5>
							</div>

							<div class="col-md-12">
								<div class="form-floating">
									{{ form_widget(registrationForm.sportPrincipal, {
                                        'attr': {
                                            'class': 'form-select',
                                            'placeholder': 'Sport principal'
                                        }
                                    }) }}
									<label for="{{ registrationForm.sportPrincipal.vars.id }}">
										<i class="fas fa-volleyball-ball me-2"></i>Sport principal</label>
									{{ form_errors(registrationForm.sportPrincipal) }}
								</div>
							</div>

							<!-- Section Certificat médical -->
							<div class="col-12">
								<h5 class="border-bottom pb-2 mb-3 mt-2">
									<i class="fas fa-file-medical me-2 text-eolia"></i>Certificat médical</h5>
							</div>

							<div class="col-md-12">
								<div class="form-floating mb-3">
									<input type="date" class="form-control" id="dateCertificatMedical" placeholder="Date de votre certificat médical">
									<label for="dateCertificatMedical">
										<i class="fas fa-calendar-alt me-2"></i>Date de votre certificat médical</label>
								</div>

								<div class="card mb-3 bg-light">
									<div class="card-body">
										<div class="mb-3" id="certificatMedic">
											<label class="form-label fw-bold">
												<i class="fas fa-file-medical me-2 text-eolia"></i>Certificat médical
											</label>
											{{ form_widget(registrationForm.certificatMedic, {'attr': {'class': 'form-control'}}) }}
											<div class="form-text">Téléchargez votre certificat médical (PDF, JPG ou PNG)</div>
										</div>

										<div class="mb-3" id="questionnaireSante" style="display: none;">
											<label class="form-label fw-bold">
												<i class="fas fa-clipboard-list me-2 text-eolia"></i>Questionnaire de santé
											</label>
											{{ form_widget(registrationForm.questionnaireSante, {'attr': {'class': 'form-control'}}) }}
											<div class="form-text">
												Téléchargez votre questionnaire de santé complété
												<a href="https://www.formulaires.service-public.fr/gf/cerfa_15699.do" target="_blank" class="ms-2">
													<i class="fas fa-external-link-alt"></i>
													Télécharger le formulaire
												</a>
											</div>
										</div>

										<div class="form-floating mt-3">
											<div class="card">
												<div class="card-header bg-light">
													<h6 class="mb-0">
														<i class="fas fa-check-square me-2 text-eolia"></i>Attestation sur l'honneur</h6>
												</div>
												<div class="card-body">
													<p>
														<strong>J'atteste sur l'honneur :</strong>
													</p>
													<div class="form-check mb-2" id="checkboxList1">
														<input type="checkbox" class="form-check-input" id="checkbox1">
														<label class="form-check-label" for="checkbox1">Ne pas être en mesure de fournir à ce jour les documents demandés ci-dessus.</label>
													</div>
													<div id="checkboxList2" style="display: none;">
														<div class="form-check mb-2">
															<input type="checkbox" class="form-check-input" id="checkbox2">
															<label class="form-check-label" for="checkbox2">M'engager à fournir à l'association au plus tard dans les 15 jours à dater de ce jour :</label>
														</div>
														<div class="ms-4">
															<div class="form-check mb-2">
																<input type="checkbox" class="form-check-input" id="checkbox3">
																<label class="form-check-label" for="checkbox3">Un certificat médical de non contre indication à la pratique des sports pratiqués par l'association daté de moins d'un an.</label>
															</div>
															<div class="form-check mb-2">
																<input type="checkbox" class="form-check-input" id="checkbox4">
																<label class="form-check-label" for="checkbox4">Un certificat de non contre-indication des sports pratiqués par l'association daté de plus d'un an et moins de trois ans accompagné d'un questionnaire de santé Sport validé comprenant 9 réponses négatives de ma part.</label>
															</div>
															<div class="form-check mb-2">
																<input type="checkbox" class="form-check-input" id="checkbox5">
																<label class="form-check-label" for="checkbox5">M'engager à ne pas participer à une activité avant la production des dits documents.</label>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- Section Cotisation et forfait -->
							{# <div class="col-12">
								<h5 class="border-bottom pb-2 mb-3 mt-2">
									<i class="fas fa-euro-sign me-2 text-eolia"></i>Cotisation et forfait</h5>
							</div>

							<div class="col-md-6">
								<div class="form-floating">
									{{ form_widget(registrationForm.cotisation, {
                                        'attr': {
                                            'class': 'form-select',
                                            'placeholder': 'Cotisation association'
                                        }
                                    }) }}
									<label for="{{ registrationForm.cotisation.vars.id }}">
										<i class="fas fa-money-bill me-2"></i>Cotisation association</label>
									{{ form_errors(registrationForm.cotisation) }}
								</div>
							</div> #}

							<div class="col-md-6">
								<div class="form-floating mb-3">
									<div
										class="forfait-custom-wrapper">
										<!-- Hidden Symfony form -->
										<div class="d-none">
											{{ form_widget(registrationForm.forfaits) }}
										</div>

										<!-- Custom dropdown interface -->
										<div class="forfait-custom-dropdown" data-placeholder="">
											<div class="forfait-dropdown-toggle">
												<span class="forfait-dropdown-text"></span>
												<i class="fas fa-chevron-down forfait-dropdown-arrow"></i>
											</div>
											<div class="forfait-dropdown-menu">
												{% for forfait in forfaits %}
													<div class="forfait-dropdown-item" data-forfait-id="{{ forfait.id }}" data-capacity="{{ forfait.capacity }}" data-current-usage="{{ forfait.currentUsage }}" data-is-full="{{ forfait.isFull ? 'true' : 'false' }}" data-is-forced="{{ forfait.isForced ? 'true' : 'false' }}">
														<input type="checkbox" id="custom_forfait_{{ forfait.id }}" data-target="user_modifier_forfaits_{{ forfait.id }}">
														<label for="custom_forfait_{{ forfait.id }}">
															{{ forfait.nom }}
															({{ forfait.prix }}€)
															{% if forfait.capacity %}
																{% if forfait.isFull %}
																	[COMPLET]
																{% else %}
																	({{ forfait.currentUsage }}/{{ forfait.capacity }}
																	places)
																{% endif %}
															{% endif %}
															{% if forfait.isForced %}[OBLIGATOIRE]
															{% endif %}
														</label>
													</div>
												{% endfor %}
											</div>
										</div>
									</div>
									<label>
										<i class="fas fa-ticket-alt me-2"></i>Forfaits et cotisations souscrits</label>
									{{ form_errors(registrationForm.forfaits) }}
								</div>
							</div>

							<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

							<div class="col-12 mt-4">
								<div class="alert alert-warning d-flex align-items-center" role="alert">
									<i class="fas fa-exclamation-triangle me-2 fs-4"></i>
									<div>
										<p class="mb-0">Veuillez vérifier toutes les informations avant de soumettre votre inscription.</p>
										<p class="mb-0">Votre compte devra être validé par un administrateur avant de pouvoir vous connecter.</p>
									</div>
								</div>
							</div>

							<div class="col-12 text-center">
								<button class="btn blue text-white rounded-pill py-3 px-5" type="button" id="submitButton">
									<i class="fas fa-user-plus me-2"></i>Enregistrer le compte
								</button>
							</div>
						</div>

						{{ form_end(registrationForm) }}
					</div>
				</div>
			</div>

			<div class="col-lg-4 wow fadeInRight" data-wow-delay="0.5s">
				<div class="position-sticky" style="top: 100px;">
					<div class="card shadow-lg border-0 rounded-lg mb-4">
						<div class="card-header bg-eolia text-white py-3">
							<h3 class="mb-0">
								<i class="fas fa-info-circle me-2"></i>
								Informations</h3>
						</div>
						<div class="card-body">
							<div class="d-flex align-items-center mb-3">
								<div class="flex-shrink-0">
									<img src="{{ asset('img/eolia-logo-integral.png') }}" alt="Logo Eolia" class="img-fluid" style="width: 80px;">
								</div>
								<div class="flex-grow-1 ms-3">
									<h5 class="mb-0">Eolia Normandie</h5>
									<p class="text-muted mb-0">Club nautique</p>
								</div>
							</div>

							<p class="mb-3">Bienvenue sur le formulaire d'inscription d'Eolia Normandie. Pour finaliser votre adhésion, veuillez remplir tous les champs obligatoires.</p>

							<div class="mb-3">
								<h6>
									<i class="fas fa-check-circle text-success me-2"></i>Avantages de l'adhésion</h6>
								<ul class="list-group list-group-flush">
									<li class="list-group-item bg-transparent">
										<i class="fas fa-angle-right me-2 text-eolia"></i>Accès aux séances du club</li>
									<li class="list-group-item bg-transparent">
										<i class="fas fa-angle-right me-2 text-eolia"></i>Participation aux événements</li>
									<li class="list-group-item bg-transparent">
										<i class="fas fa-angle-right me-2 text-eolia"></i>Encadrement professionnel</li>
								</ul>
							</div>

							<div class="mb-3">
								<h6>
									<i class="fas fa-question-circle text-info me-2"></i>Besoin d'aide ?</h6>
								<p class="mb-2">Pour toute question concernant votre inscription, contactez-nous :</p>
								<div class="d-flex align-items-center mb-2">
									<i class="fas fa-phone-alt text-eolia me-2"></i>
									<span>02.31.22.26.21</span>
								</div>
								<div class="d-flex align-items-center">
									<i class="fas fa-envelope text-eolia me-2"></i>
									<span>eolia-normandie@wanadoo.fr</span>
								</div>
							</div>
						</div>
					</div>

					<div class="card shadow-lg border-0 rounded-lg">
						<div class="card-header bg-eolia text-white py-3">
							<h3 class="mb-0">
								<i class="fas fa-map-marked-alt me-2"></i>
								Nous trouver</h3>
						</div>
						<div class="card-body p-0">
							<div class="ratio ratio-4x3">
								<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5197.203106417406!2d-0.8445321596900931!3d49.359689570883155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x480ba8296c61120d%3A0x3de2d6bbb644f1b3!2sEOLIA%20Normandie%20(CPNOB)!5e0!3m2!1sfr!2sfr!4v1704875614254!5m2!1sfr!2sfr" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
							</div>
						</div>
						<div class="card-footer bg-light py-3">
							<div class="d-flex align-items-center">
								<i class="fas fa-map-marker-alt text-eolia me-2"></i>
								<span>Base Eolia Normandie, Le Cavey, 14710 COLLEVILLES SUR MER</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
        const routes = {
        login: "{{ path('login') }}"
        };

        document.getElementById('dateCertificatMedical').addEventListener('change', function() {
        const inputDate = new Date(this.value);
        const oneYearAgo = new Date();
        const threeYearsAgo = new Date();

        oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
        threeYearsAgo.setFullYear(threeYearsAgo.getFullYear() - 3);

        if (inputDate < oneYearAgo && inputDate >= threeYearsAgo) {
            document.getElementById('questionnaireSante').style.display = 'block';
        } else {
            document.getElementById('questionnaireSante').style.display = 'none';
        }
        });

        document.getElementById('checkbox1').addEventListener('change', function() {
            const checkbox1 = document.getElementById('checkbox1').checked;

            if (checkbox1) {
                document.getElementById('checkbox2').style.display = 'inline-block';
                document.getElementById('checkboxList2').style.display = 'inline-block';
            } else {
                document.getElementById('checkbox2').style.display = 'none';
                document.getElementById('checkboxList2').style.display = 'none';
            }
        });

        async function validateForm() {
        var usernameElement = document.getElementById('registration_form_username');
        var usernameInput = usernameElement ? usernameElement.value.trim() : '';

        var plainPasswordFirstElement = document.getElementById('registration_form_plainPassword_first');
        var plainPasswordFirstInput = plainPasswordFirstElement ? plainPasswordFirstElement.value.trim() : '';
        var plainPasswordSecondElement = document.getElementById('registration_form_plainPassword_second');
        var plainPasswordSecondInput = plainPasswordSecondElement ? plainPasswordSecondElement.value.trim() : '';
        var passwordPattern = /^(?=.*[A-Z])(?=.*\d).{8,}$/;

        var mailElement = document.getElementById('registration_form_mail');
        var mailInput = mailElement ? mailElement.value.trim() : '';
        var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        var prenomElement = document.getElementById('registration_form_prenom');
        var prenomInput = prenomElement ? prenomElement.value.trim() : '';

        var nomElement = document.getElementById('registration_form_nom');
        var nomInput = nomElement ? nomElement.value.trim() : '';

        var dateNaissElement = document.getElementById('registration_form_dateNaiss');
        var dateNaissInput = dateNaissElement ? dateNaissElement.value.trim() : '';

        var sportPrincipalElement = document.getElementById('registration_form_sportPrincipal');
        var sportPrincipalInput = sportPrincipalElement ? sportPrincipalElement.value.trim() : '';

        var dateCertificatMedicalElement = document.getElementById('dateCertificatMedical');
        var dateCertificatMedicalInput = dateCertificatMedicalElement ? dateCertificatMedicalElement.value.trim() : '';

        var certificatMedic = document.getElementById('certificatMedic');
        var certificatMedicInput = certificatMedic ? certificatMedic.querySelector('input, textarea, select') : null;

        var questionnaireSante = document.getElementById('questionnaireSante');
        var questionnaireSanteInput = questionnaireSante ? questionnaireSante.querySelector('input, textarea, select') : null;

        var checkbox1 = document.getElementById("checkbox1").checked;
        var checkbox2 = document.getElementById("checkbox2").checked;
        var checkbox3 = document.getElementById("checkbox3").checked;
        var checkbox4 = document.getElementById("checkbox4").checked;
        var checkbox5 = document.getElementById("checkbox5").checked;

        var codePostalElement = document.getElementById('registration_form_codePostal');
        var codePostalInput = codePostalElement ? codePostalElement.value.trim() : '';

        var villeElement = document.getElementById('registration_form_ville');
        var villeInput = villeElement ? villeElement.value.trim() : '';

        var rueElement = document.getElementById('registration_form_rue');
        var rueInput = rueElement ? rueElement.value.trim() : '';

        var civiliteElement = document.getElementById('registration_form_civilite');
        var civiliteInput = civiliteElement ? civiliteElement.value.trim() : '';

        var telephoneElement = document.getElementById('registration_form_telephone');
        var telephoneInput = telephoneElement ? telephoneElement.value.trim() : '';
        var telephonePattern = /^(0|\+33|0033)[1-9]([-. ]?[0-9]{2}){4}$/;

        //var licenceElement = document.getElementById('registration_form_licence');
        //var licenceInput = licenceElement ? licenceElement.value.trim() : '';

        //var cotisationElement = document.getElementById('registration_form_cotisation');
        //var cotisationInput = cotisationElement ? cotisationElement.value.trim() : '';

        var forfaitElement = document.getElementById('registration_form_forfait');
        var forfaitInput = forfaitElement ? forfaitElement.value.trim() : '';

        if (usernameInput === '') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer un nom d'utilisateur",
        text: "Vous devez entrer un nom d'utilisateur. Assurez vous qu'il est unique à vous.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (plainPasswordFirstInput === '' || !passwordPattern.test(plainPasswordFirstInput)) {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer un mot de passe valide",
        text: "Votre mot de passe doit contenir au moins 8 caractères dont une majuscule et un nombre.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (plainPasswordFirstInput != plainPasswordSecondInput) {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer les mêmes mots de passe dans les 2 champs",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (mailInput === '' || !emailPattern.test(mailInput)) {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer un mail valide",
        text: "Vous devez entrer un mail. Assurez vous qu'il est valide et unique à vous.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (prenomInput === '') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer un prenom",
        text: "Vous devez entrer un prenom",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (nomInput === '') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer un nom",
        text: "Vous devez entrer un nom",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (dateNaissInput === '') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer votre date de naissance",
        text: "Vous devez entrer votre date de naissance",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (sportPrincipalInput === '' || sportPrincipalInput === 'à choisir') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez sélectionner votre sport principal",
        text: "Ce choix est juste une permettant de catégoriser les adhérants. Choisissez un sport que vous aimez et auquel vous comptez participer.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (certificatMedicInput.value && dateCertificatMedicalInput === '') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez saisir la date de votre certificat médical",
        text: "Vous avez envoyé un certificat médical, mais pas sa date.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if ((!certificatMedicInput || certificatMedicInput.value.trim() === '') && (!checkbox1 || !checkbox2 || !checkbox3 || !checkbox4 || !checkbox5)) {
        await Swal.fire({
        icon: "error",
        title: "Veuillez cocher les cases adéquates ou joindre un certificat",
        text: "Vous devez cocher toutes les cases attestant que vous allez fournir tous les documents nécessaires à votre inscription dans les 15 prochains jours situées en dessous du certificat médical ou joindre un certificat médical datant de moins de 3 ans.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if ((certificatMedicInput && certificatMedicInput.value.trim() !== '') && (checkbox1.checked || checkbox2.checked || checkbox3.checked || checkbox4.checked || checkbox5.checked)) {
        await Swal.fire({
        icon: "error",
        title: "Vous avez coché les cases alors que vous avez soumis un certificat.",
        text: "Vous ne devez cocher les cases que si vous ne possédez pas de certificat.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (questionnaireSante && questionnaireSante.style.display === 'block' &&
        (!questionnaireSanteInput || questionnaireSanteInput.value.trim() === '')) {
        await Swal.fire({
        icon: "error",
        title: "Questionnaire de santé obligatoire",
        text: "Vous devez remplir et joindre un questionnaire de santé si votre certificat médical a plus d'un an.",
        footer: '<a href="https://www.formulaires.service-public.fr/gf/cerfa_15699.do">Questionnaire de santé, format PDF</a>'
        });
        return false;
        }

        if (codePostalInput === '') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer votre code postal",
        text: "Vous devez entrer le code postal de votre lieu d'habitation",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (villeInput === '') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer une ville",
        text: "Vous devez entrer le nom de la ville où vous habitez.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (rueInput === '') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer une rue",
        text: "Vous devez entrer le nom de la rue où vous habitez",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (civiliteInput === '' || civiliteInput === 'à choisir') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez sélectionner comment vous souhaitez être appelé.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        if (telephoneInput === '' || !telephonePattern.test(telephoneInput)) {
        await Swal.fire({
        icon: "error",
        title: "Veuillez entrer un numéro de téléphone valide",
        text: "Vous devez entrer un numéro de téléphone. Assurez vous qu'il est valide et unique à vous.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }

        /*if (licenceInput === '' || licenceInput === 'à choisir') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez sélectionner une licence",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        }*/

        /* if (cotisationInput === '' || cotisationInput === 'à choisir') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez sélectionner une cotisation",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        } */

        /* if (forfaitInput === '' || forfaitInput === 'à choisir') {
        await Swal.fire({
        icon: "error",
        title: "Veuillez sélectionner un forfait.",
        footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
        });
        return false;
        } */

        const result = await Swal.fire({
        title: "Comment voulez vous régler l'adhésion ?",
        showDenyButton: true,
        showCancelButton: true,
        confirmButtonText: "Payer en ligne",
        denyButtonText: "Payement autre",
        cancelButtonText: "Annuler"
        });

        if (result.isConfirmed) {
        window.open("https://eolia-normandie.bloowatch.com/booking?categoryId=11256", "_blank");
        window.location.href = routes.login;
        return true;
        } else if (result.isDenied) {
        window.location.href = routes.login;
        return true;
        }

        return false;
        }

        document.getElementById('submitButton').addEventListener('click', async function() {
        const isValid = await validateForm();
        if (isValid) {
        document.getElementById('registerForm').submit();
        }
        });

        document.getElementById('dateCertificatMedical').addEventListener('change', function() {
            const inputDate = new Date(this.value);
            const oneYearAgo = new Date();
            const threeYearsAgo = new Date();

            oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
            threeYearsAgo.setFullYear(threeYearsAgo.getFullYear() - 3);

            if (inputDate < oneYearAgo && inputDate >= threeYearsAgo) {
                document.getElementById('questionnaireSante').style.display = 'block';
            } else {
                document.getElementById('questionnaireSante').style.display = 'none';
            }
        });

        document.getElementById('checkbox1').addEventListener('change', function() {
            if (this.checked) {
                document.getElementById('checkboxList2').style.display = 'block';
            } else {
                document.getElementById('checkboxList2').style.display = 'none';
            }
        });

        // Form forfaits
         
        // Custom Forfait Dropdown Functionality  
        document.addEventListener('DOMContentLoaded', function() {
            const dropdown = document.querySelector('.forfait-custom-dropdown');
            const hiddenContainer = document.querySelector('.d-none');
            if (!dropdown || !hiddenContainer) return;

            const toggle = dropdown.querySelector('.forfait-dropdown-toggle');
            const menu = dropdown.querySelector('.forfait-dropdown-menu');
            const dropdownText = dropdown.querySelector('.forfait-dropdown-text');
            const customCheckboxes = dropdown.querySelectorAll('input[type="checkbox"]');
            const hiddenCheckboxes = hiddenContainer.querySelectorAll('input[type="checkbox"]');
            const placeholder = dropdown.getAttribute('data-placeholder') || 'Sélectionner...';

            // For registration form, user has no existing forfaits
            const userForfaitIds = [];

            // Initialize dropdown based on Symfony form state
            function initializeDropdown() {
                customCheckboxes.forEach(function(customCheckbox) {
                    const forfaitId = parseInt(customCheckbox.closest('.forfait-dropdown-item').getAttribute('data-forfait-id'));
                    const hiddenCheckbox = document.querySelector(`input[name="registration_form[forfaits][]"][value="${forfaitId}"]`);
                    
                    if (hiddenCheckbox && hiddenCheckbox.checked) {
                        customCheckbox.checked = true;
                    }
                });
                
                // Apply business logic styling
                customCheckboxes.forEach(function(checkbox) {
                    const item = checkbox.closest('.forfait-dropdown-item');
                    const isFull = item.getAttribute('data-is-full') === 'true';
                    const isForced = item.getAttribute('data-is-forced') === 'true';
                    const forfaitId = parseInt(item.getAttribute('data-forfait-id'));

                    if (isForced) {
                        item.classList.add('forced');
                        checkbox.checked = true; // Force check
                    }
                    
                    if (isFull) {
                        item.classList.add('disabled');
                    }
                });
                
                updateDropdownText();
            }

            // Toggle dropdown
            toggle.addEventListener('click', function(e) {
                e.preventDefault();
                dropdown.classList.toggle('active');
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', function(e) {
                if (!dropdown.contains(e.target)) {
                    dropdown.classList.remove('active');
                }
            });

            // Handle checkbox changes
            /* function updateDropdownText() {
                const selectedOptions = Array.from(customCheckboxes).filter(cb => cb.checked);
                
                if (selectedOptions.length === 0) {
                    dropdownText.textContent = placeholder;
                    dropdownText.classList.remove('selected');
                } else if (selectedOptions.length === 1) {
                    const label = selectedOptions[0].nextElementSibling.textContent;
                    dropdownText.textContent = label.split('[')[0].trim(); // Remove status tags for display
                    dropdownText.classList.add('selected');
                } else {
                    dropdownText.textContent = selectedOptions.length + ' forfaits sélectionnés';
                    dropdownText.classList.add('selected');
                }
            } */

            customCheckboxes.forEach(function(customCheckbox) {
                customCheckbox.addEventListener('change', function(e) {
                    const item = this.closest('.forfait-dropdown-item');
                    const forfaitId = parseInt(item.getAttribute('data-forfait-id'));
                    const isFull = item.getAttribute('data-is-full') === 'true';
                    const isForced = item.getAttribute('data-is-forced') === 'true';
                    
                    // Prevent deselection of forced forfaits
                    if (isForced && !this.checked) {
                        e.preventDefault();
                        this.checked = true;
                        alert('Ce forfait est obligatoire et ne peut pas être désélectionné.');
                        return false;
                    }
                    
                    // Prevent selection of full forfaits for new registrations
                    if (isFull && this.checked) {
                        e.preventDefault();
                        this.checked = false;
                        alert('Ce forfait est complet. Vous ne pouvez pas le sélectionner.');
                        return false;
                    }
                    
                    // Sync with hidden Symfony checkbox
                    const hiddenCheckbox = document.querySelector(`input[name="registration_form[forfaits][]"][value="${forfaitId}"]`);
                    if (hiddenCheckbox) {
                        hiddenCheckbox.checked = this.checked;
                    }
                    
                    updateDropdownText();
                });
            });

            // Prevent menu close when clicking on items
            menu.addEventListener('click', function(e) {
                e.stopPropagation();
            });

            // Initialize everything
            initializeDropdown();
        });
    </script>
{% endblock %}