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

{% load static %}

{% load custom_filters %}

{% load humanize %}

{% block content %}

<style>

    .table-responsive {

        overflow-x: auto;

    }

    .table {

        font-size: 13px;

    }

    .table .table-dark th {

        background-color: rgb(80, 90, 97) !important;

        border-color: rgb(70, 80, 87);

        color: white;

        vertical-align: middle;

        text-align: center;

        white-space: nowrap;

    }

    .pqr3-group-header {

        background-color: rgb(80, 90, 97) !important;

        color: white !important;

        text-align: center;

        font-weight: 600;

    }

    .pqr3-sub-header {

        background-color: rgb(108, 117, 125) !important;

        color: white !important;

        text-align: center;

        font-size: 12px;

        line-height: 1.15;

    }

    .pqr3-description {

        min-width: 280px;

    }

    .pqr3-number {

        min-width: 125px;

        text-align: right;

        white-space: nowrap;

    }

    .pqr3-no {

        width: 55px;

        text-align: center;

    }

    .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;

    }

    .showing-text {

        font-size: 13px;

        color: #6c757d;

    }

    .filter-label {

        font-weight: 600;

        margin-bottom: 4px;

    }


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

    .total-row td {

        font-weight: 700;

        background-color: #f1f3f5 !important;

    }

    .btn-report {

        min-width: 90px;

    }

/* PQR3 TABLE */

.pqr3-table {

    min-width: 1450px;

    font-size: 12px;

}

.pqr3-table th {

    background-color: #F2F2F2 !important;

    color: #111 !important;

    border: 1px solid #d1cba9 !important;

    text-align: center;

    vertical-align: middle;

    white-space: nowrap;

}

.pqr3-table td {

    border: 1px solid #d1cba9 !important;

    vertical-align: middle;

}

.pqr3-table .pqr3-group-header,

.pqr3-table .pqr3-sub-header {

    background-color: #F2F2F2 !important;

    color: #111 !important;

    text-align: center;

    white-space: nowrap;

}

.pqr3-table .pqr3-number {

    min-width: 105px;

    text-align: right;

    white-space: nowrap;

}

.pqr3-table .pqr3-line {

    width: 50px;

    text-align: center;

}

.pqr3-table .pqr3-classification {

    min-width: 250px;

    white-space: nowrap;

}

/* Header Classification saja yang rata tengah */

.pqr3-table th.pqr3-classification {

    text-align: center;

    vertical-align: middle;

}

/* Isi Classification rata kiri */

.pqr3-table td.pqr3-classification {

    text-align: left;

    vertical-align: middle;

}

.pqr3-table .total-row td {

    font-weight: 700;

    background-color: #dce8ef !important;

}

</style>

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

    <!-- ================================================= -->

    <!-- TITLE -->

    <!-- ================================================= -->


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

    <!-- ================================================= -->

    <!-- TOP PAGINATION -->

    <!-- ================================================= -->

    {% 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 %}

    <!-- ================================================= -->

    <!-- TABLE -->

    <!-- ================================================= -->

    <div class="table-responsive">

        <table class="table table-bordered table-sm align-middle pqr3-table">

            <thead>

                <tr>

                    <th rowspan="3" class="pqr3-line">Line</th>

                    <th colspan="6" class="pqr3-group-header">THIS QUARTER</th>

                    <th rowspan="3" class="pqr3-classification">CLASSIFICATION</th>

                    <th colspan="6" class="pqr3-group-header">YEAR TO DATE</th>

                </tr>

                <tr>

                    <th colspan="2">Non-Capital</th>

                    <th colspan="2">Capital</th>

                    <th colspan="2">Total</th>

                    <th colspan="2">Non-Capital</th>

                    <th colspan="2">Capital</th>

                    <th colspan="2">Total</th>

                </tr>

                <tr>

                    <th>1) Actual</th>

                    <th>2) Budget</th>

                    <th>3) Actual</th>

                    <th>4) Budget</th>

                    <th>5) Actual</th>

                    <th>6) Budget</th>

                    <th>1) Actual</th>

                    <th>2) Budget</th>

                    <th>3) Actual</th>

                    <th>4) Budget</th>

                    <th>5) Actual</th>

                    <th>6) Budget</th>

                </tr>

            </thead>

            <tbody>

                {% for row in page_obj %}

                <tr>

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

                    <td class="pqr3-number">

                        {{ row.qtract1|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-number">

                        {{ row.qtrbgt1|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-number">

                        {{ row.qtract2|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-number">

                        {{ row.qtrbgt2|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-number fw-semibold">

                        {{ row.qtrtot1|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-number fw-semibold">

                        {{ row.qtrtot2|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-classification">

                        {% if row.type == "ACCT" %}

                            <span style="display: inline-block; margin-left: 20px;">

                                {{ row.descript }}

                            </span>

                        {% else %}

                            {{ row.descript }}

                        {% endif %}

                    </td>

                    <td class="pqr3-number">

                        {{ row.ytdact1|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-number">

                        {{ row.ytdbgt1|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-number">

                        {{ row.ytdact2|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-number">

                        {{ row.ytdbgt2|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-number fw-semibold">

                        {{ row.ytdtot1|floatformat:2|intcomma }}

                    </td>

                    <td class="pqr3-number fw-semibold">

                        {{ row.ytdtot2|floatformat:2|intcomma }}

                    </td>

                </tr>

                {% empty %}

                <tr>

                    <td colspan="14" class="text-center text-muted py-4">

                        No PQR3 data found.

                    </td>

                </tr>

                {% endfor %}

                {% if page_obj %}

                <tr class="total-row">

                    <td></td>

                    <td class="text-end">{{ totals.qtract1|floatformat:2|intcomma }}</td>

                    <td class="text-end">{{ totals.qtrbgt1|floatformat:2|intcomma }}</td>

                    <td class="text-end">{{ totals.qtract2|floatformat:2|intcomma }}</td>

                    <td class="text-end">{{ totals.qtrbgt2|floatformat:2|intcomma }}</td>

                    <td class="text-end">{{ totals.qtrtot1|floatformat:2|intcomma }}</td>

                    <td class="text-end">{{ totals.qtrtot2|floatformat:2|intcomma }}</td>

                    <td>Total</td>

                    <td class="text-end">{{ totals.ytdact1|floatformat:2|intcomma }}</td>

                    <td class="text-end">{{ totals.ytdbgt1|floatformat:2|intcomma }}</td>

                    <td class="text-end">{{ totals.ytdact2|floatformat:2|intcomma }}</td>

                    <td class="text-end">{{ totals.ytdbgt2|floatformat:2|intcomma }}</td>

                    <td class="text-end">{{ totals.ytdtot1|floatformat:2|intcomma }}</td>

                    <td class="text-end">{{ totals.ytdtot2|floatformat:2|intcomma }}</td>

                </tr>

                {% endif %}

            </tbody>

        </table>

    </div>

    <!-- ================================================= -->

    <!-- BOTTOM PAGINATION -->

    <!-- ================================================= -->

    {% 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 %}