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


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

<h3 class="fw-bold mb-3">
    Profit and Loss
</h3>

<p class="text-muted">
    Period Ending {{ 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-primary">
                        Search
                    </button>

                    <button name="export" value="pdf" class="btn btn-danger" formtarget="_blank">
                        PDF
                    </button>

                    <button name="export" value="excel" class="btn btn-success">
                        Excel
                    </button>

                </div>

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

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