{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Receipts - {{ brand_name }}{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/receipts.css">
{% endblock %}
{% block content %}
<div class="hil-page-tools">
    {{ ui.button('Admin Dashboard', '/admin', 'secondary') }}
    {{ ui.button('Help Center', '/help-center', 'secondary') }}
</div>

<header class="topbar">
    <h1>{{ brand_name }} Receipts</h1>
    <nav>
        <a class="nav-link" href="/admin">Admin Dashboard</a>
        <a class="nav-link" href="/transactions">Transactions</a>
        <a class="nav-link" href="/sales">Sales</a>
        <a class="nav-link" href="/logout">Logout</a>
    </nav>
</header>

<main class="page">
    <section class="hero">
        <div>
            <h2>Receipt Register</h2>
            <p>Review, print, resend, or start returns from one admin view.</p>
        </div>
        <button class="btn secondary" type="button" onclick="window.print()">Print List</button>
    </section>

    <section class="summary-grid" aria-label="Receipt summary">
        <div class="summary">
            <span>Receipts Found</span>
            <strong>{{ total_count }}</strong>
        </div>
        <div class="summary">
            <span>Gross Sales</span>
            <strong>{{ currency_symbol }} {{ "{:,.2f}".format(total_sales|float) }}</strong>
        </div>
        <div class="summary">
            <span>Returns Recorded</span>
            <strong>{{ currency_symbol }} {{ "{:,.2f}".format(total_returns|float) }}</strong>
        </div>
    </section>

    <section class="panel">
        <form class="toolbar" method="GET" action="/receipts">
            <div class="field">
                <label for="receipt-search">Search</label>
                <input id="receipt-search" name="q" value="{{ search }}" placeholder="Receipt code, sale ID, customer, phone, or email">
            </div>
            <div class="field">
                <label for="status-filter">Payment status</label>
                <select id="status-filter" name="status">
                    <option value="" {% if not status %}selected{% endif %}>All statuses</option>
                    <option value="completed" {% if status == "completed" %}selected{% endif %}>Completed</option>
                    <option value="pending" {% if status == "pending" %}selected{% endif %}>Pending</option>
                    <option value="under_review" {% if status == "under_review" %}selected{% endif %}>Under review</option>
                    <option value="failed" {% if status == "failed" %}selected{% endif %}>Failed</option>
                </select>
            </div>
            <button class="btn" type="submit">Apply</button>
        </form>

        {% if sales %}
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Receipt</th>
                        <th>Date</th>
                        <th>Customer</th>
                        <th>Payment</th>
                        <th>Status</th>
                        <th class="num">Total</th>
                        <th class="num">Returned</th>
                        <th class="num">Net</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for sale in sales %}
                    {% set returned = sale[3]|float %}
                    {% set total = sale[1]|float %}
                    {% set receipt_code = sale[4] or 'RCP-' ~ '%06d'|format(sale[0]) %}
                    <tr>
                        <td>
                            <div class="receipt-code">{{ receipt_code }}</div>
                            <div class="muted">Sale #{{ sale[0] }} | Cashier {{ sale[11] or '-' }}</div>
                        </td>
                        <td>{{ sale[2] }}</td>
                        <td>
                            {% if sale[9] %}
                                <div>{{ sale[9] }}</div>
                            {% endif %}
                            <div class="muted">{{ sale[10] or 'Walk-in customer' }}</div>
                        </td>
                        <td>{{ sale[6]|replace('_', ' ')|title }}</td>
                        <td>
                            <span class="badge {{ sale[5] }}">{{ sale[5]|replace('_', ' ') }}</span>
                        </td>
                        <td class="num">{{ currency_symbol }} {{ "{:,.2f}".format(total) }}</td>
                        <td class="num">{{ currency_symbol }} {{ "{:,.2f}".format(returned) }}</td>
                        <td class="num">{{ currency_symbol }} {{ "{:,.2f}".format(total - returned) }}</td>
                        <td>
                            <div class="actions">
                                <a class="btn blue" href="/receipt/{{ sale[0] }}">View</a>
                                <a class="btn amber" href="/return-goods?search={{ receipt_code|urlencode }}">Return</a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="pagination">
            <span>
                {% if total_pages %}
                    Page {{ page }} of {{ total_pages }}
                {% else %}
                    No pages
                {% endif %}
            </span>
            <div class="links">
                {% if page > 1 %}
                    <a class="btn secondary" href="/receipts?page={{ page - 1 }}&q={{ search|urlencode }}&status={{ status|urlencode }}">Previous</a>
                {% endif %}
                {% if page < total_pages %}
                    <a class="btn secondary" href="/receipts?page={{ page + 1 }}&q={{ search|urlencode }}&status={{ status|urlencode }}">Next</a>
                {% endif %}
            </div>
        </div>
        {% else %}
        <div class="empty">
            <strong>No receipts found.</strong>
            <p>Try another search, change the status filter, or record a new sale.</p>
        </div>
        {% endif %}
    </section>
</main>
{% endblock %}