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

{% block content %}

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

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

    .over90 {
        background-color: #f8d7da;
        font-weight: bold;
    }

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

    .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,
    .ap-aging-summary-action-btn {
        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,
    .ap-aging-summary-action-btn:hover,
    .ap-aging-summary-action-btn: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;
    }
</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 Aging Report ({{ currency }})</h4>

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

            <label class="form-label mb-1" style="white-space: nowrap;">
                As Of Date
            </label>
            <input type="date" name="as_of" value="{{ as_of_date|date:'Y-m-d' }}" class="form-control">

            <label>Currency</label>
            <select name="currency" class="form-control">
                <option value="IDR" {% if currency == "IDR" %}selected{% endif %}>IDR</option>
                <option value="USD" {% if currency == "USD" %}selected{% endif %}>USD</option>
            </select>

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

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

            <a href="{% url 'ap_aging_summary_excel' %}?as_of={{ as_of_date|date:'Y-m-d' }}&currency={{ currency }}"
                class="btn ap-aging-summary-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' }}&currency={{ currency }}&page=1">
                    First
                </a>
                <a class="btn btn-sm pagination-page-btn"
                   href="?as_of={{ as_of_date|date:'Y-m-d' }}&currency={{ currency }}&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' }}&currency={{ currency }}&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' }}&currency={{ currency }}&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' }}">
                <input type="hidden" name="currency" value="{{ currency }}">
                <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 class="table-responsive">
        <table class="table table-bordered table-sm">
            <thead class="table-dark">
                <tr>
                    <th>Vendor</th>
                    <th class="text-right">Current</th>
                    <th class="text-right">1-30</th>
                    <th class="text-right">31-60</th>
                    <th class="text-right">61-90</th>
                    <th class="text-right">>90</th>
                    <th class="text-right">Total</th>
                </tr>
            </thead>
            <tbody>

                {% for row in aging_data %}
                <tr>
                    <td>
                        <a href="{% url 'ap_aging_vendor_detail' row.vendor %}">
                            {{ row.vendor }} - {{ row.vendor_name }}
                        </a>
                    </td>
                    <td class="text-right">{{ row.current|intcomma }}</td>
                    <td class="text-right">{{ row.1_30|intcomma }}</td>
                    <td class="text-right">{{ row.31_60|intcomma }}</td>
                    <td class="text-right">{{ row.61_90|intcomma }}</td>
                    <td class="text-right over90">{{ row.over_90|intcomma }}</td>
                    <td class="text-right"><strong>{{ row.total|intcomma }}</strong></td>
                </tr>
                {% endfor %}

                <tr class="grandtotal-row">
                    <td>GRAND TOTAL</td>
                    <td class="text-right">{{ summary.current|intcomma }}</td>
                    <td class="text-right">{{ summary.1_30|intcomma }}</td>
                    <td class="text-right">{{ summary.31_60|intcomma }}</td>
                    <td class="text-right">{{ summary.61_90|intcomma }}</td>
                    <td class="text-right over90">{{ summary.over_90|intcomma }}</td>
                    <td class="text-right">{{ summary.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' }}&currency={{ currency }}&page=1">
                    First
                </a>
                <a class="btn btn-sm pagination-page-btn"
                   href="?as_of={{ as_of_date|date:'Y-m-d' }}&currency={{ currency }}&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' }}&currency={{ currency }}&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' }}&currency={{ currency }}&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' }}">
                <input type="hidden" name="currency" value="{{ currency }}">
                <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 %}