{% extends "base/module_base.html" %}
{% set active_page = 'pos' %}
{% block pagehead %}<title>Transactions</title>{% endblock %}
{% set sidebar_bgtrigger = 'pos_tx' %}
{% block sidebar %}{% include 'pos/blocks/sidebar.html' %}{% endblock %}
{% block content %}
<br>
<div class="card">
    <div class="card-body">
        <h2>Transactions</h2>
        <form method="GET" class="form-inline mb-3">
            <input type="text" name="q" class="form-control mr-2" placeholder="Search by receipt #..." value="{{ q }}">
            <button type="submit" class="btn btn-primary">Search</button>
        </form>
        <table class="table table-striped">
            <thead><tr><th>Receipt #</th><th>Date</th><th>Amount</th><th>Method</th><th>Cashier</th><th>Location</th><th>Discount</th><th></th></tr></thead>
            <tbody>
                {% for t in txs.items %}
                <tr>
                    <td>{{ t.id }}</td>
                    <td>{{ t.time.strftime('%Y-%m-%d %H:%M') if t.time else '-' }}</td>
                    <td>${{ '%.2f'|format(t.total_amount|float) }}</td>
                    <td>{{ t.method_of_payment }}</td>
                    <td>{{ t.cashier_id }}</td>
                    <td>{{ t.location_id or '-' }}</td>
                    <td>{% if t.discount_type %}{{ t.discount_type }} {{ t.discount_value }}{% endif %}</td>
                    <td><a href="{{ url_for('shopyo_ecommerce.pos.transaction_view', tx_id=t.id) }}" class="btn btn-sm btn-info">View</a></td>
                </tr>
                {% else %}<tr><td colspan="7" class="text-muted">No transactions</td></tr>
                {% endfor %}
            </tbody>
        </table>
        <nav>
            <ul class="pagination">
                {% if txs.has_prev %}<li class="page-item"><a class="page-link" href="?page={{ txs.prev_num }}">Previous</a></li>{% endif %}
                {% if txs.has_next %}<li class="page-item"><a class="page-link" href="?page={{ txs.next_num }}">Next</a></li>{% endif %}
            </ul>
        </nav>
    </div>
</div>
{% endblock %}