{{ $form := .Page.Params.contactForm }}
{{ $contactFormUrl := (getenv "CONTACT_FORM_URL") | default "https://facteur-cl.sobrietech.be/contact.php"  }}

<form id="contactForm" class="max-w-lg mx-auto p-6 bg-white rounded shadow" method="POST"
	action={{ $contactFormUrl }} target="_blank">
	<h3 class="text-2xl font-bold mb-4">{{ $form.title }}</h3>
	{{ range $form.fields }}
	<div class="mb-4">
		{{ if eq .type "textarea" }}
		<label for="{{ .name }}">{{ .label }}</label>
		<textarea id="{{ .name }}" name="{{ .name }}" rows="5" {{ if .required }}required{{ end }}
			class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300"></textarea>
		{{ else if eq .type "select" }}
		<select id="{{ .name }}" name="{{ .name }}" {{ if .required }}required{{ end }}
			class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300">
			{{ range .options }}
			<option value="{{ .value }}">{{ .label | default .value }}</option>
			{{ end }}
		</select>
		{{ else }}
		<input type="{{ .type }}" placeholder="{{.label}}" id="{{ .name }}" name="{{ .name }}" {{ if .required }}required{{
			end }} class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300" />
		{{ end }}
	</div>
	{{ end }}
	<!-- Champ honeypot invisible pour les robots -->
	<div style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">
		<label for="website">Ne pas remplir ce champ</label>
		<input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
	</div>
	<div class=" text-md text-gray-500 mt-1 prose prose-sm">
		{{ $form.hint | markdownify | safeHTML }}
	</div>
	<div class="flex justify-end mt-4">
		<button type="submit"
			class="px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 text-primary-400 border-primary-400 hover:border-primary-400 hover:text-primary-400 hover:scale-105">
			{{ $form.button.label | default "Envoyer" }}
		</button>
	</div>
	<div id="contact-result" class="mt-4" aria-live="polite"></div>
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const form = document.getElementById('contactForm');
			const resultDiv = document.getElementById('contact-result');
			if (!form) {
				return;
			}

			function showResult(message, isSuccess) {
				if (!resultDiv) {
					return;
				}
				const bg = isSuccess ? '#e6ffed' : '#ffe6e6';
				const color = isSuccess ? '#228B22' : '#b22222';
				resultDiv.innerHTML = "<div style='background:" + bg + ";color:" + color + ";padding:1em;border-radius:6px;border:1px solid " + color + ";'></div>";
				resultDiv.firstElementChild.textContent = message;
			}
			// Pré-sélectionner le champ "sujet" si paramètre dans l'URL
			const urlParams = new URLSearchParams(window.location.search);
			const subject = urlParams.get('subject');
			if (subject) {
				const select = document.getElementById('subject');
				if (select) {
					select.value = subject;
				}
			}
			form.addEventListener('submit', function (e) {
				e.preventDefault();
				if (resultDiv) {
					resultDiv.innerHTML = '';
				}
				const formData = new FormData(form);
				fetch(form.action, {
					method: 'POST',
					body: formData
				})
					.then(async response => {
						const text = await response.text();
						if (response.status === 200) {
							showResult(text, true);
							form.reset();
						} else {
							showResult(text, false);
						}
					})
					.catch(() => {
						showResult('Erreur réseau, veuillez ré-essayer.', false);
					});
			});
		});
	</script>
</form>

{{ partial "shortcodes/contact-developer.html" (dict "developers" $form.developers) }}