{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}
{% load form_extras %}

{% block content %}
<style>
    /* (sama seperti style Anda sebelumnya, disingkat) */
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }

    .center-label {
        display: block;
        width: 100%;
        text-align: center;
    }

    .small-input {
        padding: .35rem .5rem;
        font-size: .9rem;
    }

    .journal-modal {
        max-width: 95% !important;
        width: 95% !important;
    }

    .total-row td {
        border-top: 3px double #000 !important;
        border-bottom: 3px double #000 !important;
        background-color: #f8f9fa;
    }

    .total-row td:first-child {
        letter-spacing: 1px;
    }


    .total-row td:last-child {
        color: #b02a37;
        /* merah gelap */
    }
</style>

<div class="row align-items-center px-3 py-3">

    <!-- LEFT : TITLE -->
    <div class="col-md-4">
        <h2 class="mb-0" style="font-size: 3rem; font-weight: 500;">
            Revaluation Form
        </h2>
    </div>

    <!-- CENTER : SEARCH -->
    <div class="col-md-4 d-flex justify-content-center">
        <form method="GET" class="d-flex gap-2 w-100" style="max-width: 350px;">
            <input type="text" name="search_ref" class="form-control" placeholder="Search Periode..."
                value="{{ search_ref }}">
            <button class="btn btn-secondary btn-sm">Search</button>

            {% if search_ref %}
            <a href="{% url 'revaluation' %}" class="btn btn-outline-secondary btn-sm">
                Reset
            </a>
            {% endif %}
        </form>
    </div>
</div>

<form method="get" class="row g-2 mb-3 align-items-end">

    <div class="col-md-3">
        <label class="form-label fw-semibold">Month</label>
        <select name="month" id="month" class="form-select">
            {% for value, label in months %}
            <option value="{{ value }}" {{ value|is_selected:month }}>
                {{ label }}
            </option>
            {% endfor %}
        </select>
    </div>

    <div class="col-md-2">
        <label class="form-label fw-semibold">Year</label>
        <select name="year" id="year" class="form-select">
            {% for y in years %}
            <option value="{{ y }}" {{ y|is_selected:year }}>
                {{ y }}
            </option>
            {% endfor %}
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label fw-semibold">Closing Rate</label>
        <input type="text" id="closingRate" class="form-control" readonly value="{{ closing_rate_fmt }}">
    </div>

    <div class="col-md-2 d-grid">
        <button type="submit" name="action" value="load" class="btn btn-secondary">
            Load
        </button>
    </div>

    <div class="col-md-2 d-grid">
        <button type="submit" name="action" value="save" class="btn btn-secondary">
            Save
        </button>
    </div>

    <table class="table table-bordered table-sm">
        <thead class="table-dark">
            <tr>
                <th>No</th>
                <th>Account</th>
                <th>Description</th>
                <th>Type</th>
                <th>Currency</th>
                <th class="text-center">
                    <div class="form-check d-flex justify-content-center">
                        <input type="checkbox" id="check-all" class="form-check-input" style="cursor: pointer;" {{
                            all_reval_true|yesno:"checked," }}>
                        <label class="ms-1" for="check-all">Reval</label>
                    </div>
                </th>
                <th class="text-end">Original IDR</th>
                <th class="text-end">Historical USD</th>
                <th class="text-end">Revaluate USD</th>
                <th class="text-end">Loss / (Gain)</th>
            </tr>
        </thead>
        <tbody>
            {% for r in rows %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>
                    <strong>{{ r.acct_no|format_acct_no }}</strong><br>
                    <small>{{ r.acct_name }}</small>
                </td>
                <td>{{ r.descript }}</td>
                <td>{{ r.acct_type }}</td>
                <td>{{ r.currsign }}</td>
                <td class="text-center">
                    <input type="checkbox" class="reval-check" name="reval_rows" value="{{ r.acct_no }}"
                        data-oriamt="{{ r.oriamt }}" data-hist="{{ r.hist_usd }}" data-reval="{{ r.reval_usd }}"
                        data-gain="{{ r.loss_gain }}" {{ r.reval|yesno:"checked," }}>

                </td>
                <td class="text-end">{{ r.oriamt|format_currency_dynamic:r.currsign }}</td>
                <td class="text-end">{{ r.hist_usd|format_currency_dynamic:"USD" }}</td>
                <td class="text-end">{{ r.reval_usd|format_currency_dynamic:"USD" }}</td>
                <td class="text-end">
                    {{ r.loss_gain|format_currency_dynamic:"USD" }}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="10" class="text-center text-muted">
                    No data
                </td>
            </tr>
            {% endfor %}

            <!-- ================= TOTAL ROW ================= -->
            <tr class="total-row">
                <td colspan="6" class="text-end fw-bold">TOTAL</td>

                <td class="text-end fw-bold" id="tot-oriamt">
                    {{ total_oriamt|format_currency_dynamic:"IDR" }}
                </td>

                <td class="text-end fw-bold" id="tot-hist">
                    {{ total_hist_usd|format_currency_dynamic:"USD" }}
                </td>

                <td class="text-end fw-bold" id="tot-reval">
                    {{ total_reval_usd|format_currency_dynamic:"USD" }}
                </td>

                <td class="text-end fw-bold" id="tot-gain">
                    {{ total_loss_gain|format_currency_dynamic:"USD" }}
                </td>
            </tr>
        </tbody>
    </table>

</form>



<!-- ================= JS: browse, add detail, helpers ================= -->
<script>
    document.addEventListener("DOMContentLoaded", function () {

        const monthEl = document.getElementById("month");
        const yearEl = document.getElementById("year");
        const closingRateEl = document.getElementById("closingRate");
        const checkAll = document.getElementById("check-all");
        const rowChecks = document.querySelectorAll(".reval-check");

        /* ================= RATE ================= */
        function loadRate() {
            fetch(`/revaluation/get-rate/?month=${monthEl.value}&year=${yearEl.value}`)
                .then(res => res.json())
                .then(data => closingRateEl.value = data.rate_fmt);
        }

        monthEl.addEventListener("change", loadRate);
        yearEl.addEventListener("change", loadRate);

        /* ================= TOTAL ================= */
        function recalcTotal() {
            let oriamt = 0, hist = 0, reval = 0, gain = 0;

            document.querySelectorAll(".reval-check:checked").forEach(cb => {
                oriamt += +cb.dataset.oriamt || 0;
                hist += +cb.dataset.hist || 0;
                reval += +cb.dataset.reval || 0;
                gain += +cb.dataset.gain || 0;
            });

            document.getElementById("tot-oriamt").innerText = oriamt.toLocaleString("en-US", { minimumFractionDigits: 2 });
            document.getElementById("tot-hist").innerText = hist.toLocaleString("en-US", { minimumFractionDigits: 2 });
            document.getElementById("tot-reval").innerText = reval.toLocaleString("en-US", { minimumFractionDigits: 2 });
            document.getElementById("tot-gain").innerText = gain.toLocaleString("en-US", { minimumFractionDigits: 2 });
        }

        /* ================= CHECK ALL ================= */
        if (checkAll) {
            checkAll.addEventListener("change", () => {
                rowChecks.forEach(cb => cb.checked = checkAll.checked);
                recalcTotal();
            });
        }

        rowChecks.forEach(cb => {
            cb.addEventListener("change", () => {
                checkAll.checked =
                    document.querySelectorAll(".reval-check:checked").length === rowChecks.length;
                recalcTotal();
            });
        });

        /* ================= INIT ================= */
        loadRate();
        recalcTotal();

        if (rowChecks.length) {
            checkAll.checked =
                document.querySelectorAll(".reval-check:checked").length === rowChecks.length;
            recalcTotal();
        }

    });
</script>

{% endblock %}