<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>PDP Dashbord</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        
    </head>
    <body>

<!-- Section: Design Block -->
<div class="container">
  <br>
  <br>
<section class=" text-center text-lg-start">
    <style>
      .rounded-t-5 {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
      }
  
      @media (min-width: 992px) {
        .rounded-tr-lg-0 {
          border-top-right-radius: 0;
        }
  
        .rounded-bl-lg-5 {
          border-bottom-left-radius: 0.5rem;
        }
      }
    </style>
    <div class="card mb-3">
      <div class="row g-0 d-flex align-items-center">
        <div class="col-lg-4 d-none d-lg-flex">
          <img src="./media/images/images.png" alt="Trendy Pants and Shoes"
            class="w-100 rounded-t-5 rounded-tr-lg-0 rounded-bl-lg-5" />
        </div>
        <div class="col-lg-8">
          <div class="card-body py-5 px-md-5">
            <h1>Bienvenue au PDP Dashbord</h1>
            <form method="POST" action="{% url 'produits:login' %}" id="myForm">
              <!-- Email input -->
              {% csrf_token %}
              <div data-mdb-input-init class="form-outline mb-4">
                <label class="form-label" for="form2Example1">Courriel</label>
                <input type="text" id="username" name="username" class="form-control" required />
                
              </div>
  
              <!-- Password input -->
              <div data-mdb-input-init class="form-outline mb-4">
                <label class="form-label" for="form2Example2">Mot de passe</label>
                <input type="password" id="password" name="password" class="form-control" required />
                
              </div>
  
              <!-- 2 column grid layout for inline styling -->
              
  
              <!-- Submit button -->
              <button  type="submit" id="login" name="login" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">Connexion</button>
  
            </form>
            
            {% if messages %}
              {% for message in messages %}
                <p style="color: red;">{{ message }}</p>
              {% endfor %}
            {% endif %}
            Chargement des données ...
            <br>
           
            <div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
              <p></p>
              <div class="progress-bar" style="width: 0%">0%</div>
            </div>

            <p style="align-items: end;"><strong>Fourni par DSI T.Boualbani</strong></p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Section: Design Block -->
</div>
</body>

<script>

document.getElementById('myForm').addEventListener('submit', function (event) {
            // Empêcher le rechargement de la page
           

            const progressBar = document.querySelector('.progress-bar');
            let percentage = 0;
            const duration = 20000; // 20 secondes
            const intervalTime = 1000; // Mise à jour toutes les secondes
            const step = 100 / (duration / intervalTime); // 5% par seconde

            // Utiliser setInterval pour mettre à jour la barre
            const interval = setInterval(() => {
                percentage += step;
                if (percentage >= 100) {
                    percentage = 100;
                    clearInterval(interval); // Arrêter le timer à 100%
                }
                progressBar.style.width = percentage + '%';
                progressBar.textContent = Math.round(percentage) + '%';
            }, intervalTime);
        });



$(document).ready(function() {
       
       $('#login').click(function() {
        const courriel = $('#username').val();
        const password = $('#password').val();
        if ($('#username')[0].checkValidity()) 
        {
          if ($('#password')[0].checkValidity()) 
          {
            //alert('login='+courriel+'passwod='+password)
            /*$.ajax({
                    url: "{% url 'produits:login' %}",  // URL of the Django view
                    type: 'POST',
                    data: {
                        courriel: courriel,
                        password: password,
                        'csrfmiddlewaretoken': '{{ csrf_token }}'  // CSRF token for security
                    },
                    success: function(data) {
                        
                    },
                    error: function(xhr, status, error) {
                        // Handle errors
                        console.log("Erreur : " + error);
                    }
                });*/
          }
          else
          {
            $('#password')[0].reportValidity();
          }  
        }
        else
        {
          $('#username')[0].reportValidity();
        }
       });
   });
</script>

</html>