{% extends "cms/base.html" %}
{% block title %}Ticket Sales{% endblock %}
{% block page_title %}Ticket Sales{% endblock %}
{% block extra_head %}
<style>
  .vv-kpis { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-bottom:1.25rem; }
  .vv-kpi { background:#fff;border:1px solid var(--cms-border);border-radius:12px;padding:.9rem 1rem; }
  .vv-kpi .lab { font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cms-muted); }
  .vv-kpi .val { font-size:1.3rem;font-weight:800;margin-top:.25rem; }
  .vv-sub { font-size:.75rem;color:var(--cms-muted);margin-top:2px; }
  .vv-neg { color:#b91c1c; }
</style>
{% endblock %}
{% block cms_content %}
<div class="vv-kpis">
  <div class="vv-kpi"><div class="lab">Revenue</div><div class="val">{{ revenue|floatformat:0 }}</div></div>
  <div class="vv-kpi"><div class="lab">Box Office Charges</div><div class="val">{{ charges|floatformat:0 }}</div></div>
  <div class="vv-kpi"><div class="lab">Net to Promoter</div><div class="val">{{ net|floatformat:0 }}</div></div>
  <div class="vv-kpi"><div class="lab">Tickets Sold</div><div class="val">{{ sold }}</div></div>
</div>

<div class="cms-card" style="padding:0;overflow:hidden">
  <table class="cms-table" style="width:100%">
    <thead><tr>
      <th style="text-align:left">Event</th><th>Date</th><th>Sold</th><th>Revenue</th><th style="text-align:right">P&amp;L</th>
    </tr></thead>
    <tbody>
      {% for r in rows %}
      <tr>
        <td style="text-align:left">
          <a href="{% url 'cms_veventa_event' r.obj.pk %}" style="text-decoration:none;font-weight:600">{{ r.obj.name }}</a>
          <div class="vv-sub">{{ r.obj.venue.name|default:"—" }}</div>
        </td>
        <td>{% if r.obj.date_jalali %}{{ r.obj.date_jalali }}{% else %}{{ r.obj.date|date:"d M Y" }}{% endif %}</td>
        <td>{{ r.sold }}<div class="vv-sub">{{ r.alloc }}</div></td>
        <td>{{ r.revenue|floatformat:0 }}</td>
        <td style="text-align:right">{% if r.pl < 0 %}<span class="vv-neg">{{ r.pl|floatformat:0 }}</span>{% else %}{{ r.pl|floatformat:0 }}{% endif %}</td>
      </tr>
      {% empty %}
      <tr><td colspan="5" style="padding:2rem;text-align:center;color:var(--cms-muted)">No delivered events yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}