{% extends "core/base.html" %}
{% load static %}

{% block title %}Transaction History - SwiftPOS{% endblock %}

{% block topbar_title %}
Transaction History
{% endblock %}

{% block content %}
<div class="swiftpos-content container-fluid py-4">
    <div class="row mb-3">
        <div class="col-12 d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h5 class="mb-0">Transaction History</h5>
                <p class="text-muted small mb-0">Search by customer or order number, filter by date or date range.</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{% url 'sales:export_transactions' %}?date={{ selected_date|date:'Y-m-d' }}&q={{ search_query|urlencode }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-download me-1"></i> Export CSV
                </a>
                <a href="{% url 'sales:pos' %}" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-cash-register me-1"></i> Back to POS
                </a>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-12">
            <form method="get" class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label mb-1">From</label>
                    <input type="date" name="date_from" class="form-control" value="{{ date_from }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-1">To</label>
                    <input type="date" name="date_to" class="form-control" value="{{ date_to }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label mb-1">Or Single Date</label>
                    <input type="date" name="date" class="form-control" value="{{ selected_date|date:'Y-m-d' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label mb-1">Search</label>
                    <input type="text" name="q" class="form-control" placeholder="Order #, customer name/phone…" value="{{ search_query }}">
                </div>
                <div class="col-md-1">
                    <button type="submit" class="btn btn-primary w-100">Filter</button>
                </div>
                <div class="col-md-1">
                    <a href="{% url 'sales:transaction_history' %}" class="btn btn-outline-secondary w-100">Clear</a>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            {% if orders %}
                <div class="card shadow-sm sp-animate-card">
                    <div class="card-body p-0">
                        <div class="sp-table-container">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Order #</th>
                                        <th>Date</th>
                                        <th>Time</th>
                                        <th>Customer</th>
                                        <th>Payment</th>
                                        <th class="text-end">Total</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for order in orders %}
                                        <tr>
                                            <td><a href="{% url 'sales:print_receipt' order.id %}">{{ order.order_number }}</a></td>
                                            <td>{{ order.created_at|date:"M d, Y" }}</td>
                                            <td>{{ order.created_at|date:"H:i" }}</td>
                                            <td>{{ order.customer_name|default:"Walk-in" }}</td>
                                            <td>{{ order.get_payment_method_display }}</td>
                                            <td class="text-end fw-semibold">{{ currency_symbol }}{{ order.final_amount }}</td>
                                            <td>
                                                <div class="d-flex gap-1">
                                                    <a href="{% url 'sales:print_receipt' order.id %}" class="btn btn-sm btn-outline-secondary">
                                                        <i class="fas fa-receipt"></i>
                                                    </a>
                                                    <a href="{% url 'sales:repeat_sale' order.id %}" class="btn btn-sm btn-outline-primary" title="Repeat Order">
                                                        <i class="fas fa-redo"></i>
                                                    </a>
                                                    {% if order.balance_amount > 0 %}
                                                    <a href="{% url 'sales:clear_credit' order.id %}" class="btn btn-sm btn-outline-warning" title="Clear Credit">
                                                        <i class="fas fa-money-bill-wave"></i>
                                                    </a>
                                                    {% endif %}
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Pagination -->
                {% if page_obj.has_other_pages %}
                <nav class="mt-3" aria-label="Transaction pages">
                    <ul class="pagination justify-content-center mb-0">
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}&q={{ search_query|urlencode }}&date={{ selected_date|date:'Y-m-d' }}&date_from={{ date_from }}&date_to={{ date_to }}">
                                &laquo; Prev
                            </a>
                        </li>
                        {% endif %}
                        <li class="page-item disabled">
                            <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
                        </li>
                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}&q={{ search_query|urlencode }}&date={{ selected_date|date:'Y-m-d' }}&date_from={{ date_from }}&date_to={{ date_to }}">
                                Next &raquo;
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                    <p class="text-center text-muted small mt-1">Showing {{ page_obj.start_index }}–{{ page_obj.end_index }} of {{ page_obj.paginator.count }} transactions</p>
                </nav>
                {% endif %}
            {% else %}
                <div class="card shadow-sm">
                    <div class="card-body text-center py-5">
                        <p class="text-muted mb-0">No transactions found for the selected filter.</p>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}