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

{% block content %}
<div class="container-fluid mt-4">

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

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h3 class="fw-bold mb-1">Balance Sheet</h3>
            <div class="text-muted small">
                As of {{ as_of|date:"d M Y" }} • Currency: {{ currency }}
            </div>
        </div>
    </div>

    <!-- ================= FILTER PANEL ================= -->

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

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

                <div class="col-md-3">
                    <label class="form-label small text-muted">Date</label>
                    <input type="date"
                           name="date"
                           value="{{ as_of|date:'Y-m-d' }}"
                           required
                           class="form-control">
                </div>

                <div class="col-md-2">
                    <label class="form-label small text-muted">Currency</label>
                    <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 px-4">
                        <i class="bi bi-search"></i> Search
                    </button>

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

                    <button name="export"
                            value="excel"
                            class="btn btn-success px-4">
                        Export Excel
                    </button>
                </div>

            </form>

        </div>
    </div>

    {% if asset_list or liability_equity_list %}

    <div class="row">

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

        <div class="col-lg-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-light fw-bold">
                    ASSETS
                </div>

                <div class="table-responsive">
                    <table class="table table-hover table-sm align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Description</th>
                                <th class="text-end">Amount</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for row in asset_list %}
                            <tr>
                                <td>
                                    <div class="fw-semibold">
                                        {{ row.acct_name }}
                                    </div>
                                    <div class="small text-muted">
                                        {{ row.acct_no|format_acct_no }}
                                    </div>
                                </td>
                                <td class="text-end">
                                    {{ row.amount|intcomma }}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>

                        <tfoot class="table-light fw-bold">
                            <tr>
                                <td>Total Assets</td>
                                <td class="text-end">{{ total_asset|intcomma }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- ================= LIABILITIES & EQUITY ================= -->

        <div class="col-lg-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-light fw-bold">
                    LIABILITIES & EQUITY
                </div>

                <div class="table-responsive">
                    <table class="table table-hover table-sm align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Description</th>
                                <th class="text-end">Amount</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for row in liability_equity_list %}
                            <tr>
                                <td>
                                    <div class="fw-semibold">
                                        {{ row.acct_name }}
                                    </div>
                                    <div class="small text-muted">
                                        {{ row.acct_no|format_acct_no }}
                                    </div>
                                </td>
                                <td class="text-end">
                                    {{ row.amount|intcomma }}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>

                        <tfoot class="table-light fw-bold">
                            <tr>
                                <td>Total L + E</td>
                                <td class="text-end">{{ total_le|intcomma }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <!-- ================= BALANCE STATUS ================= -->

    <div class="card shadow-sm mt-4">
        <div class="card-body text-center">

            {% if difference == 0 %}
                <span class="badge bg-success fs-6 px-4 py-2">
                    ✔ BALANCED
                </span>
            {% else %}
                <span class="badge bg-danger fs-6 px-4 py-2">
                    NOT BALANCED ({{ difference|intcomma }})
                </span>
            {% endif %}

        </div>
    </div>

    {% endif %}

</div>
{% endblock %}