{% extends "layout/ver_baru/base_admin.html" %}
{% load humanize %}
{% block title %}Transaksi Beban{% endblock %}

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

<div class="container mx-auto px-4 mt-6">

    <!-- Judul -->
    <h2 class="text-center text-white py-3 rounded mb-6 bg-red-700 font-bold text-xl">
        Transaksi Beban
    </h2>

    <!-- Tombol Aksi -->
    <div class="flex justify-end gap-2 mb-4">
        <button onclick="openModal('modalTransferSaldo')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow text-sm">
            <i class="fas fa-random"></i> Transfer Saldo
        </button>
        <button onclick="openModal('transaksiModal')" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md shadow text-sm">
            BEBAN
        </button>
        <button onclick="openModal('transaksiModalBebanGaji')" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-md shadow text-sm">
            GAJI
        </button>
        <button onclick="openModal('transaksipiutang')" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md shadow text-sm">
            PIUTANG
        </button>
    </div>

    <!-- Card -->
    <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="bg-red-700 text-white px-4 py-2 font-semibold">Riwayat Transaksi</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_beban' %}"
                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">

            <table class="w-full text-sm border border-gray-200">
                <thead class="bg-gray-800 text-white">
                    <tr>
                        <th class="px-3 py-2 border">Akun</th>
                        <th class="px-3 py-2 border">Tanggal</th>
                        <th class="px-3 py-2 border">Transaksi</th>
                        <th class="px-3 py-2 border">Debit</th>
                        <th class="px-3 py-2 border">Kredit</th>
                        <th class="px-3 py-2 border">Bukti</th>
                        <th class="px-3 py-2 border">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    {% for t in data %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2 border">{{ t.akun_tujuan }}-{{t.nama_akun}}</td>
                        <td class="px-3 py-2 border">{{ t.tanggal_transaksi|date:"d/m/Y" }}</td>
                        <td class="px-3 py-2 border">{{ t.detail_transaksi }}</td>
                        <td class="px-3 py-2 border">Rp {{ t.debit|floatformat:0|intcomma }}</td>
                        <td class="px-3 py-2 border">Rp {{ t.kredit|floatformat:0|intcomma }}</td>
                        <td class="px-3 py-2 border text-center">
                            {% if t.bukti_transaksi %}
                                <a href="#" onclick="showImageModal('/media/{{ t.bukti_transaksi }}', '{{t.id_transaksi}}'); return false;" class="text-blue-600 hover:underline">🧾 Lihat</a>
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </td>
                        <td class="px-3 py-2 border text-center">
                            <div class="relative inline-block text-left">
                                <button class="bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded text-sm" onclick="toggleDropdown('aksiDropdown{{ t.id }}')">
                                    ⋮
                                </button>
                                <div id="aksiDropdown{{ t.id }}" class="hidden absolute right-0 mt-1 w-40 bg-white border border-gray-200 rounded shadow z-50">
                                    <a href="#" onclick="lihatJurnal(this)"
                                       data-url-template="{% url 'lihat_jurnal' 'REPLACE_ID' %}"
                                       data-id="{{ t.id_transaksi }}"
                                       class="block px-3 py-2 text-sm hover:bg-gray-100">Lihat Jurnal</a>
                                    <a href="#"
                                        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:'' }}`
                                        )"
                                        class="block px-3 py-2 hover:bg-gray-100">Edit</a>
                                    <a href="#" onclick="deleteRow('{{ t.id }}')" class="block px-3 py-2 text-sm text-red-600 hover:bg-gray-100">Hapus</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="7" class="text-center py-4 text-gray-500">Tidak ada data.</td></tr>
                    {% endfor %}
                </tbody>
            </table>

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

    <!-- Modal Template -->
    <div id="buktiModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
        <div class="bg-gray-900 text-white rounded-lg shadow-lg max-w-3xl w-full">
            <div class="flex justify-between items-center px-4 py-2 border-b border-gray-700">
                <h5 class="font-bold">Preview Bukti Transaksi</h5>
                <button onclick="closeModal('buktiModal')" class="text-white text-xl">&times;</button>
            </div>
            <div class="p-4 text-center">
                <img id="previewBukti" src="" alt="Bukti Transaksi" class="mx-auto rounded-lg max-h-[80vh]">
            </div>
        </div>
    </div>


    <div id="modalLihatJurnal" class="hidden fixed inset-0 z-50 bg-black bg-opacity-50">
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
                    bg-white rounded-lg shadow-lg max-w-3xl w-full mx-4">
            <div class="flex justify-between items-center px-6 py-3 bg-red-600 text-white rounded-t-lg">
                <h5 class="font-bold text-lg">Detail Jurnal</h5>
                <button onclick="closeModal('modalLihatJurnal')"
                    class="text-white text-2xl hover:text-gray-200 focus:outline-none">&times;</button>
            </div>
            <div class="p-6" id="jurnalModalBody">
                <p class="text-center text-gray-500">Memuat data...</p>
            </div>
        </div>
    </div>
    <!-- ========================= -->
    <!-- Modal Transaksi Beban -->
    <!-- ========================= -->
    <div id="transaksiModal" class="fixed inset-0 z-50 hidden bg-black/50 flex items-center justify-center">
    <div class="bg-white rounded-2xl shadow-lg w-full max-w-3xl mx-4 my-6">
        <div class="bg-white rounded-2xl shadow-lg w-full max-w-3xl">
        <!-- Header -->
        <div class="flex justify-between items-center bg-red-600 text-white rounded-t-2xl px-4 py-3">
            <h5 class="text-lg font-semibold">Form Transaksi Beban</h5>
            <button type="button" class="text-2xl font-bold hover:text-gray-200"
                onclick="document.getElementById('transaksiModal').classList.add('hidden')">
                &times;
            </button>
        </div>
        <form id="transaksiForm" enctype="multipart/form-data" class="space-y-4 p-6">
            {% csrf_token %}
            
            <input type="hidden" name="id" id="id">
            <input type="hidden" name="id_transaksi" id="id_transaksi">

            {% if kode_akun in allowed_akun_upd %}
            <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="akun_asal" class="block text-sm font-medium">Akun Asal</label>
                <select name="akun_asal" id="akun_asal" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <option value="">- Pilih Akun Asal -</option>
                <option value="1111" {% if request.session.kode_akun == "1111" %}selected{% endif %}>1111 - KAS MANAGEMENT</option>
                <option value="1112" {% if request.session.kode_akun == "1112" %}selected{% endif %}>1112 - KAS CABANG SEMARANG</option>
                <option value="1113" {% if request.session.kode_akun == "1113" %}selected{% endif %}>1113 - KAS CABANG DEMAK</option>
                <option value="1114" {% if request.session.kode_akun == "1114" %}selected{% endif %}>1114 - KAS CABANG SURAKARTA</option>
                <option value="1121" {% if request.session.kode_akun == "1121" %}selected{% endif %}>1121 - BANK MANDIRI</option>
                <option value="1122" {% if request.session.kode_akun == "1122" %}selected{% endif %}>1122 - BANK BCA</option>
                </select>
            </div>
            <div>
                <label for="akun_tujuan" class="block text-sm font-medium">Akun Tujuan</label>
                <select name="akun_tujuan" id="akun_tujuan" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <option value="">- Pilih Akun Tujuan -</option>
                <option value="4111">4111 - BEBAN FEE SALES INDIHOME</option>
                <option value="4112">4112 - BEBAN FEE SALES ORBIT</option>
                <option value="4131">4131 - BEBAN ATK</option>
                <option value="4132">4132 - BEBAN MATERAI</option>
                <option value="4141">4141 - BEBAN SERAGAM</option>
                <!-- Tambahkan sisa akun sesuai list asli -->
                </select>
            </div>
            </div>
            {% else %}
            <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium">Akun Asal</label>
                {% for akun in akun_list %}
                {% if akun.kode_akun == request.session.kode_akun %}
                    <input type="text" class="w-full border bg-gray-100 rounded px-3 py-2" value="{{ akun.kode_akun }} - {{ akun.nama_akun }}" readonly>
                {% endif %}
                {% endfor %}
                <input type="hidden" name="akun_asal" id="akun_asal" value="{{ request.session.kode_akun }}">
            </div>
            <div>
                <label for="akun_tujuan_display" class="block text-sm font-medium">Akun Transaksi</label>
                <select id="akun_tujuan_display" class="w-full border bg-gray-100 rounded px-3 py-2" disabled>
                <option value="">- Pilih Akun Transaksi -</option>
                {% for akun in akun_list %}
                    <option value="{{ akun.kode_akun }}">{{ akun.kode_akun }} - {{ akun.nama_akun }}</option>
                {% endfor %}
                </select>
                <input type="hidden" name="akun_tujuan" id="akun_tujuan_hidden">
            </div>
            </div>
            {% endif %}

            <div>
            <label for="kategori_transaksi" class="block text-sm font-medium">Kategori Transaksi</label>
            <select name="kategori_transaksi" id="kategori_transaksi" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">- Pilih Kategori -</option>
                {% for k in kategori_list %}
                {% if kode_akun == '1111' %}
                    <option value="{{ k.id }}" data-akun="{{ k.kode_akun }}">{{ k.nama_kategori }}</option>
                {% endif %}
                {% endfor %}
            </select>
            </div>

            <div>
            <label for="nominal" class="block text-sm font-medium">Nominal (Rp)</label>
            <input type="number" name="nominal" id="nominal" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>

            <div>
            <label for="detail_transaksi" class="block text-sm font-medium">Detail Transaksi</label>
            <input type="text" name="detail_transaksi" id="detail_transaksi" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="tanggal_transaksi" class="block text-sm font-medium">Tanggal Transaksi</label>
                <input type="date" name="tanggal_transaksi" id="tanggal_transaksi" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>
            <div>
                <label for="tanggal_pengakuan" class="block text-sm font-medium">Tanggal Pengakuan</label>
                <input type="month" name="tanggal_pengakuan" id="tanggal_pengakuan" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>
            </div>
            <input type="hidden" name="tipe" id="tipe">

            {% if kode_akun in allowed_akun_upd %}
            <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="meta1" class="block text-sm font-medium">Meta 1</label>
                <input type="text" name="meta1" id="meta1" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label for="meta2" class="block text-sm font-medium">Meta 2</label>
                <input type="text" name="meta2" id="meta2" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            </div>
            {% else %}
            <input type="hidden" name="meta1">
            <input type="hidden" name="meta2">
            {% endif %}

            <div class="grid grid-cols-3 gap-4 items-end">
            <div class="col-span-2">
                <label for="bukti_transaksi" class="block text-sm font-medium">Bukti Transaksi</label>
                <input type="file" name="bukti_transaksi" id="bukti_transaksi" class="w-full border rounded px-3 py-2" accept="image/*">
                <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="block text-center bg-white border border-blue-500 text-blue-500 px-2 py-1 rounded hover:bg-blue-500 hover:text-white transition w-full" style="display:none">🧾 Preview</a>
            </div>
            </div>

            <div class="flex justify-end space-x-2 pt-3 border-t border-gray-200">
            <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition">Simpan</button>
            <button type="button" class="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400 transition" onclick="document.getElementById('transaksiModal').classList.add('hidden')">Batal</button>
            </div>
        </form>
        </div>
    </div>
    </div>

    <!-- ========================= -->
    <!-- Modal Transaksi Gaji -->
    <!-- ========================= -->
    <div id="transaksiModalBebanGaji" class="fixed inset-0 z-50 hidden bg-black/50 flex items-center justify-center">
    <div class="bg-white rounded-2xl shadow-lg w-full max-w-3xl mx-4 my-6">
        <div class="bg-white rounded-2xl shadow-lg w-full max-w-3xl">
            <!-- Header -->
            <div class="flex justify-between items-center bg-red-600 text-white rounded-t-2xl px-4 py-3">
                <h5 class="text-lg font-semibold">Form Transaksi Gaji</h5>
                <button type="button" class="text-2xl font-bold hover:text-gray-200"
                    onclick="document.getElementById('transaksiModalBebanGaji').classList.add('hidden')">
                    &times;
                </button>
            </div>
        <form id="transaksiForm2" method="post" enctype="multipart/form-data" action="{% url 'create_transaksi_gaji' %}" class="space-y-4 p-6">
            {% csrf_token %}

            <input type="hidden" name="id" id="id">
            <input type="hidden" name="id_transaksi" id="id_transaksi">

            {% if kode_akun in allowed_akun_upd %}
            <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="akun_asal" class="block text-sm font-medium">Akun Asal</label>
                <select name="akun_asal" id="akun_asal" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <option value="">- Pilih Akun Asal -</option>
                <option value="1111" {% if request.session.kode_akun == "1111" %}selected{% endif %}>1111 - KAS MANAGEMENT</option>
                <option value="1112" {% if request.session.kode_akun == "1112" %}selected{% endif %}>1112 - KAS CABANG SEMARANG</option>
                <option value="1113" {% if request.session.kode_akun == "1113" %}selected{% endif %}>1113 - KAS CABANG DEMAK</option>
                <option value="1114" {% if request.session.kode_akun == "1114" %}selected{% endif %}>1114 - KAS CABANG SURAKARTA</option>
                <option value="1121" {% if request.session.kode_akun == "1121" %}selected{% endif %}>1121 - BANK MANDIRI</option>
                <option value="1122" {% if request.session.kode_akun == "1122" %}selected{% endif %}>1122 - BANK BCA</option>
                </select>
            </div>
            <div>
                <label for="akun_tujuan" class="block text-sm font-medium">Akun Tujuan</label>
                <select name="akun_tujuan" id="akun_tujuan" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <option value="">- Pilih Akun Tujuan -</option>
                <option value="4121">4121 - BEBAN GAJI KOMISARIS</option>
                <option value="4122">4122 - BEBAN GAJI DIREKTUR</option>
                <option value="4123">4123 - BEBAN GAJI MANAGER</option>
                <option value="4124">4124 - BEBAN GAJI ADMIN</option>
                <option value="4125">4125 - BEBAN GAJI KONSULTAN</option>
                <option value="4210">4210 - BEBAN GAJI</option>
                <option value="4211">4211 - BEBAN GAJI TEAM SUPPORT</option>
                <option value="4212">4212 - BEBAN GAJI TEAM LEADER</option>
                </select>
            </div>
            </div>
            {% else %}
            <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium">Akun Asal</label>
                {% for akun in akun_list %}
                {% if akun.kode_akun == request.session.kode_akun %}
                    <input type="text" class="w-full border bg-gray-100 rounded px-3 py-2" value="{{ akun.kode_akun }} - {{ akun.nama_akun }}" readonly>
                {% endif %}
                {% endfor %}
                <input type="hidden" name="akun_asal" id="akun_asal" value="{{ request.session.kode_akun }}">
            </div>
            <div>
                <label for="akun_tujuan_display" class="block text-sm font-medium">Akun Transaksi</label>
                <select id="akun_tujuan_display" class="w-full border bg-gray-100 rounded px-3 py-2" disabled>
                <option value="">- Pilih Akun Transaksi -</option>
                {% for akun in akun_list %}
                    <option value="{{ akun.kode_akun }}">{{ akun.kode_akun }} - {{ akun.nama_akun }}</option>
                {% endfor %}
                </select>
                <input type="hidden" name="akun_tujuan" id="akun_tujuan_hidden">
            </div>
            </div>
            {% endif %}

            <div>
            <label for="kategori_transaksi" class="block text-sm font-medium">Kategori Transaksi</label>
            <select name="kategori_transaksi" id="kategori_transaksi" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">- Pilih Kategori -</option>
                {% for k in kategori_list %}
                {% if kode_akun == '1111' %}
                    <option value="{{ k.id }}" data-akun="{{ k.kode_akun }}">{{ k.nama_kategori }}</option>
                {% endif %}
                {% endfor %}
            </select>
            </div>

            <div>
            <label class="block text-sm font-medium">Nominal</label>
            <input type="number" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" name="nominal" min="1" required>
            </div>

            <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="tanggal_transaksi_gaji" class="block text-sm font-medium">Tanggal Transaksi</label>
                <input type="date" name="tanggal_transaksi" id="tanggal_transaksi_gaji" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>
            <div>
                <label for="tanggal_pengakuan_gaji" class="block text-sm font-medium">Tanggal Pengakuan</label>
                <input type="month" name="tanggal_pengakuan" id="tanggal_pengakuan_gaji" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>
            </div>

            {% if kode_akun in allowed_akun_upd %}
            <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="meta1_gaji" class="block text-sm font-medium">Meta 1 (Team Leader)</label>
                <select name="meta1" id="meta1_gaji" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <option value="">- Pilih Team Leader -</option>
                {% for tl in team_leader %}
                    <option value="{{ tl.tl_id }}">{{ tl.user_name }}</option>
                {% endfor %}
                </select>
            </div>
            <div>
                <label for="meta2" class="block text-sm font-medium">Meta 2</label>
                <input type="text" name="meta2" id="meta2" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            </div>
            {% else %}
            <input type="hidden" name="meta1">
            <input type="hidden" name="meta2">
            {% endif %}

            <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="saldo_kasbon" class="block text-sm font-medium">Jumlah Kasbon</label>
                <input type="text" id="saldo_kasbon" class="w-full border bg-gray-100 rounded px-3 py-2" readonly>
            </div>
            <div>
                <label for="nominal_kasbon" class="block text-sm font-medium">Nominal Kasbon yang ingin Dibayarkan</label>
                <input type="number" name="nominal_kasbon" id="nominal_kasbon" class="w-full border rounded px-3 py-2">
            </div>
            </div>

            <div class="grid grid-cols-3 gap-4 items-end">
            <div class="col-span-2">
                <label for="bukti_transaksi" class="block text-sm font-medium">Bukti Transaksi</label>
                <input type="file" name="bukti_transaksi" id="bukti_transaksi" class="w-full border rounded px-3 py-2" accept="image/*">
                <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="block text-center bg-white border border-blue-500 text-blue-500 px-2 py-1 rounded hover:bg-blue-500 hover:text-white transition w-full" style="display:none">🧾 Preview</a>
            </div>
            </div>

            <div class="flex justify-end space-x-2 pt-3 border-t border-gray-200">
            <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition">Simpan</button>
            <button type="button" class="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400 transition" onclick="document.getElementById('transaksiModalBebanGaji').classList.add('hidden')">Batal</button>
            </div>

        </form>
        </div>
    </div>
    </div>

    <!-- ========================= -->
    <!-- Modal Transaksi Piutang -->
    <!-- ========================= -->
    <div id="transaksipiutang" class="fixed inset-0 z-50 hidden bg-black/50 flex items-center justify-center">
    <div class="bg-white rounded-2xl shadow-lg w-full max-w-3xl mx-4 my-6">
        <div class="bg-white rounded-2xl shadow-lg w-full max-w-3xl">
            <!-- Header -->
            <div class="flex justify-between items-center bg-red-600 text-white rounded-t-2xl px-4 py-3">
                <h5 class="text-lg font-semibold">Form Transaksi Piutang</h5>
                <button type="button" class="text-2xl font-bold hover:text-gray-200"
                    onclick="document.getElementById('transaksipiutang').classList.add('hidden')">
                    &times;
                </button>
            </div>
        <form id="transaksiForm3" enctype="multipart/form-data" class="space-y-4 p-6">
            {% csrf_token %}

            <input type="hidden" name="id" id="id">
            <input type="hidden" name="id_transaksi" id="id_transaksi">

            {% if kode_akun in allowed_akun_upd %}
            <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="akun_asal" class="block text-sm font-medium">Akun Asal</label>
                <select name="akun_asal" id="akun_asal" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <option value="">- Pilih Akun Asal -</option>
                <option value="1111" {% if request.session.kode_akun == "1111" %}selected{% endif %}>1111 - KAS MANAGEMENT</option>
                <option value="1112" {% if request.session.kode_akun == "1112" %}selected{% endif %}>1112 - KAS CABANG SEMARANG</option>
                <option value="1113" {% if request.session.kode_akun == "1113" %}selected{% endif %}>1113 - KAS CABANG DEMAK</option>
                <option value="1114" {% if request.session.kode_akun == "1114" %}selected{% endif %}>1114 - KAS CABANG SURAKARTA</option>
                <option value="1121" {% if request.session.kode_akun == "1121" %}selected{% endif %}>1121 - BANK MANDIRI</option>
                <option value="1122" {% if request.session.kode_akun == "1122" %}selected{% endif %}>1122 - BANK BCA</option>
                </select>
            </div>
            <div>
                <label for="akun_tujuan" class="block text-sm font-medium">Akun Tujuan</label>
                <select name="akun_tujuan" id="akun_tujuan" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <option value="">- Pilih Akun Tujuan -</option>
                <option value="1133">1133 - BEBAN PIUTANG KARYAWAN</option>
                </select>
            </div>
            </div>
            {% else %}
            <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium">Akun Asal</label>
                {% for akun in akun_list %}
                {% if akun.kode_akun == request.session.kode_akun %}
                    <input type="text" class="w-full border bg-gray-100 rounded px-3 py-2" value="{{ akun.kode_akun }} - {{ akun.nama_akun }}" readonly>
                {% endif %}
                {% endfor %}
                <input type="hidden" name="akun_asal" id="akun_asal" value="{{ request.session.kode_akun }}">
            </div>
            <div>
                <label for="akun_tujuan_display" class="block text-sm font-medium">Akun Transaksi</label>
                <select id="akun_tujuan_display" class="w-full border bg-gray-100 rounded px-3 py-2" disabled>
                <option value="">- Pilih Akun Transaksi -</option>
                {% for akun in akun_list %}
                    <option value="{{ akun.kode_akun }}">{{ akun.kode_akun }} - {{ akun.nama_akun }}</option>
                {% endfor %}
                </select>
                <input type="hidden" name="akun_tujuan" id="akun_tujuan_hidden">
            </div>
            </div>
            {% endif %}

            <div>
            <label for="kategori_transaksi" class="block text-sm font-medium">Kategori Transaksi</label>
            <select name="kategori_transaksi" id="kategori_transaksi" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">- Pilih Kategori -</option>
                {% for k in kategori_list %}
                {% if kode_akun == '1111' %}
                    <option value="{{ k.id }}" data-akun="{{ k.kode_akun }}">{{ k.nama_kategori }}</option>
                {% endif %}
                {% endfor %}
            </select>
            </div>

            <div>
            <label for="nominal" class="block text-sm font-medium">Nominal (Rp)</label>
            <input type="number" name="nominal" id="nominal" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>

            <div>
            <label for="detail_transaksi" class="block text-sm font-medium">Detail Transaksi</label>
            <input type="text" name="detail_transaksi" id="detail_transaksi" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="tanggal_transaksi_piutang" class="block text-sm font-medium">Tanggal Transaksi</label>
                <input type="date" name="tanggal_transaksi" id="tanggal_transaksi_piutang" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>
            <div>
                <label for="tanggal_pengakuan_piutang" class="block text-sm font-medium">Tanggal Pengakuan</label>
                <input type="month" name="tanggal_pengakuan" id="tanggal_pengakuan_piutang" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>
            </div>

            {% if kode_akun in allowed_akun_upd %}
            <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="meta1" class="block text-sm font-medium">Meta 1 (Team Leader)</label>
                <select name="meta1" id="meta1" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <option value="">- Pilih Team Leader -</option>
                {% for tl in team_leader %}
                    <option value="{{ tl.tl_id }}">{{ tl.user_name }}</option>
                {% endfor %}
                </select>
            </div>
            <div>
                <label for="meta2" class="block text-sm font-medium">Meta 2</label>
                <input type="text" name="meta2" id="meta2" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            </div>
            {% else %}
            <input type="hidden" name="meta1">
            <input type="hidden" name="meta2">
            {% endif %}

            <div class="grid grid-cols-3 gap-4 items-end">
            <div class="col-span-2">
                <label for="bukti_transaksi" class="block text-sm font-medium">Bukti Transaksi</label>
                <input type="file" name="bukti_transaksi" id="bukti_transaksi" class="w-full border rounded px-3 py-2" accept="image/*">
                <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="block text-center bg-white border border-blue-500 text-blue-500 px-2 py-1 rounded hover:bg-blue-500 hover:text-white transition w-full" style="display:none">🧾 Preview</a>
            </div>
            </div>

            <div class="flex justify-end space-x-2 pt-3 border-t border-gray-200">
            <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition">Simpan</button>
            <button type="button" class="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400 transition" onclick="document.getElementById('transaksipiutang').classList.add('hidden')">Batal</button>
            </div>

        </form>
        </div>
    </div>
    </div>

    <!-- ========================= -->
    <!-- Modal Transfer Saldo -->
    <!-- ========================= -->
    <div id="modalTransferSaldo" class="fixed inset-0 z-50 hidden bg-black/50 flex items-center justify-center">
        <div class="bg-white rounded-2xl shadow-lg w-full max-w-2xl mx-4 my-6">
            
            <!-- Header -->
            <div class="flex justify-between items-center bg-red-600 text-white rounded-t-2xl px-4 py-3">
            <h5 class="text-lg font-semibold">Transfer Saldo Antar Kas/Bank</h5>
            <button type="button" class="text-2xl font-bold hover:text-gray-200"
                onclick="document.getElementById('modalTransferSaldo').classList.add('hidden')">
                &times;
            </button>
            </div>

            <!-- Body -->
            <form id="form-transfer-saldo" enctype="multipart/form-data" class="space-y-4 p-6">
            {% csrf_token %}
            <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">Akun Asal</label>
                {% for akun in akun_list %}
                {% if akun.kode_akun == request.session.kode_akun %}
                    <input type="text" class="w-full border bg-gray-100 rounded px-3 py-2"
                        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">Akun Tujuan</label>
                <select class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" 
                        name="akun_tujuan" required>
                <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 class="grid grid-cols-2 gap-4">
                <div>
                <label for="tanggal_transaksi_tf" class="block text-sm font-medium">Tanggal Transaksi</label>
                <input type="date" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                        id="tanggal_transaksi_tf" name="tanggal_transaksi" required>
                </div>
                <div>
                <label for="tanggal_pengakuan_tf" class="block text-sm font-medium">Bulan Pengakuan</label>
                <input type="month" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                        id="tanggal_pengakuan_tf" name="tanggal_pengakuan" required>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium">Nominal</label>
                <input type="number" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    name="nominal" min="1" required>
            </div>

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

            <div>
                <label class="block text-sm font-medium">Bukti</label>
                <input type="file" class="w-full border rounded px-3 py-2" name="bukti_transaksi" accept="image/*">
            </div>

            <!-- Footer -->
            <div class="flex justify-end space-x-2 pt-3 border-t border-gray-200">
                <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition">Transfer</button>
                <button type="button" class="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400 transition"
                onclick="document.getElementById('modalTransferSaldo').classList.add('hidden')">Tutup</button>
            </div>
            </form>
        </div>
        </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
// =======================
// GLOBAL MODAL & DROPDOWN
// =======================
window.openModal = (id) => {
    const modal = document.getElementById(id);
    if (!modal) return;
    modal.classList.remove("hidden");
    modal.classList.add("flex");

    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 untuk input type="date"
    const todayMonth = `${yyyy}-${mm}`;      // format untuk input type="month"

    // === Modal transaksi umum ===
    if (id === "transaksiModal") {
        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");

        if (tglTransaksi && !tglTransaksi.value) {
            tglTransaksi.value = todayDate;
        }
        if (tglPengakuan && !tglPengakuan.value) {
            tglPengakuan.value = todayMonth;
        }

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

    // === Modal transfer saldo ===
    if (id === "modalTransferSaldo") {
        const tglTf = document.getElementById("tanggal_transaksi_tf");
        const bulanTf = document.getElementById("tanggal_pengakuan_tf");
        const idTransaksiTf = document.getElementById("id_transaksi_tf");
        const akunAsalTf = document.querySelector("#form-transfer-saldo [name='akun_asal']");
        const akunTujuanTf = document.querySelector("#form-transfer-saldo [name='akun_tujuan']");

        if (tglTf && !tglTf.value) {
            tglTf.value = todayDate;
        }
        if (bulanTf && !bulanTf.value) {
            bulanTf.value = todayMonth;
        }

        if (idTransaksiTf && !idTransaksiTf.value) {
            const ts = Date.now();
            const asal = akunAsalTf?.value || "XXX";
            const tujuan = akunTujuanTf?.value || "YYY";
            idTransaksiTf.value = `TRX-${ts}-${asal}-${tujuan}`;
        }
    }
};


window.closeModal = (id) => {
    const modal = document.getElementById(id);
    if (!modal) return;
    modal.classList.add("hidden");
    modal.classList.remove("flex");
};

window.toggleDropdown = (id) => {
    const dropdown = document.getElementById(id);
    if (!dropdown) return;
    dropdown.classList.toggle("hidden");

    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);
        }
    });
};

window.showImageModal = (src, desc) => {
    Swal.fire({
        title: desc,
        imageUrl: src,
        imageAlt: "Bukti Transaksi",
        showCloseButton: true,
        showConfirmButton: false,
        width: "auto",
        customClass: { popup: "swal2-bukti-preview" }
    });
};

window.lihatJurnal = (element) => {
    const modal = document.getElementById("modalLihatJurnal");
    const body = document.getElementById("jurnalModalBody");
    if (!modal || !body) return;

    openModal("modalLihatJurnal");
    body.innerHTML = '<p class="text-center text-gray-500">Memuat data...</p>';

    const idTransaksi = element.dataset.id;
    const url = element.dataset.urlTemplate.replace("REPLACE_ID", idTransaksi);

    fetch(url)
        .then(res => res.text())
        .then(html => body.innerHTML = html)
        .catch(() => body.innerHTML = '<div class="text-center text-red-600">Gagal memuat data jurnal.</div>');
};

window.deleteRow = (id) => {
    Swal.fire({
        title: "Yakin ingin menghapus?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Ya, hapus!"
    }).then(result => {
        if (result.isConfirmed) {
            fetch(`{% url 'delete_transaksi' id=0 %}`.replace("0", id), {
                method: "POST",
                headers: { "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value }
            })
            .then(res => res.json())
            .then(data => {
                Swal.fire(data.status === "success" ? "Berhasil" : "Gagal", data.message, data.status)
                    .then(() => location.reload());
            });
        }
    });
};

// =======================
// DOCUMENT READY
// =======================
document.addEventListener("DOMContentLoaded", () => {
    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");
    const today = `${yyyy}-${mm}-${dd}`;
    const thisMonth = `${yyyy}-${mm}`;

    // =======================
    // RESET FORM GENERIK
    // =======================
    window.resetForm = (formId) => {
        const form = document.getElementById(formId);
        if (!form) return;

        form.reset();

        const idTransaksi = form.querySelector("[name=id_transaksi]");
        if (idTransaksi) idTransaksi.value = "";

        const tanggal = form.querySelector("[name=tanggal_transaksi]");
        if (tanggal) tanggal.value = today;

        const pengakuan = form.querySelector("[name=tanggal_pengakuan]");
        if (pengakuan) pengakuan.value = thisMonth;

        const previewLink = form.querySelector("#preview-bukti-upload");
        if (previewLink) {
            previewLink.classList.add("hidden");
            previewLink.removeAttribute("onclick");
        }
    };

    window.showTransaksiBaruModal = function(type = "marketing") {
        resetForm();
        populateKategori(type === "operasional" ? kategoriOperasional : kategoriMarketing);
        document.getElementById("transaksiModalLabel").textContent =
            type === "operasional" ? "Form Transaksi Operasional" : "Form Transaksi Marketing";
        openModal('transaksiModal');
    };

    window.editRowModal = function(id, id_transaksi, akun_asal, akun_tujuan, tipe, kategori_id, detail, nominal, tgl, tgl_akui, meta1, meta2, bukti) {
        const form = document.getElementById('transaksiForm');
        form.id.value = id;
        form.id_transaksi.value = id_transaksi;
        form.tipe.value = tipe;
        form.detail_transaksi.value = detail;
        form.nominal.value = nominal;
        form.tanggal_transaksi.value = tgl;
        form.tanggal_pengakuan.value = tgl_akui;
        form.meta1.value = meta1;
        form.meta2.value = meta2;

        // Tentukan kategori source
        // const kategoriSource = kategoriOperasional.some(k => k.id == kategori_id) ? kategoriOperasional : kategoriMarketing;
        // populateKategori(kategoriSource);
        // form.kategori_transaksi.value = kategori_id;
        // document.getElementById("transaksiModalLabel").textContent =
        //     kategoriSource === kategoriOperasional ? "Edit Transaksi Operasional" : "Edit Transaksi Marketing";

        // Set akun asal & tujuan
        document.getElementById('akun_asal').value = akun_asal;
        (document.getElementById('akun_tujuan') || document.getElementById('akun_tujuan_hidden')).value = akun_tujuan;

        // Preview bukti
        const previewLink = document.getElementById('preview-bukti-upload');
        const namaBukti = document.getElementById('bukti_transaksi_lama');
        if (bukti) {
            previewLink.style.display = 'inline-block';
            previewLink.onclick = () => showImageModal(`/media/${bukti}`, id);
            namaBukti.textContent = `File lama: ${bukti}`;
        } else {
            previewLink.style.display = 'none';
            namaBukti.textContent = '';
        }

        openModal('transaksiModal');
    };

    // =======================
    // PREVIEW BUKTI UPLOAD
    // =======================
    document.querySelectorAll("input[type=file][name=bukti_transaksi]").forEach(input => {
        input.addEventListener("change", function() {
            const file = this.files[0];
            const previewLink = this.closest("form").querySelector("#preview-bukti-upload");
            if (!previewLink) return;

            if (file) {
                const objectURL = URL.createObjectURL(file);
                previewLink.classList.remove("hidden");
                previewLink.onclick = () => showImageModal(objectURL, "Preview Upload");
            } else {
                previewLink.classList.add("hidden");
                previewLink.removeAttribute("onclick");
            }
        });
    });

    // =======================
    // GENERIC FORM SUBMIT
    // =======================
    const handleFormSubmit = (formId, urlCreate, urlUpdate) => {
        const form = document.getElementById(formId);
        if (!form) return;

        form.addEventListener("submit", (e) => {
            e.preventDefault();

            const id = form.querySelector("[name=id]").value;
            const akunAsal = form.querySelector("[name=akun_asal]")?.value;
            const akunTujuan = form.querySelector("[name=akun_tujuan]")?.value ||
                               form.querySelector("[name=akun_tujuan_hidden]")?.value;

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

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

            const url = id ? urlUpdate.replace("0", id) : urlCreate;
            const formData = new FormData(form);
            const submitButton = form.querySelector("button[type=submit]");
            submitButton.disabled = true;

            fetch(url, {
                method: "POST",
                headers: { "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                Swal.fire(data.status === "success" ? "Berhasil" : "Gagal", data.message, data.status)
                    .then(() => location.reload());
            })
            .catch(err => {
                console.error(err);
                Swal.fire("Error", "Gagal koneksi ke server", "error");
            })
            .finally(() => submitButton.disabled = false);
        });
    };

    // =======================
    // INISIALISASI SEMUA FORM
    // =======================
    handleFormSubmit("transaksiForm", "{% url 'create_transaksi' %}", "{% url 'update_transaksi' id=0 %}");
    handleFormSubmit("transaksiForm2", "{% url 'create_transaksi_gaji' %}", "{% url 'update_transaksi' id=0 %}");
    handleFormSubmit("transaksiForm3", "{% url 'create_transaksi' %}", "{% url 'update_transaksi' id=0 %}");
    handleFormSubmit("form-transfer-saldo", "{% url 'create_transaksi' %}", "{% url 'update_transaksi' id=0 %}");
});
</script>




{% endblock %}