{% 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-600 shadow">
        Monitoring Transaksi
    </h2>

    <!-- Filter -->
    <div class="max-w-5xl mx-auto bg-white shadow rounded-lg mb-6">
        <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-lg text-sm">
                        <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-lg text-sm">
                        <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>
                <div>
                    <select name="wok" class="w-full border-gray-300 rounded-lg text-sm">
                        {% for kode, nama in wok_list.items %}
                            <option value="{{ kode }}" {% if kode == wok_selected %}selected{% endif %}>
                                {{ nama }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <button type="submit" class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700">
                        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 overflow-hidden">
                <div class="bg-red-600 px-4 py-2">
                    <h6 class="text-white font-semibold">Anggaran vs Realisasi - {{ cabang.nama }}</h6>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm border border-gray-200">
                        <thead class="bg-gray-100 text-gray-700 text-center">
                            <tr>
                                <th class="px-2 py-2 border">No</th>
                                {% for h in headers %}
                                    <th class="px-2 py-2 border">{{ 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-2 py-2 text-center border">{{ row.0 }}</td>
                                        <td class="px-2 py-2 border"></td>
                                        <td class="px-2 py-2 text-right border">Rp {{ row.2|floatformat:0|intcomma }}</td>
                                        <td class="px-2 py-2 text-right border">Rp {{ row.3|floatformat:0|intcomma }}</td>
                                        <td class="px-2 py-2 text-right border">{{ row.4|floatformat:2 }}%</td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td class="px-2 py-2 text-center border">{{ forloop.counter }}</td>
                                        <td class="px-2 py-2 border">{{ row.1 }}</td>
                                        <td class="px-2 py-2 text-right border">Rp {{ row.2|floatformat:0|intcomma }}</td>
                                        <td class="px-2 py-2 text-right border">Rp {{ row.3|floatformat:0|intcomma }}</td>
                                        <td class="px-2 py-2 text-right border">{{ row.4|floatformat:0 }}%</td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="bg-white shadow rounded-lg mb-6 overflow-hidden" x-data="{ editMode: false }">
            <div class="bg-red-600 px-4 py-2 flex justify-between items-center">
                <h6 class="text-white font-semibold">Anggaran vs Realisasi</h6>
                <button @click="editMode = !editMode" class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded text-sm">
                    <span x-show="!editMode">Edit Anggaran</span>
                    <span x-show="editMode">Tutup Edit</span>
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm border border-gray-200">
                    <thead class="bg-gray-100 text-gray-700 text-center">
                        <tr>
                            <th class="px-2 py-2 border">No</th>
                            {% for h in headers %}
                                <th class="px-2 py-2 border">{{ h }}</th>
                            {% endfor %}
                            <th class="px-2 py-2 border" x-show="editMode">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in monitoring_data %}
                            {% if row.0 == 'TOTAL' %}
                                <tr class="bg-green-100 font-bold">
                                    <td class="px-2 py-2 text-center border">{{ row.0 }}</td>
                                    <td class="px-2 py-2 border"></td>
                                    <td class="px-2 py-2 text-right border">Rp {{ row.2|floatformat:0|intcomma }}</td>
                                    <td class="px-2 py-2 text-right border">Rp {{ row.3|floatformat:0|intcomma }}</td>
                                    <td class="px-2 py-2 text-right border">{{ row.4|floatformat:2 }}%</td>
                                    <td class="px-2 py-2 border" x-show="editMode"></td>
                                </tr>
                            {% else %}
                                <tr>
                                    <form method="post" action="{% url 'update_anggaran_monitoring' %}" class="contents" x-data="{ editing: false }">
                                        {% csrf_token %}
                                        <td class="px-2 py-2 text-center border">{{ forloop.counter }}</td>
                                        <td class="px-2 py-2 border">{{ row.1 }}</td>
                                        <td class="px-2 py-2 text-right border">
                                            <span x-show="!editing">Rp {{ row.2|floatformat:0|intcomma }}</span>
                                            <input type="number" name="anggaran" value="{{ row.2|floatformat:0 }}" 
                                                class="w-28 text-right border rounded px-1 py-0.5 text-sm" x-show="editing" 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-2 py-2 text-right border">Rp {{ row.3|floatformat:0|intcomma }}</td>
                                        <td class="px-2 py-2 text-right border">{{ row.4|floatformat:0 }}%</td>
                                        <td class="px-2 py-2 text-center border" x-show="editMode">
                                            <div class="flex gap-2 justify-center">
                                                <button type="button" @click="editing=true" x-show="!editing" 
                                                    class="bg-yellow-500 hover:bg-yellow-600 text-white px-2 py-1 rounded text-xs">Edit</button>
                                                <button type="submit" x-show="editing" 
                                                    class="bg-green-600 hover:bg-green-700 text-white px-2 py-1 rounded text-xs">Simpan</button>
                                                <button type="button" @click="editing=false" x-show="editing" 
                                                    class="bg-gray-500 hover:bg-gray-600 text-white px-2 py-1 rounded text-xs">Batal</button>
                                                <button type="button" 
                                                    class="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>

<!-- Alpine.js for interactivity -->
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
{% endblock %}