{% extends 'base_customer.html' %}

{% block title %}{{ customer.full_name }} - Payments{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="bi bi-credit-card"></i> {{ customer.full_name }} - Payments
        </h1>
        <div>
            <a href="{% url 'customers:customer_detail' customer.customer_id %}" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-arrow-left"></i> Back to Customer
            </a>
        </div>
    </div>

    <!-- Customer Info Card -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <strong>Customer ID:</strong> {{ customer.customer_id }}
                        </div>
                        <div class="col-md-3">
                            <strong>Phone:</strong> {{ customer.phone }}
                        </div>
                        <div class="col-md-3">
                            <strong>Email:</strong> {{ customer.email }}
                        </div>
                        <div class="col-md-3">
                            <strong>Package:</strong> {{ customer.package.name|default:"Not assigned" }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payments List -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Payment History</h6>
        </div>
        <div class="card-body">
            {% if payments %}
            <div class="table-responsive">
                <table class="table table-bordered" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Payment ID</th>
                            <th>Amount</th>
                            <th>Method</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th>Invoice</th>
                            <th>Receipt</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for payment in payments %}
                        <tr>
                            <td>{{ payment.payment_id }}</td>
                            <td>KES {{ payment.amount }}</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
                                    {% 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
                                    {% elif payment.status == 'failed' %}bg-danger
                                    {% else %}bg-secondary{% endif %}">
                                    {{ payment.get_status_display }}
                                </span>
                            </td>
                            <td>{{ payment.created_at|date:"M d, Y H:i" }}</td>
                            <td>
                                {% if payment.invoice %}
                                    <a href="#" class="text-decoration-none">{{ payment.invoice.invoice_number }}</a>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                {% if payment.payment_method == 'mpesa' %}
                                    {% if payment.mpesa_receipt_number %}
                                        <span class="text-primary fw-bold">{{ payment.mpesa_receipt_number }}</span>
                                    {% else %}
                                        <span class="text-muted">Pending...</span>
                                    {% endif %}
                                {% elif payment.payment_method == 'cash' %}
                                    {% if payment.cash_receipt_number %}
                                        <span class="text-info fw-bold">{{ 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>
                                <a href="{% url 'payments:payment_detail' payment.payment_id %}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% 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">No payments have been recorded for this customer yet.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}