{% extends "../frames/__account.html" %}
{% load static %}

{% block docTitle %}Mon compte{% endblock docTitle %}
{% block navTitle %}Mon compte{% endblock navTitle %}
{% block activeMonCompte %}active{% endblock activeMonCompte %}

{% block headLinks %}
    {% static "css/mon-compte.css" %}
{% endblock headLinks %}

{% block contents %}
<div class="container">
    <div class="main-body">
    
    
          <div class="row gutters-sm pt-3">
            <div class="col-md-4 mb-3">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex flex-column align-items-center text-center">
                    <img src="{% if request.user.photo %}{{request.user.photo.url}}{% else %}https://bootdey.com/img/Content/avatar/avatar7.png{% endif %}" alt="Admin" class="rounded-circle" width="150" height="150">
                    <div class="mt-3">
                      <h4>{{request.user.complete_name}}</h4>
                      <p class="text-secondary mb-1">{{request.user.statut_emploi.nom}}</p>
                      <button class="btn btn-success"><i class="fa fa-download"></i>  Ma carte de membre</button>
                    </div>
                  </div>
                </div>
              </div>
              
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Changer de mot de passe</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form id="quickForm" method="POST" action="{% url 'change_password' %}">
                {% csrf_token %}
                <div class="card-body">
                    <div class="form-group">
                        <label for="oldPassword">Ancien mot de passe</label>
                        <input type="password" name="old_password" class="form-control" id="old_password" placeholder="Ancien mot de passe">
                        <small id="oldPasswordError" class="form-text text-danger"></small> <!-- Message d'erreur -->
                    </div>
                    <div class="form-group">
                        <label for="newPassword">Nouveau mot de passe</label>
                        <input type="password" name="new_password1" class="form-control" id="new_password1" placeholder="Nouveau mot de passe">
                        <small id="newPasswordError" class="form-text text-danger"></small> <!-- Message d'erreur -->
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">Repeter le nouveau mot de passe</label>
                        <input type="password" name="new_password2" class="form-control" id="new_password2" placeholder="Répéter le nouveau mot de passe">
                        <small id="confirmPasswordError" class="form-text text-danger"></small> <!-- Message d'erreur -->
                    </div>

                    <button type="submit" class="btn btn-warning btn-block">Changer mon mot de passe</button>
                </div>
              </form>
            </div>
            </div>
            <div class="col-md-8">
              <div class="card mb-3">
                <div class="card-body">
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Full Name</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      {{request.user.complete_name}}
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Email</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                        {{request.user.email}}
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Telephone</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                        {{request.user.phone}}
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Comunaute</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      {% if request.user.communaute_provinciale %}
                        {{request.user.communaute_provinciale.nom_province}} ({{request.user.communaute_provinciale.communaute_regionale.nom_region}})
                      {% else %}
                        {{request.user.communaute_diaspora.nom_pays}} ({{request.user.communaute_diaspora.communaute_diaspora_continent.nom_continent}})
                      {% endif %}
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Genre</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      {{request.user.genre}}
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Cotisation impayees</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      {{request.user.montant_total_cotisations_impayees}}
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Membre depuis</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      {{request.user.created_at}}
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-sm-12">
                      <a class="btn btn-info " href="#" data-toggle="modal" data-target="#edit-modal">Modifier</a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row gutters-sm">
                <div class="col-sm-6 mb-3">
                  <div class="card card-danger">
                    <div class="card-header">Mes fonctions provinciales</div>
                    <div class="card-body">
                      {% for role in request.user.my_provincial_roles %}
                        <div class="row">
                          <div class="col-md-6 col-sm-12">
                            <b>{{role.province}}</b>
                          </div>
                          <div class="col-md-6 col-sm-12">
                            {{role.role}}
                          </div>
                        </div>
                        {% if not forloop.last %}
                            <hr> 
                        {% endif %}
                      {% endfor %}
                      
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 mb-3">
                  <div class="card card-danger">
                    <div class="card-header">Mes fonctions regionales</div>
                      {% comment %} style="height:230px; overflow-y:auto;" {% endcomment %}
                      <div class="card-body d-flex flex-column">
                      {% for role in request.user.my_regional_roles %}
                        <div class="row">
                          <div class="col-md-6 col-sm-12">
                            <b>{{role.region}}</b>
                          </div>
                          <div class="col-md-6 col-sm-12">
                            {{role.role}}
                          </div>
                        </div>
                        {% if not forloop.last %}
                            <hr> 
                        {% endif %}
                      {% endfor %}
                      
                    </div>
                  </div>
                </div>
              </div>



            </div>
          </div>

        </div>
    </div>



<div class="modal fade" id="edit-modal">
  <div class="modal-dialog">
    <form class="modal-content" enctype="multipart/form-data" method="post" action="">
      {% csrf_token %}
      <div class="modal-header">
        <h4 class="modal-title">Editer mon profil</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <div class="form-group">
              <label for="exampleInputFile">Photo Profil</label> 
              <input type="file" class="form-control" name="photo" id="exampleInputFile">
              {% if request.user.photo %}
                <p style="font-size: 12px;"><b>Ancienne photo</b> : <a target="blank" href="{{request.user.photo.url}}">consulter</a></p>
              {% endif %}
              
          </div>

          <div class="form-group">
              <label for="exampleInputNom">Nom</label> 
              <input type="text" name="nom" class="form-control" id="exampleInputNom" placeholder="Nom" value="{{request.user.last_name}}" required>
          </div>
              <div class="form-group">
                  <label for="exampleInputPrenom">Prénom(s)</label> 
                  <input type="text" name="prenom" class="form-control" id="exampleInputPrenom" placeholder="Prénom(s)" value="{{request.user.first_name}}" required>
              </div>
              <div class="form-group">
                  <label for="exampleInputEmail1">Adresse Email</label> 
                  <input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Adresse email" value="{{request.user.email}}" required>
              </div>

          <div class="row">
              <div class="col-6">
                  <div class="form-group">
                      <label for="genre">Genre</label> 
                      <select class="form-control" name="genre" id="genre" required >
                          <option value="Masculin" {% if request.user.genre == 'Masculin' %}selected{% endif %}>Masculin</option>
                          <option value="Feminin"  {% if request.user.genre == 'Feminin' %}selected{% endif %}>Feminin</option>
                      </select>
                  </div>
              </div>
              <div class="col-6">
                <div class="form-group">
                    <label for="exampleInputPrenom">Telephone</label> 
                    <input type="text" name="telephone" class="form-control" id="telephone" value="{{request.user.phone}}" placeholder="Ex : +226 00000000" required>
                </div>
              </div>
          </div>  
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
        <button type="submit" class="btn btn-primary">Enregistrer</button>
      </div>
  </form>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
{% endblock contents %}

{% block scripts %}

<script>
  $(document).ready(function() {


      $('#quickForm').on('submit', function(e) {
          var oldPassword = $('#old_password').val();
          var newPassword = $('#new_password1').val();
          var confirmPassword = $('#new_password2').val();
  
          var isValid = true; // Variable pour vérifier si tout est valide
  
          // Regex pour vérifier les critères standards du mot de passe
          var passwordCriteria = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
  
          // Réinitialiser les messages d'erreur
          $('#oldPasswordError').text('');
          $('#newPasswordError').text('');
          $('#confirmPasswordError').text('');
  
          // Vérifier si le nouveau mot de passe correspond aux critères
          if (!passwordCriteria.test(newPassword)) {
              $('#newPasswordError').text("Le nouveau mot de passe doit contenir au moins 8 caractères, une majuscule, une minuscule, un chiffre et un caractère spécial.");
              isValid = false;
          }
  
          // Vérifier si les deux nouveaux mots de passe correspondent
          if (newPassword !== confirmPassword) {
              $('#confirmPasswordError').text("Les nouveaux mots de passe ne correspondent pas.");
              isValid = false;
          }
  
          // Empêcher la soumission si la validation échoue
          if (!isValid) {
              e.preventDefault();
          }
      });
  });
  </script>

{% endblock scripts %}