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

{% block title %}{{ 'signup.title'|trans }}{% endblock %}

{% block body %}
<main id="contenu">
  <div class="signup-wrap">

    <img src="/Logo.png" alt="Logo n-atypik" class="logo-central">

    <h1 class="signup-title">{{ 'signup.page_title'|trans }}</h1>

    <p class="signup-intro">
      {{ 'signup.intro'|trans }}
      {{ 'signup.confirmation'|trans }}
    </p>

    {# Messages Symfony #}
    {% for message in app.flashes('success') %}
      <div class="alert alert-success">{{ message }}</div>
    {% endfor %}
    {% for message in app.flashes('error') %}
      <div class="alert alert-error">{{ message }}</div>
    {% endfor %}

    <form action="{{ path('app_inscription_submit', {'_locale': app.request.locale}) }}" method="post" enctype="multipart/form-data" novalidate>
      <!-- Honeypot anti-spam -->
      <div class="hp-field" aria-hidden="true">
        <label>{{ 'form.do_not_fill'|trans }}</label>
        <input type="text" name="website" autocomplete="off" tabindex="-1">
      </div>

      <!-- 1) Identité -->
      <div class="card">
        <h2>{{ 'signup.section_identity'|trans }}</h2>

        <div class="grid-2">
          <div class="form-group">
            <label for="prenom">{{ 'form.first_name'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <input id="prenom" name="prenom" type="text" required autocomplete="given-name">
          </div>

          <div class="form-group">
            <label for="nom">{{ 'form.last_name'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <input id="nom" name="nom" type="text" required autocomplete="family-name">
          </div>
        </div>

        <div class="grid-2">
          <div class="form-group">
            <label for="pseudo">{{ 'signup.pseudo'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <input id="pseudo" name="pseudo" type="text" required maxlength="40" autocomplete="nickname" placeholder="Ex : NaAlexis76">
            <small class="help-text">{{ 'signup.pseudo_help'|trans }}</small>
          </div>

          <div class="form-group">
            <label class="checkbox-label">
              <input id="anonyme" name="anonyme" type="checkbox" value="1">
              <span>{{ 'signup.anonymous'|trans }}</span>
            </label>
          </div>
        </div>

        <div class="dob-grid">
          <div class="form-group">
            <label for="dob_day">{{ 'signup.birth_day'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="dob_day" name="dob_day" required>
              <option value="">{{ 'signup.birth_day'|trans }}</option>
              {% for d in 1..31 %}
                <option value="{{ d }}">{{ d }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="form-group">
            <label for="dob_month">{{ 'signup.birth_month'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="dob_month" name="dob_month" required>
              <option value="">{{ 'signup.birth_month'|trans }}</option>
              <option value="1">{{ 'months.january'|trans }}</option>
              <option value="2">{{ 'months.february'|trans }}</option>
              <option value="3">{{ 'months.march'|trans }}</option>
              <option value="4">{{ 'months.april'|trans }}</option>
              <option value="5">{{ 'months.may'|trans }}</option>
              <option value="6">{{ 'months.june'|trans }}</option>
              <option value="7">{{ 'months.july'|trans }}</option>
              <option value="8">{{ 'months.august'|trans }}</option>
              <option value="9">{{ 'months.september'|trans }}</option>
              <option value="10">{{ 'months.october'|trans }}</option>
              <option value="11">{{ 'months.november'|trans }}</option>
              <option value="12">{{ 'months.december'|trans }}</option>
            </select>
          </div>

          <div class="form-group">
            <label for="dob_year">{{ 'signup.birth_year'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="dob_year" name="dob_year" required>
              <option value="">{{ 'signup.birth_year'|trans }}</option>
              {% set yearMax = "now"|date("Y") %}
              {% set yearMin = yearMax - 100 %}
              {% for y in yearMax..yearMin %}
                <option value="{{ y }}">{{ y }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="grid-2">
          <div class="form-group">
            <label for="tel">{{ 'signup.phone'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <input id="tel" name="tel" type="tel" required autocomplete="tel" placeholder="+33…">
          </div>

          <div class="form-group">
            <label for="email">{{ 'form.email'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <input id="email" name="email" type="email" required autocomplete="email" placeholder="nom@domaine.fr">
          </div>
        </div>

        <div class="grid-2">
          <div class="form-group">
            <label>{{ 'signup.profile_image'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <div class="radios" role="radiogroup">
              <label class="radio-pill">
                <input type="radio" name="pic_mode" value="upload" checked>
                {{ 'signup.upload_photo'|trans }}
              </label>
              <label class="radio-pill">
                <input type="radio" name="pic_mode" value="avatar">
                {{ 'signup.choose_avatar'|trans }}
              </label>
            </div>
          </div>

          <div class="form-group" id="picUploadWrap">
            <label for="photo">{{ 'signup.photo'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <input id="photo" name="photo" type="file" accept=".jpg,.jpeg,.png" required>
          </div>

          <div class="form-group" id="picAvatarWrap" style="display:none;">
            <label for="avatar">{{ 'signup.avatar'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="avatar" name="avatar">
              <option value="">{{ 'signup.choose'|trans }}</option>
              {% for i in 1..8 %}
                <option value="avatar-0{{ i }}">Avatar 0{{ i }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>

      <!-- 2) Adresse -->
      <div class="card">
        <h2>{{ 'signup.section_address'|trans }}</h2>

        <div class="grid-2">
          <div class="form-group">
            <label for="adresse1">{{ 'signup.address_1'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <input id="adresse1" name="adresse1" type="text" required autocomplete="address-line1">
          </div>

          <div class="form-group">
            <label for="adresse2">{{ 'signup.address_2'|trans }}</label>
            <input id="adresse2" name="adresse2" type="text" autocomplete="address-line2">
          </div>
        </div>

        <div class="grid-3">
          <div class="form-group">
            <label for="cp">{{ 'signup.postal_code'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <input id="cp" name="cp" type="text" required autocomplete="postal-code">
          </div>

          <div class="form-group">
            <label for="ville">{{ 'signup.city'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <input id="ville" name="ville" type="text" required autocomplete="address-level2">
          </div>

          <div class="form-group">
            <label for="pays">{{ 'signup.country'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <input id="pays" name="pays" type="text" required autocomplete="country-name" value="France">
          </div>
        </div>

        <div class="form-group">
          <label class="checkbox-label">
            <input id="geo_ok" name="geo_ok" type="checkbox" value="1">
            <span>{{ 'signup.accept_geolocation'|trans }}</span>
          </label>
        </div>
      </div>

      <!-- 3) NOUVEAU : Profil neuro-atypique -->
      <div class="card">
        <h2>{{ 'signup.section_neuro'|trans }}</h2>

        <div class="form-group">
          <label for="neuro_diagnosed">{{ 'signup.neuro_diagnosed'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
          <select id="neuro_diagnosed" name="neuro_diagnosed" required>
            <option value="">{{ 'signup.choose'|trans }}</option>
            <option value="yes">{{ 'signup.neuro_yes'|trans }}</option>
            <option value="no">{{ 'signup.neuro_no'|trans }}</option>
            <option value="in_progress">{{ 'signup.neuro_in_progress'|trans }}</option>
            <option value="not_sure">{{ 'signup.neuro_not_sure'|trans }}</option>
          </select>
        </div>

        <div class="form-group" id="neuroTypesWrap" style="display:none;">
          <label>{{ 'signup.neuro_types'|trans }}</label>
          <div class="checkboxes-group">
            <label class="checkbox-label">
              <input type="checkbox" name="neuro_types[]" value="autism">
              <span>{{ 'signup.neuro_autism'|trans }}</span>
            </label>
            <label class="checkbox-label">
              <input type="checkbox" name="neuro_types[]" value="adhd">
              <span>{{ 'signup.neuro_adhd'|trans }}</span>
            </label>
            <label class="checkbox-label">
              <input type="checkbox" name="neuro_types[]" value="dys">
              <span>{{ 'signup.neuro_dys'|trans }}</span>
            </label>
            <label class="checkbox-label">
              <input type="checkbox" name="neuro_types[]" value="hp">
              <span>{{ 'signup.neuro_hp'|trans }}</span>
            </label>
            <label class="checkbox-label">
              <input type="checkbox" name="neuro_types[]" value="tourette">
              <span>{{ 'signup.neuro_tourette'|trans }}</span>
            </label>
            <label class="checkbox-label">
              <input type="checkbox" name="neuro_types[]" value="other">
              <span>{{ 'signup.neuro_other'|trans }}</span>
            </label>
          </div>
        </div>

        <div class="form-group">
          <label for="moderator_interest">{{ 'signup.moderator_interest'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
          <select id="moderator_interest" name="moderator_interest" required>
            <option value="">{{ 'signup.choose'|trans }}</option>
            <option value="yes">{{ 'signup.moderator_yes'|trans }}</option>
            <option value="maybe">{{ 'signup.moderator_maybe'|trans }}</option>
            <option value="no">{{ 'signup.moderator_no'|trans }}</option>
          </select>
          <small class="help-text">{{ 'signup.moderator_help'|trans }}</small>
        </div>
      </div>

      <!-- 4) Préférences d'affichage -->
      <div class="card">
        <h2>{{ 'signup.section_preferences'|trans }}</h2>

        <div class="grid-2">
          <div class="form-group">
            <label for="pref_theme">{{ 'signup.theme'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="pref_theme" name="pref_theme" required>
              <option value="light">{{ 'signup.theme_light'|trans }}</option>
              <option value="dark">{{ 'signup.theme_dark'|trans }}</option>
              <option value="auto" selected>{{ 'signup.theme_auto'|trans }}</option>
            </select>
          </div>

          <div class="form-group">
            <label for="pref_font">{{ 'signup.font_size'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="pref_font" name="pref_font" required>
              <option value="normal" selected>{{ 'signup.font_normal'|trans }}</option>
              <option value="large">{{ 'signup.font_large'|trans }}</option>
              <option value="xlarge">{{ 'signup.font_xlarge'|trans }}</option>
            </select>
          </div>
        </div>

        <div class="grid-2">
          <div class="form-group">
            <label for="pref_density">{{ 'signup.density'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="pref_density" name="pref_density" required>
              <option value="confort">{{ 'signup.density_comfort'|trans }}</option>
              <option value="standard" selected>{{ 'signup.density_standard'|trans }}</option>
              <option value="compact">{{ 'signup.density_compact'|trans }}</option>
            </select>
          </div>

          <div class="form-group">
            <label for="pref_access">{{ 'signup.accessibility'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="pref_access" name="pref_access" required>
              <option value="standard" selected>{{ 'signup.accessibility_standard'|trans }}</option>
              <option value="dys">{{ 'signup.accessibility_dys'|trans }}</option>
              <option value="malvoyants">{{ 'signup.accessibility_low_vision'|trans }}</option>
              <option value="daltoniens">{{ 'signup.accessibility_colorblind'|trans }}</option>
            </select>
          </div>
        </div>

        <div class="grid-2">
          <div class="form-group">
            <label for="pref_contrast">{{ 'signup.contrast'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="pref_contrast" name="pref_contrast" required>
              <option value="normal" selected>{{ 'signup.contrast_normal'|trans }}</option>
              <option value="high">{{ 'signup.contrast_high'|trans }}</option>
            </select>
          </div>

          <div class="form-group">
            <label for="pref_lang">{{ 'signup.language'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="pref_lang" name="pref_lang" required>
              <option value="fr" {{ app.request.locale == 'fr' ? 'selected' : '' }}>{{ 'signup.language_fr'|trans }}</option>
              <option value="en" {{ app.request.locale == 'en' ? 'selected' : '' }}>{{ 'signup.language_en'|trans }}</option>
            </select>
          </div>
        </div>
      </div>

      <!-- 5) Notifications -->
      <div class="card">
        <h2>{{ 'signup.section_notifications'|trans }}</h2>

        <div class="grid-2">
          <div class="form-group">
            <label for="notif_email">{{ 'signup.email_notif'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="notif_email" name="notif_email" required>
              <option value="important" selected>{{ 'signup.email_important'|trans }}</option>
              <option value="all">{{ 'signup.email_all'|trans }}</option>
              <option value="none">{{ 'signup.email_none'|trans }}</option>
            </select>
          </div>

          <div class="form-group">
            <label for="notif_messages">{{ 'signup.new_messages'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="notif_messages" name="notif_messages" required>
              <option value="badge" selected>{{ 'signup.notif_badge'|trans }}</option>
              <option value="dot">{{ 'signup.notif_dot'|trans }}</option>
              <option value="none">{{ 'signup.notif_none'|trans }}</option>
            </select>
          </div>
        </div>

        <div class="grid-2">
          <div class="form-group">
            <label for="notif_mentions">{{ 'signup.mentions'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="notif_mentions" name="notif_mentions" required>
              <option value="all" selected>{{ 'signup.mentions_all'|trans }}</option>
              <option value="none">{{ 'signup.mentions_none'|trans }}</option>
            </select>
          </div>

          <div class="form-group">
            <label for="notif_invitations">{{ 'signup.invitations'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="notif_invitations" name="notif_invitations" required>
              <option value="all" selected>{{ 'signup.mentions_all'|trans }}</option>
              <option value="none">{{ 'signup.mentions_none'|trans }}</option>
            </select>
          </div>
        </div>

        <div class="grid-2">
          <div class="form-group">
            <label for="notif_digest">{{ 'signup.weekly_digest'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="notif_digest" name="notif_digest" required>
              <option value="yes" selected>{{ 'signup.weekly_yes'|trans }}</option>
              <option value="no">{{ 'signup.weekly_no'|trans }}</option>
            </select>
          </div>

          <div class="form-group">
            <label for="notif_news">{{ 'signup.news'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
            <select id="notif_news" name="notif_news" required>
              <option value="yes" selected>{{ 'signup.weekly_yes'|trans }}</option>
              <option value="no">{{ 'signup.weekly_no'|trans }}</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="notif_push">{{ 'signup.push_notif'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
          <select id="notif_push" name="notif_push" required>
            <option value="yes">{{ 'signup.weekly_yes'|trans }}</option>
            <option value="no" selected>{{ 'signup.weekly_no'|trans }}</option>
          </select>
        </div>
      </div>

      <!-- 6) Publicité (sondage) -->
      <div class="card">
        <h2>{{ 'signup.section_advertising'|trans }}</h2>
        <div class="form-group">
          <label for="accept_pub">{{ 'signup.advertising_question'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></label>
          <select id="accept_pub" name="accept_pub" required>
            <option value="">{{ 'signup.choose'|trans }}</option>
            <option value="oui">{{ 'signup.advertising_yes'|trans }}</option>
            <option value="non">{{ 'signup.advertising_no'|trans }}</option>
            <option value="peu">{{ 'signup.advertising_little'|trans }}</option>
          </select>
          <small class="help-text">{{ 'signup.advertising_help'|trans }}</small>
        </div>
      </div>

      <!-- 7) Consentements -->
      <div class="card">
        <h2>{{ 'signup.section_consent'|trans }}</h2>

        <div class="consent-checkboxes">
          <label class="checkbox-label">
            <input id="cgu" name="cgu" type="checkbox" value="1" required>
            <span>{{ 'signup.accept_cgu'|trans }} <a href="{{ path('app_cgu', {'_locale': app.request.locale}) }}" target="_blank">{{ 'footer.cgu'|trans }}</a> <span class="req">{{ 'form.required_mark'|trans }}</span></span>
          </label>

          <label class="checkbox-label">
            <input id="conf" name="conf" type="checkbox" value="1" required>
            <span>{{ 'signup.read_privacy'|trans }} <a href="{{ path('app_confidentialite', {'_locale': app.request.locale}) }}" target="_blank">{{ 'signup.privacy_policy'|trans }}</a> (RGPD) <span class="req">{{ 'form.required_mark'|trans }}</span></span>
          </label>

          <label class="checkbox-label">
            <input id="charte" name="charte" type="checkbox" value="1" required>
            <span>{{ 'signup.accept_charter'|trans }} <a href="{{ path('app_charte', {'_locale': app.request.locale}) }}" target="_blank">{{ 'footer.charter'|trans }}</a> <span class="req">{{ 'form.required_mark'|trans }}</span></span>
          </label>

          <label class="checkbox-label">
            <input id="verif" name="verif" type="checkbox" value="1" required>
            <span>{{ 'signup.understand_verification'|trans }} <a href="{{ path('app_verification_identite', {'_locale': app.request.locale}) }}" target="_blank">{{ 'signup.verification_link'|trans }}</a> - {{ 'signup.confirm_adult'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></span>
          </label>

          <label class="checkbox-label">
            <input id="consent_mail" name="consent_mail" type="checkbox" value="1" required>
            <span>{{ 'signup.accept_contact'|trans }} <span class="req">{{ 'form.required_mark'|trans }}</span></span>
          </label>
        </div>

        <p class="form-note">
          <span class="req">{{ 'form.required_mark'|trans }}</span> {{ 'form.required'|trans }}
        </p>
      </div>

      <div class="actions">
        <button type="submit">{{ 'signup.submit'|trans }}</button>
        <a class="btn-secondary" href="{{ path('app_home', {'_locale': app.request.locale}) }}">{{ 'signup.back_home'|trans }}</a>
      </div>
    </form>
  </div>
</main>

<script>
(function () {
  // Profile picture mode toggle
  const radios = document.querySelectorAll('input[name="pic_mode"]');
  const uploadWrap = document.getElementById('picUploadWrap');
  const avatarWrap = document.getElementById('picAvatarWrap');
  const photoInput = document.getElementById('photo');
  const avatarSelect = document.getElementById('avatar');

  function refreshPicMode() {
    const mode = document.querySelector('input[name="pic_mode"]:checked')?.value || 'upload';
    if (mode === 'avatar') {
      if (uploadWrap) uploadWrap.style.display = 'none';
      if (avatarWrap) avatarWrap.style.display = '';
      if (photoInput) photoInput.required = false;
      if (avatarSelect) avatarSelect.required = true;
    } else {
      if (uploadWrap) uploadWrap.style.display = '';
      if (avatarWrap) avatarWrap.style.display = 'none';
      if (photoInput) photoInput.required = true;
      if (avatarSelect) avatarSelect.required = false;
    }
  }
  radios.forEach(r => r.addEventListener('change', refreshPicMode));
  refreshPicMode();

  // Show neuro types only if diagnosed
  const neuroDiagnosed = document.getElementById('neuro_diagnosed');
  const neuroTypesWrap = document.getElementById('neuroTypesWrap');
  
  if (neuroDiagnosed && neuroTypesWrap) {
    neuroDiagnosed.addEventListener('change', function() {
      if (this.value === 'yes') {
        neuroTypesWrap.style.display = '';
      } else {
        neuroTypesWrap.style.display = 'none';
        // Uncheck all neuro types if not diagnosed
        document.querySelectorAll('input[name="neuro_types[]"]').forEach(cb => cb.checked = false);
      }
    });
  }
})();
</script>
{% endblock %}