{% extends "base.html" %}

{% block title %}Sales - AsapLoads POS{% endblock %}

{% block header_title %}Sales History{% endblock %}

{% block content %}
{% if messages %}
  <div class="container mt-3">
    {% for message in messages %}
      <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endfor %}
  </div>
{% endif %}
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <h5 class="card-title mb-0">Sales</h5>
            <small class="text-muted">View and manage your sales transactions</small>
        </div>
        <a href="{% url 'new_sale' %}" class="btn btn-primary btn-sm">
            <i class="fas fa-plus"></i> New Sale
        </a>
    </div>
    <div class="card-body">
        <form method="get" class="mb-4 sale-search-form">
            <div class="row g-3">
                <div class="col-md-3">
                    <label for="{{ form.start_date.id_for_label }}" class="form-label">Start Date</label>
                    {{ form.start_date }}
                </div>
                <div class="col-md-3">
                    <label for="{{ form.end_date.id_for_label }}" class="form-label">End Date</label>
                    {{ form.end_date }}
                </div>
                <div class="col-md-2">
                    <label for="{{ form.customer.id_for_label }}" class="form-label">Customer</label>
                    {{ form.customer }}
                </div>
                <div class="col-md-2">
                    <label for="{{ form.invoice.id_for_label }}" class="form-label">Invoice #</label>
                    {{ form.invoice }}
                </div>
                <div class="col-md-2">
                    <label for="{{ form.payment_status.id_for_label }}" class="form-label">Status</label>
                    {{ form.payment_status }}
                </div>
                <div class="col-12 text-end">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search"></i> Search
                    </button>
                    <a href="{% url 'sale_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-redo"></i> Reset
                    </a>
                </div>
            </div>
        </form>

        {% if sales %}
            <div class="table-responsive">
                <table class="table table-striped table-hover sale-table">
                    <thead>
                        <tr>
                            <th>Invoice #</th>
                            <th>Date</th>
                            <th>Customer</th>
                            <th>Cashier</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for sale in sales %}
                            <tr>
                                <td>
                                    <a href="{% url 'sale_detail' sale.id %}">{{ sale.invoice_number }}</a>
                                </td>
                                <td>{{ sale.created_at|date:"M d, Y H:i" }}</td>
                                <td>
                                    {% if sale.customer %}
                                        <a href="{% url 'customer_detail' sale.customer.id %}">{{ sale.customer.full_name }}</a>
                                    {% else %}
                                        <span class="text-muted">Walk-in</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if sale.cashier %}
                                        {{ sale.cashier.get_full_name }}
                                    {% else %}
                                        <span class="text-muted">Unknown</span>
                                    {% endif %}
                                </td>
                                <td>KSh {{ sale.total_amount|floatformat:2 }}</td>
                                <td>
                                    <span class="badge bg-{% if sale.payment_status == 'paid' %}success{% elif sale.payment_status == 'partial' %}warning{% elif sale.payment_status == 'cancelled' %}danger{% else %}secondary{% endif %}">
                                        {{ sale.payment_status|title }}
                                    </span>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{% url 'sale_detail' sale.id %}" class="btn btn-outline-info" title="View">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{% url 'sale_receipt' sale.id %}" class="btn btn-outline-primary" title="Receipt">
                                            <i class="fas fa-receipt"></i>
                                        </a>
                                        {% if sale.payment_status != 'paid' and sale.payment_status != 'cancelled' %}
                                            <a href="{% url 'add_payment' sale.id %}" class="btn btn-outline-success" title="Add Payment">
                                                <i class="fas fa-dollar-sign"></i>
                                            </a>
                                        {% endif %}
                                        {% if sale.payment_status != 'cancelled' and user.role == 'admin' %}
                                            <a href="{% url 'cancel_sale' sale.id %}" class="btn btn-outline-danger" title="Cancel">
                                                <i class="fas fa-times"></i>
                                            </a>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Enhanced Pagination -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="text-muted">
                        Showing {{ sales.start_index }} to {{ sales.end_index }} of {{ sales.paginator.count }} entries
                        {% if form.start_date.value or form.end_date.value or form.customer.value or form.invoice.value or form.payment_status.value %}
                            (filtered from {{ sales.paginator.count }} total entries)
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    {% if sales.has_other_pages %}
                        <nav aria-label="Page navigation" class="float-md-end">
                            <ul class="pagination pagination-sm mb-0">
                                {% if sales.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page=1{% if form.start_date.value %}&start_date={{ form.start_date.value }}{% endif %}{% if form.end_date.value %}&end_date={{ form.end_date.value }}{% endif %}{% if form.customer.value %}&customer={{ form.customer.value }}{% endif %}{% if form.invoice.value %}&invoice={{ form.invoice.value }}{% endif %}{% if form.payment_status.value %}&payment_status={{ form.payment_status.value }}{% endif %}" aria-label="First">
                                            <i class="fas fa-angle-double-left"></i>
                                        </a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ sales.previous_page_number }}{% if form.start_date.value %}&start_date={{ form.start_date.value }}{% endif %}{% if form.end_date.value %}&end_date={{ form.end_date.value }}{% endif %}{% if form.customer.value %}&customer={{ form.customer.value }}{% endif %}{% if form.invoice.value %}&invoice={{ form.invoice.value }}{% endif %}{% if form.payment_status.value %}&payment_status={{ form.payment_status.value }}{% endif %}" aria-label="Previous">
                                            <i class="fas fa-angle-left"></i>
                                        </a>
                                    </li>
                                {% else %}
                                    <li class="page-item disabled">
                                        <span class="page-link"><i class="fas fa-angle-double-left"></i></span>
                                    </li>
                                    <li class="page-item disabled">
                                        <span class="page-link"><i class="fas fa-angle-left"></i></span>
                                    </li>
                                {% endif %}

                                {% for i in sales.paginator.page_range %}
                                    {% if sales.number == i %}
                                        <li class="page-item active"><span class="page-link">{{ i }}</span></li>
                                    {% elif i > sales.number|add:'-3' and i < sales.number|add:'3' %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ i }}{% if form.start_date.value %}&start_date={{ form.start_date.value }}{% endif %}{% if form.end_date.value %}&end_date={{ form.end_date.value }}{% endif %}{% if form.customer.value %}&customer={{ form.customer.value }}{% endif %}{% if form.invoice.value %}&invoice={{ form.invoice.value }}{% endif %}{% if form.payment_status.value %}&payment_status={{ form.payment_status.value }}{% endif %}">{{ i }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if sales.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ sales.next_page_number }}{% if form.start_date.value %}&start_date={{ form.start_date.value }}{% endif %}{% if form.end_date.value %}&end_date={{ form.end_date.value }}{% endif %}{% if form.customer.value %}&customer={{ form.customer.value }}{% endif %}{% if form.invoice.value %}&invoice={{ form.invoice.value }}{% endif %}{% if form.payment_status.value %}&payment_status={{ form.payment_status.value }}{% endif %}" aria-label="Next">
                                            <i class="fas fa-angle-right"></i>
                                        </a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ sales.paginator.num_pages }}{% if form.start_date.value %}&start_date={{ form.start_date.value }}{% endif %}{% if form.end_date.value %}&end_date={{ form.end_date.value }}{% endif %}{% if form.customer.value %}&customer={{ form.customer.value }}{% endif %}{% if form.invoice.value %}&invoice={{ form.invoice.value }}{% endif %}{% if form.payment_status.value %}&payment_status={{ form.payment_status.value }}{% endif %}" aria-label="Last">
                                            <i class="fas fa-angle-double-right"></i>
                                        </a>
                                    </li>
                                {% else %}
                                    <li class="page-item disabled">
                                        <span class="page-link"><i class="fas fa-angle-right"></i></span>
                                    </li>
                                    <li class="page-item disabled">
                                        <span class="page-link"><i class="fas fa-angle-double-right"></i></span>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    {% endif %}
                </div>
            </div>
        {% else %}
            <div class="alert alert-info">
                <p class="mb-0 text-center">No sales found matching your criteria. <a href="{% url 'new_sale' %}">Create a new sale</a>.</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}