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

{% block content %}
<style>
.table-responsive { overflow-x: auto; }
.report-title { font-size: 2.5rem; font-weight: 600; margin-bottom: 0; }
.filter-label { font-weight: 600; margin-bottom: 4px; }
.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: white; }
.fqr8-table { min-width: 1250px; font-size: 12px; }
.fqr8-table th { background-color: #F2F2F2 !important; color: #111 !important; border: 1px solid #d1cba9 !important; text-align: center; vertical-align: middle; white-space: nowrap; }
.fqr8-table td { border: 1px solid #d1cba9 !important; vertical-align: middle; }
.fqr8-table .fqr8-line { width: 50px; text-align: center; }
.fqr8-table .fqr8-number { min-width: 125px; text-align: right; white-space: nowrap; }
.fqr8-table .fqr8-category { min-width: 300px; text-align: left; white-space: nowrap; }
.fqr8-table .total-row td { font-weight: 700; background-color: #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#8</div>
            <div class="text-muted small">Report -8-</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 > 0 %}
                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 fqr8-table">
            <thead>
                <tr>
                    <th rowspan="2" class="fqr8-line">Line</th>
                    <th colspan="1">LAST QUARTER</th>
                    <th colspan="3">THIS QUARTER</th>
                    <th rowspan="2" class="fqr8-category">EXPENSE CATEGORY</th>
                    <th colspan="3">YEAR TO DATE</th>
                </tr>
                <tr>
                    <th>1) Actual</th>
                    <th>2) Actual</th>
                    <th>3) Budget</th>
                    <th>4) Over/(Under) Budget</th>
                    <th>5) Actual</th>
                    <th>6) Budget</th>
                    <th>7) Over/(Under) Budget</th>
                </tr>
            </thead>
            <tbody>
                {% for row in page_obj %}
                <tr>
                    <td class="fqr8-line">{{ row.lineno }}</td>
                    <td class="fqr8-number">{{ row.lqtract|floatformat:2|intcomma }}</td>
                    <td class="fqr8-number">{{ row.qtract|floatformat:2|intcomma }}</td>
                    <td class="fqr8-number">{{ row.qtrbgt|floatformat:2|intcomma }}</td>
                    <td class="fqr8-number">{{ row.qtrover|floatformat:2|intcomma }}</td>
                    <td class="fqr8-category">
                        {% if row.type == "ACCT" %}
                            <span style="display:inline-block; margin-left:20px;">{{ row.descript }}</span>
                        {% else %}
                            {{ row.descript }}
                        {% endif %}
                    </td>
                    <td class="fqr8-number">{{ row.ytdact|floatformat:2|intcomma }}</td>
                    <td class="fqr8-number">{{ row.ytdbgt|floatformat:2|intcomma }}</td>
                    <td class="fqr8-number">{{ row.ytdover|floatformat:2|intcomma }}</td>
                </tr>
                {% empty %}
                <tr><td colspan="9" class="text-center text-muted py-4">No FQR#8 data found.</td></tr>
                {% endfor %}
                {% if page_obj %}
                <tr class="total-row">
                    <td></td>
                    <td class="text-end">{{ totals.lqtract|floatformat:2|intcomma }}</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 > 0 %}
                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 %}