{% include "../common/auth-header.html" %}
{% load static %}

<section class="courses p-md-5 mt-5" id="courses">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-5 col-md-7 col-sm-12 mt-4">
        <div class="card shadow-lg p-4 border-0 rounded-4">

          <h4 class="text-center mb-3 fw-bold">Login with WhatsApp</h4>

          <div id="alertBox"></div>

          <!-- SEND OTP FORM -->
          <form id="waLoginForm" onsubmit="return false;">
            {% csrf_token %}
             <div class="mb-3">
    <label class="form-label">First Name</label>
    <input type="text" id="waFirstName" class="form-control" placeholder="Enter First Name" required>
  </div>

  <div class="mb-3">
    <label class="form-label">Last Name</label>
    <input type="text" id="waLastName" class="form-control" placeholder="Enter Last Name" required>
  </div>

            <div class="mb-3">
              <label class="form-label fw-semibold">WhatsApp Number</label>
              <input type="text" id="waPhone" class="form-control form-control-lg"
                     placeholder="XXXXXXXXXX">
            </div>

            <button type="button" id="sendOtpBtn"
              class="login-btn w-100 btn-lg"
              onclick="sendOtp()">Send OTP</button>
          </form>

          <!-- VERIFY OTP FORM -->
          <form id="waOtpForm" class="d-none mt-3" onsubmit="return false;">
            {% csrf_token %}
            <div class="mb-3">
              <label class="form-label fw-semibold">Enter OTP</label>
              <input type="text" id="waOtp" class="form-control form-control-lg" maxlength="6">
            </div>

            <button type="button" class="login-btn w-100 btn-lg"
              onclick="verifyOtp()">Verify & Login</button>

            <!-- RESEND OTP TIMER -->
            <p class="text-center mt-3" id="resendBox">
              <span class="text-muted">Resend OTP in <span id="timer">60</span>s</span>
            </p>

            <p class="text-center mt-3">
            <a href="#" id="resendBtn"
              onclick="sendOtp()" class=" d-none">Resend OTP</ba>
              </p>
          </form>

        </div>
      </div>
    </div>
  </div>
</section>

{% include "../common/footer.html" %}
<script>
let countdownInterval = null;

function showAlert(message, type = 'danger') {
  document.getElementById('alertBox').innerHTML = `
    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
      ${message}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>`;
}

function startResendTimer() {
  let timeLeft = 60;
  const timerSpan = document.getElementById('timer');
  const resendBtn = document.getElementById('resendBtn');
  const resendBox = document.getElementById('resendBox');

  resendBtn.classList.add('d-none');
  resendBox.classList.remove('d-none');

  timerSpan.innerText = timeLeft;

  countdownInterval = setInterval(() => {
    timeLeft--;
    timerSpan.innerText = timeLeft;

    if (timeLeft <= 0) {
      clearInterval(countdownInterval);
      resendBtn.classList.remove('d-none');
      resendBox.classList.add('d-none');
    }
  }, 1000);
}

function sendOtp() {
  const first_name = document.getElementById('waFirstName').value.trim();
  const last_name  = document.getElementById('waLastName').value.trim();
  const phone      = document.getElementById('waPhone').value.trim();
  if (!phone) {
    showAlert("Please enter your WhatsApp number.");
    return;
  }

  fetch('/auth/send-whatsapp-otp/', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({first_name, last_name, phone})
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      showAlert(data.message || "OTP sent successfully!", "success");

      document.getElementById('waLoginForm').classList.add('d-none');
      document.getElementById('waOtpForm').classList.remove('d-none');

      startResendTimer();
    } else {
      showAlert(data.error || "Error sending OTP.");
    }
  })
  .catch(() => showAlert("Something went wrong."));
}

function verifyOtp() {
  const phone = document.getElementById('waPhone').value.trim();
  const otp = document.getElementById('waOtp').value.trim();

  if (!otp) {
    showAlert("Please enter OTP.");
    return;
  }

  fetch('/auth/verify-whatsapp-otp/', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({phone, otp})
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      window.location.href = data.redirect || '/';
    } else {
      showAlert(data.error || "Invalid OTP.");
    }
  })
  .catch(() => showAlert("Something went wrong."));
}
</script>