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

{% load static %}
{% load custom_filters %}
{% load humanize %}

{% block content %}

<style>

    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .container-fluid {
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 10px;
    }

    /* =====================================================
       PAGINATION
       SAMA DENGAN YTD
       ===================================================== */

    .pagination-page-btn {
        background-color: #ffffff !important;
        border: 1px solid #6c757d !important;
        color: #495057 !important;
    }

    .pagination-page-btn:hover,
    .pagination-page-btn:focus {
        background-color: #f1f3f5 !important;
        border-color: #6c757d !important;
        color: #343a40 !important;
    }

    .pagination-current,
    .pagination-go {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }

    .pagination-current:hover,
    .pagination-current:focus,
    .pagination-go:hover,
    .pagination-go:focus {
        background-color: rgb(70, 80, 87) !important;
        border-color: rgb(70, 80, 87) !important;
        color: #ffffff !important;
    }

    .pagination-disabled {
        opacity: 0.55;
        pointer-events: none;
    }

    /* =====================================================
       TABLE
       ===================================================== */

    .budget-table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .budget-table {
        min-width: 1800px;
    }

    .budget-table th,
    .budget-table td {
        vertical-align: middle;
        white-space: nowrap;
    }

    .budget-table thead th {
        text-align: center;
        vertical-align: middle;
    }

    .budget-number {
        text-align: right;
    }

    .month-group {
        min-width: 520px;
    }

    .ytd-group {
        min-width: 520px;
    }

</style>


<div class="container-fluid">

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

    <div class="d-flex justify-content-between align-items-center mb-3">

        <div class="d-flex align-items-center gap-2">

            <h4 class="mb-0">
                Budget vs Actual - Monthly Detail
            </h4>

            <form
                method="get"
                class="d-flex align-items-center gap-2"
            >

                <!-- SEARCH -->

                <input
                    type="text"
                    name="search"
                    value="{{ query }}"
                    class="form-control form-control-sm"
                    placeholder="Search account..."
                    style="width: 220px;"
                >

                <!-- YEAR -->

                <select
                    name="year"
                    class="form-select form-select-sm"
                    style="width: 100px;"
                >

                    {% for y in years %}

                        <option
                            value="{{ y }}"
                            {% if y == year %}selected{% endif %}
                        >
                            {{ y }}
                        </option>

                    {% endfor %}

                </select>


                <!-- MONTH -->

                <select
                    name="month"
                    class="form-select form-select-sm"
                    style="width: 125px;"
                >

                    {% for month_value, month_name in months %}

                        <option
                            value="{{ month_value }}"
                            {% if month_value|stringformat:"s" == month %}selected{% endif %}
                        >
                            {{ month_name }}
                        </option>

                    {% endfor %}

                </select>


                <!-- FILTER -->

                <button
                    type="submit"
                    class="btn btn-sm btn-secondary"
                >
                    <i class="bi bi-funnel"></i>
                    Filter
                </button>

            </form>

        </div>


        <!-- =================================================
             PDF + EXCEL
             ================================================= -->

        <div class="d-flex align-items-center gap-2">

            <a
                href="{{ request.path }}?year={{ year }}&month={{ month }}{% if query %}&search={{ query|urlencode }}{% endif %}&output=pdf"
                target="_blank"
                class="btn btn-sm btn-secondary"
            >
                Generate PDF
            </a>

            <a
                href="{{ request.path }}?year={{ year }}&month={{ month }}{% if query %}&search={{ query|urlencode }}{% endif %}&output=excel"
                class="btn btn-sm btn-secondary"
            >
                Export to Excel
            </a>

        </div>

    </div>


    <!-- =====================================================
         TOP PAGINATION
         ===================================================== -->

    <div class="d-flex justify-content-between align-items-center mb-2">

        <div class="small text-muted">

            {% if page_obj.paginator.count > 0 %}

                Showing
                {{ page_obj.start_index }}
                -
                {{ page_obj.end_index }}
                of
                {{ page_obj.paginator.count }}

            {% else %}

                Showing 0 - 0 of 0

            {% endif %}

        </div>


        <div class="d-flex align-items-center gap-1">

            {% if page_obj.has_previous %}

                <a
                    class="btn btn-sm pagination-page-btn"
                    href="?page=1&year={{ year }}&month={{ month }}{% if query %}&search={{ query|urlencode }}{% endif %}"
                >
                    First
                </a>

                <a
                    class="btn btn-sm pagination-page-btn"
                    href="?page={{ page_obj.previous_page_number }}&year={{ year }}&month={{ month }}{% if query %}&search={{ query|urlencode }}{% endif %}"
                >
                    Previous
                </a>

            {% else %}

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    First
                </span>

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Previous
                </span>

            {% endif %}


            <span class="btn btn-sm pagination-current">
                {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
            </span>


            {% if page_obj.has_next %}

                <a
                    class="btn btn-sm pagination-page-btn"
                    href="?page={{ page_obj.next_page_number }}&year={{ year }}&month={{ month }}{% if query %}&search={{ query|urlencode }}{% endif %}"
                >
                    Next
                </a>

                <a
                    class="btn btn-sm pagination-page-btn"
                    href="?page={{ page_obj.paginator.num_pages }}&year={{ year }}&month={{ month }}{% if query %}&search={{ query|urlencode }}{% endif %}"
                >
                    Last
                </a>

            {% else %}

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Next
                </span>

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Last
                </span>

            {% endif %}


            <!-- GO TO PAGE -->

            <form
                method="get"
                class="d-flex align-items-center ms-2"
            >

                {% if query %}

                    <input
                        type="hidden"
                        name="search"
                        value="{{ query }}"
                    >

                {% endif %}

                <input
                    type="hidden"
                    name="year"
                    value="{{ year }}"
                >

                <input
                    type="hidden"
                    name="month"
                    value="{{ month }}"
                >

                <input
                    type="number"
                    name="page"
                    min="1"
                    max="{{ page_obj.paginator.num_pages }}"
                    class="form-control form-control-sm"
                    style="width: 70px;"
                    placeholder="Page"
                >

                <button
                    type="submit"
                    class="btn btn-sm pagination-go ms-1"
                >
                    Go
                </button>

            </form>

        </div>

    </div>


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

    <div class="budget-table-wrapper">

        <table
            class="table table-bordered table-hover table-sm budget-table"
        >

            <thead class="table-dark">

                <tr>

                    <th style="width: 60px;">
                        No
                    </th>

                    <th style="width: 220px;">
                        Account No
                    </th>

                    <th style="width: 350px;">
                        Account Name
                    </th>


                    <!-- MONTHLY COLUMNS -->

                    {% for month_info in selected_months %}

                        <th style="width: 200px;">
                            {{ month_info.name }} Budget
                        </th>

                        <th style="width: 200px;">
                            {{ month_info.name }} Actual
                        </th>

                        <th style="width: 200px;">
                            {{ month_info.name }} Variance
                        </th>

                    {% endfor %}


                    <!-- YTD -->

                    <th style="width: 200px;">
                        YTD Budget
                    </th>

                    <th style="width: 200px;">
                        YTD Actual
                    </th>

                    <th style="width: 200px;">
                        YTD Variance
                    </th>

                </tr>

            </thead>


            <tbody>

                {% for row in page_obj %}

                    <tr>

                        <td class="text-center">
                            {{ page_obj.start_index|add:forloop.counter0 }}
                        </td>


                        <td>
                            {{ row.acct_no|format_acct_no }}
                        </td>


                        <td>
                            {{ row.acct_name }}
                        </td>


                        <!-- MONTHLY DATA -->

                        {% for month_data in row.monthly %}

                            <td class="budget-number">
                                {{ month_data.budget|default:0|floatformat:2|intcomma }}
                            </td>

                            <td class="budget-number">
                                {{ month_data.actual|default:0|floatformat:2|intcomma }}
                            </td>

                            <td class="budget-number">
                                {{ month_data.variance|default:0|floatformat:2|intcomma }}
                            </td>

                        {% endfor %}


                        <!-- YTD -->

                        <td class="budget-number">
                            {{ row.ytd_budget|default:0|floatformat:2|intcomma }}
                        </td>

                        <td class="budget-number">
                            {{ row.ytd_actual|default:0|floatformat:2|intcomma }}
                        </td>

                        <td class="budget-number">
                            {{ row.ytd_variance|default:0|floatformat:2|intcomma }}
                        </td>

                    </tr>


                {% empty %}

                    <tr>

                        <td
                            colspan="42"
                            class="text-center text-muted py-3"
                        >
                            No data found.
                        </td>

                    </tr>

                {% endfor %}

            </tbody>

        </table>

    </div>


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

    <div class="d-flex justify-content-end align-items-center mt-2 mb-2">

        <div class="d-flex align-items-center gap-4">

            <div class="small">
                <strong>
                    Total YTD Budget:
                </strong>

                {{ page_obj.total_ytd_budget|default:0|floatformat:2|intcomma }}
            </div>


            <div class="small">
                <strong>
                    Total YTD Actual:
                </strong>

                {{ page_obj.total_ytd_actual|default:0|floatformat:2|intcomma }}
            </div>


            <div class="small">
                <strong>
                    Total YTD Variance:
                </strong>

                {{ page_obj.total_ytd_variance|default:0|floatformat:2|intcomma }}
            </div>

        </div>

    </div>


    <!-- =====================================================
         BOTTOM PAGINATION
         ===================================================== -->

    <div class="d-flex justify-content-between align-items-center mt-2">

        <div class="small text-muted">

            {% if page_obj.paginator.count > 0 %}

                Showing
                {{ page_obj.start_index }}
                -
                {{ page_obj.end_index }}
                of
                {{ page_obj.paginator.count }}

            {% else %}

                Showing 0 - 0 of 0

            {% endif %}

        </div>


        <div class="d-flex align-items-center gap-1">

            {% if page_obj.has_previous %}

                <a
                    class="btn btn-sm pagination-page-btn"
                    href="?page=1&year={{ year }}&month={{ month }}{% if query %}&search={{ query|urlencode }}{% endif %}"
                >
                    First
                </a>

                <a
                    class="btn btn-sm pagination-page-btn"
                    href="?page={{ page_obj.previous_page_number }}&year={{ year }}&month={{ month }}{% if query %}&search={{ query|urlencode }}{% endif %}"
                >
                    Previous
                </a>

            {% else %}

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    First
                </span>

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Previous
                </span>

            {% endif %}


            <span class="btn btn-sm pagination-current">
                {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
            </span>


            {% if page_obj.has_next %}

                <a
                    class="btn btn-sm pagination-page-btn"
                    href="?page={{ page_obj.next_page_number }}&year={{ year }}&month={{ month }}{% if query %}&search={{ query|urlencode }}{% endif %}"
                >
                    Next
                </a>

                <a
                    class="btn btn-sm pagination-page-btn"
                    href="?page={{ page_obj.paginator.num_pages }}&year={{ year }}&month={{ month }}{% if query %}&search={{ query|urlencode }}{% endif %}"
                >
                    Last
                </a>

            {% else %}

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Next
                </span>

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Last
                </span>

            {% endif %}


            <!-- GO TO PAGE -->

            <form
                method="get"
                class="d-flex align-items-center ms-2"
            >

                {% if query %}

                    <input
                        type="hidden"
                        name="search"
                        value="{{ query }}"
                    >

                {% endif %}

                <input
                    type="hidden"
                    name="year"
                    value="{{ year }}"
                >

                <input
                    type="hidden"
                    name="month"
                    value="{{ month }}"
                >

                <input
                    type="number"
                    name="page"
                    min="1"
                    max="{{ page_obj.paginator.num_pages }}"
                    class="form-control form-control-sm"
                    style="width: 70px;"
                    placeholder="Page"
                >

                <button
                    type="submit"
                    class="btn btn-sm pagination-go ms-1"
                >
                    Go
                </button>

            </form>

        </div>

    </div>

</div>

{% endblock %}