{% extends 'base.html' %}
{% block title %}Invoice{% endblock %}

{% block content %}
<div class="container mt-3">

    <div class="card shadow-lg p-4">

        <h4><i class="bi bi-receipt"></i> Invoice Details</h4>

        <hr>

        <div class="row">
            <div class="col-md-6">
                <p><strong>Amount:</strong> KES {{ invoice.amount }}</p>
                <p><strong>Due Date:</strong> {{ invoice.due_date }}</p>
            </div>

            <div class="col-md-6">
                <p><strong>Status:</strong>
                    {% if invoice.status == 'paid' %}
                        <span class="badge bg-success">Paid</span>
                    {% elif invoice.status == 'partial' %}
                        <span class="badge bg-warning text-dark">Partial</span>
                    {% else %}
                        <span class="badge bg-danger">Pending</span>
                    {% endif %}
                </p>

                <p><strong>Unit:</strong> {{ invoice.unit }}</p>
            </div>
        </div>

        <hr>

        <a href="{% url 'payment_form' %}" class="btn btn-dark w-100">
            <i class="bi bi-cash"></i> Make Payment
        </a>

    </div>

</div>
{% endblock %}