{% 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;
}
.attach11-table {
    min-width: 1900px;
    font-size: 12px;
}
.attach11-table th {
    background: #F2F2F2 !important;
    color: #111 !important;
    border: 1px solid #d1cba9 !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 4px;
}
.attach11-table td {
    border: 1px solid #d1cba9 !important;
    vertical-align: middle;
    padding: 3px;
}
.attach11-line {
    min-width: 45px;
    text-align: center;
}
.attach11-description {
    min-width: 220px;
    white-space: nowrap;
}
.attach11-number {
    min-width: 105px;
    text-align: right;
    white-space: nowrap;
}
.attach11-total td {
    font-weight: 700;
    background: #dce8ef !important;
}
.attach11-section td {
    background: #0878cf !important;
    color: #fff !important;
    font-weight: 600;
}
</style>

<div class="container-fluid mt-3">

    <!-- Page title and filters -->
    <div class="d-flex justify-content-between align-items-end flex-wrap gap-3 mb-3">
        <div>
            <div class="report-title">FQR#11 Attachment</div>
            <div class="text-muted small">Attachment -11-</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>

    <!-- Pagination top -->
    {% 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 %}

    <!-- Attachment 11 table -->
    <div class="table-responsive">
        <table class="table table-bordered table-sm align-middle attach11-table">

            <thead>
                <tr>
                    <th rowspan="3" class="attach11-line">Line</th>
                    <th rowspan="3" class="attach11-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="attach11-section"{% endif %}>

                    <td class="attach11-line">
                        {{ row.lineno }}
                    </td>

                    <td class="attach11-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="attach11-number">
                        {{ value|floatformat:2|intcomma }}
                    </td>
                    {% endfor %}

                    <td class="attach11-number">
                        {{ row.qtract|floatformat:2|intcomma }}
                    </td>
                    <td class="attach11-number">
                        {{ row.qtrbgt|floatformat:2|intcomma }}
                    </td>
                    <td class="attach11-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="attach11-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>

    <!-- Pagination bottom -->
    {% 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 %}