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

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

<div class="p-4">
  <h2 class="text-center text-white p-3 rounded mb-4 mt-2 bg-red-600">
    Transaksi Umum Pendapatan
  </h2>

  <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-3 rounded mb-4 shadow">
    ⚠️ <strong>Reminder:</strong>
    Untuk transaksi <b>Pendapatan IndiHome</b>, fitur <i>Edit</i> telah dialihkan.
    Silakan <span class="text-red-600">hapus transaksi lama</span> dan
    <span class="text-green-600">upload ulang</span> di menu Tambah Transaksi.
  </div>

  <div class="text-right mb-3">
    <button type="button"
            onclick="openModal('transaksiModal')"
            class="px-4 py-2 bg-red-600 text-white rounded-lg shadow hover:bg-red-700">
      + Tambah Transaksi
    </button>
  </div>

  <!-- Table -->
  <div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="bg-red-600 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_pendapatan' %}"
            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 text-sm text-gray-700">
        <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">Bukti</th>
            <th class="px-3 py-2">Aksi</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-blue-600 hover:underline">🧾 Lihat</a>
              {% else %}
              <span class="text-gray-400">-</span>
              {% endif %}
            </td>
            <td class="px-3 py-2 text-center">
              <div class="relative inline-block text-left">
                <button onclick="toggleDropdown('aksi{{t.id}}')"
                        class="px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">
                  ⋮
                </button>
                <div id="aksi{{t.id}}" class="hidden absolute right-0 mt-1 w-40 bg-white border rounded shadow-lg z-20">
                  {% if "piutang" in t.nama_akun_asal|lower or "piutang" in t.nama_akun_tujuan|lower %}
                  <a href="#"
                     onclick="lihatJurnal(this)"
                     data-url-template="{% url 'lihat_jurnal' 'REPLACE_ID' %}"
                     data-id="{{ t.id_transaksi }}"
                     class="block px-4 py-2 text-sm hover:bg-gray-100">Lihat Jurnal</a>
                  {% endif %}
                  <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-4 py-2 text-sm hover:bg-gray-100">Edit</a>
                  <a href="#"
                     onclick="deleteRow('{{ t.id }}')"
                     class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Hapus</a>
                </div>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="100%" class="px-3 py-4 text-center text-gray-500">Tidak ada data.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <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-2 py-1 bg-gray-200 rounded hover:bg-gray-300">«</a>
        {% endif %}
        {% for num in data.paginator.page_range %}
        <a href="?page={{ num }}"
          class="px-3 py-1 rounded {% if num == data.number %}bg-red-600 text-white{% else %}bg-gray-200 hover:bg-gray-300{% endif %}">
            {{ num }}
        </a>
        {% endfor %}
        {% if data.has_next %}
        <a href="?page={{ data.next_page_number }}" class="px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">»</a>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Modal Transaksi -->
<div id="transaksiModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-lg w-full max-w-3xl">
    <div class="flex bg-red-600 justify-between rounded-t-lg items-center border-b p-2">
      <h5 class="font-semibold text-lg text-white">Form Transaksi</h5>
      <button type="button" onclick="closeModal('transaksiModal')" class="text-white hover:text-black">✕</button>
    </div>
    <form id="transaksiForm" enctype="multipart/form-data" class="p-4">
      {% csrf_token %}
      

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

      <!-- Akun -->
      <div class="grid grid-cols-2 gap-4 mb-3">
        <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" required>
            <option value="">- Pilih Akun Asal -</option>
            {% for akun in akun_asal_list %}
            <option value="{{ akun.kode_akun }}">{{ 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" required>
            <option value="">- Pilih Akun Tujuan -</option>
            {% for akun in akun_tujuan_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>

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

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

      <!-- Pajak -->
      <div id="pajak_total_row" style="display:none;">
        <div class="grid grid-cols-2 gap-4 mb-3">
          <div>
            <label class="block mb-1">PPN 11%</label>
            <input type="number" id="ppn" name="ppn" class="w-full border rounded px-2 py-1">
          </div>
          <div>
            <label class="block mb-1">PPh 2%</label>
            <input type="number" id="pph" name="pph" class="w-full border rounded px-2 py-1">
          </div>
        </div>
        <div class="mb-3">
          <label class="block mb-1">Total Pendapatan</label>
          <input type="number" id="total_pendapatan" name="total_pendapatan" class="w-full border rounded px-2 py-1">
        </div>
      </div>

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

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

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

      <!-- Bukti -->
      <div class="grid grid-cols-3 gap-4 mb-3">
        <div class="col-span-2">
          <label class="block mb-1">Bukti Transaksi</label>
          <input type="file" name="bukti_transaksi" id="bukti_transaksi" class="w-full border rounded px-2 py-1" accept="image/*">
          <small id="nama-bukti-lama" class="text-gray-500 text-xs"></small>
          <input type="hidden" id="bukti_transaksi_lama" name="bukti_transaksi_lama">
        </div>
        <div class="flex items-end">
          <a href="#" id="preview-bukti-upload"
             class="hidden w-full text-center px-2 py-1 border rounded text-blue-600 hover:bg-gray-100">
            🧾 Preview
          </a>
        </div>
      </div>

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

<!-- Modal Transfer Saldo -->
<div id="modalTransferSaldo" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-lg w-full max-w-lg">
    <form id="form-transfer-saldo" enctype="multipart/form-data" class="p-4">
      {% csrf_token %}
      <div class="flex justify-between items-center border-b pb-2 mb-4">
        <h5 class="font-semibold text-lg">Transfer Saldo Antar Kas/Bank</h5>
        <button type="button" onclick="closeModal('modalTransferSaldo')" class="text-gray-500 hover:text-black">✕</button>
      </div>

      <input type="hidden" name="tipe" value="K">
      <input type="hidden" name="id_transaksi" id="id_transaksi_tf">
      <input type="hidden" name="kategori_transaksi">

      <div class="mb-3">
        <label class="block mb-1">Akun Asal</label>
        <input type="text" class="w-full border rounded px-2 py-1 bg-gray-100"
               value="{{ request.session.kode_akun }} - {{ request.session.nama_akun }}" readonly>
        <input type="hidden" name="akun_asal" value="{{ request.session.kode_akun }}">
      </div>

      <div class="mb-3">
        <label class="block mb-1">Akun Tujuan</label>
        <select class="w-full border rounded px-2 py-1" 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 mb-3">
        <div>
          <label class="block mb-1">Tanggal Transaksi</label>
          <input type="date" id="tanggal_transaksi_tf" name="tanggal_transaksi" required class="w-full border rounded px-2 py-1">
        </div>
        <div>
          <label class="block mb-1">Bulan Pengakuan</label>
          <input type="month" id="tanggal_pengakuan_tf" name="tanggal_pengakuan" required class="w-full border rounded px-2 py-1">
        </div>
      </div>

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

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

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

      <div class="flex justify-end space-x-2 pt-3 border-t mt-4">
        <button type="button" onclick="closeModal('modalTransferSaldo')" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">Tutup</button>
        <button type="submit" class="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700">Transfer</button>
      </div>
    </form>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
// window.openModal = (id) => {
//     const modal = document.getElementById(id);
//     if (!modal) return;
//     modal.classList.remove("hidden");
//     modal.classList.add("flex");
// };

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

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

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

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

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

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


window.closeModal = (id) => {
    const modal = document.getElementById(id);
    if (!modal) return;
    modal.classList.add("hidden");
    modal.classList.remove("flex");
};
document.addEventListener("DOMContentLoaded", function () {
    const akunAsal = document.getElementById("akun_asal");
    const nominalInput = document.getElementById("nominal");
    const hutangInput = document.getElementById("hutang_usaha");
    const ppnInput = document.getElementById("ppn");
    const pphInput = document.getElementById("pph");
    const totalInput = document.getElementById("total_pendapatan");

    const hutangRow = document.getElementById("hutang_usaha_row");
    const pajakRow = document.getElementById("pajak_total_row");

    // === Hitung pajak ===
    function hitungPajak() {
        let nominal = parseFloat(nominalInput?.value) || 0;
        let hutang = parseFloat(hutangInput?.value) || 0;

        let ppn = nominal * 0.11;
        let pph = nominal * 0.02;
        let total = nominal + ppn - pph - hutang;

        ppnInput.value = ppn.toFixed(2);
        pphInput.value = pph.toFixed(2);
        totalInput.value = total.toFixed(2);

        ppnInput.dataset.value = ppn;
        pphInput.dataset.value = pph;
        totalInput.dataset.value = total;
    }

    akunAsal?.addEventListener("change", function () {
        if (akunAsal.value === "3110") {
            hutangRow.style.display = "block";
            pajakRow.style.display = "block";
        } else {
            hutangRow.style.display = "none";
            pajakRow.style.display = "none";
        }
    });

    nominalInput?.addEventListener("input", hitungPajak);
    hutangInput?.addEventListener("input", hitungPajak);

    // === Form utama transaksi ===
    const form = document.getElementById('transaksiForm');
    if (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            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 transfer ke akun sendiri', 'error');
                return;
            }

            if (!form.id_transaksi.value) {
                const ts = Date.now();
                form.id_transaksi.value = `TRX-${ts}-${akunAsal}-${akunTujuan}`;
            }

            // format angka
            ["total_pendapatan","ppn","pph","hutang_usaha"].forEach(f => {
                if (form[f]) form[f].value = form[f].value.replace(/\./g, '').replace(/,/g, '.');
            });

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

            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(() => Swal.fire('Error','Server error','error'));
        });
    }

    // === 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 sama","error");
                return;
            }
            if (!formTf.id_transaksi.value) {
                const ts = Date.now();
                formTf.id_transaksi.value = `TRX-${ts}-${akun_asal}-${akun_tujuan}`;
            }

            fetch("{% url 'create_transaksi' %}", {
                method: "POST",
                headers: { "X-CSRFToken": getCSRFToken() },
                body: new FormData(formTf)
            })
            .then(r=>r.json())
            .then(d=>{
                Swal.fire("Sukses","Transfer berhasil","success").then(()=>location.reload());
            })
            .catch(()=>Swal.fire("Error","Gagal 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";
}

// === Helpers ===
function getCSRFToken() {
    return document.querySelector('[name=csrfmiddlewaretoken]')?.value || '';
}
function showImageModal(src, desc) {
    Swal.fire({
        title: desc,
        imageUrl: src,
        showCloseButton: true,
        showConfirmButton: false
    });
}
</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);
        }
    });
}
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')
}
</script>

{% endblock %}