{% 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);
    }

    .container-fluid {
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 10px;
    }

    .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-page-btn:disabled {
        background-color: #ffffff !important;
        border-color: #6c757d !important;
        color: #6c757d !important;
        opacity: 0.65;
    }

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

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

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

<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3 pb-2 border-bottom">

    <div class="d-flex flex-wrap align-items-center gap-3">

        <h4 style="font-size: 2.5rem; font-weight: 500; margin: 0;">
            A/P Report
        </h4>

        <form method="GET" id="searchForm" class="d-flex flex-wrap align-items-center gap-2">

            <input type="text" name="search" id="searchInput" value="{{ query|default:'' }}"
                class="form-control form-control-sm" placeholder="Search..." style="width:220px;">

            <select name="month" class="form-select form-select-sm" style="width:120px;">
                <option value="">Month</option>
                {% for m, name in months %}
                <option value="{{ m }}" {% if month and month in m %}selected{% endif %}>
                    {{ name }}
                </option>
                {% endfor %}
            </select>

            <select name="year" class="form-select form-select-sm" style="width:100px;">
                <option value="">Year</option>
                {% for y in years %}
                <option value="{{ y }}" {% if year and year in y %}selected{% endif %}>
                    {{ y }}
                </option>
                {% endfor %}
            </select>

            <button class="btn btn-secondary btn-sm">
                Filter
            </button>

        </form>
    </div>

    <div class="d-flex gap-2">

        <a href="{% url 'generate_pdf_ap' %}?search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}"
            class="btn btn-secondary">
            Generate PDF
        </a>

        <a href="{% url 'export_to_excel_ap' %}?search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}"
            class="btn btn-secondary">
            Export to Excel
        </a>
    </div>

</div>

<!-- PAGINATION TOP -->
<div class="d-flex justify-content-between align-items-center mt-2 mb-2"
    style="padding: 0 1rem;">

    <div>
        <small class="text-muted">
            Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
            of {{ page_obj.paginator.count }}
        </small>
    </div>

    <div class="d-flex align-items-center gap-1">

        <a class="btn btn-sm pagination-page-btn"
           href="?page=1&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
            First
        </a>

        {% if page_obj.has_previous %}
        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.previous_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
            Previous
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Previous
        </button>
        {% 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="?page={{ page_obj.next_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
            Next
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Next
        </button>
        {% endif %}

        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.paginator.num_pages }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
            Last
        </a>

        <span class="ms-2 small text-muted">Go to Page</span>

        <form method="GET" class="d-flex align-items-center gap-1 m-0">
            {% if query %}
            <input type="hidden" name="search" value="{{ query }}">
            {% endif %}
            {% if month %}
            <input type="hidden" name="month" value="{{ month }}">
            {% endif %}
            {% if year %}
            <input type="hidden" name="year" value="{{ year }}">
            {% endif %}

            <input type="number" name="page" min="1"
                   max="{{ page_obj.paginator.num_pages }}"
                   class="form-control form-control-sm"
                   style="width: 70px;" required>

            <button type="submit" class="btn btn-sm pagination-go">Go</button>
        </form>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-bordered table-striped table-sm">
        <thead class="table-dark">
            <tr>
                <th>No</th>
                <th>Vendor Code</th>
                <th>Vendor Name</th>
                <th>Invoice No</th>
                <th>Invoice Date</th>
                <th>Due Date</th>
                <th>Ref No</th>
                <th>Description</th>
                <th>Curr</th>

                <th class="text-end">Payable (Ori)</th>
                <th class="text-end">Paid (Ori)</th>
                <th class="text-end">Balance (Ori)</th>

                <th class="text-end">Payable (USD)</th>
                <th class="text-end">Paid (USD)</th>
                <th class="text-end">Balance (USD)</th>
            </tr>
        </thead>

        <tbody>
            {% for row in page_obj %}

            <tr class="table-primary fw-semibold">
                <td></td>
                <td>{{ row.invoice.vendorcode.vendorcode }}</td>
                <td>{{ row.invoice.vendorcode.vendorname }}</td>
                <td>{{ row.invoice.invno }}</td>
                <td>{{ row.invoice.invdate|date:"d-m-Y" }}</td>
                <td>{{ row.invoice.duedate|date:"d-m-Y" }}</td>
                <td>{{ row.invoice.refno }}</td>
                <td>{{ row.invoice.desc }}</td>
                <td>{{ row.invoice.currsign.currsign }}</td>

                {% if row.invoice.currsign.currsign == "USD" %}
                <td></td>
                <td></td>
                <td></td>
                <td class="text-end">{{ row.total_payable|floatformat:2|intcomma }}</td>
                <td class="text-end">{{ row.total_paid|floatformat:2|intcomma }}</td>
                <td class="text-end {% if row.balance > 0 %}text-danger{% else %}text-success{% endif %}">
                    {{ row.balance|floatformat:2|intcomma }}
                </td>
                {% else %}
                <td class="text-end">{{ row.total_payable|floatformat:2|intcomma }}</td>
                <td class="text-end">{{ row.total_paid|floatformat:2|intcomma }}</td>
                <td class="text-end {% if row.balance > 0 %}text-danger{% else %}text-success{% endif %}">
                    {{ row.balance|floatformat:2|intcomma }}
                </td>
                <td></td>
                <td></td>
                <td></td>
                {% endif %}
            </tr>

            {% for p in row.payable %}
            <tr>
                <td></td>
                <td colspan="7">Payable - {{ p.refno|format_journalno }} - JV Date : {{ p.date|date:"d-m-Y" }} - {{ p.description }}</td>
                <td>{{ p.currency }}</td>
                <td class="text-end">
                    {% if p.currency != "USD" %}{{ p.amount|floatformat:2|intcomma }}{% endif %}
                </td>
                <td colspan="5"></td>
            </tr>
            {% endfor %}

            {% for p in row.paid %}
            <tr>
                <td></td>
                <td colspan="7">Paid - {{ p.refno|format_journalno }} - JV Date : {{ p.date|date:"d-m-Y" }} - {{ p.description }}</td>
                <td>{{ p.currency }}</td>
                <td></td>
                <td class="text-end">
                    {% if p.currency != "USD" %}{{ p.amount|floatformat:2|intcomma }}{% endif %}
                </td>
                <td colspan="4"></td>
            </tr>
            {% endfor %}

            {% empty %}
            <tr>
                <td colspan="15" class="text-center">
                    No data found.
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- TOTAL SECTION -->
<div class="row mt-3">
    <div class="col-md-6"></div>
    <div class="col-md-6">
        <table class="table table-bordered table-sm">
            <tr>
                <th style="width:50%">Total IDR</th>
                <td class="text-end">
                    {{ total_idr|default:0|format_currency_dynamic:"IDR" }}
                </td>
            </tr>
            <tr>
                <th>Total USD</th>
                <td class="text-end">
                    {{ total_usd|default:0|format_currency_dynamic:"USD" }}
                </td>
            </tr>
        </table>
    </div>
</div>

<!-- PAGINATION BOTTOM -->
<div class="d-flex justify-content-between align-items-center mt-2 mb-2"
    style="padding: 0 1rem;">

    <div>
        <small class="text-muted">
            Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
            of {{ page_obj.paginator.count }}
        </small>
    </div>

    <div class="d-flex align-items-center gap-1">

        <a class="btn btn-sm pagination-page-btn"
           href="?page=1&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
            First
        </a>

        {% if page_obj.has_previous %}
        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.previous_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
            Previous
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Previous
        </button>
        {% 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="?page={{ page_obj.next_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
            Next
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Next
        </button>
        {% endif %}

        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.paginator.num_pages }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
            Last
        </a>

        <span class="ms-2 small text-muted">Go to Page</span>

        <form method="GET" class="d-flex align-items-center gap-1 m-0">
            {% if query %}
            <input type="hidden" name="search" value="{{ query }}">
            {% endif %}
            {% if month %}
            <input type="hidden" name="month" value="{{ month }}">
            {% endif %}
            {% if year %}
            <input type="hidden" name="year" value="{{ year }}">
            {% endif %}

            <input type="number" name="page" min="1"
                   max="{{ page_obj.paginator.num_pages }}"
                   class="form-control form-control-sm"
                   style="width: 70px;" required>

            <button type="submit" class="btn btn-sm pagination-go">Go</button>
        </form>
    </div>
</div>

<script>
    let timer;

    document.getElementById('searchInput').addEventListener('keyup', function () {
        clearTimeout(timer);

        timer = setTimeout(() => {
            document.getElementById('searchForm').submit();
        }, 500);
    });
</script>

{% endblock %}