{% extends "base.html" %}
{% block content %}

<h1>Sales</h1>
<p class="page-subtitle">
    Revenue, voucher count, and individual transactions sourced from the
    vouchers table. Filter by range and source, then export the current
    view as CSV for accounting.
</p>

<div class="page-actions">
    <a href="/sales/export.csv?range={{ range_filter }}&source={{ source_filter }}"
       class="btn-primary">↓ Download CSV</a>
</div>

{# Top summary stats — 2 cols on mobile portrait, auto-fit on desktop #}
<div class="stat-grid">
    <div class="stat-card good">
        <div class="label">Total Sales</div>
        <div class="value">₱{{ summary.total_pesos }}</div>
        <div class="hint">{{ summary.count }} voucher{{ '' if summary.count == 1 else 's' }}</div>
    </div>
    <div class="stat-card accent">
        <div class="label">Minutes Granted</div>
        <div class="value">{{ summary.total_minutes }}</div>
        <div class="hint">≈ {{ summary.total_minutes | duration }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Avg per Voucher</div>
        <div class="value">₱{{ summary.avg_pesos }}</div>
        <div class="hint">over {{ summary.count }} sale{{ '' if summary.count == 1 else 's' }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Viewing</div>
        <div class="value">
            {% if range_filter == 'today' %}Today
            {% elif range_filter == '7d' %}7 days
            {% elif range_filter == '30d' %}30 days
            {% else %}All time{% endif %}
        </div>
        <div class="hint">source: {{ source_filter }}</div>
    </div>
</div>

<section>
    <h2>Date Range</h2>
    <div class="chip-row">
        {% set ranges = [('today', 'Today'), ('7d', 'Last 7 days'), ('30d', 'Last 30 days'), ('all', 'All time')] %}
        {% for slug, label in ranges %}
            <a href="/sales?range={{ slug }}&source={{ source_filter }}"
               class="chip {% if range_filter == slug %}chip-active{% endif %}">{{ label }}</a>
        {% endfor %}
    </div>
</section>

<section>
    <h2>Source</h2>
    <div class="chip-row">
        {% set sources = [('all', 'All'), ('vend', 'Vend'), ('extend', 'Extend'), ('custom', 'Custom')] %}
        {% for slug, label in sources %}
            <a href="/sales?range={{ range_filter }}&source={{ slug }}"
               class="chip {% if source_filter == slug %}chip-active{% endif %}">{{ label }}</a>
        {% endfor %}
    </div>
</section>

<section>
    {% if rows %}
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Code</th>
                        <th>Source</th>
                        <th class="col-hide-mobile">Time</th>
                        <th>Paid</th>
                        <th class="col-hide-mobile">MAC</th>
                    </tr>
                </thead>
                <tbody>
                {% for v in rows %}
                    <tr>
                        <td>{{ v.created }}</td>
                        <td><code>{{ v.code }}</code></td>
                        <td><span class="badge-source">{{ v.source }}</span></td>
                        <td class="col-hide-mobile">{{ v.minutes_total | duration }}</td>
                        <td>₱{{ v.paid_pesos }}</td>
                        <td class="col-hide-mobile">
                            {% if v.mac %}<span class="code">{{ v.mac }}</span>
                            {% else %}<span style="color: var(--muted-2);">—</span>{% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% if row_limit_hit %}
            <p class="form-hint">
                Showing first 200 rows of the current filter. Narrow the range
                or download the CSV to see everything.
            </p>
        {% endif %}
    {% else %}
        <div class="empty-state">
            <strong>No sales in this view.</strong><br>
            Try widening the range or switching source.
        </div>
    {% endif %}
</section>

{% endblock %}