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

{% block content %}

<style>
    .level-0 {
        padding-left: 0px !important;
        font-weight: bold;
    }

    .level-1 {
        padding-left: 20px !important;
    }

    .level-2 {
        padding-left: 40px !important;
    }

    .level-3 {
        padding-left: 60px !important;
    }

    .level-4 {
        padding-left: 80px !important;
    }

    .level-5 {
        padding-left: 100px !important;
    }

    .total-row {
        font-weight: bold;
        background: #f5f5f5;
    }

    .acct-row {
        cursor: pointer;
    }

    .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;
    }
</style>


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

    <h3 class="fw-bold mb-3">
        Balance Sheet
    </h3>

    <p class="text-muted">
        As of {{ as_of }} ({{ currency }})
    </p>


    <div class="card shadow-sm mb-4">

        <div class="card-body">

            <form method="get" class="row g-3">

                <div class="col-md-3">

                    <select name="period" class="form-select">

                        {% for p in periods %}

                        <option value="{{ p|date:'Y-m' }}"
                            {% if p|date:'Y-m' == period %}selected{% endif %}>

                            {{ p|date:"M Y" }}

                        </option>

                        {% endfor %}

                    </select>

                </div>


                <div class="col-md-2">

                    <select name="currency" class="form-select">

                        <option value="IDR"
                            {% if currency == "IDR" %}selected{% endif %}>
                            IDR
                        </option>

                        <option value="USD"
                            {% if currency == "USD" %}selected{% endif %}>
                            USD
                        </option>

                    </select>

                </div>


                <div class="col-md-7 text-end">

                    <button class="btn btn-secondary">
                        Search
                    </button>

                    <button name="export"
                        value="pdf"
                        class="btn btn-secondary"
                        formtarget="_blank">

                        PDF

                    </button>

                    <button name="export"
                        value="excel"
                        class="btn btn-secondary">

                        Excel

                    </button>

                </div>

            </form>

        </div>

    </div>


    {% if report %}

    <!-- PAGINATION TOP -->

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

        <div class="text-muted small">

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

        </div>


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

            {% if paginator_obj.has_previous %}

            <a class="btn btn-sm pagination-page-btn"
                href="?page=1&period={{ period }}&currency={{ currency }}">

                First

            </a>

            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.previous_page_number }}&period={{ period }}&currency={{ currency }}">

                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">

                {{ paginator_obj.number }}
                /
                {{ paginator_obj.paginator.num_pages }}

            </span>


            {% if paginator_obj.has_next %}

            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.next_page_number }}&period={{ period }}&currency={{ currency }}">

                Next

            </a>

            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.paginator.num_pages }}&period={{ period }}&currency={{ currency }}">

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


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

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

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

                <span class="small text-muted">
                    Go to Page
                </span>

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

                <button type="submit"
                    class="btn btn-sm pagination-go">

                    Go

                </button>

            </form>

        </div>

    </div>


    <div class="card shadow-sm">

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

            <thead class="table-light">

                <tr>

                    <th>Description</th>

                    <th class="text-end">
                        Incep → Last Month
                    </th>

                    <th class="text-end">
                        Current Month
                    </th>

                    <th class="text-end">
                        Incep → Date
                    </th>

                </tr>

            </thead>


            <tbody>

                {% for row in report %}

                <tr>

                    <td class="level-{{ row.level }} {% if row.acct_no %}acct-row{% endif %}"
                        data-acct="{{ row.acct_no|default:'' }}"
                        data-desc="{{ row.descript }}">

                        {{ row.descript }}

                    </td>

                    <td class="text-end">

                        {{ row.incep2lm|intcomma }}

                    </td>

                    <td class="text-end">

                        {{ row.currmonth|intcomma }}

                    </td>

                    <td class="text-end">

                        {{ row.incep2date|intcomma }}

                    </td>

                </tr>

                {% endfor %}

            </tbody>

        </table>

    </div>


    <!-- PAGINATION BOTTOM -->

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

        <div class="text-muted small">

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

        </div>


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

            {% if paginator_obj.has_previous %}

            <a class="btn btn-sm pagination-page-btn"
                href="?page=1&period={{ period }}&currency={{ currency }}">

                First

            </a>

            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.previous_page_number }}&period={{ period }}&currency={{ currency }}">

                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">

                {{ paginator_obj.number }}
                /
                {{ paginator_obj.paginator.num_pages }}

            </span>


            {% if paginator_obj.has_next %}

            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.next_page_number }}&period={{ period }}&currency={{ currency }}">

                Next

            </a>

            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.paginator.num_pages }}&period={{ period }}&currency={{ currency }}">

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


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

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

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

                <span class="small text-muted">
                    Go to Page
                </span>

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

                <button type="submit"
                    class="btn btn-sm pagination-go">

                    Go

                </button>

            </form>

        </div>

    </div>

    {% endif %}

</div>


<!-- =============================== -->
<!-- MODAL DETAIL TRANSACTION -->
<!-- =============================== -->

<div class="modal fade" id="detailModal">

    <div class="modal-dialog modal-xl modal-dialog-scrollable">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">
                    Transaction Detail
                </h5>

                <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal">
                </button>

            </div>


            <div class="modal-body" id="modal-body">

                Loading...

            </div>

        </div>

    </div>

</div>


<script>

document.addEventListener("DOMContentLoaded", function () {

    let modalElement = document.getElementById("detailModal")
    let modal = new bootstrap.Modal(modalElement)

    document.querySelectorAll(".acct-row").forEach(function (row) {

        row.addEventListener("dblclick", function () {

            let acct = this.dataset.acct
            let desc = this.dataset.desc

            if (!acct) {
                return
            }

            document.getElementById("modal-body").innerHTML = "Loading..."

            fetch("/balance_sheet/detail/" + acct +
                "?period={{ period }}&currency={{ currency }}&descript=" +
                encodeURIComponent(desc))

                .then(response => response.text())

                .then(html => {

                    document.getElementById("modal-body").innerHTML = html

                    modal.show()

                })

        })

    })

})

</script>


<script>

document.addEventListener("dblclick", function(e){

    if(e.target.closest(".ref-row")){

        let row = e.target.closest(".ref-row")

        let ref = row.dataset.ref

        let acct = row.dataset.acct

        fetch("/journal/detail/" + ref +
            "/?acct=" + acct +
            "&currency={{ currency }}")

            .then(response => response.text())

            .then(html => {

                document.getElementById("modal-body").innerHTML = html

            })

    }

})

</script>

{% endblock %}