{extends file="views/layout.tpl"}
{block name="title" append} - Inscription{/block}

{block name="display" }style="display:none;"{/block}
{block name="content"}
<!-- Page : Inscription -->
<div class="py-5">

	<!-- Centrage horizontal du formulaire -->
	<div class="row justify-content-center">
		<div class="col-12 col-md-10 col-lg-6">

			<!-- Carte contenant le formulaire d'inscription -->
			<div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">

				<!-- Titre principal de la page -->
				<h1 class="h3 fw-bold mb-1">Inscription</h1>

				<!-- Texte descriptif -->
				<p class="text-secondary mb-4">
					Créez votre compte utilisateur.
				</p>

				<!-- Formulaire d'inscription -->
				<!-- Les données seront traitées côté serveur en PHP via la méthode POST -->
				<form method="POST">
					<div class="row g-3">

						<!-- Champ : prénom de l'utilisateur -->
						<div class="col-md-6">
							<label class="form-label" for="user_firstname">
								Prénom *
							</label>
							<input
								class="form-control"
								type="text"
								id="user_firstname"
								name="user_firstname"
								value="{$objUser->getFirstname()|default:''}"
								required
							>
						</div>

						<!-- Champ : nom de l'utilisateur -->
						<div class="col-md-6">
							<label class="form-label" for="user_name">
								Nom *
							</label>
							<input
								class="form-control"
								type="text"
								id="user_name"
								name="user_name"
								value="{$objUser->getName()|default:''}"
								required
							>
						</div>

						<!-- Champ : pseudo -->
						<div class="col-12">
							<label class="form-label" for="user_pseudo">
								Pseudo *
							</label>
							<div class="input-group">
								<span class="input-group-text">@</span>
								<input
									class="form-control"
									type="text"
									id="user_pseudo"
									name="user_pseudo"
									value="{$objUser->getPseudo()|default:''}"
									required
								>
							</div>
						</div>

						<!-- Champ : adresse e-mail -->
						<div class="col-12">
							<label class="form-label" for="user_mail">
								Adresse e-mail *
							</label>
							<input
								class="form-control"
								type="email"
								id="user_mail"
								name="user_mail"
								value="{$objUser->getMail()|default:''}"
								required
							>
						</div>

						<!-- Champ : mot de passe -->
						<div class="col-12">
							<label class="form-label" for="user_password">
								Mot de passe *
							</label>
							<div class="position-relative">
    						    <input
    						        class="form-control pe-5" 
    						        type="password"
    						        id="user_password"
    						        name="user_password"
    						        required
    						    >
    						    <button
    						        class="btn position-absolute top-50 end-0 translate-middle-y me-2 p-0 border-0 bg-transparent text-muted"
    						        type="button"
    						        onclick="togglePassword('user_password', this)"
    						        style="z-index: 10;"
    						    >
    						        <i class="fa-solid fa-eye"></i>
    						    </button>
    						</div>
							<div class="mt-2 small text-muted">
                            <p class="mb-1">Le mot de passe doit contenir :</p>
                            <ul class="mb-0 ps-3">
                                <li>Au moins <strong>15 caractères</strong></li>
                                <li>Au moins <strong>une lettre majuscule</strong></li>
                                <li>Au moins <strong>une lettre minuscule</strong></li>
                                <li>Au moins <strong>un chiffre</strong></li>
                                <li>Au moins <strong>un caractère spécial</strong> (# ? ! @ $ % ^ & * -)</li>
                            </ul>
                        </div>
						</div>

						<!-- Champ : confirmer le mot de passe -->
						<div class="col-12">
							<label class="form-label" for="pwd_confirm">
								Confirmer le mot de passe *
							</label>
							<div class="position-relative">
							<input
								class="form-control"
								type="password"
								id="pwd_confirm"
								name="pwd_confirm"
								required
							><button
    						        class="btn position-absolute top-50 end-0 translate-middle-y me-2 p-0 border-0 bg-transparent text-muted"
    						        type="button"
    						        onclick="togglePassword('pwd_confirm', this)"
    						        style="z-index: 10;"
    						    >
    						        <i class="fa-solid fa-eye"></i>
    						    </button>
    						</div>
						</div>

						<!-- Champ optionnel : numéro de téléphone -->
						<div class="col-12">
							<label class="form-label" for="user_phone">
								Téléphone
							</label>
							<input
								class="form-control"
								type="text"
								id="user_phone"
								name="user_phone"
								value="{$objUser->getPhone()|default:''}"
							>
						</div>

						<!-- Champ optionnel : profession de l'utilisateur -->
						<div class="col-12">
							<label class="form-label" for="user_work">
								Profession
							</label>
							<input
								class="form-control"
								type="text"
								id="user_work"
								name="user_work"
								value="{$objUser->getWork()|default:''}"
							>
						</div>

						<!-- Champ optionnel : localisation de l'utilisateur -->
						<div class="col-12">
							<label class="form-label" for="user_location">
								Localisation
							</label>
							<div class="position-relative">
								<input
									class="form-control"
									type="text"
									id="user_location"
									name="user_location"
									value="{$objUser->getLocation()|default:''}"
									autocomplete="off"
									placeholder="Ex : Paris, Lyon..."
								>
								<!-- Liste déroulante des suggestions -->
								<ul
									id="location-suggestions"
									class="list-group position-absolute w-100 shadow-sm"
									style="z-index: 1000; display: none; max-height: 220px; overflow-y: auto; top: 100%; left: 0;"
								></ul>
							</div>
						</div>

						<!-- Champ optionnel : phrase d'accroche -->
						<div class="col-12">
							<label class="form-label" for="user_description">
								Phrase d'accroche
							</label>
							<textarea
								class="form-control"
								id="user_description"
								name="user_description"
								rows="3"
							>{$objUser->getDescription()|default:''}</textarea>
						</div>

						<!-- Bouton de soumission du formulaire -->
						<div class="col-12 d-grid mt-2">
							<button type="submit" class="btn btn-primary btn-lg rounded-3">
								Créer mon compte
							</button>
						</div>

						<!-- Lien vers la page de connexion -->
						<div class="col-12 text-center">
							<small class="text-secondary">
								Déjà un compte ?
								<a class="link-primary" href="{$smarty.env.BASE_URL}/user/login">
									Se connecter
								</a>
							</small>
						</div>

					</div>
				</form>

			</div>

		</div>
	</div>

</div>
<script>
    const pwd = document.getElementById('user_password');

    const rules = {
        length:  { el: null, test: v => v.length >= 15 },
        upper:   { el: null, test: v => /[A-Z]/.test(v) },
        lower:   { el: null, test: v => /[a-z]/.test(v) },
        digit:   { el: null, test: v => /[0-9]/.test(v) },
        special: { el: null, test: v => /[#?!@$%^&*\-]/.test(v) }
    };

    // Associe chaque règle à son <li> dans l'ordre du DOM
    const items = pwd.closest('.col-12').querySelectorAll('ul li');
    const keys = Object.keys(rules);
    items.forEach((li, i) => rules[keys[i]].el = li);

    pwd.addEventListener('input', () => {
        const v = pwd.value;
        keys.forEach(key => {
            const { el, test } = rules[key];
            el.classList.toggle('text-success', test(v));
            el.classList.toggle('text-danger',   !test(v));
        });
    });

	function togglePassword(fieldId, btn) {
	    const input = document.getElementById(fieldId);
	    const icon = btn.querySelector('svg');
	    if (input.type === 'password') {
	        input.type = 'text';
	        icon.classList.replace('fa-eye', 'fa-eye-slash');
	    } else {
	        input.type = 'password';
	        icon.classList.replace('fa-eye-slash', 'fa-eye');
	    }
	}
</script>
{include file="views/_partial/apigeo.tpl"}
{/block}