{% extends "store/base.html" %}
{% load render_table from django_tables2 %}
{% load querystring from django_tables2 %}
{% load static %}

{% block title %}Bills{% endblock title %}

{% block content %}
<div class="container p-5">
    <style>
        input[type="text"], select {
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            display: inline-block;
            padding: 6px 20px;
            margin: 8px 0;
        }
        button[type="submit"] {
            padding: 6px 20px;
            margin: 8px 0;
        }
        .table th, .table td {
            text-align: center;
        }
    </style>

    <!-- Search Form (Commented Out) -->
    {% comment %}
    <form method="GET" class="container mb-3">
        {{ filter.form }}
        <button type="submit" class="btn btn-sm btn-success fa fa-search"> Search</button>
    </form>
    {% endcomment %}

    <div class="mb-3">
        <a class="btn btn-success btn-sm" href="{% url 'bill_create' %}">
            <i class="fa-solid fa-plus me-2"></i> Add a Bill Record
        </a>
        <a class="float-end btn btn-success btn-sm" href="{% querystring '_export'='xlsx' %}">
            <i class="fa-solid fa-download me-2"></i> Export to Excel
        </a>
    </div>

    <div class="m-2">
        <table class="table table-sm table-striped table-bordered">
            <thead class="thead-light">
                <tr>
                    <th scope="col"><a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">ID <i class="fa-solid fa-sort"></i></a></th>
                    <th scope="col">Name <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Description <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Contact Number <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Email <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Payment Details <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Amount <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Status <i class="fa-solid fa-sort"></i></th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for bill in bills %}
                <tr>
                    <th scope="row">{{ bill.id }}</th>
                    <td>{{ bill.institution_name }}</td>
                    <td>{{ bill.description }}</td>
                    <td>{{ bill.phone_number }}</td>
                    <td>{{ bill.email }}</td>
                    <td>{{ bill.payment_details }}</td>
                    <td>{{ bill.amount }}</td>
                    <td>
                        {% if bill.status %}
                            <span class="badge badge-pill bg-soft-success text-success me-2">
                                Paid
                            </span>
                        {% else %}
                            <span class="badge badge-pill bg-soft-danger text-danger me-2">
                                Pending
                            </span>
                        {% endif %}
                    </td>
                    <td>
                        <a class="text-info" href="{% url 'bill_update' bill.slug %}">
                            <i class="fa-solid fa-pen"></i>
                        </a>
                        <a class="text-danger float-end" href="{% url 'bill_delete' bill.pk %}">
                            <i class="fa-solid fa-trash"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-4">
        {% if is_paginated %}
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </span>
                </li>
                {% endif %}
                {% for i in paginator.page_range %}
                {% if page_obj.number == i %}
                <li class="page-item active" aria-current="page">
                    <span class="page-link">{{ i }} <span class="visually-hidden">(current)</span></span>
                </li>
                {% else %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ i }}">{{ i }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </span>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
</div>
{% endblock content %}