{% extends "core/base.html" %}
{% load currency_filters %}
{% 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">
            <div class="card shadow-sm">
                <div class="card-body py-2">
                    <form method="get" class="row g-2 align-items-end">
                        <div class="col-md-2">
                            <label class="form-label small mb-1 text-muted">From</label>
                            <input type="date" name="date_from" class="form-control form-control-sm" value="{{ date_from }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small mb-1 text-muted">To</label>
                            <input type="date" name="date_to" class="form-control form-control-sm" value="{{ date_to }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small mb-1 text-muted">Single Date</label>
                            <input type="date" name="date" class="form-control form-control-sm" value="{{ selected_date|date:'Y-m-d' }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small mb-1 text-muted">Search</label>
                            <input type="text" name="q" class="form-control form-control-sm" placeholder="Order #, customer name/phone…" value="{{ search_query }}">
                        </div>
                        <div class="col-md-1">
                            <button type="submit" class="btn btn-sm btn-primary w-100"><i class="fas fa-filter me-1"></i>Filter</button>
                        </div>
                        <div class="col-md-1">
                            <a href="{% url 'sales:transaction_history' %}" class="btn btn-sm btn-outline-secondary w-100">Clear</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            {% if orders %}
                <div class="row g-3 sp-animate-card">
                    {% for order in orders %}
                    <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                        <div class="card border-0 shadow-sm h-100 {% if order.status == 'cancelled' %}bg-light opacity-75{% endif %}" style="border-radius: 16px;">
                            <div class="card-body p-4 d-flex flex-column">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0 fw-bold">
                                        <a href="{% url 'sales:print_receipt' order.id %}" class="text-decoration-none {% if order.status == 'cancelled' %}text-muted{% else %}text-primary{% endif %}">
                                            {{ order.order_number }}
                                        </a>
                                    </h6>
                                    {% if order.status == 'cancelled' %}
                                        <span class="badge bg-danger-subtle text-danger rounded-pill px-3">Reversed</span>
                                    {% else %}
                                        <span class="badge bg-success-subtle text-success rounded-pill px-3">Success</span>
                                    {% endif %}
                                </div>
                                
                                <h3 class="fw-bold {% if order.status == 'cancelled' %}text-muted text-decoration-line-through{% else %}text-dark{% endif %} mb-1">
                                    {% money order.final_amount %}
                                </h3>
                                <div class="text-muted small mb-3 fw-medium">
                                    <i class="far fa-clock me-1 text-primary text-opacity-50"></i> {{ order.created_at|date:"M d, Y \· H:i" }}
                                </div>
                                
                                <div class="p-3 bg-light rounded-3 mb-3 flex-grow-1">
                                    <div class="d-flex justify-content-between align-items-center mb-2 small text-muted">
                                        <span class="fw-semibold text-uppercase text-xs" style="font-size:0.7rem;">Customer</span>
                                        <span class="text-dark fw-medium text-end">{{ order.customer_name|default:"Walk-in Customer" }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center small text-muted">
                                        <span class="fw-semibold text-uppercase text-xs" style="font-size:0.7rem;">Payment</span>
                                        <span class="text-dark fw-medium text-end"><i class="fas fa-wallet fa-sm me-1 text-primary"></i>{{ order.get_payment_method_display }}</span>
                                    </div>
                                </div>
                                
                                <div class="d-flex flex-wrap gap-2 mt-auto pt-2">
                                    <a href="{% url 'sales:print_receipt' order.id %}" class="btn btn-sm btn-outline-secondary flex-fill rounded-pill fw-medium d-flex align-items-center justify-content-center">
                                        <i class="fas fa-receipt me-1"></i> Receipt
                                    </a>
                                    {% if order.status != 'cancelled' %}
                                    <a href="{% url 'sales:repeat_sale' order.id %}" class="btn btn-sm btn-primary bg-primary bg-opacity-10 text-primary border-primary border-opacity-25 flex-fill rounded-pill fw-medium d-flex align-items-center justify-content-center">
                                        <i class="fas fa-redo me-1"></i> Repeat
                                    </a>
                                    {% if user_role in 'admin manager' or request.user.is_superuser %}
                                    <a href="{% url 'sales:reverse_order' order.id %}" class="btn btn-sm btn-danger bg-danger bg-opacity-10 text-danger border-danger border-opacity-25 flex-fill rounded-pill fw-medium d-flex align-items-center justify-content-center mt-2 w-100">
                                        <i class="fas fa-undo-alt me-1"></i> Reverse Order
                                    </a>
                                    {% endif %}
                                    {% endif %}
                                    
                                    {% if order.balance_amount > 0 %}
                                    <a href="{% url 'sales:clear_credit' order.id %}" class="btn btn-sm btn-warning text-dark flex-fill rounded-pill fw-bold w-100 mt-2 d-flex align-items-center justify-content-center shadow-sm">
                                        <i class="fas fa-money-bill-wave me-1"></i> Clear Due Balance
                                    </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </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">
                        <i class="fas fa-receipt fa-3x text-muted opacity-25 d-block mb-3"></i>
                        <h6 class="text-muted fw-semibold">No transactions found</h6>
                        <p class="text-muted small mb-0">Try adjusting your date range or search term.</p>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}