{% extends "base.html" %}
{% block title %}Acheter un billet - {{ event }}{% endblock %}

{% block content %}
<div class="max-w-md mx-auto mt-8 bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
  
  <div class="bg-gradient-to-r from-blue-600 to-indigo-600 p-6 text-white text-center">
    <h1 class="text-2xl font-bold flex items-center justify-center gap-2">
      🎟️ {{ event }}
    </h1>
    <p class="text-blue-100 text-sm mt-1">Réservez votre place dès maintenant · Paiement sécurisé</p>
  </div>

  <div class="p-6 space-y-6">

    <div class="text-center">
      <span class="inline-block bg-indigo-50 text-indigo-700 font-semibold px-4 py-1.5 rounded-full text-sm border border-indigo-100">
        {{ "{:,}".format(price) }} FCFA / billet
      </span>
    </div>

    <form method="POST" action="/paying" id="checkoutForm" class="space-y-4">

      <div>
        <label for="prenom" class="block text-sm font-medium text-gray-700 mb-1">👤 Prenom</label>
        <input type="text" id="prenom" name="prenom" placeholder="Ex: Amadou Diallo" required
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition">
      </div>

      <div>
        <label for="nom" class="block text-sm font-medium text-gray-700 mb-1">👤 Nom</label>
        <input type="text" id="nom" name="nom" placeholder="Ex: Amadou Diallo" required
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition">
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">📧 Adresse email</label>
        <input type="email" id="email" name="email" placeholder="votre@email.com" required
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition">
      </div>

      <div>
        <label for="number_of_ticket" class="block text-sm font-medium text-gray-700 mb-1">🎟️ Nombre de tickets (Max 10)</label>
        <input type="number" id="number_of_ticket" name="number_of_ticket" value="1" min="1" max="10" required
               hx-post="/calculate-total" 
               hx-trigger="input, change" 
               hx-target="#price-summary"
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition">
      </div>

      <div>
        <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">📱 Numéro de téléphone</label>
        <input type="tel" id="phone" name="phone" placeholder="221770000000" required
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition">
        <p class="text-xs text-gray-500 mt-1">Format international: 221 + numéro (ex: 221776543210)</p>
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">💳 Mode de paiement</label>
        <div class="grid grid-cols-1 gap-3">
          <label class="relative flex items-center p-4 border border-indigo-100 bg-indigo-50/40 rounded-xl cursor-pointer hover:bg-indigo-50 transition group">
            <input type="radio" name="method" value="wave" checked required 
                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
            <span class="text-2xl mx-3 group-hover:scale-110 transition-transform">🌊</span>
            <div>
              <span class="block text-sm font-semibold text-gray-800">Wave</span>
              <span class="block text-xs text-gray-500">Paiement instantané</span>
            </div>
          </label>
        </div>
      </div>

      <div id="price-summary" class="bg-gray-50 rounded-xl p-4 space-y-2 border border-gray-100">
        <div class="flex justify-between text-sm text-gray-600">
          <span>Prix du billet</span>
          <span>{{ "{:,}".format(price) }} FCFA</span>
        </div>
        <div class="flex justify-between text-sm text-gray-600">
          <span>Frais</span>
          <span class="text-green-600 font-medium">0 FCFA</span>
        </div>
        <div class="flex justify-between text-base font-bold text-gray-900 pt-2 border-t border-gray-200">
          <span>Total</span>
          <span class="text-indigo-600">{{ "{:,}".format(price) }} FCFA</span>
        </div>
      </div>

      <button type="submit" id="submitBtn"
              class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium py-3 px-4 rounded-xl shadow-md hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition flex items-center justify-center gap-2">
        <span>🔒 Payer maintenant</span>
      </button>

    </form>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  // Loading state visual feedback on form submit
  document.getElementById('checkoutForm').addEventListener('submit', function(e) {
    const btn = document.getElementById('submitBtn');
    btn.innerHTML = `
      <svg class="animate-spin h-5 w-5 text-white" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
      <span>Redirection vers le paiement…</span>
    `;
    btn.disabled = true;
  });

  // Strict digits-only enforcement for phone input
  document.getElementById('phone').addEventListener('input', function() {
    this.value = this.value.replace(/[^\d]/g, '');
  });
</script>
{% endblock %}