{% extends 'base.html' %}
{% block content %}
<section class="py-24 bg-gradient-to-br from-teal-100 to-primary flex items-center justify-center">
  <div class="max-w-md w-full mx-auto text-center shadow-2xl border border-accent rounded-2xl p-4 bg-white/90 backdrop-blur">
    <h2 class="text-3xl font-extrabold mb-6 text-accent">Payment</h2>
    <p class="text-lg text-gray-700 mb-6">Please enter your demo code to proceed to document.</p>
    
    {% if success %}
      <p class="text-green-600 font-semibold mb-4">{{ success }}</p>
    {% endif %}
    <form method="post" class="space-y-6">
      {% csrf_token %}
      <div class="relative flex items-center">
        <input 
          type="text" 
          id="code-input"
          name="code" 
          maxlength="10" 
          class="w-full px-4 py-3 border-2 border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-accent text-lg tracking-widest text-center font-mono mb-2"
          placeholder="Enter your code"
          required
          autocomplete="off"
        >
        <span id="code-status" class="absolute right-3 top-1/2 -translate-y-1/2 text-2xl"></span>
      </div>
      <button 
        type="submit" 
        class="w-full bg-accent text-primary hover:bg-yellow-400 font-bold py-3 px-8 rounded-lg shadow-lg text-lg transition-all duration-200 ease-in-out transform hover:scale-105"
        id="submit-btn"
        disabled      
      >
        Enter Code
      </button>
    </form>
    <p id="code-error" class="mt-6 font-semibold text-lg"></p>
    {% if error %}
      <p id="backend-error" class="text-red-600 mt-6 font-semibold text-lg">{{ error }}</p>
    {% endif %}
  </div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById('code-input');
  const status = document.getElementById('code-status');
  const codeError = document.getElementById('code-error');
  const backendError = document.getElementById('backend-error');
  const submitBtn = document.getElementById('submit-btn');

  function disableBtn() {
    submitBtn.disabled = true;
    submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
  }

  function enableBtn() {
    submitBtn.disabled = false;
    submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
  }

  disableBtn();

  input.addEventListener('input', function() {
    status.innerHTML = '';
    codeError.innerHTML = '';
    if (backendError) backendError.style.display = 'none';
    const code = input.value.trim();
    if (code.length === 0) {
      disableBtn();
      return;
    };
    disableBtn();
    
    status.innerHTML = `<svg class="animate-spin h-6 w-6 text-accent" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
    </svg>`;

    fetch("{% url 'core:validate_code' %}", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": "{{ csrf_token }}",
      },
      body: JSON.stringify({ code: code })
    })
    .then(response => response.json())
    .then(data => {
      status.innerHTML = '';
      if (data.valid) {
        codeError.innerHTML = '<span class="text-green-600">✅ Valid code</span>';
        enableBtn();
      } else {
        codeError.innerHTML = '<span class="text-red-600">❌ Invalid code</span>';
        disableBtn();
      }
    })
    .catch(() => {
      status.innerHTML = '';
      codeError.innerHTML = '<span class="text-red-600">❌ Error checking code</span>';
      disableBtn();
    });
  });
});
</script>
{% endblock %}