<!DOCTYPE html>
<html lang="en">
  {% load static %}
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Forget Your Password - Verification Code</title>
  <link rel="stylesheet" href="{% static 'css/verificationcode.css' %}">

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
   
  </style>
</head>
<body>
  <div class="container">
    <!-- Left Side -->
    <div class="left-side">
      <img src="{% static 'images/logo-desktop.png' %}" alt="Logo">
    </div>

    <!-- Right Side -->
    <div class="right-side">
      <!-- Mobile Logo -->
      <div class="mobile-logo" style="display:none; text-align:center; margin-bottom:20px;">
        <img src="logo-mobile.png" alt="Mobile Logo" style="max-width:180px;">
      </div>

      <div class="form-container">
        <h2>Reset Your Password</h2>
        <p class="subtitle">Please Enter Your Verification Code To Reset Your Email.</p>

        <!-- Verification Form -->
        <form id="verificationForm">
          <input type="text" class="verification-input" placeholder="Enter Verification Code" id="verificationCode" required maxlength="6">
          <div class="error-message" id="codeError"></div>

          <div class="success-message" id="successMessage"></div>

          <button type="submit" class="verify-btn" id="verifyBtn">Verify</button>
        </form>

        <div class="terms">
          By signing into Squire, you agree to our 
          <a href="{% url 'term' %}">Terms of Service</a> and <a href="{% url 'term' %}">Privacy Policy</a>.
        </div>
      </div>
    </div>
  </div>

  <script>
    // Responsive logo toggle
    function handleLogo() {
      const mobileLogo = document.querySelector('.mobile-logo');
      const leftSide = document.querySelector('.left-side');
      if (window.innerWidth <= 768) {
        mobileLogo.style.display = 'block';
        leftSide.style.display = 'none';
      } else {
        mobileLogo.style.display = 'none';
        leftSide.style.display = 'block';
      }
    }
    window.addEventListener('resize', handleLogo);
    window.addEventListener('load', handleLogo);

    // Form validation and submission
    document.getElementById('verificationForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const code = document.getElementById('verificationCode');
      const codeError = document.getElementById('codeError');
      const successMessage = document.getElementById('successMessage');
      const verifyBtn = document.getElementById('verifyBtn');

      clearErrors();
      verifyBtn.disabled = true;
      verifyBtn.textContent = 'Verifying...';

      const formData = { code: code.value.trim() };

      fetch('/verification-code', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          successMessage.textContent = 'Verification successful! Redirecting...';
          successMessage.style.display = 'block';
          setTimeout(() => { window.location.href = data.redirect; }, 1500);
        } else {
          if (data.errors) {
            showError('verificationCode', data.errors.code || 'Invalid code');
          }
          verifyBtn.disabled = false;
          verifyBtn.textContent = 'Verify';
        }
      })
      .catch(error => {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
        verifyBtn.disabled = false;
        verifyBtn.textContent = 'Verify';
      });
    });

    function showError(fieldName, message) {
      const field = document.getElementById(fieldName);
      const errorDiv = document.getElementById('codeError');
      if (field && errorDiv) {
        field.classList.add('error');
        errorDiv.textContent = message;
        errorDiv.style.display = 'block';
      }
    }

    function clearErrors() {
      const errorElements = document.querySelectorAll('.error-message');
      const inputElements = document.querySelectorAll('.verification-input');
      errorElements.forEach(el => { el.textContent = ''; el.style.display = 'none'; });
      inputElements.forEach(el => { el.classList.remove('error'); });
      document.getElementById('successMessage').textContent = '';
      document.getElementById('successMessage').style.display = 'none';
    }

    document.getElementById('verificationCode').addEventListener('focus', function() {
      const errorMsg = document.getElementById('codeError');
      errorMsg.textContent = '';
      errorMsg.style.display = 'none';
      this.classList.remove('error');
    });

    // Allow only numbers
    document.getElementById('verificationCode').addEventListener('input', function(e) {
      this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6);
    });
  </script>
</body>
</html>
