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

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

<div class="container mx-auto p-4">
  <h2 class="text-center text-xl font-bold text-white bg-red-600 rounded p-3 mb-4">
    Transaksi MANDIRI
  </h2>

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

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

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

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

<!-- Modal: Transaksi -->
<div id="transaksiModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
  <div class="bg-white w-full max-w-3xl rounded shadow-lg overflow-y-auto max-h-[90vh]">
    <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" class="p-4" enctype="multipart/form-data">
      {% 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">

      <!-- akun asal & tujuan -->
      <div class="grid grid-cols-2 gap-2 mb-3">
        <div>
          <label class="block text-sm">Akun Asal</label>
          <select name="akun_asal" id="akun_asal" class="w-full border rounded p-2">
            <option value="">- Pilih -</option>
            {% for akun in akun_list %}
              <option value="{{ akun.kode_akun }}" {% if akun.kode_akun == '1121' %}selected{% endif %}>
                {{ akun.kode_akun }} - {{ akun.nama_akun }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="block text-sm">Akun Tujuan</label>
          <select name="akun_tujuan" id="akun_tujuan" class="w-full border rounded p-2">
            <option value="">- Pilih -</option>
            {% for akun in akun_list %}
              <option value="{{ akun.kode_akun }}">{{ akun.kode_akun }} - {{ akun.nama_akun }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="mb-3">
        <label class="block text-sm">Kategori</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 class="mb-3">
        <label class="block text-sm">Nominal</label>
        <input type="number" name="nominal" id="nominal" class="w-full border rounded p-2">
      </div>

      <div class="mb-3">
        <label class="block text-sm">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-2 mb-3">
        <div>
          <label class="block text-sm">Tanggal</label>
          <input type="date" name="tanggal_transaksi" id="tanggal_transaksi" class="w-full border rounded p-2">
        </div>
        <div>
          <label class="block text-sm">Pengakuan</label>
          <input type="month" name="tanggal_pengakuan" id="tanggal_pengakuan" class="w-full border rounded p-2">
        </div>
      </div>

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

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

      <div class="flex justify-end gap-2">
        <button type="button" onclick="closeModal('transaksiModal')"
          class="px-4 py-2 bg-gray-200 rounded">Batal</button>
        <button type="submit"
          class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">Simpan</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Transfer Saldo -->
<div id="modalTransferSaldo" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
  <div class="bg-white w-full max-w-lg rounded-lg shadow-lg">
    <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="px-3 py-3">
      {% csrf_token %}
      <input type="hidden" name="tipe" value="K">
      <input type="hidden" name="id_transaksi" id="id_transaksi_tf">
      <!-- <h3 class="text-lg font-semibold mb-3">Transfer Saldo</h3> -->

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

      <div class="mb-2">
        <label class="block text-sm">Akun Tujuan</label>
        <select name="akun_tujuan" class="w-full border rounded p-2" required>
          <option value="">- Pilih -</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="mb-2">
        <label class="block text-sm">Tanggal</label>
        <input type="date" id="tanggal_transaksi_tf" name="tanggal_transaksi" class="w-full border rounded p-2">
      </div>

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

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

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

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

      <div class="flex justify-end gap-2 mt-3">
        <button type="button" onclick="closeModal('modalTransferSaldo')" class="px-4 py-2 bg-gray-200 rounded">Tutup</button>
        <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded">Transfer</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Lihat Jurnal -->
<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>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
// ======= Helper Modal =======
function 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}`;
        }
    }
}

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

function toggleDropdown(id){
  document.querySelectorAll('[id^="aksi-"]').forEach(el=>{
    if(el.id!==id)el.classList.add('hidden')
  });
  document.getElementById(id).classList.toggle('hidden')
}

// ======= Transaksi Baru =======
function showTransaksiBaruModal(){
  resetForm();
  openModal('transaksiModal')
}
function resetForm(){
  const f=document.getElementById('transaksiForm');
  f.reset();
  f.id.value="";
  f.id_transaksi.value="";
  f.tipe.value="K";
  document.getElementById('preview-bukti-upload').classList.add('hidden')
}

// ======= Edit =======
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')
}

// ======= Delete =======
function deleteRow(id){
  Swal.fire({
    title:'Hapus data?',
    icon:'warning',
    showCancelButton:true,
    confirmButtonText:'Ya'
  }).then(res=>{
    if(res.isConfirmed){
      fetch(`{% url 'delete_transaksi_mandiri' id=0 %}`.replace('0',id),{
        method:'POST',
        headers:{'X-CSRFToken':getCSRFToken()}
      })
      .then(r=>r.json())
      .then(d=>{
        Swal.fire(d.status,d.message,d.status).then(()=>location.reload())
      })
    }
  })
}

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

// ======= Jurnal Modal =======
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');
}

// ======= CSRF =======
function getCSRFToken(){return document.querySelector('[name=csrfmiddlewaretoken]').value}

// ======= Init =======
document.addEventListener('DOMContentLoaded',()=>{
  // Default tanggal
  const now=new Date(),yyyy=now.getFullYear(),mm=String(now.getMonth()+1).padStart(2,'0'),dd=String(now.getDate()).padStart(2,'0');
  if(document.getElementById('tanggal_transaksi') && !document.getElementById('tanggal_transaksi').value){
    document.getElementById('tanggal_transaksi').value=`${yyyy}-${mm}-${dd}`
  }
  if(document.getElementById('tanggal_pengakuan') && !document.getElementById('tanggal_pengakuan').value){
    document.getElementById('tanggal_pengakuan').value=`${yyyy}-${mm}`
  }

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

  // Submit transaksi form
  const trxForm=document.getElementById('transaksiForm');
  if(trxForm){
    trxForm.addEventListener('submit',function(e){
      e.preventDefault();
      const akunAsal=this.akun_asal.value;
      const akunTujuan=this.akun_tujuan.value;
      if(akunAsal===akunTujuan){
        Swal.fire('Error','Tidak boleh transfer ke akun sendiri','error');
        return
      }
      if(!this.id_transaksi.value){
        const ts=Date.now();
        this.id_transaksi.value=`TRX-${ts}-${akunAsal}-${akunTujuan}`
      }
      const url=this.id.value
        ? `{% url 'update_transaksi_mandiri' id=0 %}`.replace('0',this.id.value)
        : `{% url 'create_transaksi_mandiri' %}`;
      fetch(url,{
        method:'POST',
        headers:{'X-CSRFToken':getCSRFToken()},
        body:new FormData(this)
      }).then(r=>r.json())
      .then(d=>{Swal.fire(d.status,d.message,d.status).then(()=>location.reload())})
      .catch(err=>Swal.fire('Error','Terjadi kesalahan','error'))
    })
  }

  // Submit transfer saldo
  const tfForm=document.getElementById('form-transfer-saldo');
  if(tfForm){
    tfForm.addEventListener('submit',function(e){
      e.preventDefault();
      const asal=this.akun_asal.value;
      const tujuan=this.akun_tujuan.value;
      if(asal===tujuan){
        Swal.fire('Error','Tidak bisa transfer ke akun sama','error');return
      }
      if(!this.id_transaksi.value){
        const ts=Date.now();
        this.id_transaksi.value=`TRX-${ts}-${asal}-${tujuan}`
      }
      fetch("{% url 'create_transaksi_mandiri' %}",{
        method:'POST',
        headers:{'X-CSRFToken':getCSRFToken()},
        body:new FormData(this)
      }).then(r=>r.json())
      .then(d=>{Swal.fire(d.status,d.message,d.status).then(()=>location.reload())})
      .catch(()=>Swal.fire('Error','Gagal transfer','error'))
    })
  }
})
</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 %}