{% 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-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;
    }
</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: 2rem; font-weight: 400; margin: 0;">
            Tax - Current Outstanding
        </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 Tax Account..." 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 == 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 == y %}selected{% endif %}>
                    {{ y }}
                </option>
                {% endfor %}
            </select>

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

        </form>
    </div>

    <div class="d-flex gap-2">
        <a href="{% url 'generate_pdf_tax_outstanding' %}?search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}"
            class="btn btn-secondary">
            Generate PDF
        </a>
        <a href="{% url 'export_to_excel_tax_outstanding' %}?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 mb-2">

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

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

        {% if paginator_obj.has_previous %}
            <a class="btn btn-sm pagination-page-btn"
               href="?page=1&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
                First
            </a>
            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ paginator_obj.previous_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
                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">
            {{ paginator_obj.number }} / {{ paginator_obj.paginator.num_pages }}
        </span>

        {% if paginator_obj.has_next %}
            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ paginator_obj.next_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
                Next
            </a>
            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ paginator_obj.paginator.num_pages }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">
                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="search" value="{{ query|default:'' }}">
            <input type="hidden" name="month" value="{{ month|default:'' }}">
            <input type="hidden" name="year" value="{{ year|default:'' }}">

            <span class="small text-muted">Go to Page</span>
            <input type="number" name="page" min="1"
                   max="{{ paginator_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-striped table-sm">
        <thead class="table-dark">
            <tr>
                <th>No</th>
                <th>Ven Code</th>
                <th>Ven Name</th>
                <th>Inv No</th>
                <th>Inv Date</th>
                <th>Due Date</th>
                <th>Ref No</th>
                <th>Description</th>
                <th>Currency</th>
                <th>Gov WHT Code</th>
                <th class="text-end">Ori Amt</th>
                <th class="text-end">USD Amt</th>
            </tr>
        </thead>
        <tbody>
            {% for row in page_obj %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ row.vendorcode }}</td>
                <td>{{ row.vendorname }}</td>
                <td>{{ row.invno }}</td>
                <td>{{ row.inv_date|date:"d-m-Y" }}</td>
                <td>{{ row.inv_due_date|date:"d-m-Y" }}</td>
                <td>{{ row.header.ref_no|format_ref_no }}</td>
                <td>{{ row.descript }}</td>
                <td>{{ row.header.currsign }}</td>
                <td>{{ row.govwhtcode }}</td>
                <td class="text-end">{{ row.oriamt|floatformat:2|intcomma }}</td>
                <td class="text-end">{{ row.usdamt|floatformat:2|intcomma }}</td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="12" 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>Total Ori</th>
                <td class="text-end">{{ total_ori|floatformat:2|intcomma }}</td>
            </tr>
            <tr>
                <th>Total USD</th>
                <td class="text-end">{{ total_usd|floatformat:2|intcomma }}</td>
            </tr>
        </table>
    </div>
</div>

<!-- PAGINATION BOTTOM -->
<div class="d-flex justify-content-between align-items-center mb-2">

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

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

        {% if paginator_obj.has_previous %}
            <a class="btn btn-sm pagination-page-btn"
               href="?page=1&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">First</a>
            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ paginator_obj.previous_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">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">
            {{ paginator_obj.number }} / {{ paginator_obj.paginator.num_pages }}
        </span>

        {% if paginator_obj.has_next %}
            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ paginator_obj.next_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">Next</a>
            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ paginator_obj.paginator.num_pages }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}">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="search" value="{{ query|default:'' }}">
            <input type="hidden" name="month" value="{{ month|default:'' }}">
            <input type="hidden" name="year" value="{{ year|default:'' }}">
            <span class="small text-muted">Go to Page</span>
            <input type="number" name="page" min="1"
                   max="{{ paginator_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>

{% endblock %}