<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="https://unpkg.com/htmx.org@1.9.11"></script>
    <meta charset="UTF-8">
    <title>AS Talange - Formulaire d'inscription</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style> body { font-family: 'Inter', sans-serif; } </style>
</head>
<body class="bg-gray-50 flex items-center justify-center min-h-screen py-12">
    <div class="max-w-xl w-full bg-white rounded-xl shadow-md p-8 border border-gray-100">
        <img src="/images/logo.png" alt="AS Talange" class="h-24 w-auto mx-auto mb-4 object-contain drop-shadow-sm" onerror="this.style.display='none'">
        <h2 class="text-2xl font-bold text-gray-900 mb-2 text-center">Formulaire de pré-inscription</h2>
        <p class="text-sm text-gray-500 mb-8 text-center">Veuillez remplir les informations concernant le futur licencié.</p>
        
        <form th:action="@{/inscription-public/formulaire}" th:object="${preInscription}" method="post" class="space-y-6">
            <input type="hidden" name="token" th:value="${tokenUuid}" />

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nom <span class="text-red-500">*</span></label>
                    <input type="text" th:field="*{nom}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none uppercase">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Prénom <span class="text-red-500">*</span></label>
                    <input type="text" th:field="*{prenom}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none capitalize">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Date de naissance <span class="text-red-500">*</span></label>
                    <input type="date" id="dateNaissance" th:field="*{dateNaissance}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Ville de naissance <span class="text-red-500">*</span></label>
                    <input type="text" th:field="*{lieuNaissanceVille}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Pays de naissance <span class="text-red-500">*</span></label>
                    <input type="text" th:field="*{lieuNaissancePays}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nationalité <span class="text-red-500">*</span></label>
                    <input type="text" th:field="*{nationalite}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                </div>
            </div>

            <div id="representantBlock" class="hidden bg-blue-50 p-4 rounded-lg border border-blue-100">
                <label class="block text-sm font-medium text-blue-800 mb-1">Représentant légal <span class="text-red-500">*</span></label>
                <p class="text-xs text-blue-600 mb-2">Obligatoire pour les mineurs.</p>
                <input type="text" id="representantLegal" th:field="*{representantLegal}" placeholder="Nom et Prénom du parent" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-500">*</span></label>
                <input type="email" th:field="*{email}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
            </div>

            <div class="flex items-start pt-2">
                <div class="flex items-center h-5">
                    <input id="consentementRgpd" name="consentementRgpd" type="checkbox" required class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                </div>
                <div class="ml-3 text-sm">
                    <label for="consentementRgpd" class="font-medium text-gray-700">Consentement RGPD <span class="text-red-500">*</span></label>
                    <p class="text-gray-500 text-xs mt-1">J'accepte que l'AS Talange recueille et traite ces données pour la gestion de mon inscription et la logistique de la saison.</p>
                </div>
            </div>

            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors mt-4">
                Soumettre le dossier
            </button>
            
            <p class="text-[10px] text-gray-400 text-center mt-4 leading-tight">
                Les données sont stockées de manière sécurisée, accessibles uniquement au bureau du club. Vous pouvez demander leur suppression à tout moment.
            </p>
        </form>
    </div>

    <script>
        document.getElementById('dateNaissance').addEventListener('change', function() {
            const dateInput = this.value;
            const repBlock = document.getElementById('representantBlock');
            const repInput = document.getElementById('representantLegal');
            
            if (dateInput) {
                const dob = new Date(dateInput);
                const ageDifMs = Date.now() - dob.getTime();
                const ageDate = new Date(ageDifMs);
                const age = Math.abs(ageDate.getUTCFullYear() - 1970);
                
                if (age < 18) {
                    repBlock.classList.remove('hidden');
                    repInput.required = true;
                } else {
                    repBlock.classList.add('hidden');
                    repInput.required = false;
                }
            }
        });
    </script>
</body>
</html>
