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

{% block content %}
<div class="card" style="margin-top:2rem;">
  <div class="card-header">
    <h1>🎟️ {{ event }}</h1>
    <p>Réservez votre place dès maintenant · Paiement sécurisé</p>
  </div>
  <div class="card-body">

    <div style="text-align:center; margin-bottom:1.5rem;">
      <div class="price-badge">{{ "{:,}".format(price) }} FCFA / billet</div>
    </div>

    <form method="POST" action="/paying" id="checkoutForm">

      <div class="form-group">
        <label for="name">👤 Nom complet</label>
        <input type="text" id="name" name="name" placeholder="Ex: Amadou Diallo" required>
      </div>

      <div class="form-group">
        <label for="email">📧 Adresse email</label>
        <input type="email" id="email" name="email" placeholder="votre@email.com" required>
      </div>

      <div class="form-group">
        <label for="phone">📱 Numéro de téléphone</label>
        <input type="tel" id="phone" name="phone" placeholder="221770000000" required>
        <small style="color:#666; font-size:.82rem; margin-top:.3rem; display:block;">
          Format international: 221 + numéro (ex: 221776543210)
        </small>
      </div>

      <div class="form-group">
        <label>💳 Mode de paiement</label>
        <div class="payment-methods">

          <label class="method-card">
            <input type="radio" name="method" value="wave" required>
            <span class="method-icon">🌊</span>
            <div>
              <div class="method-label">Wave</div>
              <div style="font-size:.8rem; color:#666;">Paiement instantané</div>
            </div>
          </label>

          <label class="method-card">
            <input type="radio" name="method" value="orange_money">
            <span class="method-icon">🍊</span>
            <div>
              <div class="method-label">Orange Money</div>
              <div style="font-size:.8rem; color:#666;">Paiement mobile</div>
            </div>
          </label>

        </div>
      </div>

      <div style="background:#f8f9fa; border-radius:8px; padding:1rem; margin-bottom:1.5rem;">
        <div class="info-row">
          <span class="info-label">Prix du billet</span>
          <span class="info-value">{{ "{:,}".format(price) }} FCFA</span>
        </div>
        <div class="info-row">
          <span class="info-label">Frais</span>
          <span class="info-value" style="color:var(--success)">0 FCFA</span>
        </div>
        <div class="info-row" style="border-bottom:none; font-size:1.05rem;">
          <span class="info-label"><strong>Total</strong></span>
          <span class="info-value" style="color:var(--accent)"><strong>{{ "{:,}".format(price) }} FCFA</strong></span>
        </div>
      </div>

      <button type="submit" class="btn btn-primary" id="submitBtn">
        🔒 Payer maintenant
      </button>

    </form>

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

{% block extra_js %}
<script>
  document.getElementById('checkoutForm').addEventListener('submit', function(e) {
    const btn = document.getElementById('submitBtn');
    btn.textContent = '⏳ Redirection vers le paiement…';
    btn.disabled = true;
  });

  // Validate phone format
  document.getElementById('phone').addEventListener('input', function() {
    this.value = this.value.replace(/[^\d]/g, '');
  });
</script>
{% endblock %}