{% extends "finance/base.html" %}
{% load humanize %}
{% block content %}
<style>
    .table-responsive {
        overflow-x: auto
    }

    .filter-label {
        font-weight: 600;
        margin-bottom: 4px
    }

    .report-title {
        font-size: 2.5rem;
        font-weight: 600;
        margin-bottom: 0
    }

    .btn-report {
        min-width: 90px
    }

    .showing-text {
        font-size: 13px;
        color: #6c757d
    }

    .pagination {
        margin-bottom: 0
    }

    .pagination .page-link {
        color: #495057
    }

    .pagination .active .page-link {
        background-color: rgb(80, 90, 97);
        border-color: rgb(80, 90, 97);
        color: #fff
    }

    .fqr4-table {
        min-width: 1250px;
        font-size: 12px
    }

    .fqr4-table th {
        background: #F2F2F2 !important;
        color: #111;
        border: 1px solid #d1cba9 !important;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap
    }

    .fqr4-table td {
        border: 1px solid #d1cba9 !important;
        vertical-align: middle
    }

    .fqr4-number {
        min-width: 125px;
        text-align: right;
        white-space: nowrap
    }

    .fqr4-line {
        width: 55px;
        text-align: center
    }

    .fqr4-description {
        min-width: 300px
    }

    .fqr4-total td {
        font-weight: 700;
        background: #dce8ef !important
    }
</style>
<div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-end flex-wrap gap-3 mb-3">
        <div>
            <div class="report-title">FQR#4</div>
            <div class="text-muted small">Report -4-</div>
        </div>
        <form method="get" class="d-flex flex-wrap align-items-end gap-2 mb-0">
            <div><label class="filter-label d-block">Year</label><select name="year" class="form-select">{% for y in
                    years %}<option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>{% endfor
                    %}</select></div>
            <div><label class="filter-label d-block">Quarter</label><select name="quarter" class="form-select">{% for
                    value,label in quarters %}<option value="{{ value }}" {% if value == quarter %}selected{% endif %}>{{
                        label }}</option>{% endfor %}</select></div>
            <button type="submit" class="btn btn-secondary btn-report">Calculate</button>
            <a href="?year={{ year }}&quarter={{ quarter }}&output=pdf" target="_blank"
                class="btn btn-secondary btn-report">PDF</a>
            <a href="?year={{ year }}&quarter={{ quarter }}&output=excel" class="btn btn-secondary btn-report">Excel</a>
        </form>
    </div>
    {% if paginator_obj %}
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="showing-text">{% if paginator_obj.paginator.count %}Showing {{ paginator_obj.start_index }} - {{
            paginator_obj.end_index }} of {{ paginator_obj.paginator.count }}{% else %}Showing 0 - 0 of 0{% endif %}
        </div>
        <nav>
            <ul class="pagination pagination-sm mb-0">
                {% if page_obj.has_previous %}<li class="page-item"><a class="page-link"
                        href="?year={{ year }}&quarter={{ quarter }}&page=1">First</a></li>
                <li class="page-item"><a class="page-link"
                        href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.previous_page_number }}">Previous</a>
                </li>{% endif %}
                {% for num in page_obj.paginator.page_range %}{% if num == page_obj.number %}<li
                    class="page-item active"><span class="page-link">{{ num }}</span></li>{% elif num >=
                page_obj.number|add:"-2" and num <= page_obj.number|add:"2" %}<li class="page-item"><a class="page-link"
                        href="?year={{ year }}&quarter={{ quarter }}&page={{ num }}">{{ num }}</a></li>{% endif %}{%
                    endfor %}
                    {% if page_obj.has_next %}<li class="page-item"><a class="page-link"
                            href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.next_page_number }}">Next</a>
                    </li>
                    <li class="page-item"><a class="page-link"
                            href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.paginator.num_pages }}">Last</a>
                    </li>{% endif %}
            </ul>
        </nav>
    </div>{% endif %}
    <div class="table-responsive">
        <table class="table table-bordered table-sm align-middle fqr4-table">
            <thead>
                <tr>
                    <th rowspan="2" class="fqr4-line">Line</th>
                    <th colspan="3">THIS QUARTER</th>
                    <th rowspan="2" class="fqr4-description">EXPENDITURE CATEGORIES</th>
                    <th colspan="3">YEAR TO DATE</th>
                </tr>
                <tr>
                    <th>1) Actual</th>
                    <th>2) Budget</th>
                    <th>3) Over/(Under) Budget</th>
                    <th>4) Actual</th>
                    <th>5) Budget</th>
                    <th>6) Over/(Under) Budget</th>
                </tr>
            </thead>
            <tbody>
                {% for row in page_obj %}<tr>
                    <td class="fqr4-line">{{ row.lineno }}</td>
                    <td class="fqr4-number">{{ row.qtract|floatformat:2|intcomma }}</td>
                    <td class="fqr4-number">{{ row.qtrbgt|floatformat:2|intcomma }}</td>
                    <td class="fqr4-number">{{ row.qtrover|floatformat:2|intcomma }}</td>
                    <td class="fqr4-description">{% if row.type == "ACCT" %}<span
                            style="display:inline-block;margin-left:20px">{{ row.descript }}</span>{% else %}{{
                        row.descript }}{% endif %}</td>
                    <td class="fqr4-number">{{ row.ytdact|floatformat:2|intcomma }}</td>
                    <td class="fqr4-number">{{ row.ytdbgt|floatformat:2|intcomma }}</td>
                    <td class="fqr4-number">{{ row.ytdover|floatformat:2|intcomma }}</td>
                </tr>
                {% empty %}<tr>
                    <td colspan="8" class="text-center text-muted py-4">No FQR#4 data found.</td>
                </tr>{% endfor %}
                {% if page_obj %}<tr class="fqr4-total">
                    <td></td>
                    <td class="text-end">{{ totals.qtract|floatformat:2|intcomma }}</td>
                    <td class="text-end">{{ totals.qtrbgt|floatformat:2|intcomma }}</td>
                    <td class="text-end">{{ totals.qtrover|floatformat:2|intcomma }}</td>
                    <td>Total</td>
                    <td class="text-end">{{ totals.ytdact|floatformat:2|intcomma }}</td>
                    <td class="text-end">{{ totals.ytdbgt|floatformat:2|intcomma }}</td>
                    <td class="text-end">{{ totals.ytdover|floatformat:2|intcomma }}</td>
                </tr>{% endif %}
            </tbody>
        </table>
    </div>
    {% if paginator_obj %}<div class="d-flex justify-content-between align-items-center mt-2">
        <div class="showing-text">{% if paginator_obj.paginator.count %}Showing {{ paginator_obj.start_index }} - {{
            paginator_obj.end_index }} of {{ paginator_obj.paginator.count }}{% else %}Showing 0 - 0 of 0{% endif %}
        </div>
        <nav>
            <ul class="pagination pagination-sm mb-0">
                {% if page_obj.has_previous %}<li class="page-item"><a class="page-link"
                        href="?year={{ year }}&quarter={{ quarter }}&page=1">First</a></li>
                <li class="page-item"><a class="page-link"
                        href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.previous_page_number }}">Previous</a>
                </li>{% endif %}
                {% for num in page_obj.paginator.page_range %}{% if num == page_obj.number %}<li
                    class="page-item active"><span class="page-link">{{ num }}</span></li>{% elif num >=
                page_obj.number|add:"-2" and num <= page_obj.number|add:"2" %}<li class="page-item"><a class="page-link"
                        href="?year={{ year }}&quarter={{ quarter }}&page={{ num }}">{{ num }}</a></li>{% endif %}{%
                    endfor %}
                    {% if page_obj.has_next %}<li class="page-item"><a class="page-link"
                            href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.next_page_number }}">Next</a>
                    </li>
                    <li class="page-item"><a class="page-link"
                            href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.paginator.num_pages }}">Last</a>
                    </li>{% endif %}
            </ul>
        </nav>
    </div>{% endif %}
</div>
{% endblock %}