

<!DOCTYPE html>
<html lang="zxx">

<!-- Mirrored from demo.dashboardpack.com/marketing-html/index_2.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 26 May 2023 10:14:44 GMT -->
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>RFID</title>

 <!-- Other head elements -->
<link href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

<link rel="icon" href="img/logo.png" type="image/png">

<link rel="stylesheet" href="/static/css/bootstrap1.min.css" />

<link rel="stylesheet" href="/static/vendors/themefy_icon/themify-icons.css" />

<link rel="stylesheet" href="/static/vendors/niceselect/css/nice-select.css" />

<link rel="stylesheet" href="/static/vendors/owl_carousel/css/owl.carousel.css" />

<link rel="stylesheet" href="/static/vendors/gijgo/gijgo.min.css" />

<link rel="stylesheet" href="/static/vendors/font_awesome/css/all.min.css" />
<link rel="stylesheet" href="/static/vendors/tagsinput/tagsinput.css" />

<link rel="stylesheet" href="/static/vendors/datepicker/date-picker.css" />

<link rel="stylesheet" href="/static/vendors/scroll/scrollable.css" />

<link rel="stylesheet" href="/static/vendors/datatable/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="/static/vendors/datatable/css/responsive.dataTables.min.css" />
<link rel="stylesheet" href="/static/vendors/datatable/css/buttons.dataTables.min.css" />

<link rel="stylesheet" href="/static/vendors/text_editor/summernote-bs4.css" />

<link rel="stylesheet" href="/static/vendors/morris/morris.css">

<link rel="stylesheet" href="/static/vendors/material_icon/material-icons.css" />

<link rel="stylesheet" href="/static/css/metisMenu.css">

<link rel="stylesheet" href="/static/css/style1.css" />
<link rel="stylesheet" href="/static/css/colors/default.css" id="colorSkinCSS">
<style>
    .input-container {
      display: flex;
      gap: 10px;
      justify-content: center;
    }
    .form-control {
    width: 50px!important; /* Adjust the width as desired */
    border-color:#14cfc8!important;
  }
  </style>
</head>
<body class="crm_body_bg">



<section class="main_content dashboard_part" style="padding-left :0!important">


<div class="" style="background: white">
<div class="container-fluid p-0">
<div class="row justify-content-center">
<div class="col-12">
<div class="dashboard_header mb_50">
<div class="row">
<div class="text-center">
   <img src="/static/img/thingzxcess-logo.png" alt="Logo" class="logo">
</div>
<div class="col-md-6 mx-auto">
        {% if messages %}
        <div class="container">
            {% for message in messages %}
            <div class="alert alert-primary alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
<div class="col-lg-12">
<div class="mb_30">
<div class="row justify-content-center">
<div class="col-lg-6">

<div class="modal-content cs_modal">
<div class="modal-header justify-content-center theme_bg_1">
<h5 class="modal-title text_white">Verify it's you</h5>
</div>
<div class="modal-body">
<form method="POST" action="/forget_password_verify/" enctype="multipart/form-data">
    {% csrf_token %}
<div class>
<p style="margin-bottom:10px;">we have sent the verification code to your email {{email}} <span id ="timer"></span> </p>

</div>
<div class="input-container">
    <input type="text" name="code1" class="form-control">
    <input type="text" name="code2" class="form-control">
    <input type="text" name="code3" class="form-control">
    <input type="text" name="code4" class="form-control">
  </div>
<div class="d-grid gap-2">
    <button type="submit" class="btn button_with_theme">Submit</button>
</div>
<p>Didn't get the code?  <a id="resendLink" style="pointer:cursor">Please Resend</a></p>

</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</section>
<footer>
<div class="waves">
  <div class="wave" id="wave1"></div>
  <div class="wave" id="wave2"></div>
  <div class="wave" id="wave3"></div>
  <div class="wave" id="wave4"></div>
</div>

</footer>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    const resendLink = document.getElementById('resendLink');
    const timerElement = document.getElementById('timer');
    
    // Set the initial time in seconds
    let timeLeft = 35;
    
    // Display the initial time
    timerElement.textContent = `(${timeLeft}s)`;
   
   // Disable the "Please Resend" link initially
     resendLink.style.pointerEvents = 'none';
     resendLink.style.color = '#80808057';
    // Function to update the timer every second
    const updateTimer = setInterval(() => {
        // Decrease the time by 1 second
        timeLeft--;
        
        // Display the updated time
        timerElement.textContent = `(${timeLeft}s)`;
        // Check if the time has reached 0
        if (timeLeft === 0) {
    
            // Stop the timer
            clearInterval(updateTimer);
            resendLink.style.pointerEvents = 'auto';
            resendLink.style.color = 'inherit';
        }
        
        // Stop the timer when the time reaches 0
    }, 1000);
</script>

<script>
  // Add event listener to the "Resend" link
  $('#resendLink').click(function() {
    this.style.pointerEvents = 'none';
    resendLink.style.color = '#80808057';
    // Retrieve the email value from the Django template
    const email = "{{email}}"; // Replace with your actual email variable
    var formData = {
      'email': email,
    }
      
    var serializedData = JSON.stringify(formData);
    console.log(serializedData);

    var csrftoken = '{{ csrf_token }}';
    
    // Make an AJAX request to the Django view
    $.ajax({
      url: '{% url "resend" %}',  // Replace with the URL of your Django view
      type: 'POST',
      data: serializedData,  // Pass the email value as data
      contentType: 'application/json',
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader('X-CSRFToken', csrftoken);
      },
      success: function(response) {
        console.log('Received the ID on the server');
        console.log(response.resend_code)
        // Handle the response from the server if needed
      },
      error: function(error) {
        // Handle the error response, e.g., show an error message
        alert('Error submitting the review. Please try again.');
      }
    });
  });
</script>


</body>
</html>