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

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

<div class="max-w-7xl mx-auto px-4 py-6">
  <h2 class="text-center text-white text-2xl font-semibold p-3 rounded mb-6 bg-red-600">
    Transaksi Umum {{nama_akun_login}}
  </h2>

  <!-- Saldo -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
    <div class="bg-green-100 text-green-800 p-3 rounded shadow">
      <strong>Saldo Kas:</strong> Rp. {{ saldo_akun|floatformat:0|intcomma }}
    </div>
    {% if kode_akun in allowed_akun_upd %}
    <div class="bg-blue-100 text-blue-800 p-3 rounded shadow">
      <strong>Saldo BCA:</strong> Rp. {{ saldo_akun_bca|floatformat:0|intcomma }}
    </div>
    <div class="bg-yellow-100 text-yellow-800 p-3 rounded shadow">
      <strong>Saldo Mandiri:</strong> Rp. {{ saldo_akun_mandiri|floatformat:0|intcomma }}
    </div>
    {% endif %}
  </div>

  <!-- Tombol aksi -->
  <div class="flex justify-end space-x-2 mb-4">
    <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded shadow"
      onclick="openModal('modalTransferSaldo')">
      <i class="fas fa-random mr-1"></i> Transfer Saldo
    </button>
    <button onclick="showTransaksiBaruModal('marketing')"
      class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded shadow">
      Tambah Transaksi Marketing
    </button>
    <button onclick="showTransaksiBaruModal('operasional')"
      class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded shadow">
      Tambah Transaksi Operasional
    </button>
  </div>

  <!-- Tabel Transaksi -->
  <div class="bg-white rounded shadow overflow-x-auto">
    <div class="bg-red-600 text-white px-4 py-2 rounded-t">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 'list_transaksi' %}"
            class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold rounded-md px-5 py-2 transition"
            >
            Reset
            </a>
        </form>
    </div>
    <table class="min-w-full 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>
        {% for t in data %}
        <tr class="border-b hover:bg-gray-50">
          <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="#" onclick="showImageModal('/media/{{ t.bukti_transaksi }}','{{t.id_transaksi}}');return false"
                class="text-indigo-600 hover:underline">🧾 Lihat</a>
            {% else %}
              <span class="text-gray-400">-</span>
            {% endif %}
          </td>
          <td class="px-3 py-2 text-right">
            <div class="relative">
              <button onclick="toggleDropdown('aksi-{{t.id}}')"
                class="bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded">⋮</button>
              <div id="aksi-{{t.id}}"
                class="absolute right-0 mt-2 w-40 bg-white border rounded shadow hidden z-20">
                <a href="#" onclick="lihatJurnal(this)"
                  data-url-template="{% url 'lihat_jurnal' 'REPLACE_ID' %}"
                  data-id="{{t.id_transaksi}}"
                  class="block px-3 py-2 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 hover:bg-red-100 text-red-600">Hapus</a>
              </div>
            </div>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="7" class="text-center p-4 text-gray-500">Tidak ada data.</td></tr>
        {% endfor %}
      </tbody>
    </table>

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

<!-- ========== MODALS (Tailwind style with hidden class) ========== -->

<!-- Modal Lihat Jurnal -->
<div id="modalLihatJurnal" 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-2xl rounded shadow-lg">
    <div class="flex justify-between items-center bg-red-600 text-white px-4 py-2 rounded-t">
      <h5 class="text-lg">Detail Jurnal</h5>
      <button onclick="closeModal('modalLihatJurnal')" class="text-white">&times;</button>
    </div>
    <div id="jurnalModalBody" class="p-4">
      <p class="text-center text-gray-500">Memuat data...</p>
    </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 overflow-auto">
  <div class="bg-white w-full max-w-3xl rounded 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-2 rounded-t">
        <h5 id="transaksiModalLabel" class="text-lg">Form Transaksi Umum</h5>
        <button type="button" onclick="closeModal('transaksiModal')">&times;</button>
      </div>
      <div class="p-4 space-y-4">
        <input type="hidden" name="id" id="id">
        <input type="hidden" name="id_transaksi" id="id_transaksi">

        <!-- Akun Asal & Tujuan -->
        {% if kode_akun in allowed_akun_upd %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block mb-1">Akun Asal</label>
            <select name="akun_asal" id="akun_asal" class="w-full border rounded px-2 py-1">
              <option value="">- Pilih Akun Asal -</option>
              {% for akun in akun_list %}
              <option value="{{ akun.kode_akun }}" {% if akun.kode_akun == request.session.kode_akun %}selected{% endif %}>
                {{ akun.kode_akun }} - {{ akun.nama_akun }}
              </option>
              {% endfor %}
            </select>
          </div>
          <div>
            <label class="block mb-1">Akun Tujuan</label>
            <select name="akun_tujuan" id="akun_tujuan" class="w-full border rounded px-2 py-1">
              <option value="">- Pilih Akun Tujuan -</option>
              {% for akun in akun_list %}
              <option value="{{ akun.kode_akun }}">{{ akun.kode_akun }} - {{ akun.nama_akun }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        {% else %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block mb-1">Akun Asal</label>
            <input type="text" value="{{ request.session.kode_akun }}" readonly class="w-full border rounded px-2 py-1 bg-gray-100">
            <input type="hidden" name="akun_asal" id="akun_asal" value="{{ request.session.kode_akun }}">
          </div>
          <div>
            <label class="block mb-1">Akun Tujuan</label>
            <select id="akun_tujuan_display" class="w-full border rounded px-2 py-1" 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 %}

        <!-- Kategori -->
        <div>
          <label for="kategori_transaksi" class="block mb-1">Kategori Transaksi</label>
          <select id="kategori_transaksi" name="kategori_transaksi" class="w-full border rounded px-2 py-1"></select>
        </div>

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

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

        <!-- Tanggal -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block mb-1">Tanggal Transaksi</label>
            <input type="date" id="tanggal_transaksi" name="tanggal_transaksi" class="w-full border rounded px-2 py-1">
          </div>
          <div>
            <label class="block mb-1">Tanggal Pengakuan</label>
            <input type="month" id="tanggal_pengakuan" name="tanggal_pengakuan"
              class="w-full border rounded px-2 py-1" {% if kode_akun not in allowed_akun_upd %}readonly{% endif %}>
          </div>
          <input type="hidden" name="tipe" id="tipe">
        </div>

        <!-- Meta -->
        {% if kode_akun in allowed_akun_upd %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block mb-1">Meta1</label>
            <input type="text" name="meta1" id="meta1" class="w-full border rounded px-2 py-1">
          </div>
          <div>
            <label class="block mb-1">Meta2</label>
            <input type="text" name="meta2" id="meta2" class="w-full border rounded px-2 py-1">
          </div>
        </div>
        {% endif %}

        <!-- Bukti -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block mb-1">Bukti Transaksi</label>
            <input type="file" id="bukti_transaksi" name="bukti_transaksi" class="w-full border rounded px-2 py-1" 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 class="flex items-end">
            <a id="preview-bukti-upload" href="#" class="hidden text-indigo-600 underline">🧾 Preview</a>
          </div>
        </div>
      </div>
      <div class="flex justify-end space-x-2 px-4 py-2 border-t">
        <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded">Simpan</button>
        <button type="button" onclick="closeModal('transaksiModal')" class="bg-gray-400 text-white px-4 py-2 rounded">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 shadow-lg">
    <form id="form-transfer-saldo">
      {% csrf_token %}
      <div class="flex justify-between items-center bg-red-600 text-white px-4 py-2 rounded-t">
        <h5>Transfer Saldo Antar Kas/Bank</h5>
        <button type="button" onclick="closeModal('modalTransferSaldo')">&times;</button>
      </div>
      <div class="p-4 space-y-3">
        <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 mb-1">Akun Asal</label>
          <select name="akun_asal" class="w-full border rounded px-2 py-1">
            <option value="">-- Pilih Akun Asal --</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 mb-1">Akun Tujuan</label>
          <select name="akun_tujuan" 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 mb-1">Tanggal Transaksi</label>
          <input type="date" name="tanggal_transaksi" id="tanggal_transaksi_tf" class="w-full border rounded px-2 py-1">
        </div>

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

        <div>
          <label class="block mb-1">Nominal Transfer (Rp)</label>
          <input type="number" name="nominal" id="nominal_tf" class="w-full border rounded px-2 py-1">
        </div>

        <div>
          <label class="block mb-1">Keterangan</label>
          <input type="text" name="detail_transaksi" id="detail_tf" class="w-full border rounded px-2 py-1">
        </div>
      </div>
      <div class="flex justify-end space-x-2 px-4 py-2 border-t">
        <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded">Simpan</button>
        <button type="button" onclick="closeModal('modalTransferSaldo')" class="bg-gray-400 text-white px-4 py-2 rounded">Batal</button>
      </div>
    </form>
  </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');

    const kategoriMarketing = {{ kategori_marketing_list|safe }};
    const kategoriOperasional = {{ kategori_operasional_list|safe }};
    const allowedAkunUpd = {{ allowed_akun_upd|safe }};
    const kode_akun = {{ kode_akun|safe }};

    // ✅ Helper buka/tutup modal + auto tanggal & ID
    window.openModal = function(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}`; // untuk input type="date"
        const todayMonth = `${yyyy}-${mm}`;      // untuk input type="month"

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

            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 = function(id) {
        const modal = document.getElementById(id);
        if (!modal) return;
        modal.classList.add("hidden");
        modal.classList.remove("flex");

        // reset form tiap modal ditutup
        if (id === "transaksiModal") {
            resetForm();
        }
        if (id === "modalTransferSaldo") {
            const formTf = document.getElementById("form-transfer-saldo");
            if (formTf) formTf.reset();
            const idTransaksiTf = document.getElementById("id_transaksi_tf");
            if (idTransaksiTf) idTransaksiTf.value = "";
        }
    };

    // ✅ Populate kategori
    function populateKategori(list) {
        const select = document.getElementById("kategori_transaksi");
        if (!select) return;

        select.innerHTML = '<option value="">- Pilih Kategori -</option>';
        list.forEach(k => {
            const option = document.createElement("option");
            option.value = k.id;
            option.dataset.akun = k.kode_akun;
            option.textContent = k.nama_kategori;
            select.appendChild(option);
        });
    }

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

    // ✅ Update akun tujuan otomatis
    document.getElementById("kategori_transaksi")?.addEventListener("change", function () {
        const akunTujuan = this.options[this.selectedIndex]?.dataset.akun;
        if (!akunTujuan) return;

        const akunTujuanInput = document.getElementById("akun_tujuan");
        const akunTujuanHidden = document.getElementById("akun_tujuan_hidden");
        const displaySelect = document.getElementById("akun_tujuan_display");

        if (akunTujuanInput && !akunTujuanInput.disabled) {
            akunTujuanInput.value = akunTujuan;
        } else if (akunTujuanHidden) {
            akunTujuanHidden.value = akunTujuan;
            if (displaySelect) {
                for (let opt of displaySelect.options) {
                    opt.selected = opt.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.style.display = 'inline-block';
            previewLink.onclick = () => showImageModal(objectURL, 'Preview Upload');
        } else {
            previewLink.style.display = 'none';
            previewLink.onclick = null;
        }
    });

    // ✅ Submit form transaksi utama
    document.getElementById('transaksiForm')?.addEventListener('submit', function (e) {
        e.preventDefault();
        const form = e.target;
        const akunAsal = form.akun_asal.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 timestamp = Date.now();
            form.id_transaksi.value = `TRX-${timestamp}-${akunAsal}-${akunTujuan}`;
        }

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

        const formData = new FormData(form);

        fetch(url, {
            method: 'POST',
            headers: { 'X-CSRFToken': getCSRFToken() },
            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", "Terjadi kesalahan server", "error");
        });
    });

    // ✅ Submit form Transfer Saldo
    document.getElementById('form-transfer-saldo')?.addEventListener('submit', function (e) {
        e.preventDefault();
        const akun_asal = this.querySelector('[name=akun_asal]').value;
        const akun_tujuan = this.querySelector('[name=akun_tujuan]').value;

        if (akun_asal === akun_tujuan) {
            Swal.fire("Error", "Tidak bisa transfer ke akun yang sama", "error");
            return;
        }

        const idField = document.getElementById('id_transaksi_tf');
        if (!idField.value) {
            const timestamp = Date.now();
            idField.value = `TRX-${timestamp}-${akun_asal}-${akun_tujuan}`;
        }

        const formData = new FormData(this);

        fetch("{% url 'create_transaksi' %}", {
            method: "POST",
            headers: { 'X-CSRFToken': getCSRFToken() },
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            Swal.fire(data.status === 'success' ? 'Berhasil' : 'Gagal', data.message, data.status)
                .then(() => location.reload());
        })
        .catch(err => Swal.fire("Error", "Gagal memproses transfer", "error"));
    });

    // ✅ Reset form transaksi
    function resetForm() {
        const form = document.getElementById('transaksiForm');
        if (!form) return;
        form.reset();
        form.id_transaksi.value = "";
        form.tipe.value = "K";

        const previewLink = document.getElementById('preview-bukti-upload');
        if (previewLink) {
            previewLink.style.display = 'none';
            previewLink.onclick = null;
        }
    }

    // ✅ Modal transaksi baru
    window.showTransaksiBaruModal = function(type = "marketing") {
        resetForm();
        if (type === "operasional") {
            populateKategori(kategoriOperasional);
            document.getElementById("transaksiModalLabel").textContent = "Form Transaksi Operasional";
        } else {
            populateKategori(kategoriMarketing);
            document.getElementById("transaksiModalLabel").textContent = "Form Transaksi Marketing";
        }
        openModal('transaksiModal');
    };

    // ✅ Edit transaksi
    window.editRowModal = function(id, id_transaksi, akun_asal, akun_tujuan, tipe, kategori_id, detail, nominal, tgl, tgl_akui, meta1, meta2, bukti) {
        if (tipe === 'D' && !allowedAkunUpd.includes(akun_asal) && !allowedAkunUpd.includes(kode_akun)) {
            Swal.fire('Ditolak', 'Transaksi dengan akun ini tidak boleh diedit.', 'warning');
            return;
        }

        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;

        let kategoriSource = kategoriMarketing;
        if (kategoriOperasional.some(k => k.id == kategori_id)) {
            kategoriSource = kategoriOperasional;
            document.getElementById("transaksiModalLabel").textContent = "Edit Transaksi Operasional";
        } else {
            document.getElementById("transaksiModalLabel").textContent = "Edit Transaksi Marketing";
        }
        populateKategori(kategoriSource);
        form.kategori_transaksi.value = kategori_id;

        const asalSelect = document.getElementById('akun_asal');
        if (asalSelect) asalSelect.value = akun_asal;

        const tujuanInput = document.getElementById('akun_tujuan') || document.getElementById('akun_tujuan_hidden');
        if (tujuanInput) tujuanInput.value = akun_tujuan;

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

    // ✅ Hapus transaksi
    window.deleteRow = function(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': getCSRFToken() }
                })
                .then(res => res.json())
                .then(data => {
                    Swal.fire(data.status === 'success' ? 'Berhasil' : 'Gagal', data.message, data.status)
                        .then(() => location.reload());
                });
            }
        });
    };

    // ✅ Preview gambar bukti
    window.showImageModal = function(src, desc) {
        Swal.fire({
            title: desc,
            imageUrl: src,
            imageAlt: 'Bukti Transaksi',
            showCloseButton: true,
            showConfirmButton: false,
            width: 'auto'
        });
    };

    // ✅ Lihat jurnal
    window.lihatJurnal = function(element) {
        openModal('modalLihatJurnal');
        document.getElementById('jurnalModalBody').innerHTML = '<p class="text-center text-gray-500">Memuat data...</p>';

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

        fetch(url)
            .then(res => res.text())
            .then(html => {
                document.getElementById('jurnalModalBody').innerHTML = html;
            })
            .catch(() => {
                document.getElementById('jurnalModalBody').innerHTML =
                    '<div class="text-red-600 p-2">Gagal memuat data jurnal.</div>';
            });
    };

    // ✅ Ambil token CSRF
    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);
        }
    });
}
</script>

{% endblock %}