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

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

{% block content %}

<div class="max-w-6xl mx-auto mt-6">
  <!-- Heading -->
  <h2 class="text-center text-lg md:text-2xl font-bold text-white p-3 rounded-lg mb-6 bg-gradient-to-r from-red-600 to-red-700">
    Monitoring Transaksi
  </h2>

  <!-- Filter -->
  <div class="bg-white shadow rounded-xl p-6 mb-6">
    <form method="get" class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div>
        <select name="bulan" class="w-full rounded-lg border-gray-300 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 rounded-lg border-gray-300 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>
      <div>
        <select name="wok" class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-red-500 focus:border-red-500">
          {% 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 inline-flex justify-center items-center px-4 py-2 bg-red-600 text-white rounded-lg shadow hover:bg-red-700 transition">
          Tampilkan
        </button>
      </div>
    </form>
  </div>

  <!-- Tabel Monitoring -->
  {% if show_all_cabang %}
    {% for kode, cabang in monitoring_data_per_cabang.items %}
      <div class="bg-white shadow rounded-xl mb-6">
        <div class="bg-gradient-to-r from-red-600 to-red-700 px-4 py-2 rounded-t-xl">
          <h6 class="text-white font-semibold">Anggaran vs Realisasi - {{ cabang.nama }}</h6>
        </div>
        <div class="overflow-x-auto p-4">
          <table class="min-w-full border border-gray-200 rounded-lg text-sm">
            <thead class="bg-gray-100 text-center">
              <tr>
                <th class="px-3 py-2 border">No</th>
                {% for h in headers %}
                  <th class="px-3 py-2 border">{{ h }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in cabang.data %}
                {% if row.0 == 'TOTAL' %}
                  <tr class="bg-green-100 font-semibold">
                    <td class="px-3 py-2 border">{{ row.0 }}</td>
                    <td class="px-3 py-2 border"></td>
                    <td class="px-3 py-2 border text-right">Rp {{ row.2|floatformat:0|intcomma }}</td>
                    <td class="px-3 py-2 border text-right">Rp {{ row.3|floatformat:0|intcomma }}</td>
                    <td class="px-3 py-2 border text-right">{{ row.4|floatformat:2 }}%</td>
                  </tr>
                {% else %}
                  <tr class="hover:bg-gray-50">
                    <td class="px-3 py-2 border">{{ forloop.counter }}</td>
                    <td class="px-3 py-2 border">{{ row.1 }}</td>
                    <td class="px-3 py-2 border text-right">Rp {{ row.2|floatformat:0|intcomma }}</td>
                    <td class="px-3 py-2 border text-right">Rp {{ row.3|floatformat:0|intcomma }}</td>
                    <td class="px-3 py-2 border text-right">{{ row.4|floatformat:0 }}%</td>
                  </tr>
                {% endif %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    {% endfor %}
  {% else %}
    <div class="bg-white shadow rounded-xl mb-6">
      <div class="bg-gradient-to-r from-red-600 to-red-700 px-4 py-2 rounded-t-xl flex justify-between items-center">
        <h6 class="text-white font-semibold">Anggaran vs Realisasi</h6>
      </div>
      <div class="overflow-x-auto p-4">
        <table class="min-w-full border border-gray-200 rounded-lg text-sm">
          <thead class="bg-gray-100 text-center">
            <tr>
              <th class="px-3 py-2 border">No</th>
              {% for h in headers %}
                <th class="px-3 py-2 border">{{ h }}</th>
              {% endfor %}
              <th class="px-3 py-2 border aksi-col hidden">Aksi</th>
            </tr>
          </thead>
          <tbody>
            {% for row in monitoring_data %}
              {% if row.0 == 'TOTAL' %}
                <tr class="bg-green-100 font-semibold">
                  <td class="px-3 py-2 border">{{ row.0 }}</td>
                  <td class="px-3 py-2 border"></td>
                  <td class="px-3 py-2 border text-right">Rp {{ row.2|floatformat:0|intcomma }}</td>
                  <td class="px-3 py-2 border text-right">Rp {{ row.3|floatformat:0|intcomma }}</td>
                  <td class="px-3 py-2 border text-right">{{ row.4|floatformat:2 }}%</td>
                  <td class="px-3 py-2 border aksi-col hidden"></td>
                </tr>
              {% else %}
                <tr class="hover:bg-gray-50">
                  <form class="form-anggaran-row" method="post" action="{% url 'update_anggaran_monitoring' %}">
                    {% csrf_token %}
                    <td class="px-3 py-2 border">{{ forloop.counter }}</td>
                    <td class="px-3 py-2 border">{{ row.1 }}</td>
                    <td class="px-3 py-2 border text-right anggaran-cell">
                      <span class="anggaran-text">Rp {{ row.2|floatformat:0|intcomma }}</span>
                      <input type="number" name="anggaran" value="{{ row.2|floatformat:0 }}" required
                             class="hidden w-full rounded-lg border-gray-300 shadow-sm focus:ring-red-500 focus:border-red-500 text-right anggaran-input">
                      <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 border text-right">Rp {{ row.3|floatformat:0|intcomma }}</td>
                    <td class="px-3 py-2 border text-right">{{ row.4|floatformat:0 }}%</td>
                    <td class="px-3 py-2 border text-center aksi-col hidden">
                      <div class="flex flex-wrap justify-center gap-2">
                        <button type="button" class="btn-edit px-3 py-1 rounded bg-yellow-400 text-white text-sm">Edit</button>
                        <button type="submit" class="btn-save hidden px-3 py-1 rounded bg-green-600 text-white text-sm">Simpan</button>
                        <button type="button" class="btn-cancel hidden px-3 py-1 rounded bg-gray-400 text-white text-sm">Batal</button>
                        <button type="button" class="btn-reset px-3 py-1 rounded bg-red-600 text-white text-sm">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>

{% endblock %}