{% extends 'base.html' %}

{% block title %}Payments{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="bi bi-credit-card"></i> Payment Management</h2>
                <div class="d-flex gap-2">
                    <a href="{% url 'payments:create_payment' %}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> Record Payment
                    </a>
                    <a href="{% url 'payments:unreconciled_payments_list' %}" class="btn btn-warning">
                        <i class="bi bi-exclamation-triangle"></i> Unreconciled
                    </a>
                </div>
            </div>

            <!-- Search and Filter -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="get" class="row g-3">
                        <div class="col-md-4">
                            <label for="search" class="form-label">Search</label>
                            <input type="text" class="form-control" id="search" name="search" 
                                   value="{{ search_query }}" placeholder="Payment ID, customer name, receipt number...">
                        </div>
                        <div class="col-md-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" id="status" name="status">
                                <option value="">All Statuses</option>
                                {% for value, label in status_choices %}
                                <option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="bi bi-search"></i> Search
                            </button>
                            <a href="{% url 'payments:payment_list' %}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-circle"></i> Clear
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Payments Table -->
            <div class="card">
                <div class="card-body">
                    {% if payments %}
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Payment ID</th>
                                    <th>Date</th>
                                    <th>Customer</th>
                                    <th>Amount</th>
                                    <th>Method</th>
                                    <th>Status</th>
                                    <th>Receipt/Reference</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payment in payments %}
                                <tr>
                                    <td>
                                        <code>{{ payment.payment_id }}</code>
                                    </td>
                                    <td>
                                        <small>{{ payment.created_at|date:"M j, Y" }}<br>
                                        {{ payment.created_at|time:"H:i" }}</small>
                                    </td>
                                    <td>
                                        {% if payment.customer %}
                                        <a href="{% url 'customers:customer_detail' payment.customer.customer_id %}" class="text-decoration-none">
                                            {{ payment.customer.get_full_name }}
                                        </a>
                                        <br><small class="text-muted">{{ payment.customer.customer_id }}</small>
                                        {% elif payment.invoice and payment.invoice.customer %}
                                        <a href="{% url 'customers:customer_detail' payment.invoice.customer.customer_id %}" class="text-decoration-none">
                                            {{ payment.invoice.customer.get_full_name }}
                                        </a>
                                        <br><small class="text-muted">{{ payment.invoice.customer.customer_id }}</small>
                                        {% else %}
                                        <span class="text-muted">No customer linked</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <strong>KES {{ payment.amount|floatformat:2 }}</strong>
                                        {% if payment.invoice %}
                                        <br><small class="text-muted">Invoice: {{ payment.invoice.invoice_number }}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge 
                                            {% if payment.payment_method == 'mpesa' %}bg-success
                                            {% elif payment.payment_method == 'cash' %}bg-info
                                            {% elif payment.payment_method == 'bank_transfer' %}bg-warning text-dark
                                            {% elif payment.payment_method == 'balance_deduction' %}bg-secondary
                                            {% else %}bg-secondary{% endif %}">
                                            {{ payment.get_payment_method_display }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge 
                                            {% if payment.status == 'completed' %}bg-success
                                            {% elif payment.status == 'pending' %}bg-warning text-dark
                                            {% elif payment.status == 'failed' %}bg-danger
                                            {% else %}bg-secondary{% endif %}">
                                            {{ payment.get_status_display }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if payment.payment_method == 'mpesa' %}
                                            {% if payment.mpesa_receipt_number %}
                                                <strong class="text-success">{{ payment.mpesa_receipt_number }}</strong>
                                            {% else %}
                                                <span class="text-muted">Pending...</span>
                                            {% endif %}
                                        {% elif payment.payment_method == 'cash' %}
                                            {% if payment.cash_receipt_number %}
                                                <span class="text-info">{{ payment.cash_receipt_number }}</span>
                                            {% else %}
                                                <span class="text-info">Cash Payment</span>
                                            {% endif %}
                                        {% else %}
                                            {% if payment.reference_number %}
                                                {{ payment.reference_number }}
                                            {% else %}
                                                -
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a href="{% url 'payments:payment_detail' payment.payment_id %}" 
                                               class="btn btn-outline-primary" title="View Details">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            {% if payment.status == 'completed' %}
                                            <a href="{% url 'payments:payment_receipt' payment.payment_id %}" 
                                               class="btn btn-outline-success" title="Print Receipt">
                                                <i class="bi bi-printer"></i>
                                            </a>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    {% if is_paginated %}
                    <nav aria-label="Payment pagination">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">First</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">Previous</a>
                            </li>
                            {% endif %}

                            <li class="page-item active">
                                <span class="page-link">{{ 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 }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">Next</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">Last</a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}

                    {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-credit-card display-1 text-muted"></i>
                        <h3 class="mt-3">No payments found</h3>
                        <p class="text-muted">
                            {% if search_query or status_filter %}
                            No payments match your search criteria.
                            {% else %}
                            No payments have been recorded yet.
                            {% endif %}
                        </p>
                        {% if search_query or status_filter %}
                        <a href="{% url 'payments:payment_list' %}" class="btn btn-outline-primary">
                            <i class="bi bi-arrow-left"></i> View All Payments
                        </a>
                        {% else %}
                        <a href="{% url 'payments:create_payment' %}" class="btn btn-primary">
                            <i class="bi bi-plus-circle"></i> Record First Payment
                        </a>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.badge.fs-6 {
    font-size: 0.9rem !important;
}
</style>
{% endblock %}