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

{% block content %}
<style>
/* Swal preview custom */
.swal2-bukti-preview img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 0.5rem;
    margin: 1rem auto;
}
</style>

<div class="container mx-auto mt-6 px-4">
    <h2 class="text-center text-white p-3 rounded mb-6 mt-2 bg-red-600 text-xl font-semibold">
        Transaksi Beban
    </h2>

    <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>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-800 text-white">
                    <tr>
                        <th class="px-4 py-2 text-left text-sm font-medium">Akun</th>
                        <th class="px-4 py-2 text-left text-sm font-medium">Tanggal</th>
                        <th class="px-4 py-2 text-left text-sm font-medium">Transaksi</th>
                        <th class="px-4 py-2 text-right text-sm font-medium">Debit</th>
                        <th class="px-4 py-2 text-right text-sm font-medium">Kredit</th>
                        <th class="px-4 py-2 text-center text-sm font-medium">Bukti</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for t in data %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-2">{{ t.akun_tujuan }} - {{ t.nama_akun }}</td>
                        <td class="px-4 py-2">{{ t.tanggal_transaksi|date:"d/m/Y" }}</td>
                        <td class="px-4 py-2">{{ t.detail_transaksi }}</td>
                        <td class="px-4 py-2 text-right">Rp {{ t.debit|floatformat:0|intcomma }}</td>
                        <td class="px-4 py-2 text-right">Rp {{ t.kredit|floatformat:0|intcomma }}</td>
                        <td class="px-4 py-2 text-center">
                            {% if t.bukti_transaksi %}
                                <button onclick="showImageModal('/media/{{ t.bukti_transaksi }}','{{t.id_transaksi}}')" class="text-red-600 hover:underline">🧾 Lihat</button>
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="px-4 py-2 text-center text-gray-500">Tidak ada data.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="flex justify-center my-4">
            <nav class="inline-flex -space-x-px rounded-md shadow-sm">
                {% if data.has_previous %}
                    <a href="?page={{ data.previous_page_number }}" class="px-3 py-1 border border-gray-300 bg-white text-gray-700 hover:bg-gray-100">«</a>
                {% endif %}
                {% for num in data.paginator.page_range %}
                    <a href="?page={{ num }}" class="px-3 py-1 border border-gray-300 {% if num == data.number %}bg-red-600 text-white{% else %}bg-white text-gray-700 hover:bg-gray-100{% endif %}">{{ num }}</a>
                {% endfor %}
                {% if data.has_next %}
                    <a href="?page={{ data.next_page_number }}" class="px-3 py-1 border border-gray-300 bg-white text-gray-700 hover:bg-gray-100">»</a>
                {% endif %}
            </nav>
        </div>
    </div>

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

    <!-- Modal Lihat Jurnal -->
    <div id="modalLihatJurnal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-lg shadow-lg max-w-4xl w-full overflow-hidden">
            <div class="flex justify-between items-center px-4 py-2 bg-red-600 text-white">
                <h5 class="text-lg font-semibold">Detail Jurnal</h5>
                <button onclick="document.getElementById('modalLihatJurnal').classList.add('hidden')" class="text-white">&times;</button>
            </div>
            <div class="p-4" id="jurnalModalBody">
                <p class="text-center text-gray-500">Memuat data...</p>
            </div>
        </div>
    </div>
</div>

<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
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 lihatJurnal(element) {
    const modal = document.getElementById('modalLihatJurnal');
    const body = document.getElementById('jurnalModalBody');
    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-red-600 text-center">Gagal memuat data jurnal.</div>');
}
</script>
{% endblock %}