{% 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;
}
.attach8-table { min-width: 1900px; font-size: 12px; }
.attach8-table th {
    background: #F2F2F2 !important;
    color: #111 !important;
    border: 1px solid #d1cba9 !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 4px;
}
.attach8-table td {
    border: 1px solid #d1cba9 !important;
    vertical-align: middle;
    padding: 3px;
}
.attach8-line { min-width: 45px; text-align: center; }
.attach8-description { min-width: 220px; white-space: nowrap; }
.attach8-number { min-width: 105px; text-align: right; white-space: nowrap; }
.attach8-total td { font-weight: 700; background: #dce8ef !important; }
.attach8-section td {
    background: #0878cf !important;
    color: #fff !important;
    font-weight: 600;
}
</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 Attachment</div>
            <div class="text-muted small">Attachment -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>
            <button type="submit" name="output" value="pdf"
                    formtarget="_blank" class="btn btn-secondary btn-report">PDF</button>
            <button type="submit" name="output" value="excel"
                    class="btn btn-secondary btn-report">Excel</button>
        </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 attach8-table">
            <thead>
                <tr>
                    <th rowspan="3" class="attach8-line">Line</th>
                    <th rowspan="3" class="attach8-description">Description</th>
                    <th colspan="4">Personnel Cost</th>
                    <th colspan="2">Technical Services</th>
                    <th rowspan="3">5) Contract /<br>Outside Services</th>
                    <th colspan="2" rowspan="2">6) Material</th>
                    <th colspan="2" rowspan="2">7) Insurance</th>
                    <th colspan="2" rowspan="2">8) Environment</th>
                    <th rowspan="3">9) Sundries</th>
                    <th colspan="3">TOTAL THIS PERIOD</th>
                </tr>
                <tr>
                    <th colspan="2">1) Salaries &amp; Wages</th>
                    <th colspan="2">2) Others/Empl. Benefit</th>
                    <th rowspan="2">3) Corporate<br>Assistant</th>
                    <th rowspan="2">4) Contracts</th>
                    <th rowspan="2">Actual</th>
                    <th rowspan="2">Budget</th>
                    <th rowspan="2">Over/(Under)<br>Budget</th>
                </tr>
                <tr>
                    <th>Expt.</th><th>Nat'l</th>
                    <th>Expt.</th><th>Nat'l</th>
                    <th>Dom.</th><th>Import</th>
                    <th>Dom.</th><th>Import</th>
                    <th>Comm.Dev</th><th>Env.Ctrl</th>
                </tr>
            </thead>
            <tbody>
                {% for row in page_obj %}
                <tr {% if row.type == "HEADER" or row.type == "TITLE" or row.type == "SECTION" %}class="attach8-section"{% endif %}>
                    <td class="attach8-line">{{ row.lineno }}</td>
                    <td class="attach8-description">
                        {% if row.type == "ACCT" %}
                            <span style="display:inline-block;margin-left:20px">{{ row.descript }}</span>
                        {% else %}
                            {{ row.descript }}
                        {% endif %}
                    </td>

                    {% for value in row.column_values %}
                    <td class="attach8-number">{{ value|floatformat:2|intcomma }}</td>
                    {% endfor %}

                    <td class="attach8-number">{{ row.qtract|floatformat:2|intcomma }}</td>
                    <td class="attach8-number">{{ row.qtrbgt|floatformat:2|intcomma }}</td>
                    <td class="attach8-number">{{ row.qtroverbgt|floatformat:2|intcomma }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="19" class="text-center text-muted py-4">No attachment data found.</td>
                </tr>
                {% endfor %}

                {% if page_obj %}
                <tr class="attach8-total">
                    <td></td>
                    <td>Total</td>
                    {% for value in totals.column_values %}
                    <td class="text-end">{{ value|floatformat:2|intcomma }}</td>
                    {% endfor %}
                    <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.qtroverbgt|floatformat:2|intcomma }}</td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}