{% extends "layout/ver_baru/base_admin.html" %}
{% load humanize %}
{% load static %}

{% block content %}
<div class="px-4 mt-6">
    <h2 class="text-center text-white p-3 rounded-lg mb-6 bg-red-700 shadow">
        NERACA KEUANGAN
    </h2>

    <!-- Filter Tahun -->
    <div class="flex justify-center mb-6">
        <form method="get" class="flex gap-3">
            <select name="tahun" id="tahun"
                class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:border-red-500">
                <option value="">Pilih Tahun</option>
                {% for t in tahun_list %}
                <option value="{{ t }}" {% if t|stringformat:"s" == tahun_terpilih %}selected{% endif %}>
                    {{ t }}
                </option>
                {% endfor %}
            </select>
            <button type="submit"
                class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg shadow text-sm font-medium">
                Tampilkan
            </button>
        </form>
    </div>

    <!-- Neraca -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Aktiva -->
        <div class="bg-white shadow rounded-lg p-5">
            <div class="bg-red-700 text-white font-semibold px-3 py-2 rounded-md inline-block mb-4">
                AKTIVA
            </div>

            <!-- Aktiva Lancar -->
            <div class="bg-red-100 font-bold px-3 py-1 border-l-4 border-red-600 rounded mb-2">
                AKTIVA LANCAR
            </div>

            <!-- Kas -->
            <table class="w-full text-sm border border-gray-200 mb-4">
                <tbody>
                    <tr class="border-b">
                        <td class="px-3 py-2">KAS MANAGEMENT</td>
                        <td class="px-3 py-2 text-right">{{ saldo_kas_management|intcomma }}</td>
                    </tr>
                    <tr class="border-b">
                        <td class="px-3 py-2">KAS CABANG SEMARANG</td>
                        <td class="px-3 py-2 text-right">{{ saldo_kas_semarang|intcomma }}</td>
                    </tr>
                    <tr class="border-b">
                        <td class="px-3 py-2">KAS CABANG DEMAK</td>
                        <td class="px-3 py-2 text-right">{{ saldo_kas_demak|intcomma }}</td>
                    </tr>
                    <tr>
                        <td class="px-3 py-2">KAS CABANG SURAKARTA</td>
                        <td class="px-3 py-2 text-right">{{ saldo_kas_sukararta|intcomma }}</td>
                    </tr>
                </tbody>
            </table>

            <!-- Bank -->
            <div class="bg-red-100 font-bold px-3 py-1 border-l-4 border-red-600 rounded mb-2">
                BANK
            </div>
            <table class="w-full text-sm border border-gray-200 mb-4">
                <tbody>
                    <tr class="border-b">
                        <td class="px-3 py-2">BANK MANDIRI</td>
                        <td class="px-3 py-2 text-right">{{ saldo_kas_mandiri|intcomma }}</td>
                    </tr>
                    <tr>
                        <td class="px-3 py-2">BANK BCA</td>
                        <td class="px-3 py-2 text-right">{{ saldo_kas_bca|intcomma }}</td>
                    </tr>
                </tbody>
            </table>

            <!-- Piutang -->
            <div class="bg-red-100 font-bold px-3 py-1 border-l-4 border-red-600 rounded mb-2">
                PIUTANG
            </div>
            <table class="w-full text-sm border border-gray-200 mb-4">
                <tbody>
                    <tr class="border-b">
                        <td class="px-3 py-2">PIUTANG KARYAWAN</td>
                        <td class="px-3 py-2 text-right">{{ piutang_karyawan|intcomma }}</td>
                    </tr>
                    <tr class="border-b">
                        <td class="px-3 py-2">PIUTANG INDIHOME</td>
                        <td class="px-3 py-2 text-right">{{ piutang_indihome|intcomma }}</td>
                    </tr>
                    <tr>
                        <td class="px-3 py-2">PIUTANG ORBIT</td>
                        <td class="px-3 py-2 text-right">{{ piutang_orbit|intcomma }}</td>
                    </tr>
                </tbody>
            </table>

            <!-- Persediaan -->
            <div class="bg-red-100 font-bold px-3 py-1 border-l-4 border-red-600 rounded mb-2">
                PERSEDIAAN
            </div>
            <table class="w-full text-sm border border-gray-200 mb-4">
                <tbody>
                    <tr class="border-b">
                        <td class="px-3 py-2">PERSEDIAAN ORBIT</td>
                        <td class="px-3 py-2 text-right">{{ persediaan_orbit|intcomma }}</td>
                    </tr>
                    <tr>
                        <td class="px-3 py-2">PERSEDIAAN KARTU PERDANA</td>
                        <td class="px-3 py-2 text-right">{{ persediaan_kartu_perdana|intcomma }}</td>
                    </tr>
                </tbody>
            </table>

            <!-- Pajak -->
            <div class="bg-red-100 font-bold px-3 py-1 border-l-4 border-red-600 rounded mb-2">
                PAJAK DIBAYAR DI MUKA
            </div>
            <table class="w-full text-sm border border-gray-200 mb-4">
                <tbody>
                    <tr>
                        <td class="px-3 py-2">PPH 23</td>
                        <td class="px-3 py-2 text-right">{{ pph23|intcomma }}</td>
                    </tr>
                </tbody>
            </table>

            <!-- Total Aktiva -->
            <table class="w-full text-sm border border-gray-300 mt-2">
                <thead>
                    <tr class="bg-gray-100 font-semibold">
                        <th class="px-3 py-2 text-left">TOTAL AKTIVA</th>
                        <th class="px-3 py-2 text-right">{{ total_aktiva|intcomma }}</th>
                    </tr>
                </thead>
            </table>
        </div>

        <!-- Pasiva -->
        <div class="bg-white shadow rounded-lg p-5">
            <div class="bg-red-700 text-white font-semibold px-3 py-2 rounded-md inline-block mb-4">
                PASIVA
            </div>

            <!-- Pasiva Lancar -->
            <div class="bg-red-100 font-bold px-3 py-1 border-l-4 border-red-600 rounded mb-2">
                PASIVA LANCAR
            </div>
            <table class="w-full text-sm border border-gray-200 mb-4">
                <tbody>
                    <tr class="border-b">
                        <td class="px-3 py-2">Hutang Usaha</td>
                        <td class="px-3 py-2 text-right">{{ hutang_usaha|intcomma }}</td>
                    </tr>
                    <tr>
                        <td class="px-3 py-2">Hutang Pajak</td>
                        <td class="px-3 py-2 text-right">{{ hutang_pajak|intcomma }}</td>
                    </tr>
                </tbody>
            </table>

            <!-- Modal / Ekuitas -->
            <div class="bg-red-100 font-bold px-3 py-1 border-l-4 border-red-600 rounded mb-2">
                MODAL / EKUITAS
            </div>
            <table class="w-full text-sm border border-gray-200 mb-4">
                <tbody>
                    <tr>
                        <td class="px-3 py-2">Modal / Ekuitas</td>
                        <td class="px-3 py-2 text-right">{{ modalekuitas|intcomma }}</td>
                    </tr>
                </tbody>
            </table>

            <!-- Laba Rugi -->
            <div class="bg-red-100 font-bold px-3 py-1 border-l-4 border-red-600 rounded mb-2">
                LABA / RUGI
            </div>
            <table class="w-full text-sm border border-gray-200 mb-4">
                <tbody>
                    <tr class="border-b">
                        <td class="px-3 py-2">Total Pendapatan</td>
                        <td class="px-3 py-2 text-right text-green-600">{{ pendapatan|intcomma }}</td>
                    </tr>
                    <tr class="border-b">
                        <td class="px-3 py-2">Total Beban</td>
                        <td class="px-3 py-2 text-right text-red-600">{{ total_beban|intcomma }}</td>
                    </tr>
                    <tr>
                        <td class="px-3 py-2 font-semibold">Laba / Rugi Bersih</td>
                        <td class="px-3 py-2 text-right font-semibold">
                            {% if laba_rugi >= 0 %}
                                <span class="text-green-600">{{ laba_rugi|intcomma }}</span>
                            {% else %}
                                <span class="text-red-600">{{ laba_rugi|intcomma }}</span>
                            {% endif %}
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- Total Pasiva -->
            <table class="w-full text-sm border border-gray-300 mt-2">
                <thead>
                    <tr class="bg-gray-100 font-semibold">
                        <th class="px-3 py-2 text-left">TOTAL PASIVA</th>
                        <th class="px-3 py-2 text-right">{{ total_pasiva|intcomma }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- Tailwind sudah otomatis handle, jika perlu interaktivitas tambahkan JS -->
<script>
document.addEventListener("DOMContentLoaded", () => {
    const tahunSelect = document.getElementById("tahun");
    tahunSelect.addEventListener("change", () => {
        tahunSelect.form.submit();
    });
});
</script>
{% endblock %}