document.addEventListener("DOMContentLoaded", function () {
	let form = document.getElementById('multiStepForm');
	let formTabs = document.querySelectorAll('#formStepper .nav-link');
	let nextButtons = document.querySelectorAll('.next-step');
	let prevButtons = document.querySelectorAll('.prev-step');
	let tabs = document.querySelectorAll("#formStepper .nav-link");

	const employeesGroup = document.querySelector('.employees-group'); // Récupère le groupe des employés
	const employeesRadios = document.querySelectorAll('input[name="contact_creation_societe[employees]"]'); // Récupère les boutons radio de "employees"
	const employeesNumber = document.querySelector('input[name="contact_creation_societe[employeesNumber]"]');

	// Cacher employees-group au départ
	// Fonction pour gérer l'affichage du groupe employees et la validation des champs
	function toggleEmployeesGroup() {
		const isEmployeesYes = document.querySelector('input[name="contact_creation_societe[employees]"]:checked')?.value === '1';

		if (isEmployeesYes) {
			employeesGroup.style.display = 'flex'; // Afficher le groupe
			employeesNumber.setAttribute('required', 'required');
		} else {
			employeesGroup.style.display = 'none'; // Cacher le groupe
			employeesNumber.removeAttribute('required');
		}
	}

	// Ajouter un écouteur d'événements pour chaque radio "employees"
	employeesRadios.forEach(radio => {
		radio.addEventListener('change', toggleEmployeesGroup);
	});

	// Initialiser l'affichage du groupe employees dès que la page est chargée
	toggleEmployeesGroup();

	// Désactiver la navigation manuelle
	tabs.forEach(tab => {
		tab.removeAttribute("data-bs-toggle");
		tab.addEventListener("click", function (event) {
			event.preventDefault();
		});
	});

	tippy('.tippy-brut-net', {
		content: '<strong>💡 Salaire brut vs salaire net </strong> <p>Le salaire brut correspond au salaire total avant prélèvement des cotisations sociales et des impôts. Le salaire net, quant à lui, est la somme réellement versée au salarié après déduction de ces cotisations et prélèvements obligatoires.</p>',
		allowHTML: true,
		placement: 'right',
		interactive: true,
	});

	flatpickr(".datepicker", {
		dateFormat: "d/m/Y", // Format européen
		allowInput: true,    // Permet de taper une date manuellement
		onReady: function (selectedDates, dateStr, instance) {
			let input = instance.input;

			// Ajoute le placeholder personnalisé
			input.setAttribute("placeholder", "JJ/MM/AA");

			// Ajoute une classe CSS pour l'icône
			input.classList.add("flatpickr-with-icon");
		}
	});

	const rateNumber = document.querySelectorAll('input.formatted-taux');

	rateNumber.forEach(input => {
		input.addEventListener('input', (e) => {
			const original = input.value;
			// On garde uniquement chiffres, virgule, point
			const cleaned = original.replace(/[^0-9.,]/g, '');
			if (original !== cleaned) {
				input.value = cleaned;
			}
		});

		if (!input.hasAttribute('data-paste-listener-attached')) {
			input.addEventListener('paste', (e) => {
				e.preventDefault();
				const pasted = (e.clipboardData || window.clipboardData).getData('text');
				const cleaned = pasted.replace(/[^0-9.,]/g, '');
				document.execCommand('insertText', false, cleaned);
			});
			input.setAttribute('data-paste-listener-attached', 'true');
		}
	});


	const inputsNumber = document.querySelectorAll('input.formatted-number');

	inputsNumber.forEach(inputNumber => {
		// Format initial
		inputNumber.value = formatNumber(unformatNumber(inputNumber.value));

		// Mise à jour du format à chaque saisie
		inputNumber.addEventListener('input', () => {
			const cursorPosition = inputNumber.selectionStart;
			const oldLength = inputNumber.value.length;

			const unformatted = unformatNumber(inputNumber.value);
			if (isNaN(unformatted)) return;

			inputNumber.value = formatNumber(unformatted);

			// Réajuste la position du curseur
			const newLength = inputNumber.value.length;
			const offset = newLength - oldLength;
			inputNumber.setSelectionRange(cursorPosition + offset, cursorPosition + offset);
		});

		// Bloque les caractères non numériques (et autorise la virgule)
		inputNumber.addEventListener('beforeinput', (e) => {
			if (e.data && !/^[0-9,]$/.test(e.data)) {
				e.preventDefault();
			}
		});

		// Nettoie le contenu collé
		if (!inputNumber.hasAttribute('data-paste-listener-attached')) {
			// Nettoie le contenu collé
			inputNumber.addEventListener('paste', (e) => {
				e.preventDefault();
				// Récupère le texte copié et enlève les espaces insécables avant de le coller
				const pasted = (e.clipboardData || window.clipboardData).getData('text');
				// Remplace les espaces insécables par un caractère de séparation (espace ordinaire)
				const cleaned = pasted.replace(/[^0-9,]/g, ''); // On laisse uniquement les chiffres et la virgule
				document.execCommand('insertText', false, cleaned);
			});

			// Marque l'input comme ayant un listener paste attaché
			inputNumber.setAttribute('data-paste-listener-attached', 'true');
		}
	});

	function unformatNumber(value) {
		return value
			.replace(/\s/g, '')   // supprime tous les espaces
			.replace(',', '.');   // transforme la virgule en point
	}

// Ajoute les espaces comme séparateurs de milliers et remet la virgule
	function formatNumber(value) {
		if (!value || isNaN(value)) return '';

		let [intPart, decimalPart] = value.toString().split('.');
		intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' '); // espace insécable
		return decimalPart ? `${intPart},${decimalPart}` : intPart;
	}


	document.querySelectorAll('input[type="number"]').forEach(function (input) {
		// Empêche la saisie de lettres
		input.addEventListener("keypress", function (e) {
			if (!/[0-9]/.test(e.key)) {
				e.preventDefault();
			}
		});

		// Empêche de coller du texte
		input.addEventListener("paste", function (e) {
			let pasteData = (e.clipboardData || window.clipboardData).getData("text");
			if (!/^\d+$/.test(pasteData)) {
				e.preventDefault();
			}
		});

		// Supprime les lettres si elles sont ajoutées d'une autre manière (ex: drag & drop)
		input.addEventListener("input", function () {
			this.value = this.value.replace(/\D/g, '');
		});
	});

	const goToButtons = document.querySelectorAll('.changeTab');
	goToButtons.forEach(button => {

		button.addEventListener('click', function (e) {
			e.preventDefault()
			const targetTabId = this.getAttribute('data-target'); // Récupère la cible depuis l'attribut data-target
			const targetTabIndex = Array.from(formTabs).findIndex(tab => tab.getAttribute('href') === targetTabId);

			if (targetTabIndex !== -1) {
				changeTab(targetTabIndex, false); // Change le tab en utilisant la fonction changeTab
				scrollToForm();
			}
		});
	});

	const buttons = document.querySelectorAll('.payment-btn');
	const paymentMethodInput = document.getElementById('contact_creation_societe_paymentMethod');
	const infoText = document.querySelector('.info');
	const paypalContainer = document.getElementById('paypal-button-container');

	const messages = {
		cb: "En cliquant sur le bouton, une fenêtre de notre banque s’ouvrira pour confirmer le paiement.",
		paypal: "En cliquant sur le bouton, les modes de paiement PayPal s’afficheront."
	};

	buttons.forEach(button => {
		button.addEventListener('click', () => {
			// Met à jour la valeur du champ caché
			const method = button.dataset.method;
			paymentMethodInput.value = method;

			// Retire la classe active de tous les boutons et ajoute à celui sélectionné
			buttons.forEach(btn => btn.classList.remove('active'));
			button.classList.add('active');

			if (method === 'paypal') {
				paypalContainer.style.display = 'block';
			} else {
				paypalContainer.style.display = 'none';
			}

			// Met à jour le texte d'information
			infoText.textContent = messages[method];
		});
	});

	const btnSubmit = document.getElementById('submitBtn');
	const price = btnSubmit.dataset.price;
	let paypalButtonsRendered = false;
	btnSubmit.addEventListener('click', function (e) {
		e.preventDefault();
		if (validateCurrentStep()) {
			let selectedMethod = paymentMethodInput.value;

			if (selectedMethod === 'paypal') {
				console.log('PayPal selected');
				if (!paypalButtonsRendered) {
					paypal.Buttons({
						createOrder: function (data, actions) {
							return actions.order.create({
								purchase_units: [{
									amount: {
										value: price
									}
								}]
							});
						},
						onApprove: function (data, actions) {
							return actions.order.capture().then(function (details) {
								form.submit();
							});
						},
						onError: function (err) {
							console.error('Erreur PayPal : ', err);
							alert('Une erreur est survenue pendant le paiement.');
						}
					}).render('#paypal-button-container');

					paypalButtonsRendered = true;
					submitBtn.disabled = true; // éviter clics multiples
				}
			} else {
				// Paiement autre que PayPal : soumission classique
				form.submit();
			}
			// form.submit();
		}
	})

	let index = document.querySelectorAll("#charges-container .form-row").length;
	const container = document.getElementById("charges-container");
	const addButton = document.getElementById("add-charge-btn");

	// Ajoute une charge à partir du prototype
	function addCharge(labelText, checkboxId) {
		if (document.querySelector(`.charge-form[data-checkbox-id="${checkboxId}"]`)) {
			return;
		}

		const prototype = container.dataset.prototype.replace(/__name__/g, index);
		const div = document.createElement("div");
		div.innerHTML = prototype;
		div.classList.add("charge-form");
		div.setAttribute("data-checkbox-id", checkboxId);

		const inputAmount = div.querySelector('.formatted-number');
		// Empêche la saisie de lettres
		inputAmount.addEventListener("keypress", function (e) {
			if (!/[0-9]/.test(e.key)) {
				e.preventDefault();
			}
		});

		// Empêche de coller du texte
		if (inputAmount) {
			console.log(inputAmount);
			// Remplacer le type par text pour permettre le formatage
			inputAmount.type = 'text'; // Permet d'utiliser le formatage avec des espaces
			inputAmount.inputMode = 'numeric'; // Ajoute un clavier numérique
			inputAmount.pattern = '[0-9,]+'; // Permet la saisie de chiffres et de la virgule
			inputAmount.min = 0;
			inputAmount.step = 'any';

			// Applique le formatage à l'input montant
			inputAmount.value = formatNumber(unformatNumber(inputAmount.value));

			// Mise à jour du format à chaque saisie
			inputAmount.addEventListener('input', (e) => {
				const cursorPosition = inputAmount.selectionStart;
				const oldLength = inputAmount.value.length;

				const unformatted = unformatNumber(inputAmount.value);
				if (isNaN(unformatted)) return;

				inputAmount.value = formatNumber(unformatted);

				// Réajuste la position du curseur
				const newLength = inputAmount.value.length;
				const offset = newLength - oldLength;
				inputAmount.setSelectionRange(cursorPosition + offset, cursorPosition + offset);
			});

			// Bloque les caractères non numériques (et autorise la virgule)
			inputAmount.addEventListener('beforeinput', (e) => {
				if (e.data && !/^[0-9,]$/.test(e.data)) {
					e.preventDefault();
				}
			});

			// Nettoie le contenu collé
			if (!inputAmount.hasAttribute('data-paste-listener-attached')) {
				// Nettoie le contenu collé
				inputAmount.addEventListener('paste', (e) => {
					e.preventDefault();
					// Récupère le texte copié et enlève les espaces insécables avant de le coller
					const pasted = (e.clipboardData || window.clipboardData).getData('text');
					// Remplace les espaces insécables par un caractère de séparation (espace ordinaire)
					const cleaned = pasted.replace(/[^0-9,]/g, ''); // On laisse uniquement les chiffres et la virgule
					document.execCommand('insertText', false, cleaned);
				});

				// Marque l'input comme ayant un listener paste attaché
				inputAmount.setAttribute('data-paste-listener-attached', 'true');
			}
			inputAmount.classList.add('euro');
		}

		// Remplit le champ "Nom"
		const inputName = div.querySelector('input[name*="[name]"]');
		if (inputName) {
			inputName.value = labelText;
		}

		// Ajoute un bouton de suppression
		const removeButton = document.createElement("button");
		removeButton.classList.add("remove-charge-btn");
		removeButton.innerHTML = `
            <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.4 14.3105L0 12.9105L5.6 7.31055L0 1.71055L1.4 0.310547L7 5.91055L12.6 0.310547L14 1.71055L8.4 7.31055L14 12.9105L12.6 14.3105L7 8.71055L1.4 14.3105Z" fill="#545465"/>
            </svg>
        `;
		removeButton.addEventListener("click", (event) => {
			event.preventDefault();
			removeCharge(checkboxId);
		});

		div.appendChild(removeButton);
		container.appendChild(div);


		index++;
	}

	// Supprime une charge et décoche la checkbox associée
	function removeCharge(checkboxId) {
		const chargeToRemove = document.querySelector(`.charge-form[data-checkbox-id="${checkboxId}"]`);
		if (chargeToRemove) {
			chargeToRemove.remove();
		}

		const checkbox = document.getElementById(checkboxId);
		if (checkbox) {
			checkbox.checked = false;
		}
	}

	// Ajoute une charge manuellement via le bouton "Ajouter"
	addButton.addEventListener("click", (event) => {
		event.preventDefault();
		addCharge("Nouvelle charge", `custom-charge-${index}`);
	});

	// Gestion des checkboxes
	document.querySelectorAll(".container-checkbox input[type='checkbox']").forEach((checkbox) => {
		const labelText = checkbox.nextElementSibling.textContent.trim();

		// Ajoute ou retire une charge au changement d'état
		checkbox.addEventListener("change", function () {
			this.checked ? addCharge(labelText, this.id) : removeCharge(this.id);
		});

		// Vérifie l'état au chargement de la page
		if (checkbox.checked) {
			addCharge(labelText, checkbox.id);
		}
	});

	const employeesNumberInput = document.querySelector('[name="contact_creation_societe[employeesNumber]"]');
	const apprenticesNumberInput = document.querySelector('[name="contact_creation_societe[apprenticesNumber]"]');
	const collectionContainer = document.querySelector('#salary-container'); // L'élément contenant les champs de collection
	const prototype = collectionContainer.dataset.prototype; // Le prototype du formulaire
	const labelSalary = document.querySelector('#labelSalary'); // L'élément label pour le salaire

// Tableau pour stocker les valeurs existantes
	let values = {};

// Fonction pour mettre à jour le formulaire de collection
	function updateCollectionSalary() {
		const numEmployees = parseInt(employeesNumberInput.value) || 0;
		const numApprentices = parseInt(apprenticesNumberInput.value) || 0;

		if (!numApprentices > 0 && !numEmployees > 0) {
			labelSalary.style.display = 'none'; // Afficher le label
		} else {
			labelSalary.style.display = 'block'; // Cacher le label
		}

		// Calculer le total d'éléments
		const total = numEmployees + numApprentices;

		// Sauvegarder les valeurs existantes dans le tableau 'values'
		const existingFields = collectionContainer.querySelectorAll('.field-wrapper');
		let employeeIndexExisting = 0;
		let apprenticeIndexExisting = 0;

		existingFields.forEach((fieldWrapper) => {
			const typeInput = fieldWrapper.querySelector('.type');
			const valueInput = fieldWrapper.querySelector('.form-control');
			if (typeInput && valueInput) {
				// On vérifie si c'est un salarié ou un apprenti
				const isEmployee = typeInput.value === 'salarié';
				const index = isEmployee ? employeeIndexExisting++ : apprenticeIndexExisting++; // On incrémente le bon index

				// Sauvegarder la valeur avec l'index correspondant à chaque type
				const key = `${typeInput.value}${index}`; // Clé de type employé/apprenti + index spécifique
				values[key] = valueInput.value; // Sauvegarder la valeur
			}
		});

		console.log(values);

		// Vider la collection existante
		collectionContainer.innerHTML = '';

		// Indices séparés pour les salariés et les apprentis
		let employeeIndex = 0;
		let apprenticeIndex = 0;

		// Ajouter les nouveaux champs dynamiques
		for (let i = 0; i < total; i++) {
			// Créer une div globale pour chaque champ de la collection
			const fieldWrapper = document.createElement('div');
			fieldWrapper.classList.add('field-wrapper');

			// Déterminer si c'est un salarié ou un apprenti
			const isEmployee = i < numEmployees;
			const label = isEmployee ? `Salarié ${employeeIndex + 1}` : `Apprenti ${apprenticeIndex + 1}`;

			// Créer un élément label pour le champ
			const labelElement = document.createElement('label');
			labelElement.textContent = label;
			labelElement.classList.add('required');

			// Ajouter le label à la div globale
			fieldWrapper.appendChild(labelElement);

			// Ajouter le champ de formulaire depuis le prototype
			let newField = prototype.replace(/__name__/g, i); // Remplacer le prototype par l'index

			// Insérer le champ dans la div globale
			const tempDiv = document.createElement('div');
			tempDiv.innerHTML = newField;
			const typeInput = tempDiv.querySelector('.type');
			if (typeInput) {
				typeInput.value = isEmployee ? 'salarié' : 'apprenti';
			}

			// Récupérer la valeur sauvegardée pour ce type et cet index
			const key = `${typeInput.value}${isEmployee ? employeeIndex : apprenticeIndex}`;
			if (values[key]) {
				const valueInput = tempDiv.querySelector('.form-control');
				if (valueInput) {
					valueInput.value = values[key]; // Injecter la valeur sauvegardée
				}
			}

			const inputSalary = tempDiv.querySelector('.formatted-number');
			if (inputSalary) {
				console.log(inputSalary);
				// Remplacer le type par text pour permettre le formatage
				inputSalary.type = 'text'; // Permet d'utiliser le formatage avec des espaces
				inputSalary.inputMode = 'numeric'; // Ajoute un clavier numérique
				inputSalary.pattern = '[0-9,]+'; // Permet la saisie de chiffres et de la virgule
				inputSalary.min = 0;
				inputSalary.step = 'any';

				// Applique le formatage à l'input montant
				inputSalary.value = formatNumber(unformatNumber(inputSalary.value));

				// Mise à jour du format à chaque saisie
				inputSalary.addEventListener('input', (e) => {
					const cursorPosition = inputSalary.selectionStart;
					const oldLength = inputSalary.value.length;

					const unformatted = unformatNumber(inputSalary.value);
					if (isNaN(unformatted)) return;

					inputSalary.value = formatNumber(unformatted);

					// Réajuste la position du curseur
					const newLength = inputSalary.value.length;
					const offset = newLength - oldLength;
					inputSalary.setSelectionRange(cursorPosition + offset, cursorPosition + offset);
				});

				// Bloque les caractères non numériques (et autorise la virgule)
				inputSalary.addEventListener('beforeinput', (e) => {
					if (e.data && !/^[0-9,]$/.test(e.data)) {
						e.preventDefault();
					}
				});

				// Nettoie le contenu collé
				if (!inputSalary.hasAttribute('data-paste-listener-attached')) {
					// Nettoie le contenu collé
					inputSalary.addEventListener('paste', (e) => {
						e.preventDefault();
						// Récupère le texte copié et enlève les espaces insécables avant de le coller
						const pasted = (e.clipboardData || window.clipboardData).getData('text');
						// Remplace les espaces insécables par un caractère de séparation (espace ordinaire)
						const cleaned = pasted.replace(/[^0-9,]/g, ''); // On laisse uniquement les chiffres et la virgule
						document.execCommand('insertText', false, cleaned);
					});

					// Marque l'input comme ayant un listener paste attaché
					inputSalary.setAttribute('data-paste-listener-attached', 'true');
				}
				inputSalary.classList.add('euro');
			}

			// Ajouter le champ au wrapper
			fieldWrapper.appendChild(tempDiv.firstChild);

			// Ajouter la div avec le champ et le label au conteneur de la collection
			collectionContainer.appendChild(fieldWrapper);

			// Incrémenter l'index pour le salarié ou l'apprenti
			if (isEmployee) {
				employeeIndex++;
			} else {
				apprenticeIndex++;
			}
		}
	}

// Écouter les changements des champs employés et apprentis
	employeesNumberInput.addEventListener('input', updateCollectionSalary);
	apprenticesNumberInput.addEventListener('input', updateCollectionSalary);

// Initialiser la collection au chargement de la page
	updateCollectionSalary();

	function getCurrentTabIndex() {
		return Array.from(formTabs).findIndex(tab => tab.classList.contains('active'));
	}

	function updateStepCompletion() {
		let currentIndex = getCurrentTabIndex();

		formTabs.forEach((tab, index) => {
			let navItem = tab.closest('.nav-item');
			let stepNumber = tab.querySelector('.step-number');

			if (index < currentIndex) {
				tab.classList.add('completed');
				navItem.classList.add('completed');
				stepNumber.innerHTML = ''; // Clear the step number
			} else {
				tab.classList.remove('completed');
				navItem.classList.remove('completed');
				stepNumber.innerHTML = index + 1; // Reset to the step number
			}
		});
	}

	function scrollToForm() {
		const offset = 100; // Ajuste cette valeur selon tes besoins
		const formTop = form.getBoundingClientRect().top + window.scrollY - offset;

		window.scrollTo({
			top: formTop,
			behavior: "smooth"
		});
	}

	function changeTab(index, validate = true) {
		formTabs.forEach((tab, i) => {
			tab.classList.remove('active');
			tab.setAttribute('aria-selected', 'false');
			document.querySelector(tab.getAttribute('href')).classList.remove('show', 'active');
		});

		formTabs[index].classList.add('active');
		formTabs[index].setAttribute('aria-selected', 'true');
		document.querySelector(formTabs[index].getAttribute('href')).classList.add('show', 'active');

		if (validate) {
			updateStepCompletion();
		}
		centerActiveStep(index); // Ajout du centrage
		updateRecap();
	}

	function validateField(input) {
		let isValid = true;
		let errorMessage = "";
		let errorSpan;

		// Supprimer les erreurs existantes
		let formGroup = input.closest('.form-group');
		let existingErrors = formGroup ? formGroup.querySelectorAll(".validation-error") : [];
		existingErrors.forEach(error => error.remove());

		// Validation des boutons radio
		if (input.type === "radio") {
			let radioGroup = document.querySelectorAll(`input[name="${input.name}"]`);
			let isChecked = Array.from(radioGroup).some(radio => radio.checked);

			if (!isChecked) {
				isValid = false;
				errorMessage = "Veuillez sélectionner une option.";

				if (formGroup && !formGroup.querySelector(".validation-error")) {
					errorSpan = document.createElement("span");
					errorSpan.classList.add("text-danger", "validation-error");
					errorSpan.innerText = errorMessage;

					let legend = formGroup.querySelector("legend");
					if (legend) {
						legend.insertAdjacentElement("afterend", errorSpan);
					}
				}
			}

			radioGroup.forEach(radio => {
				radio.classList.toggle("is-invalid", !isValid);
			});

		} else if (input.type === "checkbox") {
			// let checkboxGroup = document.querySelectorAll(`input[name="${input.name}"]`);
			// let isChecked = Array.from(checkboxGroup).some(checkbox => checkbox.checked);
			//
			// if (!isChecked) {
			// 	isValid = false;
			// 	errorMessage = "Veuillez cocher au moins une case.";
			//
			// 	if (formGroup && !formGroup.querySelector(".validation-error")) {
			// 		errorSpan = document.createElement("span");
			// 		errorSpan.classList.add("text-danger", "validation-error");
			// 		errorSpan.innerText = errorMessage;
			//
			// 		let legend = formGroup.querySelector("legend");
			// 		if (legend) {
			// 			legend.insertAdjacentElement("afterend", errorSpan);
			// 		}
			// 	}
			// }
			//
			// checkboxGroup.forEach(checkbox => {
			// 	checkbox.classList.toggle("is-invalid", !isValid);
			// });

		} else {
			// Validation des autres champs
			if (input.hasAttribute("required") && input.value.trim() === "") {
				isValid = false;
				errorMessage = "Ce champ est obligatoire.";
			} else if (input.type === "email" && input.value.trim() !== "") {
				let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!emailPattern.test(input.value)) {
					isValid = false;
					errorMessage = "Veuillez entrer un email valide.";
				}
			} else if (input.type === "number" && input.value.trim() !== "") {
				let min = input.min ? parseFloat(input.min) : null;
				let max = input.max ? parseFloat(input.max) : null;
				let value = parseFloat(input.value);

				if (!/^\d+$/.test(input.value)) {
					isValid = false;
					errorMessage = "Veuillez entrer un nombre valide.";
				} else if (min !== null && value < min) {
					isValid = false;
					errorMessage = `La valeur doit être au minimum ${min}.`;
				} else if (max !== null && value > max) {
					isValid = false;
					errorMessage = `La valeur doit être au maximum ${max}.`;
				}
			} else if (input.dataset.type === "phone" && input.value.trim() !== "") {
				let phonePattern = /^(\+33|0)[1-9](\d{2}){4}$/;
				if (!phonePattern.test(input.value)) {
					isValid = false;
					errorMessage = "Veuillez entrer un numéro de téléphone valide.";
				}
			}

			if (!isValid) {
				let error = document.createElement("span");
				error.classList.add("text-danger", "validation-error");
				error.innerText = errorMessage;
				input.classList.add("is-invalid");

				let flatpickrWrapper = input.closest(".flatpickr-wrapper");
				if (flatpickrWrapper) {
					flatpickrWrapper.parentNode.insertBefore(error, flatpickrWrapper);
				} else {
					input.parentNode.insertBefore(error, input);
				}
			} else {
				input.classList.remove("is-invalid");
			}
		}

		return isValid;
	}


	function updateValue(fieldId, value) {
		// Met à jour la valeur du champ number lié au slider
		const field = document.querySelector(`[name="form_previ_creation[${fieldId}]"]`);
		if (field) {
			field.value = value;
		}
	}

	function centerActiveStep(index) {
		let stepper = document.querySelector('.stepper');
		let slides = document.querySelectorAll('.stepper .nav-item');

		if (!stepper || slides.length === 0 || index < 0 || index >= slides.length) return;

		let slideWidth = slides[0].offsetWidth; // On suppose que toutes les slides ont la même largeur
		let scrollLeft = slideWidth * (index - 1);

		// Empêcher le dépassement des bords
		scrollLeft = Math.max(0, Math.min(scrollLeft, stepper.scrollWidth - stepper.clientWidth));

		stepper.scrollTo({
			left: scrollLeft,
			behavior: "smooth"
		});

	}

	function validateCurrentStep() {
		let currentIndex = getCurrentTabIndex();
		let currentStep = document.querySelector(formTabs[currentIndex].getAttribute('href'));
		let inputs = currentStep.querySelectorAll("input, select, textarea");
		let isValid = true;
		let validatedRadioGroups = new Set();

		inputs.forEach(input => {
			if (input.type === "radio") {
				if (!validatedRadioGroups.has(input.name)) {
					validatedRadioGroups.add(input.name);
					let firstRadio = document.querySelector(`input[name="${input.name}"]`);
					if (firstRadio && !validateField(firstRadio)) {
						isValid = false;
					}
				}
			} else {
				if (!validateField(input)) {
					isValid = false;
				}
			}
		});

		return isValid;
	}

	function updateRecap() {
		// Récupérer les valeurs des champs du formulaire
		const businessStructure = document.querySelector('select[name="contact_creation_societe[businessStructure]"]')?.value || "";
		const societyName = document.querySelector('input[name="contact_creation_societe[societyName]"]')?.value || "";
		const societyAddress = document.querySelector('input[name="contact_creation_societe[societyAddress]"]')?.value || "";
		const societyZipCode = document.querySelector('input[name="contact_creation_societe[societyZipCode]"]')?.value || "";
		const activitySector = document.querySelector('input[name="contact_creation_societe[activity]"]')?.value || "";
		const startActivityDate = document.querySelector('input[name="contact_creation_societe[startActivityAt]"]')?.value || "";
		const fiscalYearEndDate = document.querySelector('input[name="contact_creation_societe[fiscalYearEndAt]"]')?.value || "";
		const taxRegime = document.querySelector('select[name="contact_creation_societe[taxRegime]"]')?.value || "";
		const tva = document.querySelector('input[name="contact_creation_societe[tva]"]:checked')?.value == 1 ? "Oui" : "Non" || "";
		const companyCapital = document.querySelector('input[name="contact_creation_societe[companyCapital]"]')?.value || "";

		// Chiffres section
		const investmentAmount = document.querySelector('input[name="contact_creation_societe[investmentAmount]"]')?.value || "";
		const personalContribution = document.querySelector('input[name="contact_creation_societe[personalContribution]"]')?.value || "";
		const loanRequested = document.querySelector('input[name="contact_creation_societe[loanRequested]"]')?.value || "";
		const loanRateRequested = document.querySelector('input[name="contact_creation_societe[loanRateRequested]"]')?.value || "";
		const caEstimated = document.querySelector('input[name="contact_creation_societe[ca_estimated]"]')?.value || "";
		const marginRate = document.querySelector('input[name="contact_creation_societe[marginRate]"]')?.value || "";

		// Section Charges (checkboxes)
		const chargeForms = document.querySelectorAll('.charge-form');

// Créer un tableau pour stocker les éléments <p>
		const chargesArray = [];

// Parcourir chaque .charge-form
		chargeForms.forEach((chargeForm) => {
			// Récupérer le nom de la charge
			const nameInput = chargeForm.querySelector('[name$="[name]"]');
			const name = nameInput ? nameInput.value : '';

			// Récupérer le montant de la charge
			const amountInput = chargeForm.querySelector('[name$="[amount]"]');
			const amount = amountInput ? amountInput.value : '';

			// Créer l'élément <p> avec le format souhaité
			const pElement = document.createElement('p');
			pElement.innerHTML = `${name} : <strong>${amount}€</strong>`;

			// Ajouter l'élément <p> au tableau
			chargesArray.push(pElement);
		});

		// Section Collaborateur
		const employees = document.querySelector('input[name="contact_creation_societe[employees]"]:checked')?.value == 1 ? "Oui" : "Non";
		const employeesNumber = document.querySelector('input[name="contact_creation_societe[employeesNumber]"]')?.value;
		const apprenticesNumber = document.querySelector('input[name="contact_creation_societe[apprenticesNumber]"]')?.value;
		const netDirectorSalary = document.querySelector('input[name="contact_creation_societe[netDirectorSalary]"]')?.value || "";
		const unemploymentRights = document.querySelector('input[name="contact_creation_societe[unemploymentRights]"]:checked')?.value == 1 ? "Oui" : "Non";

		const salaryForms = document.querySelectorAll('#salary-container .field-wrapper');
		const salaryArray = [];
		if (salaryForms.length > 0) {
			const pElement = document.createElement('p');
			pElement.innerHTML = `<br><strong>Salaires</strong><br>`;
			salaryArray.push(pElement);
		}
		// Parcourir chaque .field-wrapper
		salaryForms.forEach((salaryForm) => {
			// Récupérer le type (salarié ou apprenti)
			const label = salaryForm.querySelector('label');
			const type = label.innerText;

			// Récupérer le montant
			const amountInput = salaryForm.querySelector('.form-control');
			const amount = amountInput ? amountInput.value : '';

			// Créer l'élément <p> avec le format souhaité
			const pElement = document.createElement('p');
			pElement.innerHTML = `${type} : <strong>${amount}€</strong>`;

			// Ajouter l'élément <p> au tableau
			salaryArray.push(pElement);
		});

		// Section projet
		const additionalInformations = document.querySelector('textarea[name="contact_creation_societe[additionalInformations]"]')?.value || "";

		// Business recap
		const recapBusinessStructure = document.getElementById('recapBusinessStructure');
		const recapSocietyName = document.getElementById('recapSocietyName');
		const recapSocietyAddress = document.getElementById('recapSocietyAddress');
		const recapSocietyZipCode = document.getElementById('recapSocietyZipCode');
		const recapActivity = document.getElementById('recapActivity');
		const recapStartActivityAt = document.getElementById('recapStartActivityAt');
		const recapFiscalYearEndAt = document.getElementById('recapFiscalYearEndAt');
		const recapTaxRegime = document.getElementById('recapTaxRegime');
		const recapTva = document.getElementById('recapTva');
		const recapCompanyCapital = document.getElementById('recapCompanyCapital');

		// Chiffres recap
		const recapInvestmentAmount = document.getElementById('recapInvestmentAmount');
		const recapPersonalContribution = document.getElementById('recapPersonalContribution');
		const recapLoanRequested = document.getElementById('recapLoanRequested');
		const recapLoanRateRequested = document.getElementById('recapLoanRateRequested');
		const recapCaEstimated = document.getElementById('recapCaEstimated');
		const recapMarginRate = document.getElementById('recapMarginRate');

		// Charge recap
		const recapCharges = document.getElementById('recapCharges');

		// Collaborateur recap
		const recapEmployees = document.getElementById('recapEmployees');
		const recapEmployeesNumber = document.getElementById('recapEmployeesNumber');
		const recapApprenticesNumber = document.getElementById('recapApprenticesNumber');
		const recapNetDirectorSalary = document.getElementById('recapNetDirectorSalary');
		const recapUnemploymentRights = document.getElementById('recapUnemploymentRights');

		// Salary recap
		const recapSalary = document.getElementById('recapSalary');

		// Projet recap
		const recapAdditionalInformations = document.getElementById('recapAdditionalInformations');

		// Mettre à jour les éléments recap avec les valeurs du formulaire
		recapBusinessStructure.textContent = businessStructure;
		recapSocietyName.textContent = societyName;
		recapSocietyAddress.textContent = societyAddress;
		recapSocietyZipCode.textContent = societyZipCode;
		recapActivity.textContent = activitySector;
		recapStartActivityAt.textContent = startActivityDate;
		recapFiscalYearEndAt.textContent = fiscalYearEndDate;
		recapTaxRegime.textContent = taxRegime;
		recapTva.textContent = tva;
		recapCompanyCapital.textContent = companyCapital;

		// Mettre à jour les éléments recap pour la section Chiffres
		recapInvestmentAmount.textContent = investmentAmount + " €";
		recapPersonalContribution.textContent = personalContribution + " €";
		recapLoanRequested.textContent = loanRequested;
		recapLoanRateRequested.textContent = loanRateRequested + " %";
		recapCaEstimated.textContent = caEstimated + " €";
		recapMarginRate.textContent = marginRate + " %";

		// Mettre à jour la section des charges
		recapCharges.innerHTML = ""; // Vider le contenu précédent
		chargesArray.forEach(p => {
			recapCharges.appendChild(p);
		});

		// Mettre à jour la section des collaborateurs
		recapEmployees.textContent = employees;
		recapEmployeesNumber.textContent = employeesNumber;
		recapApprenticesNumber.textContent = apprenticesNumber;
		recapNetDirectorSalary.textContent = netDirectorSalary;
		recapUnemploymentRights.textContent = unemploymentRights;
		// Mettre à jour la section des salaires
		recapSalary.innerHTML = ""; // Vider le contenu précédent
		salaryArray.forEach(p => {
			recapSalary.appendChild(p);
		});



		// Mettre à jour la section du projet
		recapAdditionalInformations.textContent = additionalInformations;
	}


	nextButtons.forEach(button => {
		button.addEventListener('click', function () {
			if (validateCurrentStep()) {
				let currentIndex = getCurrentTabIndex();
				if (currentIndex < formTabs.length - 1) {
					changeTab(currentIndex + 1);
				}
			}
			scrollToForm();
		});
	});

	prevButtons.forEach(button => {
		button.addEventListener('click', function () {
			let currentIndex = getCurrentTabIndex();
			if (currentIndex > 0) {
				changeTab(currentIndex - 1);
			}
			scrollToForm();
		});
	});

	form.addEventListener("input", function (event) {
		let input = event.target;
		if (input.classList.contains("is-invalid")) {
			validateField(input);
		}
	});
});