{% extends "layout/ver_baru/base_admin.html" %}
{% load humanize %}
{% load static %}

{% block title %}Monitoring Transaksi{% endblock %}

{% block content %}

<div class="px-4 mt-6">
    <h2 class="text-center text-white p-3 rounded-lg mb-6 bg-red-700 shadow">
        Monitoring Transaksi
    </h2>

    <!-- Filter -->
    <div class="bg-white shadow rounded-lg mb-6 max-w-5xl mx-auto">
        <div class="p-4">
            <form method="get" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <select name="bulan" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500">
                        <option value="">Semua Bulan</option>
                        {% for b in list_bulan %}
                            <option value="{{ b }}" {% if b == bulan_selected %}selected{% endif %}>Bulan {{ b }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <select name="tahun" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500">
                        <option value="">Semua Tahun</option>
                        {% for y in list_tahun %}
                            <option value="{{ y }}" {% if y|stringformat:"s" == tahun_selected %}selected{% endif %}>{{ y }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% if kode_akun == '1111' %}
                    <div>
                        <select name="wok" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500">
                            <option value="">Semua Cabang</option>
                            {% for kode, nama in wok_list.items %}
                                <option value="{{ kode }}" {% if kode == wok_selected %}selected{% endif %}>
                                    {{ nama }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                {% endif %}
                <div>
                    <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-semibold px-4 py-2 rounded-lg shadow">
                        Tampilkan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Tabel Monitoring -->
    {% if show_all_cabang %}
        {% for kode, cabang in monitoring_data_per_cabang.items %}
            <div class="bg-white shadow rounded-lg mb-6">
                <div class="bg-red-700 text-white px-4 py-2 rounded-t-lg flex justify-between items-center">
                    <h6 class="font-semibold">Anggaran vs Realisasi - {{ cabang.nama }}</h6>
                </div>
                <div class="p-4 overflow-x-auto">
                    <table class="min-w-full border border-gray-200 text-sm">
                        <thead class="bg-gray-800 text-white text-center">
                            <tr>
                                <th class="px-3 py-2">No</th>
                                {% for h in headers %}
                                    <th class="px-3 py-2">{{ h }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in cabang.data %}
                                {% if row.0 == 'TOTAL' %}
                                    <tr class="bg-green-100 font-bold">
                                        <td class="px-3 py-2">{{ row.0 }}</td>
                                        <td></td>
                                        <td class="px-3 py-2 text-right">Rp {{ row.2|floatformat:0|intcomma }}</td>
                                        <td class="px-3 py-2 text-right">Rp {{ row.3|floatformat:0|intcomma }}</td>
                                        <td class="px-3 py-2 text-right">{{ row.4|floatformat:2 }}%</td>
                                    </tr>
                                {% else %}
                                    <tr class="border-b hover:bg-gray-50">
                                        <td class="px-3 py-2 text-center">{{ forloop.counter }}</td>
                                        <td class="px-3 py-2">{{ row.1 }}</td>
                                        <td class="px-3 py-2 text-right">Rp {{ row.2|floatformat:0|intcomma }}</td>
                                        <td class="px-3 py-2 text-right">Rp {{ row.3|floatformat:0|intcomma }}</td>
                                        <td class="px-3 py-2 text-right">{{ row.4|floatformat:0 }}%</td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="bg-white shadow rounded-lg mb-6">
            <div class="bg-red-700 text-white px-4 py-2 rounded-t-lg flex justify-between items-center">
                <h6 class="font-semibold">Anggaran vs Realisasi</h6>
                <button id="toggle-edit-mode" class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-md text-sm font-medium">
                    Edit Anggaran
                </button>
            </div>
            <div class="p-4 overflow-x-auto">
                <table class="min-w-full border border-gray-200 text-sm">
                    <thead class="bg-gray-800 text-white text-center">
                        <tr>
                            <th class="px-3 py-2">No</th>
                            {% for h in headers %}
                                <th class="px-3 py-2">{{ h }}</th>
                            {% endfor %}
                            <th class="px-3 py-2 aksi-col hidden">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in monitoring_data %}
                            {% if row.0 == 'TOTAL' %}
                                <tr class="bg-green-100 font-bold">
                                    <td class="px-3 py-2">{{ row.0 }}</td>
                                    <td></td>
                                    <td class="px-3 py-2 text-right">Rp {{ row.2|floatformat:0|intcomma }}</td>
                                    <td class="px-3 py-2 text-right">Rp {{ row.3|floatformat:0|intcomma }}</td>
                                    <td class="px-3 py-2 text-right">{{ row.4|floatformat:2 }}%</td>
                                    <td class="aksi-col hidden"></td>
                                </tr>
                            {% else %}
                                <tr>
                                    <form class="form-anggaran-row" method="post" action="{% url 'update_anggaran_monitoring' %}">
                                        {% csrf_token %}
                                        <td class="px-3 py-2 text-center">{{ forloop.counter }}</td>
                                        <td class="px-3 py-2">{{ row.1 }}</td>
                                        <td class="px-3 py-2 text-right anggaran-cell">
                                            <span class="anggaran-text">Rp {{ row.2|floatformat:0|intcomma }}</span>
                                            <input type="number" name="anggaran" class="anggaran-input hidden w-32 border rounded-md px-2 py-1 text-right"
                                                value="{{ row.2|floatformat:0 }}" required>
                                            <input type="hidden" name="kode_kategori" value="{{ row.0 }}">
                                            <input type="hidden" name="bulan" value="{{ bulan_selected|default:now|date:'m' }}">
                                            <input type="hidden" name="tahun" value="{{ tahun_selected|default:now|date:'Y' }}">
                                            <input type="hidden" name="kode_akun" value="{{ kode_akun_target }}">
                                        </td>
                                        <td class="px-3 py-2 text-right">Rp {{ row.3|floatformat:0|intcomma }}</td>
                                        <td class="px-3 py-2 text-right">{{ row.4|floatformat:0 }}%</td>
                                        <td class="px-3 py-2 text-center aksi-col hidden">
                                            <div class="flex flex-wrap gap-2 justify-center">
                                                <button type="button" class="btn-edit bg-yellow-500 hover:bg-yellow-600 text-white px-2 py-1 rounded text-xs">Edit</button>
                                                <button type="submit" class="btn-save hidden bg-green-600 hover:bg-green-700 text-white px-2 py-1 rounded text-xs">Simpan</button>
                                                <button type="button" class="btn-cancel hidden bg-gray-500 hover:bg-gray-600 text-white px-2 py-1 rounded text-xs">Batal</button>
                                                <button type="button" class="btn-reset bg-red-600 hover:bg-red-700 text-white px-2 py-1 rounded text-xs">Reset</button>
                                            </div>
                                        </td>
                                    </form>
                                </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function () {
    let editMode = false;

    $('#toggle-edit-mode').on('click', function () {
        editMode = !editMode;
        if (editMode) {
            $('.aksi-col').removeClass('hidden');
            $('.anggaran-input').addClass('hidden').prop('disabled', true);
            $('.anggaran-text').removeClass('hidden');
            $('.btn-save, .btn-cancel').addClass('hidden');
            $('.btn-edit, .btn-reset').removeClass('hidden');
            $(this).text('Tutup Edit').removeClass('bg-yellow-500').addClass('bg-gray-600');
        } else {
            $('.aksi-col').addClass('hidden');
            $('.anggaran-input').addClass('hidden').prop('disabled', true);
            $('.anggaran-text').removeClass('hidden');
            $('.btn-save, .btn-cancel, .btn-edit, .btn-reset').addClass('hidden');
            $(this).text('Edit Anggaran').removeClass('bg-gray-600').addClass('bg-yellow-500');
        }
    });

    $('.btn-edit').on('click', function () {
        const $row = $(this).closest('tr');
        $row.find('.anggaran-input').removeClass('hidden').prop('disabled', false);
        $row.find('.anggaran-text').addClass('hidden');
        $row.find('.btn-edit, .btn-reset').addClass('hidden');
        $row.find('.btn-save, .btn-cancel').removeClass('hidden');
    });

    $('.btn-cancel').on('click', function () {
        const $row = $(this).closest('tr');
        const input = $row.find('.anggaran-input');
        const originalValue = $row.find('.anggaran-text').text().replace(/\D/g, '') || 0;
        input.val(originalValue).addClass('hidden').prop('disabled', true);
        $row.find('.anggaran-text').removeClass('hidden');
        $row.find('.btn-save, .btn-cancel').addClass('hidden');
        $row.find('.btn-edit, .btn-reset').removeClass('hidden');
    });

    $('.btn-reset').on('click', function () {
        const $row = $(this).closest('tr');
        Swal.fire({
            title: 'Yakin reset anggaran?',
            text: "Anggaran akan diset ke 0.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, reset',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                const data = {
                    anggaran: 0,
                    kode_kategori: $row.find('[name="kode_kategori"]').val(),
                    bulan: $row.find('[name="bulan"]').val(),
                    tahun: $row.find('[name="tahun"]').val(),
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                };
                $.ajax({
                    type: 'POST',
                    url: "{% url 'update_anggaran_monitoring' %}",
                    data: data,
                    success: function (res) {
                        Swal.fire({
                            icon: res.status === 'success' ? 'success' : 'warning',
                            title: res.status === 'success' ? 'Berhasil' : 'Gagal',
                            text: res.message,
                            timer: 2000,
                            showConfirmButton: false
                        });
                        if (res.status === 'success') {
                            $row.find('.anggaran-input').val(0).addClass('hidden').prop('disabled', true);
                            $row.find('.anggaran-text').text('Rp 0').removeClass('hidden');
                            $row.find('.btn-save, .btn-cancel').addClass('hidden');
                            $row.find('.btn-edit, .btn-reset').removeClass('hidden');
                        }
                    },
                    error: function () {
                        Swal.fire('Gagal', 'Terjadi kesalahan saat reset.', 'error');
                    }
                });
            }
        });
    });

    $('.btn-save').on('click', function (e) {
        e.preventDefault();
        const $row = $(this).closest('tr');
        const input = $row.find('.anggaran-input');
        const data = {
            anggaran: input.val(),
            kode_kategori: $row.find('[name="kode_kategori"]').val(),
            kode_akun: $row.find('[name="kode_akun"]').val(),
            bulan: $row.find('[name="bulan"]').val(),
            tahun: $row.find('[name="tahun"]').val(),
            csrfmiddlewaretoken: '{{ csrf_token }}'
        };
        $.ajax({
            type: 'POST',
            url: "{% url 'update_anggaran_monitoring' %}",
            data: data,
            success: function (res) {
                Swal.fire({
                    icon: res.status === 'success' ? 'success' : 'warning',
                    title: res.status === 'success' ? 'Berhasil' : 'Gagal',
                    text: res.message,
                    timer: 2000,
                    showConfirmButton: false
                });
                if (res.status === 'success') {
                    const formatted = new Intl.NumberFormat('id-ID').format(data.anggaran);
                    $row.find('.anggaran-text').text('Rp ' + formatted).removeClass('hidden');
                    $row.find('.anggaran-input').addClass('hidden').prop('disabled', true);
                    $row.find('.btn-save, .btn-cancel').addClass('hidden');
                    $row.find('.btn-edit, .btn-reset').removeClass('hidden');
                }
            },
            error: function () {
                Swal.fire('Gagal', 'Terjadi kesalahan saat menyimpan.', 'error');
            }
        });
    });
});
</script>

{% endblock %}