{% load static %}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Connexion SI-RH</title>
    <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{% static 'styles.css' %}">
</head>


  <body class="d-flex justify-content-center align-items-center min-vh-100 ">

<style>
      .bg-orange-dark {
    background: linear-gradient(90deg, #b35400, #cc6600);
    color: white;
  }
</style>
  <!-- Formulaire de connexion -->
  <div class="p-4 shadow-sm rounded bg-white" style="max-width: 400px; margin: auto;">
<img src="{% static 'CERFIF.jpg' %}" alt="Logo" class="logo mb-3"
     style="display: block; margin-left: auto; margin-right: auto; width: 60%; max-width: 500px; height: auto;">


   
{% if messages %}
  <!-- Modal message -->
  <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header bg-orange-dark
          {% if messages.0.tags == 'error' %}bg-orange-dark text-white
          {% elif messages.0.tags == 'success' %}bg-orange-dark text-white
          {% else %}bg-orange-dark text-white{% endif %}">
          <h5 class="modal-title" id="messageModalLabel">
            {% if messages.0.tags == 'error' %}Erreur
            {% elif messages.0.tags == 'success' %}Succès
            {% else %}Information{% endif %}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {% for message in messages %}
            <p>{{ message }}</p>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var messageModal = new bootstrap.Modal(document.getElementById('messageModal'));
      messageModal.show();
    });
  </script>
{% endif %}
    <form method="POST" action="{% url 'login' %}">
      {% csrf_token %}
      <div class="mb-3">
        <label for="username">Nom d’utilisateur</label>
        <input type="text" name="username" class="form-control" placeholder="Entrez votre nom d’utilisateur" required>
      </div>
      <div class="mb-3 position-relative">
        <label for="password">Mot de passe</label>
        <input type="password" name="password" class="form-control" placeholder="Entrez votre mot de passe" required>
        <i class="bi bi-eye toggle-password" onclick="togglePassword()" 
           style="position:absolute; right:10px; top:38px; cursor:pointer;"></i>
      </div>
      <button type="submit" class="btn btn-primary w-100">Se connecter</button>
    </form>

    <p class="mt-3 text-center">
      <a href="#" data-bs-toggle="modal" data-bs-target="#resetPasswordModal">Mot de passe oublié ?</a>
    </p>
  </div>

  <!-- Modale de réinitialisation -->
  <div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content p-4">
        <h5 class="modal-title mb-3" id="resetPasswordModalLabel">Réinitialisation du mot de passe</h5>
        <form id="resetPasswordForm">
          {% csrf_token %}
          <div class="mb-3">
            <label for="email">Entrez votre email</label>
            <input type="email" name="email" class="form-control" placeholder="Email" required>
          </div>
          <div id="resetMessage" class="mb-3"></div>
          <button type="submit" class="btn btn-warning w-100">Envoyer le lien</button>
        </form>
      </div>
    </div>
  </div>

  {% if show_politique_modal %}
<!-- Modal Politique d'utilisation -->
<div class="modal fade" id="politiqueModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header bg-orange-dark text-white">
        <h5 class="modal-title">Politique d'utilisation de SI-RH</h5>
      </div>
      <div class="modal-body">
        <p>Veuillez lire et accepter notre politique d'utilisation avant d'accéder à votre compte.</p>
        <h6>Confidentialité des données</h6>
        <p>Vos informations personnelles et professionnelles sont protégées. Toute divulgation non autorisée est strictement interdite.</p>
        <h6>Utilisation autorisée</h6>
        <p>L’application est réservée à un usage professionnel. Toute utilisation à des fins personnelles ou non autorisées est prohibée.</p>
        <h6>Sécurité des comptes</h6>
        <p>Ne partagez jamais vos identifiants. Changez votre mot de passe régulièrement et en cas de suspicion d’intrusion.</p>
        <h6>Responsabilités de l’utilisateur</h6>
        <p>Vous êtes responsable des actions effectuées via votre compte. Signalez toute anomalie ou problème à l’équipe RH ou à l’administrateur.</p>
        <h6>Acceptation et conformité</h6>
        <p>En cliquant sur <strong>“J’accepte”</strong>, vous confirmez avoir lu et accepté cette politique. Le non-respect peut entraîner une suspension ou une révocation de l’accès.</p>
      </div>
      <div class="modal-footer">
        <form method="POST" action="{% url 'accepter-politique' %}" style="display:inline;">
          {% csrf_token %}
          <button type="submit" class="btn btn-success">J'accepte</button>
        </form>
        <form method="POST" action="{% url 'refuser-politique' %}" style="display:inline;">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger">Refuser</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  var politiqueModal = new bootstrap.Modal(document.getElementById('politiqueModal'));
  politiqueModal.show();
});
</script>


<script>
document.addEventListener("DOMContentLoaded", function() {
  var politiqueModal = new bootstrap.Modal(document.getElementById('politiqueModal'));
  politiqueModal.show();
});
</script>
>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var modal = new bootstrap.Modal(document.getElementById('politiqueModal'));
    modal.show();
  });
</script>
{% endif %}


  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <script>
    // Afficher / masquer le mot de passe
    function togglePassword() {
      const input = document.querySelector('input[name="password"]');
      input.type = input.type === 'password' ? 'text' : 'password';
    }

    // AJAX pour réinitialisation
    $('#resetPasswordForm').on('submit', function(e) {
      e.preventDefault();
      const email = $('input[name="email"]').val();
      const csrfToken = $('[name=csrfmiddlewaretoken]').val();

      $.ajax({
        url: "{% url 'password_reset' %}",
        type: 'POST',
        data: {
          'email': email,
          'csrfmiddlewaretoken': csrfToken
        },
        success: function(response) {
          $('#resetMessage').html('<div class="alert alert-success">Email envoyé ! Vérifiez votre boîte de réception.</div>');
        },
        error: function() {
          $('#resetMessage').html('<div class="alert alert-danger">Erreur lors de l’envoi. Vérifiez l’email.</div>');
        }
      });
    });
  </script>




</body>
</html>
 