{% extends "admin_base.html" %}
{% block title %}Prize Pool | Nexora Admin{% endblock %}
{% block content %}
<div class="admin-head">
  <p class="eyebrow">Homepage Banner</p>
  <h1>Prize Pool</h1>
  <p>Manage banner text and individual prize items. Each prize item has its own image, title, amount, and note.</p>
</div>

<section class="admin-panel prize-admin-panel">
  <div class="prize-admin-grid">
    {% if can('prize_pool_update') %}
    <form method="post" enctype="multipart/form-data" class="admin-form stacked prize-admin-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <h3 style="margin-bottom:14px;"><i class="fas fa-image"></i> Banner Settings</h3>
      <label>Banner Title
        <input name="prize_pool_title" value="{{ settings.prize_pool_title }}" placeholder="Victory Feels Bigger Here">
      </label>
      <label>Prize Pool Amount / Main Text
        <input name="prize_pool_amount" value="{{ settings.prize_pool_amount }}" placeholder="Rs. 50,000 Prize Pool">
      </label>
      <label>Banner Note
        <textarea name="prize_pool_note" rows="3" placeholder="Short professional line for players">{{ settings.prize_pool_note }}</textarea>
      </label>
      <button class="btn primary" type="submit"><i class="fas fa-floppy-disk"></i> Save Banner</button>
    </form>
    {% endif %}

    <aside class="prize-admin-preview">
      <p class="eyebrow on-dark"><i class="fas fa-gem"></i> Live Preview</p>
      <div class="prize-admin-preview-card">
        <div class="preview-copy">
          <h2>{{ settings.prize_pool_title or 'Victory Feels Bigger Here' }}</h2>
          <strong class="prize-amount">{{ settings.prize_pool_amount or 'Prize Pool Announced Soon' }}</strong>
          <p>{{ settings.prize_pool_note or '' }}</p>
        </div>
      </div>
    </aside>
  </div>
</section>

<section class="admin-panel" style="margin-top:24px;">
  <h3 style="margin-bottom:18px;"><i class="fas fa-trophy"></i> Prize Items (Image + Text)</h3>
  <p style="color:#64748b;margin-bottom:18px;font-size:14px;">Add multiple prize items. The homepage shows two cards together and smoothly rotates to the next pair.</p>

  {% if can('prize_items_create') %}
  <form method="post" action="{{ url_for('add_prize_item') }}" enctype="multipart/form-data" class="admin-form stacked" style="max-width:500px;margin-bottom:28px;">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <label>Title
      <input name="title" required placeholder="e.g. Winner Trophy">
    </label>
    <label>Amount
      <input name="amount" placeholder="e.g. Rs. 20,000">
    </label>
    <label>Note
      <input name="note" placeholder="e.g. Champion-level recognition">
    </label>
    <label>Image
      <input type="file" name="image" accept="image/*">
    </label>
    <label style="display:flex;align-items:center;gap:8px;">
      <input type="checkbox" name="active" checked style="width:auto;"> Active
    </label>
    <button class="btn primary" type="submit"><i class="fas fa-plus"></i> Add Prize Item</button>
  </form>
  {% endif %}

  {% if prize_items %}
  <div class="admin-card-grid">
    {% for item in prize_items %}
    <div class="mini-admin-card" style="position:relative;">
      {% set pp_img = img(item.image) if item.image else '' %}
      {% if pp_img %}
      <img src="{{ url_for('serve_media', filename=pp_img) }}" alt="{{ item.title }}" style="width:100%;height:160px;object-fit:cover;border-radius:10px;margin-bottom:10px;">
      {% else %}
      <div style="width:100%;height:120px;background:#1e293b;border-radius:10px;display:grid;place-items:center;margin-bottom:10px;color:#64748b;"><i class="fas fa-image" style="font-size:28px;"></i></div>
      {% endif %}
      <strong style="font-size:15px;color:#111827;">{{ item.title }}</strong>
      {% if item.amount %}<span style="color:#d97706;font-weight:700;font-size:14px;">{{ item.amount }}</span>{% endif %}
      {% if item.note %}<p style="font-size:12.5px;color:#64748b;margin:4px 0 0;">{{ item.note }}</p>{% endif %}
      <div style="display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;">
        <span class="badge {{ 'green' if item.active else 'red' }}">{{ 'Active' if item.active else 'Hidden' }}</span>
        {% if can('prize_items_update') or can('prize_items_delete') %}
        <form method="post" action="{{ url_for('toggle_prize_item', item_id=item.id) }}" style="display:inline;">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="btn tiny-btn" type="submit" title="Toggle visibility"><i class="fas fa-eye{{ '-slash' if not item.active }}"></i></button>
        </form>
        <form method="post" action="{{ url_for('delete_prize_item', item_id=item.id) }}" onsubmit="return confirm('Delete this prize item?');" style="display:inline;">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="btn tiny-btn danger" type="submit" title="Delete"><i class="fas fa-trash"></i></button>
        </form>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty" style="padding:32px;text-align:center;color:#94a3b8;">
    <i class="fas fa-trophy" style="font-size:32px;margin-bottom:10px;display:block;"></i>
    No prize items yet. Add your first prize item above.
  </div>
  {% endif %}
</section>
{% endblock %}