<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ details.ticket_number }} | Nexora Ticket</title>
  <style>
    @page {
      size: A4;
      margin: 14mm;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      color: #172033;
      background: #eef1f6;
      font: 15px Arial, Helvetica, sans-serif;
    }

    .ticket {
      max-width: 820px;
      margin: 24px auto;
      padding: 30px;
      background: #fff;
      border: 1px solid #d7dee9;
    }

    .top {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: 20px;
      border-bottom: 4px solid #86192a;
    }

    h1 {
      margin: 0 0 6px;
      font-size: 26px;
    }

    h2 {
      font-size: 16px;
      margin: 0 0 10px;
      color: #86192a;
    }

    p {
      margin: 4px 0;
    }

    .muted {
      color: #5e687a;
    }

    .serial {
      font: 700 18px Arial, sans-serif;
      overflow-wrap: anywhere;
    }

    .qr {
      width: 132px;
      height: 132px;
      object-fit: contain;
      image-rendering: auto;
      flex: 0 0 auto;
    }

    .status {
      display: inline-block;
      margin-top: 10px;
      padding: 6px 9px;
      border-radius: 4px;
      font-weight: 700;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin-top: 24px;
    }

    .box {
      border: 1px solid #d7dee9;
      padding: 14px;
      break-inside: avoid;
    }

    .box.full {
      grid-column: 1 / -1;
    }

    dt {
      font-size: 11px;
      font-weight: 700;
      color: #687386;
      text-transform: uppercase;
    }

    dd {
      margin: 3px 0 12px;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    ol {
      margin: 6px 0 0 20px;
      padding: 0;
    }

    li {
      margin: 5px 0;
      overflow-wrap: anywhere;
    }

    .print {
      margin: 18px auto;
      display: block;
      padding: 10px 16px;
      border: 0;
      color: #fff;
      background: #86192a;
      font-weight: 700;
      cursor: pointer;
    }

    @media (max-width: 560px) {
      .ticket {
        margin: 0;
        padding: 18px;
      }

      .top,
      .grid {
        display: block;
      }

      .qr {
        margin-top: 18px;
      }

      .box {
        margin-top: 14px;
      }
    }

    @media print {
      body {
        background: #fff;
      }

      .ticket {
        margin: 0;
        border: 0;
        padding: 0;
      }

      .print {
        display: none;
      }
    }
  </style>
</head>

<body>
  <button class="print" onclick="window.print()">Print Ticket</button>

  {% if details.entry_type|lower == 'group' %}
  <main class="ticket">
    <header class="top">
      <div>
        <h1>Nexora Esports Championship</h1>
        <p class="muted">Official Registration Ticket</p>
        <p class="serial">{{ details.ticket_number }}</p>
        <span class="status"
          style="background-color: {% if details.payment_status|lower == 'paid' %}#d9f8e5{% elif details.payment_status|lower == 'under verification' %}#fff0b8{% else %}#fff0cc{% endif %}">{{
          details.payment_status|replace('_', ' ')|title }}{% if details.payment_status|lower ==
          'paid' %} - Confirmed{% elif details.payment_status|lower == 'under verification' %} - Awaiting Admin
          Decision{% else %} - Not Valid for Entry{% endif %}</span>
      </div>
    </header>
    <div class="grid">
      <section class="box">
        <h2>Registration Information</h2>
        <dl>
          <dt>Event / Game</dt>
          <dd>{{ details.game }} · {{ details.platform }}</dd>
          <dt>Registration Type</dt>
          <dd>{{ details.entry_type }}</dd>
          <dt>Ticket Issue Date</dt>
          <dd>{{ details.ticket_issued_at }}</dd>
        </dl>
      </section>
      <section class="box">
        <h2>Team Details</h2>
        <dl>
          <dt>Team Name</dt>
          <dd>{{ details.team_name }}</dd>
          <dt>Group Leader</dt>
          <dd>{{ details.leader_name }}</dd>
          <dt>Total Members</dt>
          <dd>{{ details.member_count }}</dd>
        </dl>
      </section>
      <section class="box full">
        <h2>Payment Information</h2>
        <dl>
          <dt>Amount Paid</dt>
          <dd>{{ details.amount_paid }}</dd>
          <dt>Remaining Amount</dt>
          <dd>{{ details.remaining_amount }}</dd>
          <dt>Transaction ID</dt>
          <dd>{{ details.transaction_reference }}</dd>
        </dl>
      </section>
    </div>
    <h2 style="margin:20px 0 10px;color:#86192a;">Team Roster - Each Member Scans Their Own QR</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;">
      {% for member in member_qrs %}
      <div style="border:1px solid #d7dee9;border-radius:8px;padding:16px;text-align:center;break-inside:avoid;">
        <div style="font-size:11px;font-weight:700;color:#86192a;margin-bottom:4px;">{{ 'LEADER' if loop.first else 'MEMBER ' ~ loop.index }}</div>
        <img src="{{ url_for('member_qr_png', ticket_id=member['token'].split(':')[-1]) }}" style="width:110px;height:110px;object-fit:contain;" alt="{{ member.name }} QR">
        <div style="margin-top:8px;">
          <div style="font-weight:700;font-size:14px;">{{ member.name }}</div>
          <div style="font-size:12px;color:#5e687a;">{{ member.email }}</div>
          <div style="font-size:12px;color:#5e687a;">{{ member.phone }}</div>
          <div style="font-size:12px;color:#5e687a;margin-top:4px;">Ticket ID: {{ member.ticket_id }}</div>
          <div style="font-size:12px;color:#5e687a;">Ticket: {{ member.ticket_serial }}</div>
        </div>
      </div>
      {% endfor %}
    </div>
  </main>
  {% else %}
  <main class="ticket">
    <header class="top">
      <div>
        <h1>Nexora Esports Championship</h1>
        <p class="muted">Official Registration Ticket</p>
        <p class="serial">{{ details.ticket_number }}</p>
        <span class="status"
          style="background-color: {% if details.payment_status|lower == 'paid' %}#d9f8e5{% elif details.payment_status|lower == 'under verification' %}#fff0b8{% else %}#fff0cc{% endif %}">{{
          details.payment_status|replace('_', ' ')|title }}{% if details.payment_status|lower ==
          'paid' %} - Confirmed{% elif details.payment_status|lower == 'under verification' %} - Awaiting Admin
          Decision{% else %} - Not Valid for Entry{% endif %}</span>
      </div>
      <img class="qr" src="{{ url_for('registration_qr_png', reg_id=reg_id) }}" alt="Scannable ticket QR code">
    </header>
    <div class="grid">
      <section class="box">
        <h2>Registration Information</h2>
        <dl>
          <dt>Event / Game</dt>
          <dd>{{ details.game }} · {{ details.platform }}</dd>
          <dt>Registration Type</dt>
          <dd>{{ details.entry_type }}</dd>
          <dt>Registration Date</dt>
          <dd>{{ details.created_at }}</dd>
          <dt>Ticket Issue Date</dt>
          <dd>{{ details.ticket_issued_at }}</dd>
        </dl>
      </section>
      <section class="box">
        <h2>Player Details</h2>
        <dl>
          <dt>Player Name</dt>
          <dd>{{ details.name }}</dd>
          <dt>Email</dt>
          <dd>{{ details.email }}</dd>
          <dt>Phone</dt>
          <dd>{{ details.phone }}</dd>
          <dt>CNIC</dt>
          <dd>{{ details.cnic }}</dd>
        </dl>
      </section>
      <section class="box full">
        <h2>Payment Information</h2>
        <dl>
          <dt>Total Payable</dt>
          <dd>{{ details.total_payable }}</dd>
          <dt>Amount Paid</dt>
          <dd>{{ details.amount_paid }}</dd>
          <dt>Remaining Amount</dt>
          <dd>{{ details.remaining_amount }}</dd>
          <dt>Transaction / Reference ID</dt>
          <dd>{{ details.transaction_reference }}</dd>
        </dl>
      </section>
    </div>
  </main>
  {% endif %}
  <div style="max-width:820px;margin:12px auto;padding:12px;text-align:center;font-size:12px;color:#687386;border-top:1px solid #d7dee9;">
    Need help? Email: <a href="mailto:nexora.esport.support@gmail.com" style="color:#86192a;">nexora.esport.support@gmail.com</a>
     | WhatsApp: <a href="https://wa.me/923310314962" target="_blank" style="color:#86192a;">+92 331 0314962</a>
  </div>
</body>

</html>