{% extends "base.html" %}
{% block title %}Registration | {{ settings.event_title }}{% endblock %}
{% block content %}

{% if closed %}
<section class="section">
  <div class="wrap">
    <div class="closed-box">
      <div class="icon-badge"><i class="fas fa-lock"></i></div>
      <h2>Registrations Closed</h2>
      <p>Registration is currently closed by the admin. Please check back later for updates.</p>
      <div style="margin-top:20px;"><a class="btn outline" href="{{ url_for('index') }}">Back to Home</a></div>
    </div>
  </div>
</section>

{% else %}

{% if selected_game %}
<header class="reg-hero">
  <div class="reg-hero-bg"></div>
  <div class="wrap reg-hero-inner">
    <div class="reg-hero-content">
      <p class="eyebrow on-dark">Registering For</p>
      <h1>{{ selected_game.title }}</h1>
      <div class="reg-hero-tags">
        <span><i class="fas fa-desktop"></i> {{ selected_game.platform }}</span>
        {% set sg_min = selected_game.min_members|int if selected_game.min_members is defined else 1 %}
        {% set sg_max = selected_game.max_members|int if selected_game.max_members is defined else 1 %}
        {% set sg_disc = discount_active(selected_game) %}
        {% if sg_min == 1 and sg_max == 1 %}
          {% if selected_game.individual_price and sg_min <= 1 %}
          {% set p = price_view(selected_game, 1) %}
          <span class="reg-price-tag"><i class="fas fa-user"></i> Solo:
            <strong class="price-now">{{ p.current }}</strong>
            {% if p.strike %}<del class="price-was">{{ p.original }}</del>{% endif %}
          </span>
          {% endif %}
        {% else %}
          <span><i class="fas fa-users"></i> {{ sg_min }}–{{ sg_max }} Players</span>
          {% for size, label in [(1, 'Solo'), (2, '2P'), (3, '3P'), (4, '4P')] %}
          {% set p = price_view(selected_game, size) %}
          {% if p and (size == 1 and sg_min <= 1 or size > 1) %}
          <span class="reg-price-tag"><i class="fas fa-{{ 'user' if size == 1 else 'users' }}"></i> {{ label }}:
            <strong class="price-now">{{ p.current }}</strong>
            {% if p.strike %}<del class="price-was">{{ p.original }}</del>{% endif %}
          </span>
          {% endif %}
          {% endfor %}
        {% endif %}
        {% if sg_disc %}
        <span><i class="fas fa-percent"></i> {{ discount_label_text(selected_game) }}</span>
        {% endif %}
      </div>
    </div>
    {% set rg_img = img(selected_game.image) if selected_game.image else '' %}
    {% if rg_img %}
    <div class="reg-hero-poster">
      <img src="{{ url_for('serve_media', filename=rg_img) }}" alt="Game Poster" loading="eager" decoding="async" fetchpriority="high">
    </div>
    {% endif %}
  </div>
</header>

{% else %}
<section class="page-head center">
  <div class="wrap reveal">
    <p class="eyebrow">Registration</p>
    <h1>Book Your Nexora Pass</h1>
    <p class="lead">Choose your game first, then complete the registration form. A payment proof screenshot is required.
    </p>
  </div>
</section>

{% if games %}
<section class="section tight">
  <div class="wrap">
    <div class="game-grid reveal" data-stagger>
      {% for game in games %}
      {% set open_now, state_label = game_status(game, settings.registration_open) %}
      {% if open_now %}
      <a class="game-card" href="{{ url_for('register', game=game.id) }}#reg-form">
        {% else %}
        <div class="game-card is-closed">
          {% endif %}
          {% set rgi = img(game.image) if game.image else '' %}
          <div class="game-image {% if not rgi %}game-fallback{% endif %}" {% if rgi
            %}style="background-image:url('{{ url_for('serve_media', filename=rgi) }}')" {% endif %}>
            <span class="platform-pill">{{ game.platform }}</span>
            <span
              class="status-pill {% if open_now %}open{% elif state_label == 'Opens Soon' %}soon{% else %}closed{% endif %}">{{
              state_label }}</span>
          </div>
          <div class="game-body">
            <h3>{{ game.title }}</h3>
            {% if game.reg_to and open_now %}
            <p class="window-note"><i class="fas fa-hourglass-half"></i> Closes {{ game.reg_to | pretty_dt }}</p>
            {% elif game.reg_from and state_label == 'Opens Soon' %}
            <p class="window-note"><i class="fas fa-calendar-day"></i> Opens {{ game.reg_from | pretty_dt }}</p>
            {% endif %}
            {% set has_disc = discount_active(game) %}
            {% if has_disc %}
            <span class="discount-chip"><i class="fas fa-percent"></i> {{ discount_label_text(game) }}</span>
            {% endif %}
            <div class="price-chips">
              {% set gm_min = game.min_members|int if game.min_members is defined else 1 %}
              {% set gm_max = game.max_members|int if game.max_members is defined else 1 %}
              {% if gm_min == 1 and gm_max == 1 %}
                {% if game.individual_price %}
                {% set p = price_view(game, 1) %}
                <p class="price-line"><small>Solo</small>
                  <strong class="price-now">{{ p.current }}</strong>
                  {% if p.strike %}<del class="price-was">{{ p.original }}</del>{% endif %}
                </p>
                {% endif %}
              {% else %}
                {% for size, label in [(1, '1 Player'), (2, '2 Players'), (3, '3 Players'), (4, '4 Players')] %}
                {% set p = price_view(game, size) %}
                {% if p and (size == 1 and gm_min <= 1 or size > 1 and gm_max >= size) %}
                <p class="price-line"><small>{{ label }}</small>
                  <strong class="price-now">{{ p.current }}</strong>
                  {% if p.strike %}<del class="price-was">{{ p.original }}</del>{% endif %}
                </p>
                {% endif %}
                {% endfor %}
              {% endif %}
            </div>
            {% if open_now %}
            <span class="card-cta">Select <i class="fas fa-arrow-right"></i></span>
            {% else %}
            <span class="card-cta"><i class="fas fa-lock"></i> {{ state_label }}</span>
            {% endif %}
          </div>
          {% if open_now %}
      </a>
      {% else %}
    </div>
    {% endif %}
    {% endfor %}
  </div>
  </div>
</section>
{% endif %}
{% endif %}

{% if selected_game %}
<section class="section" id="reg-form">
  <div class="wrap">
    <div class="register-container">

      <div class="register-process">
        <div class="process-card">
          <span>01</span>
          <strong>Choose Entry</strong>
          <p>Select the available individual or group option.</p>
        </div>
        <div class="process-card">
          <span>02</span>
          <strong>Payment Pending</strong>
          <p>Upload your payment proof for admin review.</p>
        </div>
        <div class="process-card">
          <span>03</span>
          <strong>Admin Approval</strong>
          <p>Your confirmed ticket is sent after verification.</p>
        </div>
      </div>

      <div class="register-layout">
        <aside class="register-side">
          <div class="notice-box amber">
            <i class="fas fa-circle-info"></i>
            <div>
              <strong>What happens after submission?</strong>
              <p>You will receive a <strong>Pending Approval</strong> email. The admin will verify your proof, then send the confirmed ticket.</p>
            </div>
          </div>

          <div class="payment-highlight">
            <strong><i class="fas fa-wallet"></i> Payment Account Details</strong>
            <div class="payment-detail-list">
              <p><span>Bank Name:</span><strong>{{ settings.payment_bank_name or '-' }}</strong></p>
              <p><span>Account Title:</span><strong>{{ settings.payment_account_title or '-' }}</strong></p>
              <p><span>IBAN Number:</span><strong>{{ settings.payment_iban or '-' }}</strong></p>
              <p><span>Account Number:</span><strong>{{ settings.payment_account_number or '-' }}</strong></p>
              <p><span>Bank Branch:</span><strong>{{ settings.payment_bank_branch or '-' }}</strong></p>
            </div>
            {% set rq_img = img(settings.payment_qr_image) if settings.payment_qr_image else '' %}
            {% if rq_img %}
            <div class="payment-qr-box">
              <img src="{{ url_for('serve_media', filename=rq_img) }}" alt="Payment QR code">
            </div>
            {% endif %}
            {% if settings.bank_account %}
            <p class="account">{{ settings.bank_account }}</p>
            {% endif %}
            <small>{{ settings.payment_note }}</small>
          </div>
        </aside>

        <div class="register-form-panel">

      {% if not open_games %}
      <div class="empty" style="margin-bottom:20px;"><i class="fas fa-lock"></i>No game registration window is open right now. Please check again later.</div>
      {% endif %}

      <form class="register-form" method="post" enctype="multipart/form-data" data-registration-form>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="submission_key" data-submission-key>
        <div class="submit-overlay" data-submit-overlay aria-hidden="true">
          <div class="submit-overlay-card">
            <span class="submit-spinner"></span>
            <strong>Processing Your Registration</strong>
            <p>Please wait while we create your ticket and notify the admin.</p>
          </div>
        </div>

        <div class="form-section">
          <h3 class="form-title"><span class="step-dot">1</span> Player Details</h3>
          <div class="form-grid">
            <label>Full Name<input name="full_name" placeholder="Enter your full name" required></label>
            <label>Email<input type="email" name="email" placeholder="example@email.com" required></label>
            <label>Mobile Number<input name="phone" placeholder="03xx-xxxxxxx" required></label>
            <label>CNIC<input name="cnic" placeholder="xxxxx-xxxxxxx-x" required></label>
            <label>Institution Type
              <select name="institution_type" data-institution-type required>
                <option value="University">University</option>
                <option value="College">College</option>
                <option value="School">School</option>
                <option value="Academy">Academy / Institute</option>
                <option value="Open">Open / Not a student</option>
              </select>
            </label>
            <label><span data-institution-label>University Name</span>
              <input name="university" data-institution-name placeholder="Enter your university name" required></label>
            <label class="full">Roll No. / Student ID <span class="field-hint">(optional)</span>
              <input name="roll_no" placeholder="Roll number"></label>
          </div>
        </div>

        <div class="form-section">
          <h3 class="form-title"><span class="step-dot">2</span> Game &amp; Players</h3>
          <div class="form-grid">
            {% if selected_game %}
            <select name="game_id" data-game-select required hidden>
              <option value="{{ selected_game.id }}"
                data-prices="{{ price_map(selected_game) | tojson | forceescape }}"
                data-min="{{ selected_game.min_members if selected_game.min_members is defined else 1 }}"
                data-max="{{ selected_game.max_members if selected_game.max_members is defined else 1 }}"
                selected>{{ selected_game.title }} — {{ selected_game.platform }}</option>
            </select>
            {% else %}
            <label>Select Game
              <select name="game_id" data-game-select required>
                <option value="" disabled {% if not selected_game %}selected{% endif %}>— Choose a game —</option>
                {% for game in open_games %}
                <option value="{{ game.id }}"
                  data-prices="{{ price_map(game) | tojson | forceescape }}"
                  data-min="{{ game.min_members if game.min_members is defined else 1 }}"
                  data-max="{{ game.max_members if game.max_members is defined else 1 }}"
                  {% if selected_game and selected_game.id==game.id %}selected{% endif %}>
                  {{ game.title }} — {{ game.platform }}
                </option>
                {% endfor %}
              </select>
            </label>
            {% endif %}
            <input type="hidden" name="entry_type" value="individual" data-entry-type>
            <label>Team Name / Nick Name<input name="team_name" placeholder="e.g. Phoenix Rising or your in-game nick" required></label>
            <label class="full" data-team-size-wrap>Players
              <select name="team_size" data-team-size required>
                {% if selected_game %}
                  {% set sg_min = selected_game.min_members|int if selected_game.min_members is defined else 1 %}
                  {% set sg_max = selected_game.max_members|int if selected_game.max_members is defined else 1 %}
                  {% if sg_min <= 1 and sg_max <= 1 %}
                <option value="1" selected>1 Player</option>
                  {% elif sg_min <= 1 and selected_game.individual_price %}
                <option value="" disabled selected>Select number of players</option>
                <option value="1">1 Player</option>
                    {% for size in range(2, sg_max + 1) %}
                      {% set has_price = price_view(selected_game, size) %}
                      {% if has_price %}
                <option value="{{ size }}">{{ size }} Players</option>
                      {% endif %}
                    {% endfor %}
                  {% else %}
                <option value="" disabled selected>Select number of players</option>
                    {% for size in range(sg_min, sg_max + 1) %}
                      {% set has_price = price_view(selected_game, size) %}
                      {% if has_price %}
                <option value="{{ size }}">{{ size }} Players</option>
                      {% endif %}
                    {% endfor %}
                  {% endif %}
                {% else %}
                <option value="" disabled selected>Select number of players</option>
                {% endif %}
              </select>
              <span class="field-hint" data-game-limits>{% if selected_game and selected_game.max_members is defined and (selected_game.max_members|int) > 1 %}{% if (selected_game.min_members|int) > 1 %}Minimum {{ selected_game.min_members }} players required. {% endif %}Maximum {{ selected_game.max_members }} players allowed.{% endif %}</span>
            </label>
            <div class="full price-preview-wrap">
              <span>Your Entry Fee</span>
              <div class="price-preview" data-price-out>
                {% if selected_game %}
                  {% set sg_min = selected_game.min_members|int if selected_game.min_members is defined else 1 %}
                  {% set sg_max = selected_game.max_members|int if selected_game.max_members is defined else 1 %}
                  {% if sg_min <= 1 and sg_max <= 1 %}
                    {% set init_p = price_view(selected_game, 1) %}
                  {% elif sg_min <= 1 and selected_game.individual_price %}
                    {% set init_p = price_view(selected_game, 1) %}
                  {% else %}
                    {% set init_p = price_view(selected_game, sg_min) %}
                  {% endif %}
                  {% if init_p %}
                    <strong class="price-now">{{ init_p.current }}</strong>
                    {% if init_p.strike %}<del class="price-was">{{ init_p.original }}</del>{% endif %}
                  {% else %}—{% endif %}
                {% else %}
                  —
                {% endif %}
              </div>
            </div>
          </div>
        </div>

        <div class="team-fields" data-team-fields>
          <div class="form-section">
            <h3 class="form-title"><span class="step-dot">3</span> Team Information</h3>
            <div class="form-grid">
              <label>Leader Name<input name="leader_name" placeholder="Team leader name" data-team-required></label>
            </div>
            <div class="member-list-builder" data-member-list>
            </div>
          </div>
        </div>

        <div class="form-section">
          <h3 class="form-title"><span class="step-dot">4</span> Payment Proof</h3>
          {% set full_discount = discount_pct_value(selected_game) >= 100 %}
          <div class="form-grid">
            <label class="full">Proof Screenshot <span class="field-hint">{% if full_discount %}(not required — 100% discount){% else %}(required - any format, max 30 KB recommended){% endif %}</span>
              <input type="file" name="proof_image" accept="image/*"{% if not full_discount %} required{% endif %}>
            </label>
          </div>
        </div>

        <div class="register-submit-footer">
          <button class="btn primary submit-btn" type="submit">
            <span data-btn-label>Submit Registration</span><span class="loader"></span>
          </button>
          <p style="margin-top:14px;font-size:12.5px;color:#94a3b8;text-align:center;line-height:1.6;">
            <i class="fas fa-envelope" style="margin-right:4px;"></i>
            You will receive a confirmation email after registration.
            Please check your <strong>SPAM / Junk folder</strong> if you do not see it.
            For any issues, contact <a href="mailto:nexora.esport.support@gmail.com" style="color:#93c5fd;text-decoration:underline;">nexora.esport.support@gmail.com</a>
            or WhatsApp us at <a href="https://wa.me/923310314962" target="_blank" style="color:#93c5fd;text-decoration:underline;">+92 331 0314962</a>
          </p>
        </div>
      </form>
      </div>
      </div>

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