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

{% block content %}
<div class="p-6">
  <h2 class="text-center text-xl font-bold text-white bg-red-700 p-3 rounded mb-4">Transaksi BCA</h2>

  <div class="bg-red-100 text-blue-900 p-3 rounded mb-4">
    <strong>Saldo Akun Saat Ini:</strong> Rp {{ saldo_akun|floatformat:0|intcomma }}
  </div>

  <div class="flex justify-end gap-2 mb-4">
    <button @click="openModal('modalTransferSaldo')"
      class="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white text-sm flex items-center gap-2">
      <i class="fas fa-random"></i>
      Transfer Saldo
    </button>
    <button @click="openModal('transaksiModal')"
      class="px-4 py-2 rounded bg-red-600 hover:bg-red-700 text-white text-sm">
      Tambah Transaksi
    </button>
  </div>

  <!-- Card -->
  <div class="bg-white shadow rounded">
    <div class="px-4 py-2 bg-red-700 text-white font-semibold 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 'transaksi_BCA' %}"
            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="overflow-x-auto">
      <table class="w-full border-collapse">
        <thead class="bg-gray-100 text-sm">
          <tr>
            <th class="border px-3 py-2 text-left">Akun</th>
            <th class="border px-3 py-2 text-left">Tanggal</th>
            <th class="border px-3 py-2 text-left">Transaksi</th>
            <th class="border px-3 py-2 text-right">Debit</th>
            <th class="border px-3 py-2 text-right">Kredit</th>
            <th class="border px-3 py-2 text-center">Bukti</th>
            <th class="border px-3 py-2"></th>
          </tr>
        </thead>
        <tbody class="text-sm">
          {% for t in data %}
          <tr class="hover:bg-gray-50">
            <td class="border px-3 py-2">{{ t.akun_tujuan }} - {{ t.nama_akun }}</td>
            <td class="border px-3 py-2">{{ t.tanggal_transaksi|date:"d/m/Y" }}</td>
            <td class="border px-3 py-2">{{ t.detail_transaksi }}</td>
            <td class="border px-3 py-2 text-right">Rp {{ t.debit|floatformat:0|intcomma }}</td>
            <td class="border px-3 py-2 text-right">Rp {{ t.kredit|floatformat:0|intcomma }}</td>
            <td class="border px-3 py-2 text-center">
              {% if t.bukti_transaksi %}
              <a href="#" @click.prevent="showImageModal('/media/{{ t.bukti_transaksi }}','{{t.id_transaksi}}')"
                class="text-blue-600 hover:underline">🧾 Lihat</a>
              {% else %}
              <span class="text-gray-400">-</span>
              {% endif %}
            </td>
            <td class="border px-3 py-2 text-center">
              <div class="relative inline-block text-left" x-data="{ open: false }">
                <button @click="open=!open" class="px-2 py-1 bg-gray-200 rounded">⋮</button>
                <div x-show="open" @click.outside="open=false"
                  class="absolute right-0 mt-1 w-40 bg-white border rounded shadow z-20">
                  <a href="#" class="block px-3 py-2 text-sm hover:bg-gray-100"
                    onclick="lihatJurnal(this)"
                    data-url-template="{% url 'lihat_jurnal' 'REPLACE_ID' %}"
                    data-id="{{ t.id_transaksi }}">
                    Lihat Jurnal
                  </a>
                  <a href="#" class="block px-3 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-3 py-2 text-sm text-red-600 hover:bg-gray-100"
                    onclick="deleteRow('{{ t.id }}')">Hapus</a>
                </div>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="7" class="text-center py-3 text-gray-500">Tidak ada data.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <!-- pagination -->
    <div class="p-3 flex justify-center">
      <div class="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>

<!-- === MODAL === -->
<div id="transaksiModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
  <div class="bg-white rounded shadow-lg w-full max-w-2xl">
    <!-- <h3 class="text-lg font-semibold mb-4">Form Transaksi Umum</h3> -->
    <div class="flex justify-between items-center bg-red-600 text-white px-4 py-2 rounded-t">
      <h5 class="text-lg font-semibold">Form Transaksi</h5>
      <button type="button" onclick="closeModal('transaksiModal')" class="text-2xl font-bold leading-none hover:text-gray-200">&times;</button>
    </div>
    <form id="transaksiForm" enctype="multipart/form-data" class="space-y-3 px-3 pb-3">
      {% csrf_token %}
      <input type="hidden" name="id" id="id">
      <input type="hidden" name="id_transaksi" id="id_transaksi">
      <input type="hidden" name="tipe" id="tipe" value="K">

      <div>
        <label class="block text-sm mb-1">Akun Asal</label>
        <select id="akun_asal" name="akun_asal" class="w-full border rounded p-2">
          <option value="">- Pilih Akun -</option>
          {% for akun in akun_list %}
          <option value="{{ akun.kode_akun }}">{{ akun.kode_akun }} - {{ akun.nama_akun }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="block text-sm mb-1">Akun Tujuan</label>
        <select id="akun_tujuan" name="akun_tujuan" class="w-full border rounded p-2">
          <option value="">- Pilih Akun -</option>
          {% for akun in akun_list %}
          <option value="{{ akun.kode_akun }}">{{ akun.kode_akun }} - {{ akun.nama_akun }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="block text-sm mb-1">Kategori Transaksi</label>
        <select name="kategori_transaksi" id="kategori_transaksi" class="w-full border rounded p-2">
          <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>

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

      <div>
        <label class="block text-sm mb-1">Detail</label>
        <input type="text" name="detail_transaksi" id="detail_transaksi" class="w-full border rounded p-2">
      </div>

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

      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm mb-1">Meta1</label>
          <input type="text" name="meta1" id="meta1" class="w-full border rounded p-2">
        </div>
        <div>
          <label class="block text-sm mb-1">Meta2</label>
          <input type="text" name="meta2" id="meta2" class="w-full border rounded p-2">
        </div>
      </div>

      <div>
        <label class="block text-sm mb-1">Bukti Transaksi</label>
        <input type="file" name="bukti_transaksi" id="bukti_transaksi" accept="image/*" class="w-full border rounded p-2">
        <a href="#" id="preview-bukti-upload" class="hidden mt-1 text-blue-600 hover:underline text-sm">🧾 Preview</a>
      </div>

      <div class="flex justify-end space-x-2">
        <button type="button" onclick="closeModal('transaksiModal')"
          class="px-4 py-2 bg-gray-300 hover:bg-gray-400 rounded">Batal</button>
        <button type="submit"
          class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded">Simpan</button>
      </div>
    </form>
  </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-blue-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 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 rounded-lg shadow-lg w-full max-w-lg">
    <!-- <h3 class="text-lg font-semibold mb-4">Transfer Saldo</h3> -->
    <div class="flex justify-between items-center bg-red-600 text-white px-4 py-2 rounded-t-lg">
      <h5 class="text-lg font-semibold">Transfer Saldo</h5>
      <button type="button" onclick="closeModal('modalTransferSaldo')" 
              class="text-2xl font-bold leading-none hover:text-gray-200">&times;</button>
    </div>

    <form id="form-transfer-saldo" enctype="multipart/form-data" class="space-y-3 px-3 pb-3">
      {% csrf_token %}
      <input type="hidden" name="tipe" value="K">
      <input type="hidden" name="id_transaksi" id="id_transaksi_tf">

      <div>
        <label class="block text-sm mb-1">Akun Asal</label>
        <input type="text" class="w-full border rounded p-2 bg-gray-100" value="1122 - BANK BCA" readonly>
        <input type="hidden" name="akun_asal" value="1122">
      </div>

      <div>
        <label class="block text-sm mb-1">Akun Tujuan</label>
        <select name="akun_tujuan" class="w-full border rounded p-2">
          <option value="">-- Pilih Akun Tujuan --</option>
          <option value="1111">KAS MANAGEMENT</option>
          <option value="1112">KAS CABANG SEMARANG</option>
          <option value="1121">BANK MANDIRI</option>
        </select>
      </div>

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

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

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

      <div>
        <label class="block text-sm mb-1">Detail</label>
        <input type="text" name="detail_transaksi" class="w-full border rounded p-2">
      </div>

      <div>
        <label class="block text-sm mb-1">Bukti</label>
        <input type="file" name="bukti_transaksi" accept="image/*" class="w-full border rounded p-2">
      </div>

      <div class="flex justify-end space-x-2 pt-2">
        <button type="button" onclick="closeModal('modalTransferSaldo')"
          class="px-4 py-2 bg-gray-300 rounded">Batal</button>
        <button type="submit"
          class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded">Transfer</button>
      </div>
    </form>
  </div>
</div>

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
// ✅ Open modal + auto tanggal & id
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}`;
    const todayMonth = `${yyyy}-${mm}`;

    if (id === "transaksiModal") {
        const tgl = document.getElementById("tanggal_transaksi");
        const bulan = document.getElementById("tanggal_pengakuan");
        const idTransaksi = document.getElementById("id_transaksi");
        const asal = document.getElementById("akun_asal")?.value || "XXX";
        const tujuan = document.getElementById("akun_tujuan")?.value || "YYY";

        if (tgl && !tgl.value) tgl.value = todayDate;
        if (bulan && !bulan.value) bulan.value = todayMonth;
        if (idTransaksi && !idTransaksi.value) {
            idTransaksi.value = `TRX-${Date.now()}-${asal}-${tujuan}`;
        }
    }

    if (id === "modalTransferSaldo") {
        const tgl = document.getElementById("tanggal_transaksi_tf");
        const bulan = document.getElementById("tanggal_pengakuan_tf");
        const idTransaksiTf = document.getElementById("id_transaksi_tf");
        const asal = document.querySelector("#form-transfer-saldo [name='akun_asal']")?.value || "XXX";
        const tujuan = document.querySelector("#form-transfer-saldo [name='akun_tujuan']")?.value || "YYY";

        if (tgl && !tgl.value) tgl.value = todayDate;
        if (bulan && !bulan.value) bulan.value = todayMonth;
        if (idTransaksiTf && !idTransaksiTf.value) {
            idTransaksiTf.value = `TRX-${Date.now()}-${asal}-${tujuan}`;
        }
    }
};

// ✅ Close modal + reset form
window.closeModal = (id) => {
    const modal = document.getElementById(id);
    if (!modal) return;
    modal.classList.add("hidden");
    modal.classList.remove("flex");

    if (id === "transaksiModal") {
        const form = document.getElementById("transaksiForm");
        if (form) form.reset();
        const idTransaksi = document.getElementById("id_transaksi");
        if (idTransaksi) idTransaksi.value = "";
    }

    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 = "";
    }
};

document.addEventListener("DOMContentLoaded", function () {
  // Set default tanggal transaksi & pengakuan
  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 tglTrx = document.getElementById("tanggal_transaksi");
  const tglPengakuan = document.getElementById("tanggal_pengakuan");
  if (tglTrx && !tglTrx.value) tglTrx.value = `${yyyy}-${mm}-${dd}`;
  if (tglPengakuan && !tglPengakuan.value) tglPengakuan.value = `${yyyy}-${mm}`;

  // Reset form ketika modal transaksi ditutup
  document.getElementById("transaksiModal")?.addEventListener("transitionend", (e) => {
    if (e.target.classList.contains("hidden")) {
      resetForm();
    }
  });

  // Update akun tujuan otomatis berdasarkan kategori
  const kategoriSelect = document.getElementById("kategori_transaksi");
  if (kategoriSelect) {
    kategoriSelect.addEventListener("change", function () {
      const selected = this.options[this.selectedIndex];
      const akunTujuan = selected.getAttribute("data-akun");
      if (!akunTujuan) return;

      const akunTujuanInput = document.getElementById("akun_tujuan");
      if (akunTujuanInput) akunTujuanInput.value = akunTujuan;
    });
  }

  // Preview file saat upload
  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.removeAttribute("onclick");
    }
  });

  // Submit form transaksi
  const transaksiForm = document.getElementById("transaksiForm");
  if (transaksiForm) {
    transaksiForm.addEventListener("submit", function (e) {
      e.preventDefault();
      const form = e.target;
      const id = form.id.value;
      const id_transaksi = form.id_transaksi.value;
      const akunAsal = form.akun_asal.value;
      const akunTujuan = form.akun_tujuan.value;
      const submitButton = form.querySelector("button[type=submit]");

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

      if (!id_transaksi) {
        const timestamp = 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-${timestamp}-${cleanAsal}-${cleanTujuan}`;
      }

      const url = id
        ? "{% url 'update_transaksi_BCA' id=0 %}".replace("0", id)
        : "{% url 'create_transaksi_BCA' %}";
      const formData = new FormData(form);

      submitButton.disabled = true;

      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("Gagal", "Terjadi error server", "error");
        })
        .finally(() => (submitButton.disabled = false));
    });
  }

  // Modal Transfer Saldo – set default tanggal
  document.getElementById("modalTransferSaldo")?.addEventListener("transitionend", (e) => {
    if (!e.target.classList.contains("hidden")) {
      const tglTf = document.getElementById("tanggal_transaksi_tf");
      const tglPengakuanTf = document.getElementById("tanggal_pengakuan_tf");
      if (tglTf && !tglTf.value) tglTf.value = `${yyyy}-${mm}-${dd}`;
      if (tglPengakuanTf && !tglPengakuanTf.value) tglPengakuanTf.value = `${yyyy}-${mm}`;
    }
  });

  // Submit Transfer Saldo
  const formTf = document.getElementById("form-transfer-saldo");
  if (formTf) {
    formTf.addEventListener("submit", function (e) {
      e.preventDefault();
      const akun_asal = formTf.akun_asal.value;
      const akun_tujuan = formTf.akun_tujuan.value;

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

      // Generate ID transaksi unik
      const idField = document.getElementById("id_transaksi_tf");
      if (!idField.value) {
        const timestamp = Date.now();
        const cleanAsal = akun_asal.replace(/[^a-zA-Z0-9]/g, "");
        const cleanTujuan = akun_tujuan.replace(/[^a-zA-Z0-9]/g, "");
        idField.value = `TRX-${timestamp}-${cleanAsal}-${cleanTujuan}`;
      }

      const formData = new FormData(formTf);

      Swal.fire({ title: "Memproses...", didOpen: () => Swal.showLoading(), allowOutsideClick: false });

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

// Helpers
function resetForm() {
  const form = document.getElementById("transaksiForm");
  if (!form) return;
  form.reset();
  form.id_transaksi.value = "";
  form.tipe.value = "K";
  document.getElementById("preview-bukti-upload")?.classList.add("hidden");
}

function editRowModal(id,idtrx,asal,tujuan,tipe,kategori,detail,nominal,tgl,akui,meta1,meta2,bukti){
  const f=document.getElementById('transaksiForm');
  f.id.value=id;
  f.id_transaksi.value=idtrx;
  f.tipe.value=tipe;
  f.kategori_transaksi.value=kategori;
  f.detail_transaksi.value=detail;
  f.nominal.value=nominal;
  f.tanggal_transaksi.value=tgl;
  f.tanggal_pengakuan.value=akui;
  f.meta1.value=meta1;
  f.meta2.value=meta2;
  document.getElementById('akun_asal').value=asal;
  document.getElementById('akun_tujuan').value=tujuan;
  if(bukti){
    const link=document.getElementById('preview-bukti-upload');
    link.classList.remove('hidden');
    link.onclick=()=>showImageModal('/media/'+bukti,idtrx);
    document.getElementById('bukti_transaksi_lama').value=bukti
  }
  openModal('transaksiModal')
}

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

function getCSRFToken() {
  return document.querySelector("[name=csrfmiddlewaretoken]").value;
}

function lihatJurnal(element) {
    const modal = document.getElementById('modalLihatJurnal');
    const body = document.getElementById('jurnalModalBody');

    // tampilkan modal
    modal.classList.remove('hidden');
    body.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(response => response.text())
        .then(html => {
            body.innerHTML = html;
        })
        .catch(() => {
            body.innerHTML = '<div class="text-center text-red-600">Gagal memuat data jurnal.</div>';
        });
}
function closeModal(id) {
    const modal = document.getElementById(id);
    modal.classList.add('hidden');
}
</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 %}