{% extends 'base.html' %}

{% block title %}Pengeluaran Wajib & Opsional — SPPG{% endblock %}
{% block page_title %}Pengeluaran Wajib & Opsional (Non-VA){% endblock %}

{% block extra_head %}
<style>
/* Stat Cards */
.card-stat-pw {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.card-stat-pw:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Tabs & Badges */
.nav-pills-pw .nav-link {
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 16px;
  color: #475569;
  background: #f1f5f9;
  transition: all 0.2s;
}
.nav-pills-pw .nav-link.active {
  background: #1e40af;
  color: #ffffff;
}

.badge-wajib {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
}
.badge-opsional {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
}
.badge-penggajian {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
}
.badge-supplier {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
}

.badge-draft {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
}
.badge-disetujui {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Efek Salin (Copy) Baris & Kolom */
.cell-copied-highlight {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.row-copied-highlight {
  box-shadow: inset 0 0 0 2px #10b981 !important;
  transition: box-shadow 0.3s ease;
}
.btn-copy-mini {
  border: 1px solid #0284c7;
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  color: #ffffff !important;
  padding: 3px 8px;
  font-size: 0.73rem;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35);
  vertical-align: middle;
}
.btn-copy-mini i {
  color: #ffffff !important;
  font-size: 0.78rem;
}
.btn-copy-mini:hover {
  background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
  color: #ffffff !important;
  border-color: #1d4ed8;
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.45);
}
.btn-copy-mini:active {
  transform: translateY(0) scale(0.96);
}
.btn-copy-mini.copied {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 5px rgba(16, 185, 129, 0.5) !important;
}
.btn-copy-mini.copied i, .btn-copy-mini.copied span {
  color: #ffffff !important;
}

.tbl-pw th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #f8fafc;
  color: #475569;
  padding: 10px 12px;
  border-bottom: 2px solid #e2e8f0;
}
.tbl-pw td {
  padding: 10px 12px;
  font-size: 0.84rem;
  vertical-align: middle;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-0">

  <!-- Header Banner -->
  <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: #fff;">
    <div class="card-body p-4 d-flex justify-content-between align-items-center flex-wrap gap-3">
      <div>
        <h5 class="fw-bold mb-1">
          <i class="bi bi-receipt-cutoff text-warning me-2"></i>Pengeluaran Wajib &amp; Opsional
        </h5>
        <p class="text-white-50 small mb-0">
          Pencatatan pos pengeluaran mandiri (Tagihan Listrik/Air/WiFi, Gaji &amp; Honor, Biaya Tukang, dan Pemeliharaan) — 
          <span class="badge bg-warning text-dark fw-bold"><i class="bi bi-shield-lock me-1"></i>NON-VA (Tidak Memotong Saldo VA)</span>
        </p>
      </div>
      <div class="d-flex align-items-center gap-2 flex-wrap">
        {% if can('fitur_pengeluaran_wajib_kategori') or (current_user and current_user.role == 'super_admin') %}
        <button type="button" class="btn btn-sm btn-outline-light" onclick="bukaModalKelolaKategori()">
          <i class="bi bi-tags me-1"></i> Kelola Kategori
        </button>
        {% endif %}
        {% if can('fitur_pengeluaran_wajib_tambah') or (current_user and current_user.role in ['super_admin', 'validator', 'admin_dapur']) %}
        <button type="button" class="btn btn-sm btn-primary shadow-sm px-3" onclick="bukaModalTambahPW()">
          <i class="bi bi-plus-circle me-1"></i> Tambah Pengeluaran
        </button>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- 4 Stat Summary Cards -->
  <div class="row g-3 mb-4">
    <!-- 1. Total Pengeluaran Wajib -->
    <div class="col-sm-6 col-xl-3">
      <div class="card card-stat-pw p-3 bg-white h-100 border-start border-4 border-danger">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small fw-semibold">PENGELUARAN WAJIB</div>
            <div class="fs-5 fw-bold text-danger mt-1" id="stat-total-wajib">Rp 0</div>
            <small class="text-muted" style="font-size:0.72rem;">Tagihan, Gaji/Honor, Sewa</small>
          </div>
          <div class="rounded-circle bg-danger bg-opacity-10 p-3 text-danger fs-4">
            <i class="bi bi-calendar2-check-fill"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 2. Total Pengeluaran Opsional -->
    <div class="col-sm-6 col-xl-3">
      <div class="card card-stat-pw p-3 bg-white h-100 border-start border-4 border-primary">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small fw-semibold">PENGELUARAN OPSIONAL</div>
            <div class="fs-5 fw-bold text-primary mt-1" id="stat-total-opsional">Rp 0</div>
            <small class="text-muted" style="font-size:0.72rem;">Tukang, Pemeliharaan Gedung/Alat</small>
          </div>
          <div class="rounded-circle bg-primary bg-opacity-10 p-3 text-primary fs-4">
            <i class="bi bi-tools"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 3. Total Gabungan Keseluruhan -->
    <div class="col-sm-6 col-xl-3">
      <div class="card card-stat-pw p-3 bg-white h-100 border-start border-4 border-success">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small fw-semibold">TOTAL PENGELUARAN</div>
            <div class="fs-5 fw-bold text-success mt-1" id="stat-grand-total">Rp 0</div>
            <small class="text-muted" style="font-size:0.72rem;"><span id="stat-count-total">0</span> transaksi tercatat</small>
          </div>
          <div class="rounded-circle bg-success bg-opacity-10 p-3 text-success fs-4">
            <i class="bi bi-cash-stack"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 4. Status Persetujuan -->
    <div class="col-sm-6 col-xl-3">
      <div class="card card-stat-pw p-3 bg-white h-100 border-start border-4 border-warning">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small fw-semibold">STATUS VALIDASI</div>
            <div class="mt-1">
              <span class="badge bg-success me-1" id="stat-count-disetujui">0 Disetujui</span>
              <span class="badge bg-warning text-dark" id="stat-count-draft">0 Menunggu</span>
            </div>
            <small class="text-muted" style="font-size:0.72rem;">Otorisasi bendahara/validator</small>
          </div>
          <div class="rounded-circle bg-warning bg-opacity-10 p-3 text-warning fs-4">
            <i class="bi bi-patch-check-fill"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Filter & Tab Navigasi Sifat -->
  <div class="card border-0 shadow-sm mb-3" style="border-radius: 12px;">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pb-2 border-bottom mb-3">
        <!-- Tabs Wajib / Opsional / Penggajian / Suplayer -->
        <ul class="nav nav-pills nav-pills-pw gap-2" id="tabSifatNav">
          <li class="nav-item">
            <button class="nav-link active" onclick="pilihFilterSifat('')">
              <i class="bi bi-grid-fill me-1"></i> Semua Sifat
            </button>
          </li>
          <li class="nav-item">
            <button class="nav-link" onclick="pilihFilterSifat('WAJIB')">
              <i class="bi bi-exclamation-circle-fill me-1 text-danger"></i> Khusus Wajib
            </button>
          </li>
          <li class="nav-item">
            <button class="nav-link" onclick="pilihFilterSifat('OPSIONAL')">
              <i class="bi bi-wrench me-1 text-primary"></i> Khusus Opsional
            </button>
          </li>
          <li class="nav-item">
            <button class="nav-link" onclick="pilihFilterSifat('PENGGAJIAN')">
              <i class="bi bi-people-fill me-1 text-warning"></i> Penggajian
            </button>
          </li>
          <li class="nav-item">
            <button class="nav-link" onclick="pilihFilterSifat('SUPPLIER')">
              <i class="bi bi-truck me-1 text-success"></i> Suplayer
            </button>
          </li>
        </ul>

        <!-- Refresh Button -->
        <button class="btn btn-sm btn-outline-secondary" onclick="loadPengeluaranWajib()" title="Muat Ulang Data">
          <i class="bi bi-arrow-clockwise me-1"></i> Refresh
        </button>
      </div>

      <!-- Filter Row -->
      <div class="row g-2 align-items-center">
        <!-- Unit Dapur / Lokasi -->
        <div class="col-lg-2 col-md-4 col-sm-6">
          <label class="form-label small text-muted mb-1">Unit Dapur:</label>
          <select id="filter-dapur" class="form-select form-select-sm" onchange="loadPengeluaranWajib()">
            <option value="all">Semua Unit / Pusat</option>
            {% for d in dapur_json %}
            <option value="{{ d.id }}">{{ d.nama }}</option>
            {% endfor %}
          </select>
        </div>

        <!-- Filter Sifat Dropdown -->
        <div class="col-lg-2 col-md-4 col-sm-6">
          <label class="form-label small text-muted mb-1">Sifat Biaya:</label>
          <select id="filter-sifat-select" class="form-select form-select-sm" onchange="sinkronSifatSelect(this.value)">
            <option value="">Semua Sifat</option>
            <option value="WAJIB">Khusus Wajib</option>
            <option value="OPSIONAL">Khusus Opsional</option>
            <option value="PENGGAJIAN">Penggajian</option>
            <option value="SUPPLIER">Suplayer</option>
          </select>
        </div>

        <!-- Filter Kategori Dropdown -->
        <div class="col-lg-2 col-md-4 col-sm-6">
          <label class="form-label small text-muted mb-1">Kategori:</label>
          <select id="filter-kategori" class="form-select form-select-sm" onchange="loadPengeluaranWajib()">
            <option value="all">Semua Kategori</option>
            {% for k in kategori_json %}
            <option value="{{ k.id }}">{{ k.nama }} ({{ k.sifat }})</option>
            {% endfor %}
          </select>
        </div>

        <!-- Filter Bulan -->
        <div class="col-lg-1 col-md-3 col-sm-6">
          <label class="form-label small text-muted mb-1">Bulan:</label>
          <select id="filter-bulan" class="form-select form-select-sm" onchange="loadPengeluaranWajib()">
            <option value="all">Semua</option>
            <option value="1">Jan</option>
            <option value="2">Feb</option>
            <option value="3">Mar</option>
            <option value="4">Apr</option>
            <option value="5">Mei</option>
            <option value="6">Jun</option>
            <option value="7">Jul</option>
            <option value="8">Agu</option>
            <option value="9">Sep</option>
            <option value="10">Okt</option>
            <option value="11">Nov</option>
            <option value="12">Des</option>
          </select>
        </div>

        <!-- Filter Tahun -->
        <div class="col-lg-1 col-md-3 col-sm-4">
          <label class="form-label small text-muted mb-1">Tahun:</label>
          <select id="filter-tahun" class="form-select form-select-sm" onchange="loadPengeluaranWajib()">
            <option value="all">Semua</option>
            <option value="2025">2025</option>
            <option value="2026" selected>2026</option>
            <option value="2027">2027</option>
          </select>
        </div>

        <!-- Filter Status -->
        <div class="col-lg-2 col-md-3 col-sm-4">
          <label class="form-label small text-muted mb-1">Status Validasi:</label>
          <select id="filter-status" class="form-select form-select-sm" onchange="loadPengeluaranWajib()">
            <option value="">Semua Status</option>
            <option value="draft">Menunggu / Draft</option>
            <option value="disetujui">Disetujui</option>
          </select>
        </div>

        <!-- Search Input -->
        <div class="col-lg-2 col-md-3 col-sm-4">
          <label class="form-label small text-muted mb-1">Cari Data:</label>
          <div class="input-group input-group-sm">
            <span class="input-group-text bg-light"><i class="bi bi-search"></i></span>
            <input type="text" id="filter-keyword" class="form-control" placeholder="Judul, penerima..." onkeyup="if(event.key==='Enter') loadPengeluaranWajib()">
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Tabel Data Pengeluaran Wajib & Opsional -->
  <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
      <span class="fw-bold text-dark"><i class="bi bi-table me-2 text-primary"></i>Daftar Rincian Pengeluaran</span>
      <span class="badge bg-secondary" id="badge-total-baris">0 Data</span>
    </div>
    <div class="table-responsive">
      <table class="table table-hover tbl-pw align-middle mb-0">
        <thead>
          <tr>
            <th style="min-width:110px;">Tanggal &amp; No.</th>
            <th>Unit Dapur</th>
            <th>Kategori &amp; Sifat</th>
            <th style="min-width:180px;">Judul Pengeluaran</th>
            <th style="min-width:180px;">Penerima Dana</th>
            <th class="text-end">Nominal</th>
            <th class="text-center">Adm</th>
            <th class="text-end">Total Bayar</th>
            <th style="min-width:160px;">Keperluan</th>
            <th class="text-center" style="min-width:90px;">Status</th>
            <th class="text-end" style="min-width:90px;">Aksi</th>
          </tr>
        </thead>
        <tbody id="tbody-pengeluaran-wajib">
          <tr>
            <td colspan="11" class="text-center py-4 text-muted">
              <div class="spinner-border spinner-border-sm text-primary me-2"></div>Memuat data pengeluaran...
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- ══════════════ MODAL FORM TAMBAH / EDIT PENGELUARAN ══════════════ -->
<div class="modal fade" id="modalPW" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content shadow border-0" style="border-radius: 12px;">
      <div class="modal-header py-2" style="background: linear-gradient(135deg, #1e293b, #334155); color: #fff;">
        <h6 class="modal-title fw-bold" id="modalPWTitle">
          <i class="bi bi-receipt me-2 text-warning"></i>Tambah Pengeluaran Wajib / Opsional
        </h6>
        <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-3">
        <input type="hidden" id="pw-id">
        
        <div class="alert alert-info py-2 px-3 small border-0 mb-3" style="background:#f0fdf4; color:#166534;">
          <i class="bi bi-info-circle-fill me-1"></i> <strong>Catatan:</strong> Pos pengeluaran ini <strong>tidak memotong saldo VA dapur</strong>, dicatat secara independen untuk kepatuhan pembukuan beban operasional.
        </div>

        <div class="row g-2 mb-2">
          <!-- Nomor Otomatis -->
          <div class="col-md-4">
            <label class="form-label small fw-semibold">Nomor Transaksi</label>
            <input type="text" id="pw-nomor" class="form-control form-control-sm font-monospace bg-light" readonly>
          </div>
          <!-- Tanggal -->
          <div class="col-md-4">
            <label class="form-label small fw-semibold">Tanggal <span class="text-danger">*</span></label>
            <input type="date" id="pw-tanggal" class="form-control form-control-sm" value="{{ today_iso }}" required>
          </div>
          <!-- Unit Dapur -->
          <div class="col-md-4">
            <label class="form-label small fw-semibold">Unit Dapur</label>
            <select id="pw-dapur" class="form-select form-select-sm">
              <option value="">Kantor Pusat / Umum</option>
              {% for d in dapur_json %}
              <option value="{{ d.id }}">{{ d.nama }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="row g-2 mb-2">
          <!-- Kategori -->
          <div class="col-md-6">
            <label class="form-label small fw-semibold">Kategori Pengeluaran <span class="text-danger">*</span></label>
            <div class="input-group input-group-sm">
              <select id="pw-kategori" class="form-select form-select-sm" onchange="onKategoriPWChange()" required>
                <!-- Diisi via JS -->
              </select>
              {% if can('fitur_pengeluaran_wajib_kategori') or (current_user and current_user.role == 'super_admin') %}
              <button class="btn btn-outline-secondary" type="button" onclick="bukaModalKelolaKategori()" title="Kelola / Tambah Kategori Baru">
                <i class="bi bi-plus-lg"></i>
              </button>
              {% endif %}
            </div>
          </div>
          <!-- Sifat (Otomatis ikut kategori atau dipilih) -->
          <div class="col-md-3">
            <label class="form-label small fw-semibold">Sifat Biaya</label>
            <select id="pw-sifat" class="form-select form-select-sm">
              <option value="WAJIB">WAJIB (Rutin/Pasti)</option>
              <option value="OPSIONAL">OPSIONAL (Insidental)</option>
              <option value="PENGGAJIAN">PENGGAJIAN (Gaji/Upah/Honor)</option>
              <option value="SUPPLIER">SUPLAYER (Tagihan Pemasok/Bahan)</option>
            </select>
          </div>
          <!-- Metode Bayar -->
          <div class="col-md-3">
            <label class="form-label small fw-semibold">Metode Pembayaran</label>
            <select id="pw-metode" class="form-select form-select-sm">
              <option value="TRANSFER">Transfer Bank</option>
              <option value="TUNAI">Tunai / Kas Kecil</option>
              <option value="AUTODEBET">Autodebet</option>
            </select>
          </div>
        </div>

        <!-- Judul Pengeluaran -->
        <div class="mb-2">
          <label class="form-label small fw-semibold">Judul / Nama Pengeluaran <span class="text-danger">*</span></label>
          <input type="text" id="pw-judul" class="form-control form-control-sm" placeholder="Contoh: Tagihan Listrik PLN Periode Oktober, Gaji Juru Masak Minggu 1..." required>
        </div>

        <!-- Penerima Dana -->
        <div class="p-2 border rounded-3 bg-light mb-2">
          <div class="small fw-bold text-secondary mb-2"><i class="bi bi-person-bounding-box me-1"></i>Informasi Penerima Dana</div>
          <div class="row g-2">
            <div class="col-md-5">
              <label class="form-label small" style="font-size:0.75rem;">Nama Penerima / Instansi</label>
              <input type="text" id="pw-penerima" class="form-control form-control-sm" placeholder="Nama orang, toko, PLN, dll">
            </div>
            <div class="col-md-3">
              <label class="form-label small" style="font-size:0.75rem;">Bank / Dompet</label>
              <input type="text" id="pw-bank" class="form-control form-control-sm" placeholder="BRI / BCA / Mandiri">
            </div>
            <div class="col-md-4">
              <label class="form-label small" style="font-size:0.75rem;">Nomor Rekening / ID Pelanggan</label>
              <input type="text" id="pw-norek" class="form-control form-control-sm font-monospace" placeholder="No. Rek / ID Tagihan">
            </div>
          </div>
        </div>

        <!-- Nominal, Biaya Admin & Total -->
        <div class="row g-2 mb-2">
          <div class="col-md-4">
            <label class="form-label small fw-semibold">Nominal Pokok (Rp) <span class="text-danger">*</span></label>
            <input type="number" id="pw-nominal" class="form-control form-control-sm text-end font-monospace" placeholder="0" min="0" oninput="hitungTotalPW()" required>
          </div>
          <div class="col-md-4">
            <label class="form-label small fw-semibold">Biaya Admin (Rp)</label>
            <input type="number" id="pw-biaya-admin" class="form-control form-control-sm text-end font-monospace" placeholder="0" min="0" oninput="hitungTotalPW()">
          </div>
          <div class="col-md-4">
            <label class="form-label small fw-semibold">Total Pembayaran (Rp)</label>
            <input type="text" id="pw-total-bayar" class="form-control form-control-sm text-end font-monospace fw-bold text-primary bg-light" readonly value="Rp 0">
          </div>
        </div>

        <!-- Keperluan / Keterangan -->
        <div class="mb-2">
          <label class="form-label small fw-semibold">Keperluan / Keterangan Rincian</label>
          <textarea id="pw-keperluan" class="form-control form-control-sm" rows="2" placeholder="Catatan tambahan rincian pekerjaan atau bukti pendukung..."></textarea>
        </div>

      </div>
      <div class="modal-footer py-2 bg-light">
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-sm btn-primary px-3" id="btn-save-pw" onclick="simpanPengeluaranWajib()">
          <i class="bi bi-save me-1"></i> Simpan Transaksi
        </button>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════ MODAL KELOLA KATEGORI PENGELUARAN ══════════════ -->
<div class="modal fade" id="modalKategoriPW" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content shadow border-0" style="border-radius: 12px;">
      <div class="modal-header py-2 bg-dark text-white">
        <h6 class="modal-title fw-bold">
          <i class="bi bi-tags-fill me-2 text-warning"></i>Kelola Kategori Pengeluaran (Bisa Tambah Sendiri)
        </h6>
        <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-3">
        
        <!-- Form Tambah Kategori Baru -->
        <div class="card bg-light border mb-3">
          <div class="card-body p-3">
            <div class="small fw-bold text-dark mb-2"><i class="bi bi-plus-circle me-1 text-primary"></i>Buat Kategori Baru</div>
            <div class="row g-2 align-items-end">
              <div class="col-md-4">
                <label class="form-label small" style="font-size:0.75rem;">Nama Kategori</label>
                <input type="text" id="katpw-nama" class="form-control form-control-sm" placeholder="Contoh: Sewa Kendaraan">
              </div>
              <div class="col-md-3">
                <label class="form-label small" style="font-size:0.75rem;">Sifat Pengeluaran</label>
                <select id="katpw-sifat" class="form-select form-select-sm">
                  <option value="WAJIB">WAJIB</option>
                  <option value="OPSIONAL" selected>OPSIONAL</option>
                  <option value="PENGGAJIAN">PENGGAJIAN</option>
                  <option value="SUPPLIER">SUPLAYER</option>
                </select>
              </div>
              <div class="col-md-3">
                <label class="form-label small" style="font-size:0.75rem;">Deskripsi Singkat</label>
                <input type="text" id="katpw-desc" class="form-control form-control-sm" placeholder="Keterangan kategori...">
              </div>
              <div class="col-md-2">
                <button type="button" class="btn btn-sm btn-primary w-100" onclick="simpanKategoriPWBaru()">
                  <i class="bi bi-plus-lg me-1"></i> Tambah
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Tabel Daftar Kategori -->
        <div class="table-responsive">
          <table class="table table-sm table-hover align-middle mb-0">
            <thead class="table-light">
              <tr style="font-size:0.75rem;">
                <th>Kategori</th>
                <th>Sifat</th>
                <th>Deskripsi</th>
                <th class="text-center" style="width:70px;">Status</th>
                <th class="text-end" style="width:80px;">Aksi</th>
              </tr>
            </thead>
            <tbody id="tbody-kategori-pw">
              <!-- Diisi via JS -->
            </tbody>
          </table>
        </div>

      </div>
      <div class="modal-footer py-2 bg-light">
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════ MODAL DUPLIKAT PENGELUARAN (ANGSURAN / PENGGAJIAN / TAGIHAN BULAN BERIKUTNYA) ══════════════ -->
<div class="modal fade" id="modalDuplikatPW" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content shadow border-0" style="border-radius: 12px;">
      <div class="modal-header py-2 bg-info text-white">
        <h6 class="modal-title fw-bold">
          <i class="bi bi-copy me-2"></i>Duplikat Pengeluaran (Gaji / Angsuran / Tagihan Bulan Depan)
        </h6>
        <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-3">
        <input type="hidden" id="duplikat-id">

        <div class="alert alert-info py-2 px-3 small mb-3">
          <i class="bi bi-info-circle-fill me-1"></i>
          Fitur ini menyalin seluruh rincian <strong>Penggajian / Angsuran / Tagihan</strong> ke periode bulan berikutnya dengan nomor baru &amp; status <strong>Draft (Menunggu Validasi)</strong>.
        </div>

        <div class="mb-2">
          <label class="form-label small fw-semibold text-muted mb-1">Nama / Judul Pengeluaran</label>
          <input type="text" id="duplikat-judul" class="form-control form-control-sm">
        </div>

        <div class="row g-2 mb-2">
          <div class="col-6">
            <label class="form-label small fw-semibold text-muted mb-1">Target Tanggal Baru <span class="text-danger">*</span></label>
            <input type="date" id="duplikat-tanggal" class="form-control form-control-sm">
            <small class="text-muted" style="font-size:0.7rem;">Otomatis +1 bulan dari transaksi sumber</small>
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold text-muted mb-1">Nominal (Rp)</label>
            <input type="number" id="duplikat-nominal" class="form-control form-control-sm" min="0" oninput="hitungDuplikatTotal()">
          </div>
        </div>

        <div class="row g-2 mb-2">
          <div class="col-6">
            <label class="form-label small fw-semibold text-muted mb-1">Biaya Admin (Rp)</label>
            <input type="number" id="duplikat-admin" class="form-control form-control-sm" min="0" oninput="hitungDuplikatTotal()">
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold text-muted mb-1">Total Bayar</label>
            <input type="text" id="duplikat-total-bayar" class="form-control form-control-sm fw-bold font-monospace bg-light" readonly>
          </div>
        </div>

        <div class="mb-2">
          <label class="form-label small fw-semibold text-muted mb-1">Keperluan / Keterangan (Penggajian / Angsuran / Tagihan)</label>
          <textarea id="duplikat-keperluan" class="form-control form-control-sm" rows="2"></textarea>
        </div>

        <div class="card bg-light border-0 p-2 small mt-2">
          <div class="text-muted">Penerima Dana: <strong id="duplikat-info-penerima" class="text-dark">-</strong></div>
          <div class="text-muted">Kategori: <strong id="duplikat-info-kategori" class="text-dark">-</strong></div>
        </div>
      </div>
      <div class="modal-footer py-2 bg-light">
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-sm btn-info text-white px-3" id="btn-proses-duplikat" onclick="prosesDuplikatPW()">
          <i class="bi bi-check2-circle me-1"></i> Buat Duplikat Sekarang
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script>
// Data awal dari backend
let DAPUR_DATA = {{ dapur_json | tojson if dapur_json is defined else '[]' | safe }};
let KATEGORI_DATA = {{ kategori_json | tojson if kategori_json is defined else '[]' | safe }};
let NOMOR_SARAN = '{{ nomor_saran }}';
let CURRENT_USER_ROLE = '{{ current_user.role if current_user else "viewer" }}';
let CAN_VALIDATE = Boolean({{ can('fitur_pengeluaran_wajib_validasi') | tojson }}) || CURRENT_USER_ROLE === 'super_admin' || CURRENT_USER_ROLE === 'validator';

let filterSifatAktif = '';
let daftarPengeluaran = [];

const modalPW = new bootstrap.Modal(document.getElementById('modalPW'));
const modalKategoriPW = new bootstrap.Modal(document.getElementById('modalKategoriPW'));
const modalDuplikatPW = new bootstrap.Modal(document.getElementById('modalDuplikatPW'));

document.addEventListener('DOMContentLoaded', function() {
  populateKategoriDropdown();
  loadPengeluaranWajib();
});

function fmtRupiah(n) {
  return new Intl.NumberFormat('id-ID', {style:'currency', currency:'IDR', minimumFractionDigits:0}).format(n || 0);
}

function fmtTglIndo(iso) {
  if (!iso) return '-';
  const d = new Date(iso);
  return d.toLocaleDateString('id-ID', {weekday:'short', day:'2-digit', month:'short', year:'numeric'});
}

function pilihFilterSifat(sifat) {
  filterSifatAktif = sifat;
  const selSifat = document.getElementById('filter-sifat-select');
  if (selSifat) selSifat.value = sifat;

  document.querySelectorAll('#tabSifatNav .nav-link').forEach(btn => btn.classList.remove('active'));
  if (event && event.target) {
    const navItem = event.target.closest('.nav-link');
    if (navItem) navItem.classList.add('active');
  }

  updateFilterKategoriOptions();
  loadPengeluaranWajib();
}

function sinkronSifatSelect(sifat) {
  filterSifatAktif = sifat;
  const navLinks = document.querySelectorAll('#tabSifatNav .nav-link');
  navLinks.forEach(btn => btn.classList.remove('active'));
  if (!sifat && navLinks[0]) navLinks[0].classList.add('active');
  else if (sifat === 'WAJIB' && navLinks[1]) navLinks[1].classList.add('active');
  else if (sifat === 'OPSIONAL' && navLinks[2]) navLinks[2].classList.add('active');
  else if (sifat === 'PENGGAJIAN' && navLinks[3]) navLinks[3].classList.add('active');
  else if (sifat === 'SUPPLIER' && navLinks[4]) navLinks[4].classList.add('active');

  updateFilterKategoriOptions();
  loadPengeluaranWajib();
}

function updateFilterKategoriOptions() {
  const sel = document.getElementById('filter-kategori');
  if (!sel) return;

  if (filterSifatAktif === 'SUPPLIER') {
    let optHtml = '<option value="all">Semua Kategori Suplayer</option>';
    let filteredKats = KATEGORI_DATA.filter(k => (k.sifat || '').toUpperCase() === 'SUPPLIER');
    if (!filteredKats.length) filteredKats = KATEGORI_DATA;
    filteredKats.forEach(k => {
      optHtml += `<option value="${k.id}">${k.nama} (${k.sifat})</option>`;
    });
    sel.innerHTML = optHtml;
  } else if (filterSifatAktif === 'PENGGAJIAN') {
    let optHtml = '<option value="all">Semua Penggajian</option>';
    let filteredKats = KATEGORI_DATA.filter(k => (k.sifat || '').toUpperCase() === 'PENGGAJIAN');
    if (!filteredKats.length) filteredKats = KATEGORI_DATA;
    filteredKats.forEach(k => {
      optHtml += `<option value="${k.id}">${k.nama} (${k.sifat})</option>`;
    });
    sel.innerHTML = optHtml;
  } else {
    let optHtml = '<option value="all">Semua Kategori</option>';
    let filteredKats = KATEGORI_DATA;
    if (filterSifatAktif) {
      filteredKats = KATEGORI_DATA.filter(k => (k.sifat || '').toUpperCase() === filterSifatAktif);
    }
    filteredKats.forEach(k => {
      optHtml += `<option value="${k.id}">${k.nama} (${k.sifat})</option>`;
    });
    sel.innerHTML = optHtml;
  }
}

// ── SALIN TEKS DENGAN EFEK VISUAL ──
function salinTeksPW(textToCopy, btn, label) {
  if (!textToCopy || textToCopy === '–' || textToCopy === '-') return;

  const triggerVisual = () => {
    if (btn) {
      const origHtml = btn.innerHTML;
      btn.innerHTML = '<i class="bi bi-check2 text-white me-1"></i><span class="text-white fw-bold" style="font-size:0.7rem;">Tersalin</span>';
      btn.classList.add('copied');
      const td = btn.closest('td');
      const tr = btn.closest('tr');
      if (td) td.classList.add('cell-copied-highlight');
      if (tr) tr.classList.add('row-copied-highlight');

      setTimeout(() => {
        btn.innerHTML = origHtml;
        btn.classList.remove('copied');
        if (td) td.classList.remove('cell-copied-highlight');
        if (tr) tr.classList.remove('row-copied-highlight');
      }, 1500);
    }
  };

  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(textToCopy).then(triggerVisual).catch(() => {
      manualFallbackCopy(textToCopy);
      triggerVisual();
    });
  } else {
    manualFallbackCopy(textToCopy);
    triggerVisual();
  }
}

function manualFallbackCopy(str) {
  const ta = document.createElement('textarea');
  ta.value = str;
  ta.style.position = 'fixed';
  ta.style.left = '-9999px';
  document.body.appendChild(ta);
  ta.select();
  try { document.execCommand('copy'); } catch(e) {}
  document.body.removeChild(ta);
}

// ── LOAD & RENDER TABEL ──
async function loadPengeluaranWajib() {
  const tbody = document.getElementById('tbody-pengeluaran-wajib');
  tbody.innerHTML = `<tr><td colspan="11" class="text-center py-4 text-muted"><div class="spinner-border spinner-border-sm text-primary me-2"></div>Memuat data...</td></tr>`;

  const dapurId = document.getElementById('filter-dapur').value;
  const rawKategori = document.getElementById('filter-kategori') ? document.getElementById('filter-kategori').value : 'all';
  const kategoriId = rawKategori;

  const bulan = document.getElementById('filter-bulan').value;
  const tahun = document.getElementById('filter-tahun').value;
  const status = document.getElementById('filter-status').value;
  const q = document.getElementById('filter-keyword').value.trim();

  let url = `/api/pengeluaran-wajib?sifat=${filterSifatAktif}&kategori_id=${kategoriId}&dapur_id=${dapurId}&bulan=${bulan}&tahun=${tahun}&status=${status}&q=${encodeURIComponent(q)}`;

  try {
    const res = await fetch(url, {
      headers: { 'Accept': 'application/json' }
    });
    if (res.status === 401 || res.redirected) {
      window.location.href = '/login';
      return;
    }
    const ct = res.headers.get('content-type') || '';
    if (!ct.includes('application/json')) {
      const textErr = await res.text();
      console.error("Respon non-JSON dari server:", textErr);
      throw new Error(`Server error (${res.status}): Tidak dapat memproses data. Silakan muat ulang halaman.`);
    }
    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Gagal mengambil data pengeluaran');

    daftarPengeluaran = data.items || [];
    renderTabelPW(daftarPengeluaran);
    renderStats(data.stats || {});
    if (data.nomor_saran) NOMOR_SARAN = data.nomor_saran;
  } catch(e) {
    tbody.innerHTML = `<tr><td colspan="11" class="text-center text-danger py-4"><i class="bi bi-exclamation-triangle me-1"></i>${e.message}</td></tr>`;
  }
}

function renderStats(stats) {
  document.getElementById('stat-total-wajib').textContent = fmtRupiah(stats.total_wajib || 0);
  document.getElementById('stat-total-opsional').textContent = fmtRupiah(stats.total_opsional || 0);
  document.getElementById('stat-grand-total').textContent = fmtRupiah(stats.grand_total || 0);
  document.getElementById('stat-count-total').textContent = stats.count_total || 0;
  document.getElementById('stat-count-disetujui').textContent = `${stats.count_disetujui || 0} Disetujui`;
  document.getElementById('stat-count-draft').textContent = `${stats.count_draft || 0} Menunggu`;
}

function renderTabelPW(items) {
  const tbody = document.getElementById('tbody-pengeluaran-wajib');
  document.getElementById('badge-total-baris').textContent = `${items.length} Data`;

  if (!items.length) {
    tbody.innerHTML = `<tr><td colspan="11" class="text-center py-5 text-muted"><i class="bi bi-inbox fs-2 d-block mb-2"></i>Tidak ada data pengeluaran ditemukan.</td></tr>`;
    return;
  }

  tbody.innerHTML = items.map(d => {
    const isWajib = (d.sifat || '').toUpperCase() === 'WAJIB';
    const isPenggajian = (d.sifat || '').toUpperCase() === 'PENGGAJIAN';
    const isSupplier = (d.sifat || '').toUpperCase() === 'SUPPLIER';
    let badgeSifat = `<span class="badge-opsional"><i class="bi bi-wrench me-1"></i>OPSIONAL</span>`;
    if (isSupplier) {
      badgeSifat = `<span class="badge-supplier"><i class="bi bi-truck me-1"></i>SUPLAYER</span>`;
    } else if (isPenggajian) {
      badgeSifat = `<span class="badge-penggajian"><i class="bi bi-people-fill me-1"></i>PENGGAJIAN</span>`;
    } else if (isWajib) {
      badgeSifat = `<span class="badge-wajib"><i class="bi bi-exclamation-circle-fill me-1"></i>WAJIB</span>`;
    }

    const isDisetujui = d.status === 'disetujui';
    const statusBadge = isDisetujui
      ? `<span class="badge-disetujui"><i class="bi bi-check-circle-fill me-1"></i>Disetujui</span>`
      : `<span class="badge-draft"><i class="bi bi-hourglass-split me-1"></i>Menunggu</span>`;

    const validInfo = isDisetujui
      ? `<div style="font-size:0.68rem;color:#059669;margin-top:2px;">
           <i class="bi bi-check2"></i> ${d.disetujui_oleh || 'Validator'}
           ${d.disetujui_pada_str ? `<span class="d-block text-muted" style="font-size:0.62rem;">${d.disetujui_pada_str}</span>` : ''}
         </div>` : '';

    const admBadge = d.biaya_admin > 0 
      ? `<span class="badge bg-warning text-dark font-monospace" style="font-size:0.7rem;">+${fmtRupiah(d.biaya_admin)}</span>` 
      : `<span class="text-muted" style="font-size:0.75rem;">–</span>`;

    const cleanRek = (d.no_rekening_penerima || '').trim();
    const bankBadge = d.bank_penerima ? `<span class="badge bg-light text-dark border font-monospace me-1" style="font-size:0.7rem;">${d.bank_penerima}</span>` : '';

    const textToCopyPenerima = cleanRek ? cleanRek : (d.nama_penerima || '');

    return `<tr>
      <td style="white-space:nowrap;">
        <div class="fw-bold font-monospace text-primary" style="font-size:0.8rem;">${d.nomor}</div>
        <div class="text-dark small">${fmtTglIndo(d.tanggal)}</div>
      </td>
      <td>
        <span class="badge bg-light text-dark border"><i class="bi bi-buildings me-1"></i>${d.dapur_nama}</span>
      </td>
      <td>
        <div>${badgeSifat}</div>
        <div class="small fw-semibold text-secondary mt-1">${d.kategori_nama}</div>
      </td>
      <td>
        <div class="fw-bold text-dark" style="font-size:0.85rem;">${d.judul}</div>
        <small class="text-muted" style="font-size:0.72rem;">Metode: <span class="badge bg-light text-secondary border">${d.metode_bayar}</span></small>
      </td>
      <td>
        <div class="d-flex align-items-center justify-content-between gap-1">
          <div class="fw-semibold text-truncate" style="max-width:160px;" title="${d.nama_penerima}">${d.nama_penerima}</div>
          <button type="button" class="btn-copy-mini flex-shrink-0"
                  onclick="salinTeksPW('${encodeURIComponent(textToCopyPenerima)}', this, 'Penerima')"
                  title="Salin No. Rekening / Nama">
            <i class="bi bi-clipboard"></i>
          </button>
        </div>
        <div class="mt-1 d-flex align-items-center">${bankBadge} <span class="font-monospace small text-muted">${cleanRek}</span></div>
      </td>
      <td class="text-end fw-semibold text-secondary">${fmtRupiah(d.nominal)}</td>
      <td class="text-center">${admBadge}</td>
      <td class="text-end" style="white-space:nowrap;">
        <div class="d-flex align-items-center justify-content-end gap-1">
          <span class="fw-bold font-monospace text-primary" style="font-size:0.9rem;">${fmtRupiah(d.total_bayar)}</span>
          <button type="button" class="btn-copy-mini flex-shrink-0"
                  onclick="salinTeksPW('${Math.round(d.total_bayar || 0)}', this, 'Total Bayar')"
                  title="Salin Angka Bersih (Rp ${Math.round(d.total_bayar || 0)})">
            <i class="bi bi-clipboard"></i>
          </button>
        </div>
      </td>
      <td style="max-width:180px;">
        <div class="d-flex align-items-start justify-content-between gap-1">
          <span class="text-muted text-break small">${d.keperluan || '–'}</span>
          ${d.keperluan ? `
          <button type="button" class="btn-copy-mini flex-shrink-0"
                  onclick="salinTeksPW('${encodeURIComponent(d.keperluan)}', this, 'Keperluan')"
                  title="Salin Keperluan">
            <i class="bi bi-clipboard"></i>
          </button>` : ''}
        </div>
      </td>
      <td class="text-center">
        ${CAN_VALIDATE ? `
          <div class="form-check form-switch d-inline-block m-0">
            <input class="form-check-input" type="checkbox" ${isDisetujui ? 'checked' : ''} onchange="toggleValidasiPW(${d.id})" title="Klik untuk validasi / persetujuan">
          </div>
        ` : ''}
        <div>${statusBadge}</div>
        ${validInfo}
      </td>
      <td class="text-end">
        <div class="btn-group btn-group-sm">
          <button class="btn btn-outline-info py-0 px-2" onclick="bukaModalDuplikatPW(${d.id})" title="Duplikat Transaksi (Angsuran/Penggajian/Tagihan Bulan Depan)">
            <i class="bi bi-copy"></i>
          </button>
          <button class="btn btn-outline-primary py-0 px-2" onclick="bukaModalEditPW(${d.id})" title="Edit Transaksi">
            <i class="bi bi-pencil"></i>
          </button>
          <button class="btn btn-outline-danger py-0 px-2" onclick="hapusPW(${d.id})" title="Hapus Transaksi">
            <i class="bi bi-trash"></i>
          </button>
        </div>
      </td>
    </tr>`;
  }).join('');
}

// ── FORM MODAL TAMBAH / EDIT ──
function populateKategoriDropdown() {
  const sel = document.getElementById('pw-kategori');
  let html = '';
  KATEGORI_DATA.filter(k => k.aktif).forEach(k => {
    html += `<option value="${k.id}" data-sifat="${k.sifat}">${k.nama} [${k.sifat}]</option>`;
  });
  sel.innerHTML = html;
  onKategoriPWChange();
}

function onKategoriPWChange() {
  const sel = document.getElementById('pw-kategori');
  const opt = sel.options[sel.selectedIndex];
  if (opt) {
    const sifat = opt.getAttribute('data-sifat') || 'WAJIB';
    document.getElementById('pw-sifat').value = sifat;
  }
}

function hitungTotalPW() {
  const nom = parseFloat(document.getElementById('pw-nominal').value) || 0;
  const adm = parseFloat(document.getElementById('pw-biaya-admin').value) || 0;
  const total = nom + adm;
  document.getElementById('pw-total-bayar').value = fmtRupiah(total);
}

function bukaModalTambahPW() {
  document.getElementById('pw-id').value = '';
  document.getElementById('pw-nomor').value = NOMOR_SARAN;
  document.getElementById('pw-tanggal').value = '{{ today_iso }}';
  document.getElementById('pw-dapur').value = '';
  document.getElementById('pw-judul').value = '';
  document.getElementById('pw-penerima').value = '';
  document.getElementById('pw-bank').value = '';
  document.getElementById('pw-norek').value = '';
  document.getElementById('pw-metode').value = 'TRANSFER';
  document.getElementById('pw-nominal').value = '';
  document.getElementById('pw-biaya-admin').value = '0';
  document.getElementById('pw-total-bayar').value = 'Rp 0';
  document.getElementById('pw-keperluan').value = '';

  if (KATEGORI_DATA.length > 0) {
    document.getElementById('pw-kategori').value = KATEGORI_DATA[0].id;
    onKategoriPWChange();
  }

  document.getElementById('modalPWTitle').innerHTML = '<i class="bi bi-plus-circle me-2 text-warning"></i>Tambah Pengeluaran Wajib / Opsional';
  modalPW.show();
}

function bukaModalEditPW(id) {
  const d = daftarPengeluaran.find(x => x.id === id);
  if (!d) return;

  document.getElementById('pw-id').value = d.id;
  document.getElementById('pw-nomor').value = d.nomor;
  document.getElementById('pw-tanggal').value = d.tanggal;
  document.getElementById('pw-dapur').value = d.dapur_id || '';
  document.getElementById('pw-kategori').value = d.kategori_id || '';
  document.getElementById('pw-sifat').value = d.sifat || 'WAJIB';
  document.getElementById('pw-metode').value = d.metode_bayar || 'TRANSFER';
  document.getElementById('pw-judul').value = d.judul || '';
  document.getElementById('pw-penerima').value = d.nama_penerima || '';
  document.getElementById('pw-bank').value = d.bank_penerima || '';
  document.getElementById('pw-norek').value = d.no_rekening_penerima || '';
  document.getElementById('pw-nominal').value = d.nominal || 0;
  document.getElementById('pw-biaya-admin').value = d.biaya_admin || 0;
  hitungTotalPW();
  document.getElementById('pw-keperluan').value = d.keperluan || '';

  document.getElementById('modalPWTitle').innerHTML = '<i class="bi bi-pencil-square me-2 text-warning"></i>Edit Pengeluaran Wajib / Opsional';
  modalPW.show();
}

// ── DUPLIKAT ANGSURAN / TAGIHAN KE BULAN SELANJUTNYA ──
function bukaModalDuplikatPW(id) {
  const d = daftarPengeluaran.find(x => x.id === id);
  if (!d) return;

  document.getElementById('duplikat-id').value = d.id;
  document.getElementById('duplikat-judul').value = d.judul || '';
  document.getElementById('duplikat-nominal').value = d.nominal || 0;
  document.getElementById('duplikat-admin').value = d.biaya_admin || 0;
  document.getElementById('duplikat-keperluan').value = d.keperluan || '';
  document.getElementById('duplikat-info-penerima').textContent = `${d.nama_penerima || '-'} (${d.bank_penerima || '-'} ${d.no_rekening_penerima || ''})`;
  document.getElementById('duplikat-info-kategori').textContent = `${d.kategori_nama || '-'} [${d.sifat || '-'}]`;

  // Hitung tanggal bulan berikutnya secara akurat
  let nextDateStr = '';
  if (d.tanggal) {
    const parts = d.tanggal.split('-');
    if (parts.length === 3) {
      let y = parseInt(parts[0], 10);
      let m = parseInt(parts[1], 10);
      let day = parseInt(parts[2], 10);

      m += 1;
      if (m > 12) {
        m = 1;
        y += 1;
      }
      // Batasi tanggal jika bulan baru punya hari lebih sedikit (misal Feb 28)
      const lastDayInMonth = new Date(y, m, 0).getDate();
      day = Math.min(day, lastDayInMonth);

      const mm = String(m).padStart(2, '0');
      const dd = String(day).padStart(2, '0');
      nextDateStr = `${y}-${mm}-${dd}`;
    }
  }

  if (!nextDateStr) {
    const today = new Date();
    today.setMonth(today.getMonth() + 1);
    nextDateStr = today.toISOString().slice(0, 10);
  }

  document.getElementById('duplikat-tanggal').value = nextDateStr;
  hitungDuplikatTotal();
  modalDuplikatPW.show();
}

function hitungDuplikatTotal() {
  const nom = parseFloat(document.getElementById('duplikat-nominal').value) || 0;
  const adm = parseFloat(document.getElementById('duplikat-admin').value) || 0;
  document.getElementById('duplikat-total-bayar').value = fmtRupiah(nom + adm);
}

async function prosesDuplikatPW() {
  const id = document.getElementById('duplikat-id').value;
  const judul = document.getElementById('duplikat-judul').value.trim();
  const tanggal = document.getElementById('duplikat-tanggal').value;
  const nominal = parseFloat(document.getElementById('duplikat-nominal').value) || 0;
  const admin = parseFloat(document.getElementById('duplikat-admin').value) || 0;
  const keperluan = document.getElementById('duplikat-keperluan').value.trim();

  if (!tanggal) {
    Swal.fire({icon: 'warning', title: 'Perhatian', text: 'Target tanggal duplikat wajib diisi.'});
    return;
  }
  if (!judul) {
    Swal.fire({icon: 'warning', title: 'Perhatian', text: 'Nama/Judul pengeluaran tidak boleh kosong.'});
    return;
  }

  const btn = document.getElementById('btn-proses-duplikat');
  btn.disabled = true;

  try {
    const res = await fetch(`/api/pengeluaran-wajib/${id}/duplikat`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        judul: judul,
        tanggal: tanggal,
        nominal: nominal,
        biaya_admin: admin,
        keperluan: keperluan
      })
    });

    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Gagal menduplikat pengeluaran');

    modalDuplikatPW.hide();
    Swal.fire({
      icon: 'success',
      title: 'Berhasil Diduplikat!',
      text: `Pengeluaran [${data.nomor}] untuk bulan baru telah dibuat dengan status Draft.`,
      timer: 1800,
      showConfirmButton: false
    });
    loadPengeluaranWajib();
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal Duplikat', text: e.message});
  } finally {
    btn.disabled = false;
  }
}

async function simpanPengeluaranWajib() {
  const id = document.getElementById('pw-id').value;
  const judul = document.getElementById('pw-judul').value.trim();
  const tanggal = document.getElementById('pw-tanggal').value;
  const nominal = parseFloat(document.getElementById('pw-nominal').value) || 0;

  if (!judul) {
    Swal.fire({icon: 'warning', title: 'Perhatian', text: 'Nama / Judul pengeluaran wajib diisi.'});
    return;
  }
  if (!tanggal) {
    Swal.fire({icon: 'warning', title: 'Perhatian', text: 'Tanggal transaksi wajib diisi.'});
    return;
  }
  if (nominal <= 0) {
    Swal.fire({icon: 'warning', title: 'Perhatian', text: 'Nominal pengeluaran harus lebih besar dari 0.'});
    return;
  }

  const payload = {
    nomor: document.getElementById('pw-nomor').value,
    tanggal: tanggal,
    dapur_id: document.getElementById('pw-dapur').value || null,
    kategori_id: document.getElementById('pw-kategori').value || null,
    sifat: document.getElementById('pw-sifat').value,
    metode_bayar: document.getElementById('pw-metode').value,
    judul: judul,
    nama_penerima: document.getElementById('pw-penerima').value.trim(),
    bank_penerima: document.getElementById('pw-bank').value.trim(),
    no_rekening_penerima: document.getElementById('pw-norek').value.trim(),
    nominal: nominal,
    biaya_admin: parseFloat(document.getElementById('pw-biaya-admin').value) || 0,
    keperluan: document.getElementById('pw-keperluan').value.trim()
  };

  const btn = document.getElementById('btn-save-pw');
  btn.disabled = true;

  const url = id ? `/api/pengeluaran-wajib/${id}` : '/api/pengeluaran-wajib';
  const method = id ? 'PUT' : 'POST';

  try {
    const res = await fetch(url, {
      method,
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(payload)
    });
    const result = await res.json();
    if (!res.ok) throw new Error(result.error || 'Gagal menyimpan pengeluaran');

    modalPW.hide();
    Swal.fire({icon: 'success', title: 'Berhasil Disimpan!', timer: 1200, showConfirmButton: false});
    loadPengeluaranWajib();
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Kesalahan', text: e.message});
  } finally {
    btn.disabled = false;
  }
}

async function hapusPW(id) {
  const res = await Swal.fire({
    title: 'Hapus Transaksi ini?',
    text: 'Data pengeluaran akan dihapus dari sistem (dapat dipulihkan via menu Audit Log jika diperlukan).',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    confirmButtonText: 'Ya, Hapus',
    cancelButtonText: 'Batal'
  });
  if (!res.isConfirmed) return;

  try {
    const resp = await fetch(`/api/pengeluaran-wajib/${id}`, { method: 'DELETE' });
    const data = await resp.json();
    if (!resp.ok) throw new Error(data.error || 'Gagal menghapus');

    Swal.fire({icon: 'success', title: 'Terhapus!', timer: 1200, showConfirmButton: false});
    loadPengeluaranWajib();
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal', text: e.message});
  }
}

async function toggleValidasiPW(id) {
  try {
    const resp = await fetch(`/api/pengeluaran-wajib/${id}/validasi`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({})
    });

    if (resp.status === 401 || resp.redirected) {
      window.location.href = '/login';
      return;
    }

    const contentType = resp.headers.get('content-type') || '';
    if (!contentType.includes('application/json')) {
      throw new Error('Sesi telah berakhir atau server mengembalikan respon HTML. Silakan muat ulang halaman.');
    }

    const data = await resp.json();
    if (!resp.ok) throw new Error(data.error || 'Gagal memvalidasi');

    Swal.fire({
      icon: 'success',
      title: data.status === 'disetujui' ? 'Pengeluaran Disetujui!' : 'Status Dikembalikan ke Draft',
      timer: 1200,
      showConfirmButton: false
    });
    loadPengeluaranWajib();
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal', text: e.message});
    loadPengeluaranWajib();
  }
}

// ── KELOLA KATEGORI PENGELUARAN ──
function bukaModalKelolaKategori() {
  renderTabelKategoriPW();
  modalKategoriPW.show();
}

function renderTabelKategoriPW() {
  const tbody = document.getElementById('tbody-kategori-pw');
  tbody.innerHTML = KATEGORI_DATA.map(k => {
    const isWajib = (k.sifat || '').toUpperCase() === 'WAJIB';
    const isPenggajian = (k.sifat || '').toUpperCase() === 'PENGGAJIAN';
    const isSupplier = (k.sifat || '').toUpperCase() === 'SUPPLIER';
    let badgeClass = 'badge-opsional';
    if (isSupplier) badgeClass = 'badge-supplier';
    else if (isPenggajian) badgeClass = 'badge-penggajian';
    else if (isWajib) badgeClass = 'badge-wajib';

    return `<tr>
      <td class="fw-bold text-dark">${k.nama}</td>
      <td>
        <span class="${badgeClass}">${k.sifat}</span>
      </td>
      <td class="text-muted small">${k.deskripsi || '-'}</td>
      <td class="text-center">
        <span class="badge ${k.aktif ? 'bg-success' : 'bg-secondary'}">${k.aktif ? 'Aktif' : 'Nonaktif'}</span>
      </td>
      <td class="text-end">
        <button class="btn btn-xs btn-outline-danger py-0 px-2" onclick="hapusKategoriPW(${k.id})" title="Hapus Kategori">
          <i class="bi bi-trash"></i>
        </button>
      </td>
    </tr>`;
  }).join('');
}

async function simpanKategoriPWBaru() {
  const nama = document.getElementById('katpw-nama').value.trim();
  const sifat = document.getElementById('katpw-sifat').value;
  const deskripsi = document.getElementById('katpw-desc').value.trim();

  if (!nama) {
    Swal.fire({icon: 'warning', title: 'Perhatian', text: 'Nama kategori wajib diisi.'});
    return;
  }

  try {
    const resp = await fetch('/api/kategori-pengeluaran-wajib', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ nama, sifat, deskripsi, urutan: KATEGORI_DATA.length + 1 })
    });
    const data = await resp.json();
    if (!resp.ok) throw new Error(data.error || 'Gagal menyimpan kategori');

    KATEGORI_DATA.push(data);
    renderTabelKategoriPW();
    populateKategoriDropdown();

    document.getElementById('katpw-nama').value = '';
    document.getElementById('katpw-desc').value = '';
    Swal.fire({icon: 'success', title: 'Kategori Ditambahkan!', timer: 1200, showConfirmButton: false});
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal', text: e.message});
  }
}

async function hapusKategoriPW(id) {
  const res = await Swal.fire({
    title: 'Hapus Kategori ini?',
    text: 'Kategori yang belum digunakan pada transaksi dapat dihapus.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    confirmButtonText: 'Ya, Hapus',
    cancelButtonText: 'Batal'
  });
  if (!res.isConfirmed) return;

  try {
    const resp = await fetch(`/api/kategori-pengeluaran-wajib/${id}`, { method: 'DELETE' });
    const data = await resp.json();
    if (!resp.ok) throw new Error(data.error || 'Gagal menghapus kategori');

    KATEGORI_DATA = KATEGORI_DATA.filter(k => k.id !== id);
    renderTabelKategoriPW();
    populateKategoriDropdown();
    Swal.fire({icon: 'success', title: 'Terhapus', timer: 1200, showConfirmButton: false});
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal', text: e.message});
  }
}
</script>
{% endblock %}