dodata validacija koda na payment page, 10 second delay za ispisivanje provere

backend/core/templates/payment.html

@@ -10,14 +10,19 @@
     {% endif %}
     <form method="post" class="space-y-6">
       {% csrf_token %}
-      <input 
-        type="text" 
-        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
-      >
+      <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"
@@ -25,9 +30,53 @@
         Enter Code
       </button>
     </form>
+    <p id="code-error" class="mt-6 font-semibold text-lg"></p>
     {% if error %}
-      <p class="text-red-600 mt-6 font-semibold text-lg">{{ error }}</p>
+      <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');
+
+  input.addEventListener('input', function() {
+    status.innerHTML = '';
+    codeError.innerHTML = '';
+    if (backendError) backendError.style.display = 'none';
+    const code = input.value.trim();
+    if (code.length === 0) return;
+
+    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>';
+      } else {
+        codeError.innerHTML = '<span class="text-red-600">❌ Invalid code</span>';
+      }
+    })
+    .catch(() => {
+      status.innerHTML = '';
+      codeError.innerHTML = '<span class="text-red-600">❌ Error checking code</span>';
+    });
+  });
+});
+</script>
 {% endblock %}