{% extends "base.html" %}
{% block title %}Registration Successful | {{ settings.event_title }}{% endblock %}
{% block body_class %}register-success-page{% endblock %}
{% block content %}
<section class="register-success-hero">
  <div class="wrap">
    <div class="success-card">
      <div class="success-icon"><i class="fas fa-circle-check"></i></div>
      <h1>Registration Successful</h1>
      <p class="success-lede">Your registration has been submitted and received.</p>

      <div class="success-status">
        <span class="status-label">Status</span>
        <span class="status-badge">UNDER VERIFICATION</span>
      </div>

      <div class="success-grid">
        <div class="success-item">
          <span>Game</span>
          <strong>{{ details.game }}</strong>
        </div>
        <div class="success-item">
          <span>Nick Name{% if details.entry_type == 'Group' %} / Team{% endif %}</span>
          <strong>{{ details.team_name }}</strong>
        </div>
        <div class="success-item">
          <span>Registration Reference</span>
          <strong>{{ details.ticket_number or details.ref }}</strong>
        </div>
        {% if details.entry_type == 'Group' %}
        <div class="success-item">
          <span>Group Leader</span>
          <strong>{{ details.leader_name }}</strong>
        </div>
        <div class="success-item">
          <span>Players</span>
          <strong>{{ details.member_count }}</strong>
        </div>
        {% endif %}
        <div class="success-item">
          <span>Applied On</span>
          <strong>{{ details.created_at }}</strong>
        </div>
      </div>

      {% if details.entry_type == 'Group' and details.team_member_names %}
      <div class="success-roster">
        <strong>Team Members</strong>
        <ol>
          {% for name in details.team_member_names %}
          <li>{{ name }}</li>
          {% endfor %}
        </ol>
      </div>
      {% endif %}

      {% if email_sent is none %}
      <div class="success-note ok">
        <i class="fas fa-envelope-circle-check"></i>
        <span>
          Your confirmation email is being sent in the background. Please check your inbox and SPAM / Junk folder shortly.
        </span>
      </div>
      {% elif email_sent %}
      <div class="success-note ok">
        <i class="fas fa-envelope-circle-check"></i>
        <span>
          A confirmation email has been sent to
          {% if email_recipients and email_recipients|length > 1 %}
          the registered email addresses ({{ email_recipients|join(', ') }}).
          {% elif email_recipients %}
          <strong>{{ email_recipients[0] }}</strong>.
          {% else %}
          the registered email address.
          {% endif %}
          <br><strong>Please check your SPAM / Junk folder</strong> if you do not see it in your inbox.
        </span>
      </div>
      {% else %}
      <div class="success-note warn">
        <i class="fas fa-triangle-exclamation"></i>
        <span>
          Registration saved successfully, but the confirmation email could not be sent
          {% if not email_configured %}(email service is not configured on the server){% endif %}.
          Our team has been notified. You do not need to register again.
        </span>
      </div>
      {% endif %}

      <div class="success-note info" style="background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.30);color:#bfdbfe;">
        <i class="fas fa-circle-info"></i>
        <span>
          If you did not receive the email, please check your <strong>SPAM / Junk folder</strong>.
          For any issues, contact us at <a href="mailto:nexora.esport.support@gmail.com" style="color:#93c5fd;text-decoration:underline;">nexora.esport.support@gmail.com</a>
          or WhatsApp <a href="https://wa.me/923310314962" target="_blank" style="color:#93c5fd;text-decoration:underline;">+92 331 0314962</a>.
        </span>
      </div>

      <p class="success-next">
        Once your registration/payment is verified, your official ticket will be generated
        and sent to the registered email address(es). Please keep your reference
        <strong>{{ details.ref }}</strong> handy.
      </p>

      <div class="success-actions">
        <a class="btn primary" href="{{ url_for('index') }}">Back to Home</a>
      </div>
    </div>
  </div>
</section>
<style>
  .register-success-hero { padding: 48px 0 64px; min-height: 60vh; }
  .success-card {
    max-width: 640px; margin: 0 auto; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10); border-radius: 20px;
    padding: 40px 36px; text-align: center; color: #f1f5f9;
  }
  .success-icon { font-size: 52px; color: #4ade80; margin-bottom: 12px; }
  .success-card h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 32px); font-weight: 800; }
  .success-lede { margin: 0 0 20px; color: #94a3b8; font-size: 15px; }
  .success-status {
    display: inline-flex; flex-direction: column; gap: 6px; align-items: center;
    background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 14px; padding: 14px 22px; margin-bottom: 24px;
  }
  .success-status .status-label {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fbbf24; font-weight: 700;
  }
  .success-status .status-badge {
    font-size: 16px; font-weight: 800; color: #fbbf24; letter-spacing: .04em;
  }
  .success-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; text-align: left; margin-bottom: 20px;
  }
  .success-item {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px; padding: 12px 14px;
  }
  .success-item span {
    display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: #94a3b8; margin-bottom: 4px; font-weight: 600;
  }
  .success-item strong { font-size: 14.5px; overflow-wrap: anywhere; }
  .success-roster {
    text-align: left; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09); border-radius: 12px;
    padding: 14px 18px; margin-bottom: 20px;
  }
  .success-roster strong { display: block; margin-bottom: 6px; font-size: 13px; color: #cbd5e1; }
  .success-roster ol { margin: 0; padding-left: 22px; color: #e2e8f0; font-size: 14px; line-height: 1.9; }
  .success-note {
    display: flex; gap: 12px; align-items: flex-start; text-align: left;
    border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; margin-bottom: 20px;
  }
  .success-note i { font-size: 18px; margin-top: 2px; }
  .success-note.ok { background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.30); color: #bbf7d0; }
  .success-note.ok i { color: #4ade80; }
  .success-note.warn { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.30); color: #fde68a; }
  .success-note.warn i { color: #fbbf24; }
  .success-next { color: #94a3b8; font-size: 13.5px; line-height: 1.7; margin: 0 0 24px; }
  .success-next strong { color: #e2e8f0; }
  .success-actions .btn.primary {
    display: inline-block; padding: 12px 28px; border-radius: 12px; font-weight: 700;
    background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; text-decoration: none;
  }
  @media (max-width: 560px) {
    .success-card { padding: 28px 18px; }
    .success-grid { grid-template-columns: 1fr; }
  }
</style>
{% endblock %}
