{% extends 'base.html' %}
{% load i18n %}
{% block title %}
  {% trans 'Bills' %}
{% endblock %}
{% block bills %}
  <a class="nav-link active fw-bold">
    {% trans 'Bills'|capfirst %}
    <span class="visually-hidden">(current)</span>
  </a>
{% endblock %}
{% block content %}
  <div class="d-flex flex-column min-vh-100">
    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
      <a href="{% url 'bill_create' %}" class="btn btn-md btn-phoenix-primary">
        <i class="fa fa-plus"></i>
        {% trans 'New Bill' %}</a>
    </div>
    <div class="d-flex flex-column flex-sm-grow-1 p-4">
      <main class="d-grid gap-4 p-1">
        <!-- Search Bar -->
        <div class="row g-4">
          <div class="col-12">
            <div class="row-fluid p-2">
              <form method="get">
                <div class="input-group input-group-sm">
                  <button class="btn btn-sm btn-secondary rounded-start" type="submit">{% trans 'search' %}</button>
                  <input type="text" name="q" class="form-control form-control-sm rounded-end" value="{{ request.GET.q }}" placeholder="{% trans 'Search bills...' %}" />
                  {% if request.GET.q %}
                    <a href="{% url request.resolver_match.view_name %}" class="btn btn-sm btn-outline-danger ms-1 rounded"><i class="bi bi-x-lg"></i></a>
                  {% endif %}
                </div>
              </form>
            </div>
          </div>
        </div>

        <!-- Customer Table -->
          <div id="accountsTable">
            <div class="table-responsive">
              <table class="table table-sm fs-9 mb-0">
                <thead>
                  <tr class="bg-body-highlight">
                    <th class="border-top border-translucent ps-3">
                      {% trans 'Bill Number' %}
                    </th>
                    <th class="border-top border-translucent">
                      {% trans 'Bill Status' %}
                    </th>
                    <th class="border-top border-translucent text-end pe-3">
                      {% trans 'Vendor' %}
                    </th>
                    <th class="border-top border-translucent text-end pe-3" scope="col">Action</th>
                  </tr>
                </thead>
                <tbody class="list">
                  {% for bill in bills %}
                    <tr>
                      <td class="align-middle ps-3">{{ bill.bill_number }}</td>
                      <td class="align-middle">
                      {% if bill.is_draft %}
                        <span class="badge badge-phoenix badge-phoenix-warning">
                          {% elif bill.is_review %}
                            <span class="badge badge-phoenix badge-phoenix-info">
                              {% elif bill.is_approved %}
                                <span class="badge badge-phoenix badge-phoenix-success">
                                  {% elif bill.is_paid %}
                                    <span class="badge badge-phoenix badge-phoenix-success">
                          {% endif %}
                          {{ bill.bill_status }}
                        </span>
                      </td>
                      <td class="align-middle text-end py-3 pe-3">
                        {{bill.vendor.vendor_name}}
                      </td>
                      <td class="align-middle text-end py-3 pe-3">
                        <div class="btn-reveal-trigger position-static">
                          <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
                          <div class="dropdown-menu dropdown-menu-end py-2">
                            <a href="{% url 'bill_detail' bill.pk %}" class="dropdown-item text-success-dark">{% trans 'View' %}</a>
                          </div>
                        </div>
                      </td>
                    </tr>
                  {% empty %}
                    <tr>
                      <td colspan="5" class="text-center text-muted">
                        {% trans 'No bill found.' %}
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>

            <div class="d-flex justify-content-between mt-3">
              <span class="d-none d-sm-inline-block" data-list-info="data-list-info">{{ page_obj.start_index }} {{ _('to') }} {{ page_obj.end_index }}<span class="text-body-tertiary">{{ _('Items of') }}</span>{{ page_obj.paginator.count }}</span>
              <div class="d-flex">
                <nav aria-label="Page navigation">
                  <ul class="pagination mb-0">
                    {% if page_obj.has_previous %}
                      <li class="page-item py-0">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous"><span aria-hidden="true"><span class="fas fa-chevron-left"></span></span></a>
                      </li>
                    {% else %}
                      <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true"><span class="fas fa-chevron-left"></span></span></a>
                      </li>
                    {% endif %}
                    {% for num in page_obj.paginator.page_range %}
                      {% if page_obj.number == num %}
                        <li class="page-item active">
                          <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                        </li>
                      {% else %}
                        <li class="page-item">
                          <a class="page-link" href="?page={{ num }}">{{ num }}</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"><span class="fas fa-chevron-right"></span></span></a>
                      </li>
                    {% else %}
                      <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Next"><span aria-hidden="true"><span class="fas fa-chevron-right"></span></span></a>
                      </li>
                    {% endif %}
                  </ul>
                </nav>
              </div>
            </div>
          </div>
      </main>
    </div>
  </div>
{% endblock %}