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

{% block title %} {{ 'information.title'|trans }} {% endblock %}
{% block description %}  {% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/css/intlTelInput.css"/>
{% endblock %}


{% block body %}
{% include "front/inc/breadcrumb.html.twig" with 
        {
          'current_page' : 'information.title'|trans,
          'content_title': 'compte.title'|trans,
          'content_lien' : path('app_account',{'_locale':app.request.locale}),
          'image'        : ''
        } 
    %}
   
<div class="inscription_compte mes_informations">
      <div class="container">
        <div class="form-container">
          <h1 class="form-title">{{ 'information.title'|trans }}</h1>
          <div class="msg_error"></div>
          <form method="POST" action="{{ path('app_update_user') }}" id="update-information">
            <div class="from-group"> <p class="title">{{ 'information.identifiants'|trans }}</p> </div>
              <div class="form-row">
             <div class="form-group">
                <input type="email" value="{{app.user.reservants.email}}" {{ app.user.reservants.email ? 'readonly' : '' }} id="email" name="email" placeholder="{{ 'information.email'|trans }}" class="input-field">
              </div>
              <div class="form-group">
                <div class="password-input-container">
                  <input type="password" id="password" placeholder="{{ 'information.password'|trans }}" class="input-field">
                  <button type="button" id="toggle-password" class="toggle-password" onclick="togglePasswordVisibility()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="eye">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="eye-off hidden">
                      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                      <line x1="1" y1="1" x2="23" y2="23"></line>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <hr>
            <div class="from-group"> <p class="title">{{ 'information.personal_info'|trans }}</p> </div>
            <div class="form-group form-labelciv">
              <label for="civilite" class="required">{{ 'information.civility'|trans }}</label>
              <div class="radio-group">
                <label class="radio-label">
                  <input type="radio" {{ (app.user.reservants.civilite == 'mr') ? 'checked' : '' }} name="civilite" value="mr">
                  <span>{{ 'information.mr'|trans }}</span>
                </label>
                <label class="radio-label">
                  <input {{ (app.user.reservants.civilite == 'Mme') ? 'checked' : '' }} type="radio" name="civilite" value="mme">
                  <span>{{ 'information.mme'|trans }}</span>
                </label>
                <label class="radio-label">
                  <input {{ (app.user.reservants.civilite == 'Mlle') ? 'checked' : '' }} type="radio" name="civilite" value="mlle">
                  <span>{{ 'information.mlle'|trans }}</span>
                </label>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <input type="text" value="{{app.user.reservants.nom }}" id="nom" name="nom" placeholder="{{ 'information.lastname'|trans }}" class="input-field">
              </div>
              <div class="form-group">
                <input type="text" value="{{app.user.reservants.prenom }}" id="prenom" name="prenom" placeholder="{{ 'information.firstname'|trans }}" class="input-field">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <div class="phone-input-container">
                  <input id="phone" type="tel" {{ app.user.reservants.telephone ? 'readonly' : ''}} value="{{ app.user.reservants.telephone starts with '+' ? app.user.reservants.telephone : '+' ~ app.user.reservants.telephone }}" class="phone-input input-field"/>
                  <input type="hidden" id="phone_full" {{ app.user.reservants.telephone ? 'readonly' : ''}} value="{{ app.user.reservants.telephone starts with '+' ? app.user.reservants.telephone : '+' ~ app.user.reservants.telephone }}" name="telephone">
                  <input type="hidden" id="country_code" name="country_code">
                </div>
              </div>
              <div class="form-group">
                <div class="select-container">
                  <select name="country" class="input-field">
                      {% if pays|length > 0 %}
                        {% for pays in pays %}
                          <option {{ (app.user.reservants.pays.id == pays.id ) ? 'selected' : '' }} value="{{ pays.id }}">{{ pays.nom }}</option>
                        {% endfor %}
                      {% endif %}
                    </select>
                </div>
              </div>
            </div>
            <input type="hidden" name="user_id" value="{{ app.user.reservants.id }}"/>
            <button type="submit" class="submit-button">{{ 'information.validate'|trans }}</button>
          </form>
        </div>
      </div>
    </div>
{% endblock %}
{% block javascripts %}
	<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/js/intlTelInput.min.js"></script>
  <script src="{{ asset('front/js/phone.js') }}"></script>
{% endblock %}