{% extends "pretixcontrol/event/base.html" %}
{% load i18n %}
{% block title %}{% trans "Live capacity" %}{% endblock %}

{% block content %}
<h1>{% trans "Live capacity" %}
  <small class="text-muted" id="fc-cap-generated" data-ts="{{ snapshot.generated }}"></small>
</h1>
<p class="text-muted">
  {% blocktrans %}Real-time headcount currently inside, per check-in list (zone), from entry and exit scans. Re-entry aware. Numbers refresh automatically every 10&nbsp;seconds.{% endblocktrans %}
</p>

{# ---- Event-level summary ---------------------------------------------- #}
<div class="panel panel-default">
  <div class="panel-body">
    <div class="row" style="text-align:center;">
      <div class="col-xs-4">
        <div style="font-size:2.4em;font-weight:700;line-height:1;" id="fc-total-inside">{{ snapshot.total_inside }}</div>
        <div class="text-muted">{% trans "Inside now" %}</div>
      </div>
      <div class="col-xs-4">
        <div style="font-size:2.4em;font-weight:700;line-height:1;" id="fc-total-entries">{{ snapshot.total_entries }}</div>
        <div class="text-muted">{% trans "Entries" %}</div>
      </div>
      <div class="col-xs-4">
        <div style="font-size:2.4em;font-weight:700;line-height:1;" id="fc-scans-today">{{ snapshot.scans_today }}</div>
        <div class="text-muted">{% trans "Scans today" %}</div>
      </div>
    </div>
    {% if snapshot.target %}
    <div style="margin-top:1.2em;">
      <div class="text-muted" style="margin-bottom:.3em;">
        {% blocktrans with target=snapshot.target %}Against a target capacity of {{ target }}{% endblocktrans %}
        — <strong id="fc-pct-full">{{ snapshot.pct_full }}</strong>% {% trans "full" %}
      </div>
      <div class="progress" style="margin-bottom:0;">
        <div class="progress-bar" id="fc-pct-bar" role="progressbar"
             style="width:{% if snapshot.pct_full > 100 %}100{% else %}{{ snapshot.pct_full }}{% endif %}%;">
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>

{# ---- Per-list (zone) cards -------------------------------------------- #}
{% if snapshot.lists %}
<div class="row" id="fc-cap-grid">
  {% for row in snapshot.lists %}
  <div class="col-sm-6 col-md-4" style="margin-bottom:1.2em;">
    <div class="panel panel-default" style="margin-bottom:0;">
      <div class="panel-heading"><strong>{{ row.list_name }}</strong></div>
      <div class="panel-body" style="text-align:center;">
        <div style="font-size:3em;font-weight:700;line-height:1;"
             data-fc-inside="{{ row.list_id }}">{{ row.inside }}</div>
        <div class="text-muted" style="text-transform:uppercase;letter-spacing:.05em;">{% trans "inside" %}</div>
        <div class="text-muted" style="margin-top:.6em;">
          <span data-fc-entries="{{ row.list_id }}">{{ row.entries }}</span> {% trans "in" %}
          ·
          <span data-fc-exits="{{ row.list_id }}">{{ row.exits }}</span> {% trans "out" %}
        </div>
        {% if row.capacity %}
        <div class="progress" style="margin-top:.8em;margin-bottom:0;">
          <div class="progress-bar" role="progressbar"
               data-fc-bar="{{ row.list_id }}"
               style="width:{{ row.pct }}%;">{{ row.pct }}%</div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="alert alert-info">
  {% blocktrans %}No check-in lists exist for this event yet. Create a check-in list and start scanning tickets — occupancy will appear here live.{% endblocktrans %}
</div>
{% endif %}

<script type="text/javascript">
(function () {
    "use strict";
    var URL = "?json=1";

    function setText(el, val) {
        if (el && val !== undefined && val !== null) { el.textContent = val; }
    }

    function refresh() {
        fetch(URL, {headers: {"X-Requested-With": "XMLHttpRequest"}})
            .then(function (r) { return r.json(); })
            .then(function (data) {
                try {
                    setText(document.getElementById("fc-total-inside"), data.total_inside);
                    setText(document.getElementById("fc-total-entries"), data.total_entries);
                    setText(document.getElementById("fc-scans-today"), data.scans_today);

                    if (data.target) {
                        setText(document.getElementById("fc-pct-full"), data.pct_full);
                        var bar = document.getElementById("fc-pct-bar");
                        if (bar) {
                            var w = data.pct_full > 100 ? 100 : data.pct_full;
                            bar.style.width = (w || 0) + "%";
                        }
                    }

                    (data.lists || []).forEach(function (row) {
                        var id = row.list_id;
                        setText(document.querySelector('[data-fc-inside="' + id + '"]'), row.inside);
                        setText(document.querySelector('[data-fc-entries="' + id + '"]'), row.entries);
                        setText(document.querySelector('[data-fc-exits="' + id + '"]'), row.exits);
                        if (row.capacity) {
                            var b = document.querySelector('[data-fc-bar="' + id + '"]');
                            if (b) { b.style.width = (row.pct || 0) + "%"; b.textContent = (row.pct || 0) + "%"; }
                        }
                    });

                    var g = document.getElementById("fc-cap-generated");
                    if (g && data.generated) { g.textContent = ""; }
                } catch (e) { /* never let a bad frame break the loop */ }
            })
            .catch(function () { /* transient network error — try again next tick */ });
    }

    setInterval(refresh, 10000);
})();
</script>
{% endblock %}