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

{% block stylesheets %}
  <link rel="stylesheet" href="{{asset('css/user-account-style.css')}}">
{% endblock stylesheets %}

{% block javascripts %}
  <script>
    window.addEventListener('load', () => {

      changePassword()
      messageFlashHide()

      function changePassword()
      {
        
        const changePasswordForm = document.getElementById('change-password')
        const inputs = changePasswordForm.querySelectorAll('input')
        const newPass = changePasswordForm.querySelector('#new-pass')
        const repeatedPass = changePasswordForm.querySelector('#repeated-pass')
        const savePasswordButton = document.getElementById('save-password')

        savePasswordButton.addEventListener('click', saveNewPassword)

        function saveNewPassword()
        {
          console.log('Password saving...')

          if (changePasswordForm.reportValidity())
          {

            try
            {

              formatIsOk(newPass)

  
              lengthVerificationIsOk()


              passesIsSame()

            }
            catch(error)
            {
              const modalTitle = document.getElementById("changePasswordLabel")
              modalTitle.innerText = error.message
              modalTitle.style.color = "red"
              return console.error(error)
            }

            saveChanges(newPass.value)
          }

          function saveChanges(newPassword)
          {

            const url = '/change-user-password'
            const data = {
              newPass : newPassword,
            }
            fetch(url, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
              //console.log(data)
              window.location.reload()

            })
            .catch(error => {
              console.error("Request fail: ",error)
            })
          }

          function passesIsSame()
          {

            if (newPass.value === repeatedPass.value)
            {
              return true
            }

            errorDetected("Les mots de passe ne coïncident pas !")
          }

          function lengthVerificationIsOk()
          {
              const maxLength = 68
              const minLength = 8

              const newPass = changePasswordForm.querySelector('#new-pass')
              newPassValue = newPass.value

              if (newPassValue.length <= maxLength && newPassValue.length >= minLength)
              {
                return true
              }

              errorDetected('Mot de passe trop Court / long !')

          }

          function formatIsOk(input)
          {
            const regex = /^[^<>&'"/]*$/;
             if (regex.test(input.value))
             {
                return true
             }

             errorDetected("Format du mot du passe invalide !")
          }

          function errorDetected(errorMessage)
          {
            throw new Error(errorMessage)
          }
        }
      }

      function messageFlashHide()
      {
        const messageFlash = document.querySelector('.alert')

        if (messageFlash)
        {
          console.log('Has alert: ',messageFlash)

          setTimeout(()=> {
            messageFlash.style.transition = "opacity 3s ease-out"
            messageFlash.style.opacity = "0"

            setTimeout(() =>  {
                messageFlash.remove()
            }, 3000)
          }, 3000)
        }
        else
        {
          console.log('No alert')
        }
      }
    })
  </script>
  <script type="module" src="{{asset('js/classes/Cart.js')}}"></script>
  <script type="module" src="{{asset('js/buying.js')}}"></script>
{% endblock javascripts %}

{% block body %}

{% for type, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ type }}">{{ message }}</div>
    {% endfor %}
{% endfor %}

<div class="modal fade" id="changePassword" tabindex="-1" aria-labelledby="changePasswordLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="changePasswordLabel">Entrez votre nouveau mot de passe</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
        <form id="change-password" action="">
          <label for="new-pass">Nouveau mot de passe:</label>
            <input id="new-pass" name="new-pass" type="password" autocomplete="off" required="required">
          <label for="repeated-pass">Répétez le mot de passe:</label>
            <input id="repeated-pass" name="repeated-pass" type="password" autocomplete="off" required="required">
        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
        <button type="button" id="save-password" class="btn btn-primary">Sauvegarder</button>
      </div>
    </div>
  </div>
</div>
    
<section id="banner" class="py-3 mt-1" style="background: #F9F3EC;">
    <div class="container">
      <div class="hero-content py-5 my-3">
        <h2 class="display-1 mt-3 mb-0">Détails du <span class="text-primary">Compte</span></h2>
        <nav class="breadcrumb">
          <a class="breadcrumb-item nav-link" href="{{path('app_home')}}">Accueil</a>
          <span class="breadcrumb-item active" aria-current="page">Détails du compte</span>
        </nav>
      </div>
    </div>
  </section>

<section class="user_info container mt-3">
    <table class="table">

        <tbody>
          <tr>
            <th scope="row">Nom</th>
            <td class="col-10">{{app.user.surname}}</td>
          </tr>
          <tr>
            <th scope="row">Prénom</th>
            <td>{{app.user.firstname}}</td>
          </tr>
          <tr>
            <th scope="row">Mail</th>
            <td>{{app.user.email}}</td>
          </tr>
          {% if app.user.phone %}
            <tr>
              <th scope="row">Téléphone</th>
              <td>{{app.user.phone}}</td>
            </tr>
            
          {% endif %}
          <tr>
            <th scope="row">Adresse</th>
            <td>{{app.user.adress}}</td>
          </tr>
          {% if app.user.additionalAdressInformation %}
          
            <tr>
              <th scope="row">Adresse sup</th>
              <td>{{app.user.additionalAdressInformation}}</td>
            </tr>
            
          {% endif %}
          <tr>
            <th scope="row">Code postal</th>
            <td>{{app.user.zipcode}}</td>
          </tr>
          <tr>
            <th scope="row">Ville</th>
            <td>{{app.user.city}}</td>
          </tr>
        </tbody>
      </table>
      <div class="user-actions container p-0">
        <button onclick="window.location.href='{{ path('edit_account', {'id': app.user.id}) }}'" class="btn btn-primary">Modifier les informations</button>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#changePassword">Modifier le mot de passe</button>
        <button onclick="window.location.href='{{ path('app_logout') }}'" class="btn btn-primary">Se déconnecter</button>
      </div>
</section>



{% endblock body %}