{% extends "layout/ver_baru/base_admin.html" %}
{% load humanize %}
{% load static %}
{% block title %}Transaksi Permodalan - CWN{% endblock %}

{% block content %}
<style>
.swal2-bukti-preview img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 8px;
    margin: 35px;
}
</style>

<div class="w-full p-6">
    <h2 class="text-center text-white p-3 rounded mb-6 mt-2 bg-red-700 text-xl font-semibold">
        Transaksi Umum Permodalan
    </h2>
    
    <!-- Tombol Hutang -->
    <div class="flex justify-end mb-4 space-x-2">
        <button type="button" onclick="showTransaksiBaruModal('Debit', '{{akun_hutang}}', '{{nama_hutang}}')" 
            class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg shadow">
            Debit
        </button>
        <button type="button" onclick="showTransaksiBaruModal('Kredit', '{{akun_hutang}}', '{{nama_hutang}}')" 
            class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg shadow">
            Kredit
        </button>
    </div>

    <!-- Card Hutang -->
    <div class="bg-white shadow rounded-lg overflow-hidden mb-8">
        <div class="bg-red-600 text-white px-4 py-2 font-medium">Transaksi Hutang</div>
        <!-- FILTER -->
        <div class="text-center mb-6 bg-white p-4 rounded-b-md shadow-sm border border-gray-200">
            <form method="get" class="flex flex-wrap justify-center items-end gap-4">
                <!-- Dari -->
                <div class="flex flex-col">
                <label for="from_date" class="text-sm font-medium mb-1 text-gray-700">Dari</label>
                <input
                    type="date"
                    id="from_date"
                    name="from_date"
                    class="border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-red-500 focus:outline-none"
                    value="{{ request.GET.from_date }}"
                >
                </div>

                <!-- Sampai -->
                <div class="flex flex-col">
                <label for="to_date" class="text-sm font-medium mb-1 text-gray-700">Sampai</label>
                <input
                    type="date"
                    id="to_date"
                    name="to_date"
                    class="border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-red-500 focus:outline-none"
                    value="{{ request.GET.to_date }}"
                >
                </div>

                <!-- Preset -->
                <div class="flex flex-col">
                <label for="preset" class="text-sm font-medium mb-1 text-gray-700">Terakhir Update</label>
                <select
                    id="preset"
                    name="preset"
                    class="border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-red-500 focus:outline-none"
                >
                    <option value="">-- Pilih --</option>
                    <option value="today" {% if request.GET.preset == 'today' %}selected{% endif %}>Hari ini</option>
                    <option value="this_week" {% if request.GET.preset == 'this_week' %}selected{% endif %}>Minggu ini</option>
                    <option value="last_14_days" {% if request.GET.preset == 'last_14_days' %}selected{% endif %}>14 hari terakhir</option>
                    <option value="last_30_days" {% if request.GET.preset == 'last_30_days' %}selected{% endif %}>30 hari terakhir</option>
                </select>
                </div>

                <!-- Tombol Filter -->
                <button
                type="submit"
                class="bg-red-600 hover:bg-red-700 text-white font-semibold rounded-md px-5 py-2 transition"
                >
                Filter
                </button>

                <!-- Reset -->
                <a
                href="{% url 'transaksi_modal' %}"
                class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold rounded-md px-5 py-2 transition"
                >
                Reset
                </a>
            </form>
        </div>
        <div class="p-4 overflow-x-auto">
            <div class="bg-blue-50 border border-blue-200 text-blue-700 px-3 py-2 rounded mb-3">
                <strong>Saldo Akun Saat Ini:</strong> Rp {{ saldo_akun_hutang|floatformat:0|intcomma }}
            </div>
            <table class="w-full border border-gray-200 text-sm">
                <thead class="bg-gray-800 text-white">
                    <tr>
                        <th class="px-3 py-2 text-left">Akun</th>
                        <th class="px-3 py-2 text-left">Tanggal</th>
                        <th class="px-3 py-2 text-left">Transaksi</th>
                        <th class="px-3 py-2 text-right">Debit</th>
                        <th class="px-3 py-2 text-right">Kredit</th>
                        <th class="px-3 py-2 text-center">Bukti</th>
                        <th class="px-3 py-2"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for t in data_hutang %}
                    <tr>
                        <td class="px-3 py-2">{{ t.akun_tujuan }}-{{t.nama_akun}}</td>
                        <td class="px-3 py-2">{{ t.tanggal_transaksi|date:"d/m/Y" }}</td>
                        <td class="px-3 py-2">{{ t.detail_transaksi }}</td>
                        <td class="px-3 py-2 text-right">Rp {{ t.debit|floatformat:0|intcomma }}</td>
                        <td class="px-3 py-2 text-right">Rp {{ t.kredit|floatformat:0|intcomma }}</td>
                        <td class="px-3 py-2 text-center">
                            {% if t.bukti_transaksi %}
                                <a href="#" class="text-blue-600 hover:underline"
                                   onclick="showImageModal('/media/{{ t.bukti_transaksi }}', '{{t.id_transaksi}}'); return false;">🧾 Lihat</a>
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </td>
                        <td class="px-3 py-2 text-center">
                            <div class="relative inline-block text-left">
                                <button onclick="toggleDropdown('aksi-{{t.id}}')" 
                                    class="px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">
                                    ⋮
                                </button>
                                <div id="aksi-{{t.id}}" class="hidden absolute right-0 mt-2 w-40 bg-white rounded shadow border z-20">
                                    <a href="#" onclick="lihatJurnal(this)"
                                       data-url-template="{% url 'lihat_jurnal' 'REPLACE_ID' %}"
                                       data-id="{{ t.id_transaksi }}"
                                       class="block px-4 py-2 text-sm hover:bg-gray-100">Lihat Jurnal</a>
                                    <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100"
                                       onclick="editRowModal(
                                            '{{ t.id }}','{{ t.id_transaksi }}',
                                            '{{ t.akun_asal }}','{{ t.akun_tujuan }}','{{ t.tipe }}',
                                            `{{ t.kategori_id }}`,`{{ t.detail_transaksi|default_if_none:""|escapejs }}`,
                                            '{{ t.nominal }}',`{{ t.tanggal_transaksi|default_if_none:""|date:"Y-m-d" }}`,
                                            `{{ t.tanggal_pengakuan|default_if_none:""|date:"Y-m" }}`,
                                            `{{ t.meta1|default_if_none:""|escapejs }}`,`{{ t.meta2|default_if_none:""|escapejs }}`,
                                            `{{ t.bukti_transaksi|default_if_none:'' }}`
                                        )">Edit</a>
                                    <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50"
                                       onclick="deleteRow('{{ t.id }}')">Hapus</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="100%" class="text-center py-3 text-gray-500">Tidak ada data.</td></tr>
                    {% endfor %}
                </tbody>
            </table>

            <!-- Pagination -->
            <div class="flex justify-center mt-4 space-x-1">
                {% if data_hutang.has_previous %}
                    <a href="?page={{ data_hutang.previous_page_number }}" class="px-3 py-1 border rounded hover:bg-gray-100">«</a>
                {% endif %}
                {% for num in data_hutang.paginator.page_range %}
                    <a href="?page={{ num }}" 
                       class="px-3 py-1 border rounded hover:bg-gray-100 {% if num == data_hutang.number %}bg-red-600 text-white{% endif %}">
                       {{ num }}
                    </a>
                {% endfor %}
                {% if data_hutang.has_next %}
                    <a href="?page={{ data_hutang.next_page_number }}" class="px-3 py-1 border rounded hover:bg-gray-100">»</a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Tombol Modal -->
    <div class="flex justify-end mb-6 space-x-2">
        <button type="button" onclick="showTransaksiBaruModal('Modal', '{{akun_modal}}', '{{nama_modal}}')" 
            class="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg shadow">
            Modal
        </button>
        <button type="button" onclick="showInvestorModal()" 
            class="px-4 py-2 bg-sky-500 hover:bg-sky-600 text-white rounded-lg shadow">
            Daftar Pemodal
        </button>
    </div>

    <!-- Card Modal -->
    <div class="bg-white shadow rounded-lg overflow-hidden mb-8">
        <div class="bg-red-600 text-white px-4 py-2 font-medium">Transaksi Modal</div>
        <div class="p-4 overflow-x-auto">
            <div class="bg-blue-50 border border-blue-200 text-blue-700 px-3 py-2 rounded mb-3">
                <strong>Saldo Akun Saat Ini:</strong> Rp {{ saldo_akun_modal|floatformat:0|intcomma }}
            </div>
            <table class="w-full border border-gray-200 text-sm">
                <thead class="bg-gray-800 text-white">
                    <tr>
                        <th class="px-3 py-2 text-left">Akun</th>
                        <th class="px-3 py-2 text-left">Tanggal</th>
                        <th class="px-3 py-2 text-left">Transaksi</th>
                        <th class="px-3 py-2 text-right">Debit</th>
                        <th class="px-3 py-2 text-right">Kredit</th>
                        <th class="px-3 py-2 text-center">Bukti</th>
                        <th class="px-3 py-2"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for t in data_modal %}
                    <tr>
                        <td class="px-3 py-2">{{ t.akun_tujuan }}-{{t.nama_akun}}</td>
                        <td class="px-3 py-2">{{ t.tanggal_transaksi|date:"d/m/Y" }}</td>
                        <td class="px-3 py-2">{{ t.detail_transaksi }}</td>
                        <td class="px-3 py-2 text-right">Rp {{ t.debit|floatformat:0|intcomma }}</td>
                        <td class="px-3 py-2 text-right">Rp {{ t.kredit|floatformat:0|intcomma }}</td>
                        <td class="px-3 py-2 text-center">
                            {% if t.bukti_transaksi %}
                                <a href="#" class="text-blue-600 hover:underline"
                                   onclick="showImageModal('/media/{{ t.bukti_transaksi }}', '{{t.id_transaksi}}'); return false;">🧾 Lihat</a>
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </td>
                        <td class="px-3 py-2 text-center">
                            <div class="relative inline-block text-left">
                                <button onclick="toggleDropdown('aksi-{{t.id}}')" 
                                    class="px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">
                                    ⋮
                                </button>
                                <div id="aksi-{{t.id}}" class="hidden absolute right-0 mt-2 w-40 bg-white rounded shadow border z-20">
                                    <a href="#" onclick="lihatJurnal(this)"
                                       data-url-template="{% url 'lihat_jurnal' 'REPLACE_ID' %}"
                                       data-id="{{ t.id_transaksi }}"
                                       class="block px-4 py-2 text-sm hover:bg-gray-100">Lihat Jurnal</a>
                                    <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100"
                                       onclick="editRowModal(
                                            '{{ t.id }}','{{ t.id_transaksi }}',
                                            '{{ t.akun_asal }}','{{ t.akun_tujuan }}','{{ t.tipe }}',
                                            `{{ t.kategori_id }}`,`{{ t.detail_transaksi|default_if_none:""|escapejs }}`,
                                            '{{ t.nominal }}',`{{ t.tanggal_transaksi|default_if_none:""|date:"Y-m-d" }}`,
                                            `{{ t.tanggal_pengakuan|default_if_none:""|date:"Y-m" }}`,
                                            `{{ t.meta1|default_if_none:""|escapejs }}`,`{{ t.meta2|default_if_none:""|escapejs }}`,
                                            `{{ t.bukti_transaksi|default_if_none:'' }}`
                                        )">Edit</a>
                                    <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50"
                                       onclick="deleteRow('{{ t.id }}')">Hapus</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="100%" class="text-center py-3 text-gray-500">Tidak ada data.</td></tr>
                    {% endfor %}
                </tbody>
            </table>

            <!-- Pagination -->
            <div class="flex justify-center mt-4 space-x-1">
                {% if data_modal.has_previous %}
                    <a href="?page={{ data_modal.previous_page_number }}" class="px-3 py-1 border rounded hover:bg-gray-100">«</a>
                {% endif %}
                {% for num in data_modal.paginator.page_range %}
                    <a href="?page={{ num }}" 
                       class="px-3 py-1 border rounded hover:bg-gray-100 {% if num == data_modal.number %}bg-red-600 text-white{% endif %}">
                       {{ num }}
                    </a>
                {% endfor %}
                {% if data_modal.has_next %}
                    <a href="?page={{ data_modal.next_page_number }}" class="px-3 py-1 border rounded hover:bg-gray-100">»</a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Modal Transaksi -->
    <div id="transaksiModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white w-full max-w-3xl rounded-lg shadow-lg">
            <form id="transaksiForm" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="flex justify-between items-center bg-red-600 text-white px-4 py-3 rounded-t-lg">
                <h5 class="font-semibold">Form Transaksi</h5>
                <button type="button" onclick="closeModal('transaksiModal')" class="text-white text-xl">&times;</button>
            </div>
            <div class="p-6 space-y-4">
                <input type="hidden" name="id" id="id">
                <input type="hidden" name="id_transaksi" id="id_transaksi">
                <input type="hidden" name="tipe" id="tipe">

                <div class="grid grid-cols-2 gap-4">
                <!-- Akun Asal -->
                <div>
                    <label class="block text-sm font-medium mb-1">Akun Asal</label>
                    <select id="akun_asal_select" class="w-full border rounded px-2 py-1">
                    <option value="">- Pilih Akun Asal -</option>
                    {% for akun in akun_aset_list %}
                    <option value="{{ akun.kode_akun }}">{{ akun.kode_akun }} - {{ akun.nama_akun }}</option>
                    {% endfor %}
                    </select>
                    <div id="akun_asal_text" class="hidden">
                    <input type="hidden" name="akun_asal" id="akun_asal_hidden">
                    <input type="text" class="w-full border rounded px-2 py-1 bg-gray-100" id="akun_asal_label" readonly>
                    </div>
                </div>
                <!-- Akun Tujuan -->
                <div>
                    <label class="block text-sm font-medium mb-1">Akun Tujuan</label>
                    <select id="akun_tujuan_select" class="w-full border rounded px-2 py-1">
                    <option value="">- Pilih Akun Tujuan -</option>
                    {% for akun in akun_aset_list %}
                    <option value="{{ akun.kode_akun }}">{{ akun.kode_akun }} - {{ akun.nama_akun }}</option>
                    {% endfor %}
                    </select>
                    <div id="akun_tujuan_text" class="hidden">
                    <input type="hidden" name="akun_tujuan" id="akun_tujuan_hidden">
                    <input type="text" class="w-full border rounded px-2 py-1 bg-gray-100" value="{{ akun_hutang }} - {{ nama_hutang }}" readonly>
                    </div>
                </div>
                </div>

                <!-- Kategori -->
                <div>
                <label class="block text-sm font-medium mb-1">Kategori Transaksi</label>
                <select name="kategori_transaksi" id="kategori_transaksi" class="w-full border rounded px-2 py-1">
                    <option value="">- Pilih Kategori -</option>
                    {% for k in kategori_list %}
                    <option value="{{ k.id }}" data-akun="{{ k.kode_akun }}">{{ k.nama_kategori }}</option>
                    {% endfor %}
                </select>
                </div>

                <!-- Nominal -->
                <div>
                <label class="block text-sm font-medium mb-1">Nominal (Rp)</label>
                <input type="number" name="nominal" id="nominal" class="w-full border rounded px-2 py-1" required>
                </div>

                <!-- Detail -->
                <div>
                <label class="block text-sm font-medium mb-1">Detail Transaksi</label>
                <input type="text" name="detail_transaksi" id="detail_transaksi" class="w-full border rounded px-2 py-1">
                </div>

                <!-- Tanggal -->
                <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium mb-1">Tanggal Transaksi</label>
                    <input type="date" name="tanggal_transaksi" id="tanggal_transaksi" class="w-full border rounded px-2 py-1" required>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Tanggal Pengakuan</label>
                    <input type="month" name="tanggal_pengakuan" id="tanggal_pengakuan" class="w-full border rounded px-2 py-1" required>
                </div>
                </div>

                <!-- Pemodal (opsional) -->
                {% if kode_akun in allowed_akun_upd %}
                <div>
                <label class="block text-sm font-medium mb-1">Pemodal</label>
                <select name="meta1" id="meta1" class="w-full border rounded px-2 py-1">
                    <option value="">- Pilih Pemodal -</option>
                    {% for p in pemodal_list %}
                    <option value="{{ p.id }}">{{ p.id }} - {{ p.nama_pemodal }}</option>
                    {% endfor %}
                </select>
                </div>
                <input type="hidden" name="meta2">
                {% else %}
                <input type="hidden" name="meta1">
                <input type="hidden" name="meta2">
                {% endif %}

                <!-- Bukti -->
                <div class="grid grid-cols-3 gap-2 items-end">
                <div class="col-span-2">
                    <label class="block text-sm font-medium mb-1">Bukti Transaksi</label>
                    <input type="file" name="bukti_transaksi" id="bukti_transaksi" accept="image/*"
                        class="w-full border rounded px-2 py-1">
                    <small id="nama-bukti-lama" class="text-gray-500"></small>
                    <input type="hidden" id="bukti_transaksi_lama" name="bukti_transaksi_lama">
                </div>
                <div>
                    <a href="#" id="preview-bukti-upload" class="hidden px-2 py-1 border rounded text-sm text-blue-600 hover:bg-blue-50 w-full block text-center">
                    🧾 Preview
                    </a>
                </div>
                </div>
            </div>
            <div class="flex justify-end space-x-2 px-6 py-3 bg-gray-100 rounded-b-lg">
                <button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg shadow">Simpan</button>
                <button type="button" onclick="closeModal('transaksiModal')" class="px-4 py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-lg shadow">Batal</button>
            </div>
            </form>
        </div>
    </div>

    <!-- Modal Transfer Saldo -->
    <div id="modalTransferSaldo" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white w-full max-w-lg rounded-lg shadow-lg">
            <form id="form-transfer-saldo" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="flex justify-between items-center bg-red-600 text-white px-4 py-3 rounded-t-lg">
                <h5 class="font-semibold">Transfer Saldo Antar Kas/Bank</h5>
                <button type="button" onclick="closeModal('modalTransferSaldo')" class="text-white text-xl">&times;</button>
            </div>
            <div class="p-6 space-y-4">
                <input type="hidden" name="tipe" value="K">
                <input type="hidden" name="id_transaksi" id="id_transaksi_tf">
                <input type="hidden" name="kategori_transaksi">

                <div>
                <label class="block text-sm font-medium mb-1">Akun Asal</label>
                {% for akun in akun_list %}
                    {% if akun.kode_akun == request.session.kode_akun %}
                    <input type="text" class="w-full border rounded px-2 py-1 bg-gray-100" value="{{ akun.kode_akun }} - {{ akun.nama_akun }}" readonly>
                    {% endif %}
                {% endfor %}
                <input type="hidden" name="akun_asal" value="{{ request.session.kode_akun }}">
                </div>

                <div>
                <label class="block text-sm font-medium mb-1">Akun Tujuan</label>
                <select name="akun_tujuan" required class="w-full border rounded px-2 py-1">
                    <option value="">-- Pilih Akun Tujuan --</option>
                    <option value="1111">KAS MANAGEMENT</option>
                    <option value="1112">KAS CABANG SEMARANG</option>
                    <option value="1113">KAS CABANG DEMAK</option>
                    <option value="1114">KAS CABANG SURAKARTA</option>
                    <option value="1121">BANK MANDIRI</option>
                    <option value="1122">BANK BCA</option>
                </select>
                </div>

                <div>
                <label class="block text-sm font-medium mb-1">Tanggal Transaksi</label>
                <input type="date" id="tanggal_transaksi_tf" name="tanggal_transaksi" required class="w-full border rounded px-2 py-1">
                </div>

                <div>
                <label class="block text-sm font-medium mb-1">Bulan Pengakuan</label>
                <input type="month" id="tanggal_pengakuan_tf" name="tanggal_pengakuan" required class="w-full border rounded px-2 py-1">
                </div>

                <div>
                <label class="block text-sm font-medium mb-1">Nominal</label>
                <input type="number" name="nominal" min="1" required class="w-full border rounded px-2 py-1">
                </div>

                <div>
                <label class="block text-sm font-medium mb-1">Detail (opsional)</label>
                <input type="text" name="detail_transaksi" class="w-full border rounded px-2 py-1" placeholder="Contoh: Pindah dari Kas A ke Bank B">
                </div>

                <div>
                <label class="block text-sm font-medium mb-1">Bukti</label>
                <input type="file" name="bukti_transaksi" accept="image/*" class="w-full border rounded px-2 py-1">
                </div>
            </div>
            <div class="flex justify-end space-x-2 px-6 py-3 bg-gray-100 rounded-b-lg">
                <button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg shadow">Transfer</button>
                <button type="button" onclick="closeModal('modalTransferSaldo')" class="px-4 py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-lg shadow">Tutup</button>
            </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const now = new Date();
    const yyyy = now.getFullYear();
    const mm = String(now.getMonth() + 1).padStart(2, '0');
    const dd = String(now.getDate()).padStart(2, '0');

    // Set default tanggal
    const tglTransaksi = document.getElementById('tanggal_transaksi');
    const tglPengakuan = document.getElementById('tanggal_pengakuan');
    if (tglTransaksi && !tglTransaksi.value) tglTransaksi.value = `${yyyy}-${mm}-${dd}`;
    if (tglPengakuan && !tglPengakuan.value) tglPengakuan.value = `${yyyy}-${mm}`;

    // Reset form saat modal transaksi ditutup
    document.getElementById('transaksiModal')?.addEventListener('closeModal', resetForm);

    // Update akun_tujuan otomatis saat kategori berubah
    document.getElementById("kategori_transaksi")?.addEventListener("change", function () {
        const akunTujuan = this.options[this.selectedIndex].getAttribute("data-akun");
        if (!akunTujuan) return;
        const akunTujuanHidden = document.getElementById("akun_tujuan_hidden");
        if (akunTujuanHidden) akunTujuanHidden.value = akunTujuan;
    });

    // Preview bukti transaksi
    document.getElementById('bukti_transaksi')?.addEventListener('change', function () {
        const file = this.files[0];
        const previewLink = document.getElementById('preview-bukti-upload');
        if (file) {
            const objectURL = URL.createObjectURL(file);
            previewLink.classList.remove("hidden");
            previewLink.onclick = () => showImageModal(objectURL, "Preview Upload");
        } else {
            previewLink.classList.add("hidden");
            previewLink.onclick = null;
        }
    });

    // Sinkronisasi select → hidden (akun asal/tujuan)
    document.getElementById("akun_asal_select")?.addEventListener("change", e => {
        document.getElementById("akun_asal_hidden").value = e.target.value;
    });
    document.getElementById("akun_tujuan_select")?.addEventListener("change", e => {
        document.getElementById("akun_tujuan_hidden").value = e.target.value;
    });

    // Submit form transaksi utama
    document.getElementById('transaksiForm')?.addEventListener('submit', async function (e) {
        e.preventDefault();
        const form = e.target;
        const akunAsal = form.akun_asal.value || form.akun_asal_hidden.value;
        const akunTujuan = form.akun_tujuan.value || form.akun_tujuan_hidden.value;

        if (akunAsal === akunTujuan) {
            Swal.fire("Error", "Tidak boleh mentransfer ke akun sendiri", "error");
            return;
        }

        if (!form.id_transaksi.value) {
            const ts = Date.now();
            const cleanAsal = akunAsal.replace(/[^a-zA-Z0-9]/g, '');
            const cleanTujuan = akunTujuan.replace(/[^a-zA-Z0-9]/g, '');
            form.id_transaksi.value = `TRX-${ts}-${cleanAsal}-${cleanTujuan}`;
        }

        const url = form.id.value
            ? `{% url 'update_transaksi_modal' id=0 %}`.replace('0', form.id.value)
            : `{% url 'create_transaksi' %}`;
        const formData = new FormData(form);

        try {
            const res = await fetch(url, {
                method: "POST",
                headers: { "X-CSRFToken": getCSRFToken() },
                body: formData
            });
            const text = await res.text();
            const data = JSON.parse(text);
            Swal.fire(data.status === "success" ? "Berhasil" : "Gagal", data.message, data.status)
                .then(() => location.reload());
        } catch (err) {
            Swal.fire("Error", "Terjadi kesalahan server", "error");
        }
    });

    // Modal Transfer Saldo (open/close handler)
    document.getElementById('modalTransferSaldo')?.addEventListener('openModal', function () {
        if (!document.getElementById('tanggal_transaksi_tf').value) {
            document.getElementById('tanggal_transaksi_tf').value = `${yyyy}-${mm}-${dd}`;
        }
        if (!document.getElementById('tanggal_pengakuan_tf').value) {
            document.getElementById('tanggal_pengakuan_tf').value = `${yyyy}-${mm}`;
        }
    });

    document.getElementById('form-transfer-saldo')?.addEventListener('submit', async function (e) {
        e.preventDefault();
        const akun_asal = this.akun_asal.value;
        const akun_tujuan = this.akun_tujuan.value;
        if (akun_asal === akun_tujuan) {
            Swal.fire("Error", "Tidak bisa transfer ke akun yang sama", "error");
            return;
        }
        if (!this.id_transaksi.value) {
            const ts = Date.now();
            this.id_transaksi.value = `TRX-${ts}-${akun_asal}-${akun_tujuan}`;
        }

        const form = new FormData(this);
        try {
            Swal.fire({ title: "Memproses...", allowOutsideClick: false, didOpen: () => Swal.showLoading() });
            const res = await fetch("{% url 'create_transaksi' %}", {
                method: "POST",
                headers: { "X-CSRFToken": getCSRFToken() },
                body: form
            });
            if (!res.ok) throw new Error("Gagal");
            Swal.fire("Berhasil", "Transfer berhasil!", "success").then(() => location.reload());
        } catch {
            Swal.fire("Error", "Gagal transfer, coba lagi.", "error");
        }
    });
});
    
// --- Helper Tailwind modal functions (final version) ---
window.openModal = (id) => {
    const modal = document.getElementById(id);
    if (!modal) return;
    modal.classList.remove("hidden");
    modal.classList.add("flex");
    modal.dispatchEvent(new Event("openModal")); // biar listener jalan

    if (id === "transaksiModal") {
        const f = document.getElementById("transaksiForm");
        const tglTransaksi = document.getElementById("tanggal_transaksi");
        const tglPengakuan = document.getElementById("tanggal_pengakuan");
        const idTransaksi = document.getElementById("id_transaksi");
        const akunAsal = document.getElementById("akun_asal");
        const akunTujuan = document.getElementById("akun_tujuan");

        const today = new Date();
        const yyyy = today.getFullYear();
        const mm = String(today.getMonth() + 1).padStart(2, "0");
        const dd = String(today.getDate()).padStart(2, "0");

        const todayDate = `${yyyy}-${mm}-${dd}`;   // format input date
        const todayMonth = `${yyyy}-${mm}`;        // format input month

        // isi tanggal hanya kalau kosong (bukan mode edit)
        if (tglTransaksi && !tglTransaksi.value) {
            tglTransaksi.value = todayDate;
        }
        if (tglPengakuan && !tglPengakuan.value) {
            tglPengakuan.value = todayMonth;
        }

        // generate id_transaksi kalau masih kosong
        if (idTransaksi && !idTransaksi.value) {
            const ts = Date.now();
            const asal = akunAsal?.value || "XXX";
            const tujuan = akunTujuan?.value || "YYY";
            idTransaksi.value = `TRX-${ts}-${asal}-${tujuan}`;
        }
    }
};

window.closeModal = (id) => {
    const modal = document.getElementById(id);
    if (!modal) return;
    modal.classList.remove("flex");
    modal.classList.add("hidden");
    modal.dispatchEvent(new Event("closeModal")); // biar listener jalan
    if (id === "transaksiModal") resetForm();     // pastikan form bersih kalau ditutup
};


function resetForm() {
    const form = document.getElementById('transaksiForm');
    if (!form) return;
    form.reset();
    form.id.value = "";
    form.id_transaksi.value = "";

    const previewLink = document.getElementById('preview-bukti-upload');
    if (previewLink) {
        previewLink.classList.add("hidden");
        previewLink.onclick = null;
    }
}

function showImageModal(src, desc) {
    Swal.fire({
        title: desc,
        imageUrl: src,
        showCloseButton: true,
        showConfirmButton: false
    });
}

function getCSRFToken() {
    return document.querySelector('[name=csrfmiddlewaretoken]')?.value || '';
}
</script>
<script>
function toggleDropdown(id) {
    const dropdown = document.getElementById(id);
    if (!dropdown) return;

    // toggle hidden class
    dropdown.classList.toggle('hidden');

    // tutup dropdown saat klik di luar
    document.addEventListener('click', function handler(event) {
        if (!dropdown.contains(event.target) && !event.target.matches(`[onclick="toggleDropdown('${id}')"]`)) {
            dropdown.classList.add('hidden');
            document.removeEventListener('click', handler);
        }
    });
}

// Versi Tailwind untuk tombol transaksi baru
function showTransaksiBaruModal(tipe, akun, nama) {
    resetForm();

    if (tipe === 'Debit') {
        // akun_asal = hutang (readonly), akun_tujuan pilih
        document.getElementById("akun_asal_select").classList.add("hidden");
        document.getElementById("akun_asal_text").classList.remove("hidden");
        document.getElementById("akun_asal_hidden").value = akun;
        document.getElementById("akun_asal_label").value = akun + " - " + nama;

        document.getElementById("akun_tujuan_select").classList.remove("hidden");
        document.getElementById("akun_tujuan_text").classList.add("hidden");
        document.getElementById("akun_tujuan_hidden").value = "";

    } else if (tipe === 'Kredit') {
        // akun_asal pilih, akun_tujuan = hutang
        document.getElementById("akun_asal_select").classList.remove("hidden");
        document.getElementById("akun_asal_text").classList.add("hidden");
        document.getElementById("akun_asal_hidden").value = "";

        document.getElementById("akun_tujuan_select").classList.add("hidden");
        document.getElementById("akun_tujuan_text").classList.remove("hidden");
        document.getElementById("akun_tujuan_hidden").value = akun;
        document.getElementById("akun_tujuan_text").querySelector('input').value = akun + " - " + nama;

    } else if (tipe === 'Modal') {
        document.getElementById("akun_asal_select").classList.add("hidden");
        document.getElementById("akun_asal_text").classList.remove("hidden");
        document.getElementById("akun_asal_hidden").value = akun;
        document.getElementById("akun_asal_label").value = akun + " - " + nama;

        document.getElementById("akun_tujuan_select").classList.remove("hidden");
        document.getElementById("akun_tujuan_text").classList.add("hidden");
        document.getElementById("akun_tujuan_hidden").value = "";
    }

    openModal('transaksiModal');
}

function showInvestorModal() {
    fetch("{% url 'list_pemodal' %}")
        .then(res => res.json())
        .then(data => {
            let html = `
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Nama Investor</th>
                                <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            ${data.pemodal.map(p => `
                                <tr>
                                    <td class="px-4 py-2 text-sm text-gray-700">${p.id} - ${p.nama_pemodal}</td>
                                    <td class="px-4 py-2 space-x-2">
                                        <button class="px-2 py-1 bg-yellow-400 hover:bg-yellow-500 text-white rounded" onclick="editPemodal('${p.id}', '${p.nama_pemodal}')">Edit</button>
                                        <button class="px-2 py-1 bg-red-500 hover:bg-red-600 text-white rounded" onclick="deletePemodal('${p.id}')">Hapus</button>
                                    </td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
                <div class="mt-4 text-right">
                    <button class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded" onclick="addPemodal()">+ Tambah Pemodal</button>
                </div>
            `;

            Swal.fire({
                title: "Daftar Investor",
                html: html,
                width: 700,
                showConfirmButton: false,
                didOpen: () => {
                    const tambahBtn = Swal.getPopup().querySelector('button.bg-green-600');
                    if (tambahBtn) tambahBtn.focus();
                }
            });
        });
}

function addPemodal() {
    Swal.fire({
        title: "Tambah Pemodal",
        input: "text",
        inputLabel: "Nama Pemodal",
        inputPlaceholder: "Masukkan nama",
        showCancelButton: true,
        confirmButtonColor: "#16a34a",
        cancelButtonColor: "#6b7280",
        confirmButtonText: "Simpan",
        cancelButtonText: "Batal"
    }).then(result => {
        if (result.isConfirmed) {
            fetch("{% url 'add_pemodal' %}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRFToken": getCSRFToken()
                },
                body: JSON.stringify({ nama_pemodal: result.value })
            })
            .then(res => res.json())
            .then(() => showInvestorModal());
        }
    });
}

function editPemodal(id, nama) {
    Swal.fire({
        title: "Edit Pemodal",
        input: "text",
        inputValue: nama,
        showCancelButton: true,
        confirmButtonText: "Simpan",
        confirmButtonColor: "#f59e0b", // Tailwind amber-400
        cancelButtonColor: "#6b7280"
    }).then(result => {
        if (result.isConfirmed) {
            fetch("{% url 'update_pemodal' id=0 %}".replace("0", id), {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRFToken": getCSRFToken()
                },
                body: JSON.stringify({ nama_pemodal: result.value })
            })
            .then(res => res.json())
            .then(() => showInvestorModal());
        }
    });
}

function deletePemodal(id) {
    Swal.fire({
        title: "Yakin hapus pemodal ini?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Ya, hapus!",
        confirmButtonColor: "#ef4444", // Tailwind red-500
        cancelButtonColor: "#6b7280"
    }).then(result => {
        if (result.isConfirmed) {
            fetch("{% url 'delete_pemodal' id=0 %}".replace("0", id), {
                method: "POST",
                headers: { "X-CSRFToken": getCSRFToken() }
            })
            .then(res => res.json())
            .then(() => showInvestorModal());
        }
    });
}

</script>


{% endblock %}