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

<h1>Coin Collection</h1>
<p class="page-subtitle">
    Sales grouped per vendo, and a record of each time you empty a coin box.
</p>

{% if flash_msg %}
    <div class="flash flash-good">{{ flash_msg }}
        <button class="flash-close" aria-label="Close">×</button></div>
{% endif %}
{% if error_msg %}
    <div class="flash flash-error">{{ error_msg }}
        <button class="flash-close" aria-label="Close">×</button></div>
{% endif %}

<div class="stat-grid stat-grid--stack">
    <div class="stat-card good">
        <div class="label">Uncollected</div>
        <div class="value">₱{{ totals.uncollected_coins }}</div>
        <div class="hint">coins waiting in {{ totals.device_count }} box{{ '' if totals.device_count == 1 else 'es' }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Collected all-time</div>
        <div class="value">₱{{ totals.lifetime_coins }}</div>
        <div class="hint">coins through every vendo</div>
    </div>
    <div class="stat-card">
        <div class="label">Custom voucher sales</div>
        <div class="value">₱{{ totals.custom_pesos }}</div>
        <div class="hint">you priced these — not in any coin box</div>
    </div>
</div>

<section>
    <div class="section-head"><h2>Vendos</h2></div>
    <div class="table-scroll">
        <table>
            <thead>
                <tr>
                    <th>Vendo</th>
                    <th style="text-align:right;">In the box now</th>
                    <th class="col-hide-mobile" style="text-align:right;">Sales</th>
                    <th class="col-hide-mobile">Last emptied</th>
                    <th style="text-align:right;">All-time</th>
                    <th style="text-align:right;">Action</th>
                </tr>
            </thead>
            <tbody>
            {% for d in devices %}
                <tr>
                    <td>
                        <strong>{{ d.label }}</strong>
                        {% if d.vlan is not none %}
                            <div style="font-size:11px;color:var(--muted-2);margin-top:2px;">
                                VLAN {{ d.vlan }}{% if d.centralized %} · shared vouchers{% endif %}
                            </div>
                        {% endif %}
                    </td>
                    <td style="text-align:right;">
                        <strong style="font-size:15px;">₱{{ d.uncollected.coins }}</strong>
                        {% if d.uncollected.custom_pesos %}
                            <div style="font-size:11px;color:var(--muted-2);">
                                + ₱{{ d.uncollected.custom_pesos }} custom vouchers
                            </div>
                        {% endif %}
                    </td>
                    <td class="col-hide-mobile" style="text-align:right;">{{ d.uncollected.sales }}</td>
                    <td class="col-hide-mobile">
                        {% if d.last_collection %}
                            {{ d.last_collection.collected_at | localtime }}
                        {% else %}
                            <span style="color:var(--muted-2);">never</span>
                        {% endif %}
                    </td>
                    <td style="text-align:right;">₱{{ d.lifetime.coins }}</td>
                    <td style="text-align:right;">
                        <button type="button" class="btn-sm btn-primary"
                                onclick="openCollect('{{ d.device_key }}', '{{ d.label|e }}', {{ d.uncollected.coins }})">
                            Collect
                        </button>
                    </td>
                </tr>
            {% else %}
                <tr><td colspan="6" style="color:var(--muted-2);">No vendos configured.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <p class="form-hint" style="margin-top:10px;">
        <strong>In the box now</strong> is the coins taken since you last emptied that
        vendo. <strong>Custom vouchers</strong> are listed separately because you set
        their price and collected it yourself — that money is not in the coin box.
        Printed voucher stock carries no price here at all; you record it however you
        sold the card.
    </p>
</section>

<section>
    <div class="section-head"><h2>Collection history</h2></div>
    {% if history %}
    <div class="table-scroll">
        <table>
            <thead>
                <tr>
                    <th>When</th>
                    <th>Vendo</th>
                    <th style="text-align:right;">Expected</th>
                    <th style="text-align:right;">Counted</th>
                    <th style="text-align:right;">Difference</th>
                    <th class="col-hide-mobile">Note</th>
                </tr>
            </thead>
            <tbody>
            {% for h in history %}
                <tr>
                    <td>{{ h.collected_at | localtime }}</td>
                    {# A removed sub-vendo keeps its history, so fall back to the key. #}
                    <td>{{ (labels | default({})).get(h.device_key, h.device_key) }}</td>
                    <td style="text-align:right;">₱{{ h.expected_coins }}</td>
                    <td style="text-align:right;">
                        {% if h.counted_coins is none %}
                            <span style="color:var(--muted-2);">not counted</span>
                        {% else %}₱{{ h.counted_coins }}{% endif %}
                    </td>
                    <td style="text-align:right;">
                        {% if h.variance is none %}
                            <span style="color:var(--muted-2);">—</span>
                        {% elif h.variance == 0 %}
                            <span style="color:var(--good,#16a34a);font-weight:600;">exact</span>
                        {% else %}
                            <span style="color:{% if h.variance < 0 %}var(--danger,#dc2626){% else %}var(--warn,#d97706){% endif %};font-weight:600;">
                                {{ '−' if h.variance < 0 else '+' }}₱{{ h.variance | abs }}
                            </span>
                        {% endif %}
                    </td>
                    <td class="col-hide-mobile" style="color:var(--muted);">{{ h.note }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <p class="form-hint" style="margin-top:10px;">
        A difference shows only when you recorded a count. Short means less cash than
        the sales say — a coin jam, a miscount, or someone helping themselves. Over
        usually means a previous collection was counted low.
    </p>
    {% else %}
    <div class="card"><p style="color:var(--muted);margin:0;">
        No collections recorded yet. Press <strong>Collect</strong> on a vendo after you
        empty its coin box — that starts its running total from zero again, without
        erasing any sales history.
    </p></div>
    {% endif %}
</section>

{# Collect modal — shared contract from base.html: backdrop + dialog + header/body #}
<div id="collect-modal" class="modal" role="dialog" aria-modal="true"
     aria-labelledby="collect-modal-title" hidden>
    <div class="modal-backdrop" onclick="closeCollect()"></div>
    <div class="modal-dialog">
        <header class="modal-header">
            <h2 id="collect-modal-title" class="modal-title">Record collection</h2>
            <button type="button" class="modal-close" onclick="closeCollect()"
                    aria-label="Close">&times;</button>
        </header>
        <div class="modal-body">
            <p class="card-desc" id="collect-blurb"></p>
            <form method="POST" action="/collections/collect" class="edit-form">
                <input type="hidden" name="device_key" id="collect-device-key">

                <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                    <input type="checkbox" name="record_count" value="1"
                           id="collect-record-count" onchange="toggleCount()"
                           style="width: 18px; height: 18px; cursor: pointer; flex-shrink: 0;">
                    <span>Record how much I actually counted</span>
                </label>
                <p class="form-hint" style="margin-top: 4px;">
                    Optional. Leave unticked to just mark the box as emptied.
                </p>

                {# .form-grid is what carries the admin's field styling — a bare
                   label/input pair falls back to the browser's defaults. #}
                <div class="form-grid" style="margin-top:14px;">
                    <div id="collect-count-wrap" hidden>
                        <label for="collect-counted">Coins counted (₱)</label>
                        <input type="number" name="counted_coins" id="collect-counted"
                               min="0" step="1" placeholder="0" inputmode="numeric">
                        <p class="form-hint" id="collect-expected-hint"></p>
                    </div>
                    <div>
                        <label for="collect-note">Note (optional)</label>
                        <input type="text" name="note" id="collect-note" maxlength="200"
                               placeholder="e.g. coin jam, collected by Ana"
                               autocomplete="off">
                    </div>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn-primary">Record collection</button>
                    <button type="button" class="btn-secondary" onclick="closeCollect()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openCollect(key, label, expected) {
    document.getElementById('collect-device-key').value = key;
    document.getElementById('collect-blurb').textContent =
        label + ' — sales say ₱' + expected + ' should be in this box.';
    document.getElementById('collect-expected-hint').textContent =
        'Sales say ₱' + expected + '. Any difference is shown in the history below.';
    document.getElementById('collect-record-count').checked = false;
    document.getElementById('collect-counted').value = '';
    document.getElementById('collect-note').value = '';
    toggleCount();
    document.getElementById('collect-modal').hidden = false;
}
function closeCollect() { document.getElementById('collect-modal').hidden = true; }
function toggleCount() {
    var on = document.getElementById('collect-record-count').checked;
    var wrap = document.getElementById('collect-count-wrap');
    wrap.hidden = !on;
    // Only require a number when they actually opted in to counting.
    document.getElementById('collect-counted').required = on;
    if (on) document.getElementById('collect-counted').focus();
}
</script>

{% endblock %}