{% extends "finance/base.html" %}
{% load custom_filters %}
{% load humanize %}

{% block content %}

<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .text-right {
        text-align: right;
    }

    .vendor-row {
        background-color: #f8f9fa;
        font-weight: bold;
    }

    .subtotal-row {
        background-color: #e9ecef;
        font-weight: bold;
    }

    .grandtotal-row {
        background-color: #ced4da;
        font-weight: bold;
        font-size: 15px;
    }

    .filter-box {
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    /* Standard pagination */
    .pagination-page-btn {
        background-color: #ffffff !important;
        border: 1px solid #6c757d !important;
        color: #495057 !important;
    }

    .pagination-page-btn:hover,
    .pagination-page-btn:focus {
        background-color: #f1f3f5 !important;
        border-color: #6c757d !important;
        color: #343a40 !important;
    }

    .pagination-current,
    .pagination-go {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }

    .pagination-current:hover,
    .pagination-current:focus,
    .pagination-go:hover,
    .pagination-go:focus {
        background-color: rgb(70, 80, 87) !important;
        border-color: rgb(70, 80, 87) !important;
        color: #ffffff !important;
    }

    .pagination-disabled {
        opacity: 0.55;
        pointer-events: none;
    }

    .ap-aging-action-btn {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }

    .ap-aging-action-btn:hover,
    .ap-aging-action-btn:focus {
        background-color: rgb(70, 80, 87) !important;
        border-color: rgb(70, 80, 87) !important;
        color: #ffffff !important;
    }
</style>

<div class="container-fluid mt-4">

    <div class="d-flex justify-content-between align-items-center mb-3">

        <h4 class="mb-0" style="font-size: 32px;">
            A/P - Current Outstanding
        </h4>

        <form method="get" class="d-flex align-items-center gap-2">

            <input type="date" name="as_of" class="form-control form-control-sm" value="{{ as_of_date|date:'Y-m-d' }}">

            <button type="submit" class="btn ap-aging-action-btn">
                Search
            </button>

            <a href="{% url 'ap_aging_pdf' %}?as_of={{ as_of_date|date:'Y-m-d' }}" class="btn ap-aging-action-btn">
                PDF
            </a>

            <a href="{% url 'ap_aging_excel' %}?as_of={{ as_of_date|date:'Y-m-d' }}" class="btn ap-aging-action-btn">
                Excel
            </a>

        </form>

    </div>

    <!-- PAGINATION TOP -->
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="text-muted small">
            Showing
            {{ page_obj.start_index }}
            -
            {{ page_obj.end_index }}
            of
            {{ page_obj.paginator.count }}
        </div>

        <div class="d-flex align-items-center gap-1">
            {% if page_obj.has_previous %}
                <a class="btn btn-sm pagination-page-btn"
                   href="?as_of={{ as_of_date|date:'Y-m-d' }}&page=1">
                    First
                </a>
                <a class="btn btn-sm pagination-page-btn"
                   href="?as_of={{ as_of_date|date:'Y-m-d' }}&page={{ page_obj.previous_page_number }}">
                    Previous
                </a>
            {% else %}
                <span class="btn btn-sm pagination-page-btn pagination-disabled">First</span>
                <span class="btn btn-sm pagination-page-btn pagination-disabled">Previous</span>
            {% endif %}

            <span class="btn btn-sm pagination-current">
                {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
            </span>

            {% if page_obj.has_next %}
                <a class="btn btn-sm pagination-page-btn"
                   href="?as_of={{ as_of_date|date:'Y-m-d' }}&page={{ page_obj.next_page_number }}">
                    Next
                </a>
                <a class="btn btn-sm pagination-page-btn"
                   href="?as_of={{ as_of_date|date:'Y-m-d' }}&page={{ page_obj.paginator.num_pages }}">
                    Last
                </a>
            {% else %}
                <span class="btn btn-sm pagination-page-btn pagination-disabled">Next</span>
                <span class="btn btn-sm pagination-page-btn pagination-disabled">Last</span>
            {% endif %}

            <form method="get" class="d-flex align-items-center gap-1 ms-2">
                <input type="hidden" name="as_of" value="{{ as_of_date|date:'Y-m-d' }}">
                <span class="small text-muted">Go to Page</span>
                <input type="number"
                       name="page"
                       min="1"
                       max="{{ page_obj.paginator.num_pages }}"
                       class="form-control form-control-sm"
                       style="width: 70px;">
                <button type="submit" class="btn btn-sm pagination-go">Go</button>
            </form>
        </div>
    </div>

    <!-- TABLE -->
    <div class="table-responsive">
        <table class="table table-bordered table-sm">
            <thead class="table-dark">
                <tr>
                    <th>Vendor</th>
                    <th>Invoice</th>
                    <th>Due Date</th>
                    <th class="text-right">Days</th>
                    <th class="text-right">Balance (IDR)</th>
                </tr>
            </thead>
            <tbody>

                {% for vendor in idr_data %}

                <tr class="vendor-row">
                    <td colspan="5">{{ vendor.vendor }}</td>
                </tr>

                {% for row in vendor.rows %}
                <tr>
                    <td></td>
                    <td>{{ row.invoice }}</td>
                    <td>{{ row.duedate }}</td>
                    <td class="text-right">{{ row.days }}</td>
                    <td class="text-right">{{ row.balance|intcomma }}</td>
                </tr>
                {% endfor %}

                <tr class="subtotal-row">
                    <td colspan="4" class="text-right">
                        Subtotal {{ vendor.vendor }}
                    </td>
                    <td class="text-right">
                        {{ vendor.subtotal|intcomma }}
                    </td>
                </tr>

                {% endfor %}

                <tr class="grandtotal-row">
                    <td colspan="4" class="text-right">
                        GRAND TOTAL
                    </td>
                    <td class="text-right">
                        {{ summary.IDR.total|intcomma }}
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

    <!-- PAGINATION BOTTOM -->
    <div class="d-flex justify-content-between align-items-center mt-2">
        <div class="text-muted small">
            Showing
            {{ page_obj.start_index }}
            -
            {{ page_obj.end_index }}
            of
            {{ page_obj.paginator.count }}
        </div>

        <div class="d-flex align-items-center gap-1">
            {% if page_obj.has_previous %}
                <a class="btn btn-sm pagination-page-btn"
                   href="?as_of={{ as_of_date|date:'Y-m-d' }}&page=1">
                    First
                </a>
                <a class="btn btn-sm pagination-page-btn"
                   href="?as_of={{ as_of_date|date:'Y-m-d' }}&page={{ page_obj.previous_page_number }}">
                    Previous
                </a>
            {% else %}
                <span class="btn btn-sm pagination-page-btn pagination-disabled">First</span>
                <span class="btn btn-sm pagination-page-btn pagination-disabled">Previous</span>
            {% endif %}

            <span class="btn btn-sm pagination-current">
                {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
            </span>

            {% if page_obj.has_next %}
                <a class="btn btn-sm pagination-page-btn"
                   href="?as_of={{ as_of_date|date:'Y-m-d' }}&page={{ page_obj.next_page_number }}">
                    Next
                </a>
                <a class="btn btn-sm pagination-page-btn"
                   href="?as_of={{ as_of_date|date:'Y-m-d' }}&page={{ page_obj.paginator.num_pages }}">
                    Last
                </a>
            {% else %}
                <span class="btn btn-sm pagination-page-btn pagination-disabled">Next</span>
                <span class="btn btn-sm pagination-page-btn pagination-disabled">Last</span>
            {% endif %}

            <form method="get" class="d-flex align-items-center gap-1 ms-2">
                <input type="hidden" name="as_of" value="{{ as_of_date|date:'Y-m-d' }}">
                <span class="small text-muted">Go to Page</span>
                <input type="number"
                       name="page"
                       min="1"
                       max="{{ page_obj.paginator.num_pages }}"
                       class="form-control form-control-sm"
                       style="width: 70px;">
                <button type="submit" class="btn btn-sm pagination-go">Go</button>
            </form>
        </div>
    </div>

</div>

{% endblock %}