{% extends "base.html" %}
{% block title %}Pengaturan – SPPG{% endblock %}
{% block page_title %}Pengaturan Aplikasi{% endblock %}

{% block extra_css %}
<style>
  .setting-group { border-left: 4px solid var(--primary-light, #2E75B6); padding-left: 1rem; margin-bottom: 1.5rem; }
  .setting-group h6 { color: #1F4E79; font-weight: 700; margin-bottom: .75rem; }
  .fee-box { background: #FEF9C3; border: 1px solid #FDE68A; border-radius: 8px; padding: .75rem 1rem; }
  .fee-preview { font-size: .8rem; color: #92400E; margin-top: .3rem; }
  .saved-badge { display:none; }
  .saved-badge.show { display:inline-flex; }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">

<form id="form-pengaturan">

  <!-- ── Identitas Dapur ── -->
  {% if can('peng_identitas_dapur') %}
  <div class="card mb-4" id="card-identitas-dapur">
    <div class="card-header">
      <i class="bi bi-house-door me-2"></i>Identitas Dapur
    </div>
    <div class="card-body">
      <div class="setting-group">
        <h6><i class="bi bi-tag me-1"></i>Nama Dapur</h6>
        <div class="mb-3">
          <label class="form-label small fw-semibold">
            Nama Dapur / Lokasi
            <span class="text-danger">*</span>
          </label>
          <input type="text" name="nama_dapur" id="s-nama-dapur"
                 class="form-control"
                 value="{{ settings.get('nama_dapur', 'SPPG SENDANGREJO') }}"
                 placeholder="Contoh: SPPG SENDANGREJO">
          <div class="form-text">
            Nama ini akan tampil di seluruh halaman, header dokumen, dan export Excel/PDF.
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label small fw-semibold">Nama Pengelola / Penanggung Jawab</label>
          <input type="text" name="nama_pengelola" class="form-control"
                 value="{{ settings.get('nama_pengelola', '') }}"
                 placeholder="Nama pengelola dapur">
        </div>
      </div>

      <div class="setting-group">
        <h6><i class="bi bi-geo-alt me-1"></i>Kontak</h6>
        <div class="row g-3">
          <div class="col-md-7">
            <label class="form-label small fw-semibold">Alamat Dapur</label>
            <input type="text" name="alamat_dapur" class="form-control"
                   value="{{ settings.get('alamat_dapur', '') }}"
                   placeholder="Alamat lengkap dapur">
          </div>
          <div class="col-md-5">
            <label class="form-label small fw-semibold">No. Telepon / WhatsApp</label>
            <input type="text" name="no_telepon" class="form-control"
                   value="{{ settings.get('no_telepon', '') }}"
                   placeholder="08xxxxxxxxxx">
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ── Biaya Admin Transfer ── -->
  <div class="card mb-4">
    <div class="card-header">
      <i class="bi bi-bank me-2"></i>Biaya Admin Transfer
    </div>
    <div class="card-body">
      <div class="fee-box mb-3">
        <i class="bi bi-info-circle me-1 text-warning"></i>
        <strong>Aturan potongan admin:</strong>
        Setiap pembayaran ke rekening <strong>selain BRI</strong> akan dikenakan biaya admin
        sebesar <strong>Rp {{ '{:,.0f}'.format(admin_fee) }}</strong> yang dipotong dari
        total belanja otomatis saat data disimpan.
      </div>

      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label small fw-semibold">
            <span class="badge bg-primary me-1">BRI</span>
            Biaya Admin Transfer ke BRI (Rp)
          </label>
          <div class="input-group">
            <span class="input-group-text">Rp</span>
            <input type="number" name="admin_fee_bri" class="form-control fee-input"
                   value="{{ settings.get('admin_fee_bri', '0') }}"
                   min="0" step="500" placeholder="0">
          </div>
          <div class="fee-preview" id="prev-bri"></div>
        </div>
        <div class="col-md-6">
          <label class="form-label small fw-semibold">
            <span class="badge bg-warning text-dark me-1">Non-BRI</span>
            Biaya Admin Transfer Non-BRI (Rp)
          </label>
          <div class="input-group">
            <span class="input-group-text">Rp</span>
            <input type="number" name="admin_fee_non_bri" class="form-control fee-input"
                   value="{{ settings.get('admin_fee_non_bri', '2500') }}"
                   min="0" step="500" placeholder="2500">
          </div>
          <div class="fee-preview" id="prev-non-bri"></div>
        </div>
      </div>

      <!-- Simulasi potongan -->
      <div class="mt-3 p-3 rounded" style="background:#f8fafc; border:1px solid #e2e8f0;">
        <div class="small fw-bold text-muted mb-2">
          <i class="bi bi-calculator me-1"></i>Simulasi Potongan Admin
        </div>
        <div class="row g-2 align-items-end">
          <div class="col-md-4">
            <label class="form-label small mb-1">Contoh total belanja</label>
            <div class="input-group input-group-sm">
              <span class="input-group-text">Rp</span>
              <input type="number" id="sim-total" class="form-control" value="500000"
                     oninput="updateSimulasi()">
            </div>
          </div>
          <div class="col-md-8">
            <div class="d-flex gap-3 flex-wrap mt-2">
              <div class="text-center">
                <div class="small text-muted">Transfer BRI</div>
                <div class="fw-bold text-success" id="sim-bri">Rp 500.000</div>
              </div>
              <div class="text-center">
                <div class="small text-muted">Transfer Non-BRI</div>
                <div class="fw-bold text-warning" id="sim-non-bri">Rp 497.500</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  {% endif %}

  <!-- ── Notifikasi WhatsApp & Telegram ── -->
  {% if can('peng_notifikasi') %}
  <div class="card mb-4" id="card-notifikasi">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span><i class="bi bi-chat-dots-fill me-2 text-primary"></i>Integrasi Notifikasi WhatsApp & Telegram</span>
      <span class="badge bg-primary bg-opacity-10 text-primary small">Auto Broadcast</span>
    </div>
    <div class="card-body">
      
      <!-- 1. Telegram Bot -->
      <div class="setting-group mb-4">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h6 class="mb-0"><i class="bi bi-telegram me-1 text-info"></i>Telegram Bot (Gratis & Cepat)</h6>
          <div class="form-check form-switch m-0">
            <input class="form-check-input" type="checkbox" name="notif_telegram_aktif" id="notif-tg-aktif"
                   value="1" {% if settings.get('notif_telegram_aktif', '0') == '1' %}checked{% endif %}>
            <label class="form-check-label small fw-semibold" for="notif-tg-aktif">Aktifkan Telegram</label>
          </div>
        </div>
        <p class="text-muted small mb-3">
          Kirim notifikasi otomatis instan ke akun atau grup Telegram pengurus / bendahara saat pengajuan dibuat atau divalidasi.
        </p>

        <div class="row g-3 mb-2">
          <div class="col-md-7">
            <label class="form-label small fw-semibold">Telegram Bot Token <span class="text-danger">*</span></label>
            <input type="text" name="notif_telegram_token" id="s-tg-token" class="form-control form-control-sm font-monospace"
                   value="{{ settings.get('notif_telegram_token', '') }}" placeholder="Contoh: 123456789:ABCDefGhIJKlmNoPQRsTUVwxyZ">
            <div class="form-text small">Dapatkan token bot dengan membuat bot di <code>@BotFather</code>.</div>
          </div>
          <div class="col-md-5">
            <label class="form-label small fw-semibold">Chat ID / Grup ID <span class="text-danger">*</span></label>
            <input type="text" name="notif_telegram_chat_id" id="s-tg-chat-id" class="form-control form-control-sm font-monospace"
                   value="{{ settings.get('notif_telegram_chat_id', '') }}" placeholder="Contoh: -100123456789 atau 987654321">
            <div class="form-text small">Cek ID chat/grup via bot <code>@userinfobot</code> atau <code>@getidsbot</code>.</div>
          </div>
        </div>

        <div class="d-flex justify-content-end">
          <button type="button" class="btn btn-outline-info btn-sm" id="btn-test-tg" onclick="testKoneksiTelegram()">
            <i class="bi bi-send me-1"></i> Uji Coba Kirim Pesan Telegram
          </button>
        </div>
      </div>

      <!-- 2. WhatsApp Gateway -->
      <div class="setting-group mb-4">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h6 class="mb-0"><i class="bi bi-whatsapp me-1 text-success"></i>WhatsApp Gateway (Fonnte / Wablas / Webhook)</h6>
          <div class="form-check form-switch m-0">
            <input class="form-check-input" type="checkbox" name="notif_wa_aktif" id="notif-wa-aktif"
                   value="1" {% if settings.get('notif_wa_aktif', '0') == '1' %}checked{% endif %}>
            <label class="form-check-label small fw-semibold" for="notif-wa-aktif">Aktifkan WhatsApp</label>
          </div>
        </div>
        <p class="text-muted small mb-3">
          Kirim notifikasi otomatis ke nomor WhatsApp bendahara atau grup WhatsApp melalui provider gateway API.
        </p>

        <div class="row g-3 mb-2">
          <div class="col-md-4">
            <label class="form-label small fw-semibold">Penyedia Gateway</label>
            <select name="notif_wa_provider" id="s-wa-provider" class="form-select form-select-sm">
              <option value="fonnte" {% if settings.get('notif_wa_provider', 'fonnte') == 'fonnte' %}selected{% endif %}>Fonnte (Rekomendasi)</option>
              <option value="wablas" {% if settings.get('notif_wa_provider') == 'wablas' %}selected{% endif %}>Wablas</option>
              <option value="generic" {% if settings.get('notif_wa_provider') == 'generic' %}selected{% endif %}>Custom Webhook / Lainnya</option>
            </select>
          </div>
          <div class="col-md-8">
            <label class="form-label small fw-semibold">API Endpoint URL</label>
            <input type="text" name="notif_wa_url" id="s-wa-url" class="form-control form-control-sm font-monospace"
                   value="{{ settings.get('notif_wa_url', 'https://api.fonnte.com/send') }}" placeholder="https://api.fonnte.com/send">
          </div>
          <div class="col-md-6">
            <label class="form-label small fw-semibold">API Token / API Key <span class="text-danger">*</span></label>
            <input type="password" name="notif_wa_token" id="s-wa-token" class="form-control form-control-sm font-monospace"
                   value="{{ settings.get('notif_wa_token', '') }}" placeholder="API Token dari dashboard gateway">
          </div>
          <div class="col-md-6">
            <label class="form-label small fw-semibold">Nomor WhatsApp Admin Pusat / Bendahara <span class="text-danger">*</span></label>
            <input type="text" name="notif_wa_target" id="s-wa-target" class="form-control form-control-sm font-monospace"
                   value="{{ settings.get('notif_wa_target', '') }}" placeholder="08123456789 atau ID Grup">
            <div class="form-text small">Nomor WhatsApp Admin Pusat / Bendahara Utama yang akan menerima SEMUA notifikasi pengajuan & validasi dari seluruh dapur. (Untuk notifikasi khusus per dapur, atur di tabel <strong>Daftar Dapur / Unit</strong> di bawah).</div>
          </div>
        </div>

        <div class="d-flex justify-content-end">
          <button type="button" class="btn btn-outline-success btn-sm" id="btn-test-wa" onclick="testKoneksiWhatsApp()">
            <i class="bi bi-send me-1"></i> Uji Coba Kirim Pesan WhatsApp
          </button>
        </div>
      </div>

      <!-- 3. Pemicu Event Notifikasi -->
      <div class="setting-group mb-2">
        <h6><i class="bi bi-bell me-1 text-warning"></i>Pemicu Pengiriman Notifikasi (Event Triggers)</h6>
        <div class="row g-2 mt-1">
          <div class="col-md-6">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="notif_event_pengajuan" id="evt-pengajuan"
                     value="1" {% if settings.get('notif_event_pengajuan', '1') == '1' %}checked{% endif %}>
              <label class="form-check-label small" for="evt-pengajuan">
                <strong>Pengajuan Baru Dibuat</strong> (Belanja / Operasional)
              </label>
            </div>
            <div class="text-muted small ps-4">Memberi tahu bendahara bahwa ada nota belanja yang perlu diperiksa.</div>
          </div>
          <div class="col-md-6">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="notif_event_validasi" id="evt-validasi"
                     value="1" {% if settings.get('notif_event_validasi', '1') == '1' %}checked{% endif %}>
              <label class="form-check-label small" for="evt-validasi">
                <strong>Pengajuan Divalidasi / Disetujui</strong>
              </label>
            </div>
            <div class="text-muted small ps-4">Memberi tahu tim dapur bahwa nota telah divalidasi dan siap ditransfer.</div>
          </div>
        </div>
      </div>

      <!-- 4. Pengaturan Rekap Validasi WA -->
      <div class="setting-group mb-2 mt-3">
        <h6><i class="bi bi-whatsapp me-1 text-success"></i>Notifikasi Rekap Validasi WA (Konsolidasi)</h6>
        <div class="row g-3 mt-1">
          <div class="col-md-6">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="notif_rekap_validasi_aktif" id="evt-rekap-validasi"
                     value="1" {% if settings.get('notif_rekap_validasi_aktif', '1') == '1' %}checked{% endif %}>
              <label class="form-check-label small" for="evt-rekap-validasi">
                <strong>Aktifkan Tombol Kirim Rekap Validasi</strong>
              </label>
            </div>
            <div class="text-muted small ps-4">
              Tampilkan tombol <em>Kirim Notifikasi Validasi WA</em> di halaman Belanja Bahan
              untuk mengirim satu pesan WhatsApp konsolidasi berisi semua transaksi yang telah divalidasi.
            </div>
          </div>
          <div class="col-md-6 d-flex align-items-start">
            <div class="alert alert-light border-start border-success border-3 py-2 px-3 mb-0 small w-100">
              <i class="bi bi-info-circle-fill text-success me-1"></i>
              Pesan akan dikirim ke <strong>Admin Pusat</strong> (dari field Nomor WA di atas)
              dan nomor WA per dapur yang dikonfigurasi di tabel <strong>Daftar Dapur</strong> di bawah,
              sesuai toggle <em>Aktif Validasi</em> masing-masing dapur.
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="card-footer bg-light d-flex justify-content-between align-items-center flex-wrap gap-2">
      <small class="text-muted"><i class="bi bi-broadcast me-1"></i>Ingin kirim ringkasan keuangan hari ini secara manual?</small>
      <button type="button" class="btn btn-sm btn-outline-primary" id="btn-broadcast-rekap" onclick="broadcastRekapHariIni()">
        <i class="bi bi-megaphone me-1"></i> Broadcast Rekap Hari Ini Sekarang
      </button>
    </div>
  </div>
  {% endif %}

  <!-- ── Template Pesan Notifikasi WA / Telegram ── -->
  {% if can('peng_template_notif') or (current_user and current_user.role == 'super_admin') %}
  <div class="card mb-4" id="card-template-notif">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span><i class="bi bi-chat-text-fill me-2 text-success"></i>Template Pesan Notifikasi WA &amp; Telegram</span>
      <span class="badge bg-success bg-opacity-10 text-success small">Dapat Diedit</span>
    </div>
    <div class="card-body">
      <p class="text-muted small mb-3">
        Sesuaikan teks balasan/notifikasi yang dikirim ke WhatsApp &amp; Telegram. Gunakan variabel <code>{nama_dapur}</code>, <code>{penerima}</code>, <code>{nominal}</code>, <code>{tanggal}</code>, <code>{kategori}</code>, <code>{keperluan}</code>, <code>{validator}</code> di dalam teks.
      </p>

      <!-- Tab pilih template -->
      <ul class="nav nav-tabs nav-fill mb-3" id="tabTemplate" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active small fw-semibold" id="tab-tmpl-belanja-pengajuan" data-bs-toggle="tab" data-bs-target="#pane-belanja-pengajuan" type="button">
            <i class="bi bi-cart-check me-1 text-primary"></i>Belanja — Pengajuan
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link small fw-semibold" id="tab-tmpl-belanja-validasi" data-bs-toggle="tab" data-bs-target="#pane-belanja-validasi" type="button">
            <i class="bi bi-cart-check me-1 text-success"></i>Belanja — Validasi
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link small fw-semibold" id="tab-tmpl-ops-pengajuan" data-bs-toggle="tab" data-bs-target="#pane-ops-pengajuan" type="button">
            <i class="bi bi-wallet2 me-1 text-warning"></i>Operasional — Pengajuan
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link small fw-semibold" id="tab-tmpl-ops-validasi" data-bs-toggle="tab" data-bs-target="#pane-ops-validasi" type="button">
            <i class="bi bi-wallet2 me-1 text-success"></i>Operasional — Validasi
          </button>
        </li>
      </ul>

      <div class="tab-content" id="tabTemplateContent">
        <!-- Belanja - Pengajuan -->
        <div class="tab-pane fade show active" id="pane-belanja-pengajuan" role="tabpanel">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label small fw-semibold"><i class="bi bi-whatsapp text-success me-1"></i>Template WhatsApp</label>
              <textarea id="tmpl-belanja-pengajuan-wa" class="form-control form-control-sm font-monospace" rows="8" placeholder="Template pesan WA untuk pengajuan belanja...">{{ settings.get('tmpl_belanja_pengajuan_wa', '') }}</textarea>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold"><i class="bi bi-telegram text-info me-1"></i>Template Telegram (HTML)</label>
              <textarea id="tmpl-belanja-pengajuan-tg" class="form-control form-control-sm font-monospace" rows="8" placeholder="Template pesan Telegram untuk pengajuan belanja...">{{ settings.get('tmpl_belanja_pengajuan_tg', '') }}</textarea>
            </div>
          </div>
        </div>
        <!-- Belanja - Validasi -->
        <div class="tab-pane fade" id="pane-belanja-validasi" role="tabpanel">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label small fw-semibold"><i class="bi bi-whatsapp text-success me-1"></i>Template WhatsApp</label>
              <textarea id="tmpl-belanja-validasi-wa" class="form-control form-control-sm font-monospace" rows="8" placeholder="Template pesan WA untuk validasi belanja...">{{ settings.get('tmpl_belanja_validasi_wa', '') }}</textarea>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold"><i class="bi bi-telegram text-info me-1"></i>Template Telegram (HTML)</label>
              <textarea id="tmpl-belanja-validasi-tg" class="form-control form-control-sm font-monospace" rows="8" placeholder="Template pesan Telegram untuk validasi belanja...">{{ settings.get('tmpl_belanja_validasi_tg', '') }}</textarea>
            </div>
          </div>
        </div>
        <!-- Operasional - Pengajuan -->
        <div class="tab-pane fade" id="pane-ops-pengajuan" role="tabpanel">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label small fw-semibold"><i class="bi bi-whatsapp text-success me-1"></i>Template WhatsApp</label>
              <textarea id="tmpl-ops-pengajuan-wa" class="form-control form-control-sm font-monospace" rows="8" placeholder="Template pesan WA untuk pengajuan operasional...">{{ settings.get('tmpl_ops_pengajuan_wa', '') }}</textarea>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold"><i class="bi bi-telegram text-info me-1"></i>Template Telegram (HTML)</label>
              <textarea id="tmpl-ops-pengajuan-tg" class="form-control form-control-sm font-monospace" rows="8" placeholder="Template pesan Telegram untuk pengajuan operasional...">{{ settings.get('tmpl_ops_pengajuan_tg', '') }}</textarea>
            </div>
          </div>
        </div>
        <!-- Operasional - Validasi -->
        <div class="tab-pane fade" id="pane-ops-validasi" role="tabpanel">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label small fw-semibold"><i class="bi bi-whatsapp text-success me-1"></i>Template WhatsApp</label>
              <textarea id="tmpl-ops-validasi-wa" class="form-control form-control-sm font-monospace" rows="8" placeholder="Template pesan WA untuk validasi operasional...">{{ settings.get('tmpl_ops_validasi_wa', '') }}</textarea>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold"><i class="bi bi-telegram text-info me-1"></i>Template Telegram (HTML)</label>
              <textarea id="tmpl-ops-validasi-tg" class="form-control form-control-sm font-monospace" rows="8" placeholder="Template pesan Telegram untuk validasi operasional...">{{ settings.get('tmpl_ops_validasi_tg', '') }}</textarea>
            </div>
          </div>
        </div>
      </div>

      <div class="alert alert-light border small mt-3 mb-0 py-2">
        <i class="bi bi-info-circle me-1 text-primary"></i>
        <strong>Variabel yang tersedia:</strong>
        <code>{nama_dapur}</code> <code>{penerima}</code> <code>{nominal}</code> <code>{tanggal}</code>
        <code>{kategori}</code> <code>{keperluan}</code> <code>{validator}</code> <code>{waktu}</code> <code>{no_rek}</code>
        &mdash; Jika template kosong, sistem akan menggunakan format otomatis bawaan.
      </div>
    </div>
    <div class="card-footer bg-light d-flex justify-content-end gap-2">
      <button type="button" class="btn btn-sm btn-outline-secondary" onclick="resetTemplateDefault()">
        <i class="bi bi-arrow-counterclockwise me-1"></i>Reset ke Default
      </button>
      <button type="button" class="btn btn-sm btn-success" onclick="simpanTemplateNotif()">
        <i class="bi bi-save me-1"></i>Simpan Template
      </button>
    </div>
  </div>
  {% endif %}

  <!-- Tombol Simpan -->
  {% if can('peng_identitas_dapur') or can('peng_notifikasi') %}
  <div class="d-flex justify-content-end gap-2 mb-4">
    <span class="badge bg-success saved-badge align-self-center py-2 px-3" id="saved-badge">
      <i class="bi bi-check2-circle me-1"></i>Tersimpan!
    </span>
    <button type="button" class="btn btn-primary px-4" onclick="simpanPengaturan()">
      <i class="bi bi-save me-2"></i>Simpan Pengaturan
    </button>
  </div>
  {% endif %}

</form>

<!-- ── Manajemen Dapur ── -->
{% if can('peng_daftar_dapur') %}
<div class="card mb-4" id="card-dapur">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-buildings me-2"></i>Daftar Dapur / Unit</span>
    <button class="btn btn-sm btn-primary" onclick="bukaModalDapur()">
      <i class="bi bi-plus-circle me-1"></i> Tambah Dapur
    </button>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0" id="tbl-dapur">
        <thead class="table-light">
          <tr>
            <th style="width: 50px;">Urut</th>
            <th>Nama Dapur</th>
            <th>Kode</th>
            <th>Rekening / No. VA</th>
            <th class="text-end">Sisa Saldo VA</th>
            <th>No. WA (Ka SPPG / Akuntan) & Toggle Notif</th>
            <th class="text-center" style="width: 90px;">Status</th>
            <th class="text-end" style="width: 110px;">Aksi</th>
          </tr>
        </thead>        <tbody id="tbody-dapur">
          <!-- Diisi via JS -->
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer small text-muted">
    <i class="bi bi-info-circle me-1"></i> Dapur yang aktif akan otomatis muncul sebagai pilihan tab di menu <strong>Validasi Belanja</strong> dan <strong>Operasional</strong>.
  </div>
</div>
{% endif %}

<!-- ── Manajemen Kategori Pengajuan ── -->
{% if can('peng_kategori') %}
<div class="card mb-4" id="card-kategori">
  <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
      <i class="bi bi-tags me-2"></i>Kategori Pengajuan
    </div>
    <div class="d-flex align-items-center gap-2">
      <div class="btn-group btn-group-sm" role="group">
        <button type="button" class="btn btn-outline-secondary active kat-filter-btn" onclick="filterJenisKategori('', this)">Semua</button>
        <button type="button" class="btn btn-outline-secondary kat-filter-btn" onclick="filterJenisKategori('BARANG', this)">Bahan / Barang</button>
        <button type="button" class="btn btn-outline-secondary kat-filter-btn" onclick="filterJenisKategori('OPERASIONAL', this)">Operasional</button>
      </div>
      <button class="btn btn-sm btn-primary" onclick="bukaModalKategori()">
        <i class="bi bi-plus-circle me-1"></i> Tambah Kategori
      </button>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0" id="tbl-kategori">
        <thead class="table-light">
          <tr>
            <th style="width: 50px;">Urut</th>
            <th>Nama Kategori</th>
            <th>Jenis</th>
            <th>Deskripsi / Catatan</th>
            <th class="text-center" style="width: 100px;">Status</th>
            <th class="text-end" style="width: 110px;">Aksi</th>
          </tr>
        </thead>        <tbody id="tbody-kategori">
          <!-- Diisi via JS -->
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer small text-muted">
    <i class="bi bi-info-circle me-1"></i> Kategori <strong>Bahan / Barang</strong> digunakan pada Buat Pengajuan & Pemasok. Kategori <strong>Operasional</strong> digunakan pada halaman Operasional.
  </div>
</div>
{% endif %}

<!-- ── Manajemen Akun & Pengguna ── -->
<div class="card mb-4" id="card-users">
  <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
      <i class="bi bi-people-fill me-2 text-primary"></i>Manajemen Akun & Pengguna (Multi-Role)
    </div>
    {% if not current_user or current_user.role == 'super_admin' %}
    <button class="btn btn-sm btn-primary" onclick="bukaModalUser()">
      <i class="bi bi-person-plus me-1"></i> Tambah Pengguna Baru
    </button>
    {% endif %}
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0" id="tbl-users">
        <thead class="table-light">
          <tr>
            <th>Username</th>
            <th>Nama Lengkap</th>
            <th>Peran / Role</th>
            <th>Unit Dapur Terikat</th>
            <th class="text-center" style="width: 90px;">Status</th>
            <th class="text-end" style="width: 110px;">Aksi</th>
          </tr>
        </thead>        <tbody id="tbody-users">
          <tr><td colspan="6" class="text-center text-muted py-3 small">Memuat data pengguna...</td></tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer small text-muted">
    <i class="bi bi-shield-lock me-1"></i> <strong>Role Guidance</strong>: 
    <span class="badge bg-primary">Super Admin</span> = Akses penuh ke seluruh menu & data. 
    <span class="badge bg-success">Validator</span> = Hak validasi & persetujuan keuangan. 
    <span class="badge bg-warning text-dark">Admin Dapur</span> = Input dibatasi khusus dapurnya sendiri. 
    <span class="badge bg-secondary">Viewer</span> = Akses monitoring (Read-Only).
  </div>
</div>

<!-- Preview nama dapur live -->
<div class="card mt-4" id="preview-card">
  <div class="card-header py-2 small fw-bold text-muted">
    <i class="bi bi-eye me-1"></i>Preview — Header Dokumen
  </div>
  <div class="card-body text-center py-3" style="background:#f8fafc;">
    <div class="fw-bold fs-5" id="prev-nama-dapur">{{ settings.get('nama_dapur','SPPG SENDANGREJO') }}</div>
    <div class="text-muted small" id="prev-pengelola">{{ settings.get('nama_pengelola','') }}</div>
    <div class="text-muted small" id="prev-alamat">{{ settings.get('alamat_dapur','') }}</div>
    <div class="text-muted small" id="prev-telp">{{ settings.get('no_telepon','') }}</div>
  </div>
</div>

{% if can('peng_reset_data') or (current_user and current_user.role == 'super_admin') %}
<!-- ── MANAJEMEN DATABASE: BACKUP, DOWNLOAD & RESTORE DATABASE ── -->
<div class="card mt-4 border-primary shadow-sm" id="card-backup-restore-db" style="border-radius: 12px; overflow: hidden;">
  <div class="card-header bg-primary text-white py-2 px-3 d-flex justify-content-between align-items-center">
    <span class="fw-bold"><i class="bi bi-database-fill-gear me-2"></i>Cadangan & Pemulihan Database (Backup, Unduh & Restore)</span>
    <span class="badge bg-white text-primary fw-bold font-monospace" style="font-size: 0.72rem;">SISTEM KEAMANAN DATABASE</span>
  </div>
  <div class="card-body p-3">
    <p class="text-muted small mb-3">
      Kelola salinan basis data SQLite aplikasi (<code>pengajuan.db</code>) secara mandiri. Anda dapat membuat snapshot cadangan di server, mengunduh file database ke komputer lokal, atau memulihkan (restore) data dari file cadangan sebelumnya.
    </p>

    <div class="row g-3">
      <!-- Panel 1: Buat Snapshot & Unduh Database -->
      <div class="col-md-6">
        <div class="p-3 border rounded-3 bg-light h-100 d-flex flex-column justify-content-between">
          <div>
            <h6 class="fw-bold text-dark d-flex align-items-center mb-2">
              <i class="bi bi-cloud-arrow-down-fill text-primary me-2"></i>Backup & Download Database
            </h6>
            <p class="text-muted small mb-3">
              Buat snapshot cadangan instan yang disimpan di server atau langsung unduh file <code>.db</code> lengkap untuk disimpan di perangkat lokal Anda.
            </p>
          </div>
          <div class="d-flex flex-wrap gap-2 pt-2 border-top">
            <button type="button" class="btn btn-outline-primary btn-sm fw-semibold" id="btnSnapshotDb" onclick="jalankanSnapshotDb()">
              <i class="bi bi-camera-fill me-1"></i> Buat Snapshot di Server
            </button>
            <a href="/api/system/backup-db" class="btn btn-success btn-sm fw-semibold text-white">
              <i class="bi bi-download me-1"></i> Unduh Database (.db)
            </a>
          </div>
        </div>
      </div>

      <!-- Panel 2: Restore / Pulihkan Database -->
      <div class="col-md-6">
        <div class="p-3 border rounded-3 bg-light h-100 d-flex flex-column justify-content-between">
          <div>
            <h6 class="fw-bold text-danger d-flex align-items-center mb-2">
              <i class="bi bi-arrow-repeat text-danger me-2"></i>Restore / Pulihkan Database
            </h6>
            <p class="text-muted small mb-2">
              Unggah file database (<code>.db</code>) cadangan atau pilih dari riwayat snapshot server.
            </p>
            <div class="alert alert-warning py-1 px-2 mb-2 small border-0" style="font-size:0.75rem;">
              <i class="bi bi-exclamation-triangle-fill text-warning me-1"></i>
              <strong>Perhatian:</strong> Restore akan menimpa seluruh data transaksi, pengaturan, dan akun dengan data dari file cadangan!
            </div>
          </div>
          <div class="pt-2 border-top">
            <button type="button" class="btn btn-danger btn-sm fw-semibold" onclick="bukaModalRestoreDb()">
              <i class="bi bi-upload me-1"></i> Restore Database Sekarang
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Riwayat Snapshot Cadangan Server -->
    <div class="mt-4 pt-3 border-top">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="small fw-bold text-dark"><i class="bi bi-clock-history me-1"></i>Daftar Snapshot Cadangan di Server (/backups)</span>
        <button type="button" class="btn btn-outline-secondary btn-sm py-0 px-2" style="font-size:0.75rem;" onclick="muatDaftarSnapshotServer()">
          <i class="bi bi-arrow-clockwise me-1"></i>Refresh Daftar
        </button>
      </div>
      <div class="table-responsive" style="max-height: 180px; overflow-y: auto;">
        <table class="table table-sm table-hover align-middle mb-0" style="font-size: 0.8rem;">
          <thead class="table-light">
            <tr>
              <th>Nama File Snapshot</th>
              <th>Ukuran</th>
              <th>Waktu Dibuat</th>
              <th class="text-end">Aksi</th>
            </tr>
          </thead>
          <tbody id="tbody-snapshot-list">
            <tr><td colspan="4" class="text-center text-muted py-2">Memuat daftar snapshot...</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal Restore Database -->
<div class="modal fade" id="modalRestoreDb" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-danger shadow">
      <div class="modal-header bg-danger text-white py-2 px-3">
        <h6 class="modal-title fw-bold"><i class="bi bi-exclamation-triangle-fill me-2"></i>Konfirmasi Restore Database</h6>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-3">
        <div class="alert alert-danger small py-2 px-3 mb-3 border-0">
          <strong>Peringatan Serius:</strong> Tindakan ini akan menggantikan seluruh database aktif saat ini. Sistem secara otomatis membuat cadangan pengaman (safety backup) sebelum proses penimpaan dilakukan.
        </div>

        <!-- Tab Sumber Restore -->
        <ul class="nav nav-pills nav-fill mb-3" id="tabRestoreSource" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active py-1 small fw-semibold" id="tab-res-upload" data-bs-toggle="pill" data-bs-target="#pane-res-upload" type="button" role="tab">
              <i class="bi bi-file-earmark-arrow-up me-1"></i>Upload File .db
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link py-1 small fw-semibold" id="tab-res-server" data-bs-toggle="pill" data-bs-target="#pane-res-server" type="button" role="tab">
              <i class="bi bi-hdd-network me-1"></i>Pilih Dari Server
            </button>
          </li>
        </ul>

        <div class="tab-content mb-3" id="tabRestoreContent">
          <!-- Opsi 1: Upload File -->
          <div class="tab-pane fade show active" id="pane-res-upload" role="tabpanel">
            <label class="form-label small fw-bold mb-1">Pilih File Database SQLite (.db / .sqlite):</label>
            <input type="file" id="restore-file-input" class="form-control form-control-sm" accept=".db,.sqlite,.sqlite3">
            <div class="form-text small" style="font-size:0.72rem;">Unggah berkas database yang sebelumnya telah Anda unduh.</div>
          </div>
          <!-- Opsi 2: Dari Server -->
          <div class="tab-pane fade" id="pane-res-server" role="tabpanel">
            <label class="form-label small fw-bold mb-1">Pilih File Snapshot Cadangan di Server:</label>
            <select id="restore-server-select" class="form-select form-select-sm">
              <option value="">-- Pilih Berkas Cadangan --</option>
            </select>
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label small fw-bold text-danger mb-1">
            <i class="bi bi-key-fill me-1"></i>Masukkan Password Akun Anda (Konfirmasi Keamanan):
          </label>
          <input type="password" id="restore-password-input" class="form-control form-control-sm" placeholder="Password Super Admin">
        </div>
      </div>
      <div class="modal-footer bg-light py-2 px-3">
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-sm btn-danger fw-bold" id="btnEksekusiRestore" onclick="jalankanRestoreDb()">
          <i class="bi bi-arrow-repeat me-1"></i> Pulihkan Database Sekarang
        </button>
      </div>
    </div>
  </div>
</div>

<!-- ── ZONA BAHAYA: PENGATURAN RESET DATA TRANSAKSI & ANALISA ── -->
<div class="card mt-4 border-danger shadow-sm" id="card-reset-data" style="border-radius: 12px; overflow: hidden;">
  <div class="card-header bg-danger text-white py-2 px-3 d-flex justify-content-between align-items-center">
    <span class="fw-bold"><i class="bi bi-shield-exclamation me-2"></i>Zona Bahaya: Pengaturan Reset Data Transaksi & Analisa</span>
    <span class="badge bg-white text-danger fw-bold font-monospace" style="font-size: 0.72rem;">KHUSUS SUPER ADMIN</span>
  </div>
  <div class="card-body p-3">
    
    <div class="alert alert-warning d-flex align-items-start gap-2 mb-3 py-2 px-3 small border-0" style="background: #fffbeb; color: #92400e; border-radius: 8px;">
      <i class="bi bi-info-circle-fill fs-5 flex-shrink-0 text-warning"></i>
      <div>
        <strong>Pemberitahuan Keamanan:</strong> Fitur ini digunakan untuk membersihkan atau mengosongkan data transaksi dan riwayat analitik (misalnya saat selesai masa uji coba / simulasi atau memulai periode pembukuan baru).
        <ul class="mb-0 ps-3 mt-1">
          <li><strong>Data yang di-reset:</strong> Mutasi & Saldo VA, Catatan Belanja Bahan, Pengajuan Operasional, dan Pengajuan Belanja/SCM.</li>
          <li><strong>Data master AMAN (tidak akan terhapus):</strong> Akun Pengguna / User, Konfigurasi Pengaturan, Profil & Daftar Dapur, Pemasok Rekanan, dan Kategori Pengajuan.</li>
          <li><strong>Cadangan Otomatis:</strong> Sistem akan <strong>otomatis membuat file cadangan snapshot</strong> (di folder <code>backups/backup_before_reset_*.db</code>) sebelum penghapusan dilakukan.</li>
        </ul>
      </div>
    </div>

    <!-- Pilihan Scope Dapur -->
    <div class="row g-2 mb-3 align-items-center">
      <div class="col-md-5">
        <label class="form-label small fw-bold text-dark mb-1">Cakupan Unit Dapur yang Direset:</label>
        <select id="reset-target-dapur" class="form-select form-select-sm">
          <option value="all">🌐 Seluruh Unit Dapur (Global)</option>
          {% for d in dapur_list %}
          <option value="{{ d.id }}">🍳 Khusus Dapur: {{ d.nama }}</option>
          {% endfor %}
        </select>
        <div class="form-text small" style="font-size:0.7rem;">Pilih apakah ingin mereset seluruh unit atau dapur tertentu saja</div>
      </div>
      <div class="col-md-7 text-md-end mt-2 mt-md-0">
        <div class="btn-group btn-group-sm">
          <button type="button" class="btn btn-outline-secondary" onclick="pilihSemuaModulReset(true)">Pilih Semua</button>
          <button type="button" class="btn btn-outline-secondary" onclick="pilihSemuaModulReset(false)">Kosongkan Pilihan</button>
        </div>
      </div>
    </div>

    <!-- Pilihan Modul Data Checkbox Grid -->
    <div class="row g-2 mb-3">
      
      <!-- 1. Analisa Saldo VA -->
      <div class="col-md-6">
        <div class="p-2 border rounded-3 bg-light h-100">
          <div class="form-check form-switch mb-1">
            <input class="form-check-input chk-reset-modul" type="checkbox" id="chk-reset-va" value="va" checked>
            <label class="form-check-label fw-bold small text-dark" for="chk-reset-va">
              <i class="bi bi-bank text-primary me-1"></i>Reset Saldo & Mutasi VA
            </label>
          </div>
          <small class="text-muted d-block ps-4" style="font-size:0.72rem;">Mengosongkan buku kas mutasi VA dan mengembalikan saldo VA ke Rp 0.</small>
        </div>
      </div>

      <!-- 2. Validasi Belanja -->
      <div class="col-md-6">
        <div class="p-2 border rounded-3 bg-light h-100">
          <div class="form-check form-switch mb-1">
            <input class="form-check-input chk-reset-modul" type="checkbox" id="chk-reset-belanja" value="belanja" checked>
            <label class="form-check-label fw-bold small text-dark" for="chk-reset-belanja">
              <i class="bi bi-cart-check text-success me-1"></i>Reset Validasi Belanja Pemasok
            </label>
          </div>
          <small class="text-muted d-block ps-4" style="font-size:0.72rem;">Menghapus riwayat transaksi belanja harian bahan makanan ke rekanan.</small>
        </div>
      </div>

      <!-- 3. Pengajuan Operasional -->
      <div class="col-md-6">
        <div class="p-2 border rounded-3 bg-light h-100">
          <div class="form-check form-switch mb-1">
            <input class="form-check-input chk-reset-modul" type="checkbox" id="chk-reset-ops" value="operasional" checked>
            <label class="form-check-label fw-bold small text-dark" for="chk-reset-ops">
              <i class="bi bi-wallet2 text-warning me-1"></i>Reset Pengajuan Operasional
            </label>
          </div>
          <small class="text-muted d-block ps-4" style="font-size:0.72rem;">Menghapus arsip pengajuan biaya operasional (gas LPG, bensin, upah, listrik).</small>
        </div>
      </div>

      <!-- 4. Analitik & SCM -->
      <div class="col-md-6">
        <div class="p-2 border rounded-3 bg-light h-100">
          <div class="form-check form-switch mb-1">
            <input class="form-check-input chk-reset-modul" type="checkbox" id="chk-reset-analitik" value="analitik" checked>
            <label class="form-check-label fw-bold small text-dark" for="chk-reset-analitik">
              <i class="bi bi-graph-up-arrow text-info me-1"></i>Reset Analitik & Analisa SCM
            </label>
          </div>
          <small class="text-muted d-block ps-4" style="font-size:0.72rem;">Menghapus dokumen pengajuan belanja bahan yang menjadi dasar analitik BI & SCM.</small>
        </div>
      </div>

    </div>

    <!-- Tombol Eksekusi -->
    <div class="d-flex justify-content-between align-items-center pt-2 border-top">
      <small class="text-danger fw-semibold" style="font-size:0.75rem;">
        <i class="bi bi-exclamation-triangle-fill me-1"></i>Verifikasi password super admin wajib diisi sebelum eksekusi
      </small>
      <button type="button" class="btn btn-sm btn-danger fw-bold px-3 shadow-sm" onclick="bukaModalKonfirmasiReset()">
        <i class="bi bi-trash3-fill me-1"></i> Eksekusi Reset Data...
      </button>
    </div>

  </div>
</div>
{% endif %}

</div>
</div>

<!-- ── MODAL TAMBAH / EDIT DAPUR ── -->
<div class="modal fade" id="modalDapur" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title mb-0" id="modalDapurTitle">Tambah Dapur</h6>
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="dapur-id">
        <div class="mb-3">
          <label class="form-label small fw-semibold">Nama Dapur <span class="text-danger">*</span></label>
          <input type="text" id="dapur-nama" class="form-control form-control-sm" placeholder="Contoh: Dapur Sendangrejo">
        </div>
        <div class="row g-2 mb-3">
          <div class="col-6">
            <label class="form-label small fw-semibold">Kode Singkat</label>
            <input type="text" id="dapur-kode" class="form-control form-control-sm" placeholder="Contoh: SDR">
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold">Urutan Tab</label>
            <input type="number" id="dapur-urutan" class="form-control form-control-sm" value="1" min="0">
          </div>
        </div>
        <div class="row g-2 mb-3">
          <div class="col-6">
            <label class="form-label small fw-semibold"><i class="bi bi-credit-card-2-front text-primary me-1"></i>Nomor Rekening / VA</label>
            <input type="text" id="dapur-nomor-va" class="form-control form-control-sm font-monospace" placeholder="Contoh: 880812345678">
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold"><i class="bi bi-wallet2 text-success me-1"></i>Saldo VA Awal / Top-up (Rp)</label>
            <input type="number" id="dapur-saldo-va" class="form-control form-control-sm font-monospace" placeholder="0" min="0" step="1000">
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label small fw-semibold">Alamat</label>
          <textarea id="dapur-alamat" class="form-control form-control-sm" rows="2" placeholder="Alamat fisik dapur (opsional)"></textarea>
        </div>
        <div class="mb-3">
          <label class="form-label small fw-semibold"><i class="bi bi-whatsapp text-success me-1"></i>No. WhatsApp Ka SPPG / Admin Utama Dapur</label>
          <input type="text" id="dapur-no-wa" class="form-control form-control-sm font-monospace" placeholder="Contoh: 08123456789">
          <div class="form-text small">Nomor Ka SPPG/Admin yang menerima notifikasi pengajuan & validasi dapur ini.</div>
        </div>
        <div class="mb-3">
          <label class="form-label small fw-semibold"><i class="bi bi-whatsapp text-success me-1"></i>No. WhatsApp Akuntan Dapur <span class="badge bg-secondary" style="font-size:0.65rem;">Opsional</span></label>
          <input type="text" id="dapur-no-wa-akuntan" class="form-control form-control-sm font-monospace" placeholder="Contoh: 08129876543">
          <div class="form-text small">Nomor Akuntan yang menerima salinan notifikasi dari dapur ini.</div>
        </div>
        <div class="p-2 bg-light rounded-3 border mb-3">
          <div class="small fw-semibold text-muted mb-2"><i class="bi bi-toggles me-1"></i>Toggle Pengiriman Notifikasi</div>
          <div class="form-check form-switch mb-1">
            <input class="form-check-input" type="checkbox" id="dapur-notif-pengajuan" checked>
            <label class="form-check-label small" for="dapur-notif-pengajuan">
              <i class="bi bi-bell text-warning me-1"></i>Kirim notifikasi saat <strong>Pengajuan Baru</strong>
            </label>
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="dapur-notif-validasi" checked>
            <label class="form-check-label small" for="dapur-notif-validasi">
              <i class="bi bi-check-circle text-success me-1"></i>Kirim notifikasi saat <strong>Divalidasi / Disetujui</strong>
            </label>
          </div>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="dapur-aktif" checked>
          <label class="form-check-label small" for="dapur-aktif">Dapur Aktif (tampil di sistem)</label>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-sm btn-primary" id="btn-save-dapur" onclick="simpanDapur()">
          <i class="bi bi-save me-1"></i> Simpan Dapur
        </button>
      </div>
    </div>
  </div>
</div>

<!-- ── MODAL TAMBAH / EDIT KATEGORI ── -->
<div class="modal fade" id="modalKategori" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title mb-0" id="modalKategoriTitle">Tambah Kategori Pengajuan</h6>
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="kat-id">
        <div class="mb-3">
          <label class="form-label small fw-semibold">Nama Kategori <span class="text-danger">*</span></label>
          <input type="text" id="kat-nama" class="form-control form-control-sm" placeholder="Contoh: Gas LPG / SAYUR">
        </div>
        <div class="row g-2 mb-3">
          <div class="col-6">
            <label class="form-label small fw-semibold">Jenis Pengajuan <span class="text-danger">*</span></label>
            <select id="kat-jenis" class="form-select form-select-sm">
              <option value="BARANG">Bahan Baku / Barang</option>
              <option value="OPERASIONAL">Biaya Operasional</option>
            </select>
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold">Urutan Tampilan</label>
            <input type="number" id="kat-urutan" class="form-control form-control-sm" value="1" min="0">
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label small fw-semibold">Deskripsi / Contoh Item</label>
          <input type="text" id="kat-deskripsi" class="form-control form-control-sm" placeholder="Contoh: Kebutuhan bahan pangan harian">
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="kat-aktif" checked>
          <label class="form-check-label small" for="kat-aktif">Kategori Aktif (dapat dipilih di form pengajuan)</label>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-sm btn-primary" id="btn-save-kat" onclick="simpanKategori()">
          <i class="bi bi-save me-1"></i> Simpan Kategori
        </button>
      </div>
    </div>
  </div>
</div>

<!-- ── MODAL TAMBAH / EDIT PENGGUNA ── -->
<div class="modal fade" id="modalUser" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2" style="background: linear-gradient(135deg,#1F4E79,#2E75B6); color:#fff;">
        <h6 class="modal-title mb-0" id="modalUserTitle"><i class="bi bi-person-gear me-2"></i>Tambah Pengguna Baru</h6>
        <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="user-id">
        <div class="mb-2">
          <label class="form-label small fw-semibold">Username <span class="text-danger">*</span></label>
          <input type="text" id="user-username" class="form-control form-control-sm font-monospace" placeholder="Contoh: adminbaturetno">
          <div class="form-text small">Huruf kecil tanpa spasi, digunakan untuk login.</div>
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Nama Lengkap & Gelar <span class="text-danger">*</span></label>
          <input type="text" id="user-nama" class="form-control form-control-sm" placeholder="Contoh: Budi Santoso, S.Kom">
        </div>
        <div class="row g-2 mb-2">
          <div class="col-6">
            <label class="form-label small fw-semibold">Peran / Role <span class="text-danger">*</span></label>
            <select id="user-role" class="form-select form-select-sm" onchange="onRoleChange()">
              <option value="super_admin">👑 Super Admin</option>
              <option value="validator">🛡️ Validator / Bendahara</option>
              <option value="admin_dapur" selected>🍳 Admin Unit Dapur</option>
              <option value="viewer">👀 Viewer (Read-Only)</option>
            </select>
          </div>
          <div class="col-6" id="wrap-user-dapur">
            <label class="form-label small fw-semibold">Unit Dapur <span class="text-danger">*</span></label>
            <select id="user-dapur" class="form-select form-select-sm">
              <option value="">-- Bebas / Lintas Dapur --</option>
            </select>
          </div>
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Password <span class="text-danger" id="req-pwd">*</span></label>
          <input type="password" id="user-password" class="form-control form-control-sm" placeholder="Minimal 4 karakter">
          <div class="form-text small" id="hint-pwd">Kosongkan jika tidak ingin mengubah password saat edit.</div>
        </div>
        <div class="form-check form-switch mt-3">
          <input class="form-check-input" type="checkbox" id="user-aktif" checked>
          <label class="form-check-label small fw-semibold" for="user-aktif">Akun Aktif (Dapat Login)</label>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-sm btn-primary" id="btn-save-user" onclick="simpanUser()">
          <i class="bi bi-save me-1"></i> Simpan Akun
        </button>
      </div>
    </div>
  </div>
</div>

<!-- ── MODAL KONFIRMASI RESET DATA (DANGER ZONE) ── -->
<div class="modal fade" id="modalKonfirmasiReset" tabindex="-1" aria-labelledby="modalKonfirmasiResetLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content shadow border-0" style="border-radius: 12px; overflow: hidden;">
      <div class="modal-header bg-danger text-white py-2 px-3">
        <h6 class="modal-title fw-bold mb-0" id="modalKonfirmasiResetLabel">
          <i class="bi bi-shield-lock-fill me-2"></i>Konfirmasi Otorisasi Reset Data
        </h6>
        <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-3">
        <p class="small text-secondary mb-2">Anda akan melakukan reset data untuk modul-modul berikut:</p>
        <div id="reset-summary-badge-list" class="d-flex flex-wrap gap-1 mb-3"></div>

        <div class="p-2 mb-3 bg-light rounded-3 small border">
          <div class="d-flex justify-content-between">
            <span class="text-muted">Target Unit:</span>
            <span class="fw-bold text-dark font-monospace" id="modal-reset-target-label">-</span>
          </div>
          <div class="d-flex justify-content-between mt-1">
            <span class="text-muted">Snapshot Cadangan:</span>
            <span class="fw-bold text-success"><i class="bi bi-check-circle me-1"></i>Otomatis dibuat</span>
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label small fw-bold text-dark">Password Super Admin <span class="text-danger">*</span></label>
          <input type="password" id="reset-password-confirm" class="form-control form-control-sm" placeholder="Masukkan password akun Anda saat ini" required>
          <div class="form-text small" style="font-size:0.72rem;">Diperlukan untuk memvalidasi bahwa Anda adalah pemegang hak akses sah.</div>
        </div>

        <div class="form-check mb-2">
          <input class="form-check-input" type="checkbox" id="chk-paham-resiko">
          <label class="form-check-label small text-danger fw-semibold" for="chk-paham-resiko">
            Saya memahami dan mengonfirmasi penghapusan data transaksi yang dipilih.
          </label>
        </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-danger fw-bold px-3" id="btn-proses-reset" onclick="prosesEksekusiReset()">
          <i class="bi bi-check-lg me-1"></i> Ya, Jalankan Reset 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 daftarDapur    = {{ dapur_json | tojson if dapur_json is defined else '[]' | safe }};
let daftarKategori = {{ kategori_json | tojson if kategori_json is defined else '[]' | safe }};
let filterJenisKat = '';

const modalDapur    = new bootstrap.Modal(document.getElementById('modalDapur'));
const modalKategori = new bootstrap.Modal(document.getElementById('modalKategori'));

  // ── MANAJEMEN DAPUR ──
function renderTabelDapur() {
  const tbody = document.getElementById('tbody-dapur');
  if (!daftarDapur.length) {
    tbody.innerHTML = `<tr><td colspan="8" class="text-center text-muted py-4">Belum ada data dapur. Klik "+ Tambah Dapur" untuk membuat.</td></tr>`;
    return;
  }
  tbody.innerHTML = daftarDapur.map((d, idx) => {
    const badgeAktif = d.aktif
      ? `<span class="badge bg-success" style="font-size:0.75rem;"><i class="bi bi-check-circle me-1"></i>Aktif</span>`
      : `<span class="badge bg-secondary" style="font-size:0.75rem;">Nonaktif</span>`;
    const saldoFmt = (d.saldo_va || 0).toLocaleString('id-ID');

    const noWaBadge = d.no_wa
      ? `<div class="d-flex align-items-center gap-1 mb-1"><span class="badge bg-success-subtle text-success border border-success-subtle font-monospace"><i class="bi bi-whatsapp me-1"></i>${d.no_wa}</span><small class="text-muted" style="font-size:0.65rem;">Ka SPPG</small></div>`
      : '';
    const noWaAkuntanBadge = d.no_wa_akuntan
      ? `<div class="d-flex align-items-center gap-1"><span class="badge bg-info-subtle text-info border border-info-subtle font-monospace"><i class="bi bi-whatsapp me-1"></i>${d.no_wa_akuntan}</span><small class="text-muted" style="font-size:0.65rem;">Akuntan</small></div>`
      : '';

    const notifBadges = `
      <div class="d-flex flex-wrap gap-1 mt-1">
        ${d.notif_pengajuan_aktif !== false ? '<span class="badge bg-warning-subtle text-warning border border-warning-subtle" style="font-size:0.6rem;"><i class="bi bi-bell me-1"></i>Pengajuan</span>' : '<span class="badge bg-secondary-subtle text-muted border" style="font-size:0.6rem;"><i class="bi bi-bell-slash me-1"></i>Pengajuan</span>'}
        ${d.notif_validasi_aktif !== false ? '<span class="badge bg-success-subtle text-success border border-success-subtle" style="font-size:0.6rem;"><i class="bi bi-check-circle me-1"></i>Validasi</span>' : '<span class="badge bg-secondary-subtle text-muted border" style="font-size:0.6rem;"><i class="bi bi-x-circle me-1"></i>Validasi</span>'}
      </div>`;

    return `<tr>
      <td class="text-center text-muted fw-bold">${d.urutan || (idx + 1)}</td>
      <td>
        <span class="fw-semibold text-primary">${d.nama}</span>
      </td>
      <td><span class="badge bg-light text-dark border font-monospace">${d.kode || '-'}</span></td>
      <td>
        ${d.nomor_va ? `<span class="badge bg-light text-dark border font-monospace"><i class="bi bi-credit-card me-1"></i>${d.nomor_va}</span>` : '<span class="text-muted small">-</span>'}
      </td>
      <td class="text-end">
        <span class="fw-bold text-success font-monospace" style="font-size:0.85rem;">Rp ${saldoFmt}</span>
      </td>
      <td>
        ${noWaBadge}${noWaAkuntanBadge}
        ${(d.no_wa || d.no_wa_akuntan) ? notifBadges : '<span class="text-muted small">-</span>'}
      </td>
      <td class="text-center">${badgeAktif}</td>
      <td class="text-end">
        <button class="btn btn-xs btn-outline-warning btn-sm py-0 px-2" onclick="editDapur(${d.id})" title="Edit Dapur / Saldo VA">
          <i class="bi bi-pencil"></i>
        </button>
        <button class="btn btn-xs btn-outline-danger btn-sm py-0 px-2" onclick="hapusDapur(${d.id})" title="Hapus Dapur">
          <i class="bi bi-trash"></i>
        </button>
      </td>
    </tr>`;
  }).join('');
}

function bukaModalDapur() {
  document.getElementById('dapur-id').value = '';
  document.getElementById('dapur-nama').value = '';
  document.getElementById('dapur-kode').value = '';
  document.getElementById('dapur-urutan').value = (daftarDapur.length + 1);
  document.getElementById('dapur-alamat').value = '';
  document.getElementById('dapur-nomor-va').value = '';
  document.getElementById('dapur-saldo-va').value = '0';
  document.getElementById('dapur-no-wa').value = '';
  document.getElementById('dapur-no-wa-akuntan').value = '';
  document.getElementById('dapur-notif-pengajuan').checked = true;
  document.getElementById('dapur-notif-validasi').checked = true;
  document.getElementById('dapur-aktif').checked = true;
  document.getElementById('modalDapurTitle').textContent = 'Tambah Dapur Baru';
  modalDapur.show();
}

function editDapur(id) {
  const d = daftarDapur.find(x => x.id === id);
  if (!d) return;
  document.getElementById('dapur-id').value = d.id;
  document.getElementById('dapur-nama').value = d.nama;
  document.getElementById('dapur-kode').value = d.kode || '';
  document.getElementById('dapur-urutan').value = d.urutan || 1;
  document.getElementById('dapur-alamat').value = d.alamat || '';
  document.getElementById('dapur-nomor-va').value = d.nomor_va || '';
  document.getElementById('dapur-saldo-va').value = d.saldo_va || 0;
  document.getElementById('dapur-no-wa').value = d.no_wa || '';
  document.getElementById('dapur-no-wa-akuntan').value = d.no_wa_akuntan || '';
  document.getElementById('dapur-notif-pengajuan').checked = d.notif_pengajuan_aktif !== false;
  document.getElementById('dapur-notif-validasi').checked = d.notif_validasi_aktif !== false;
  document.getElementById('dapur-aktif').checked = Boolean(d.aktif);
  document.getElementById('modalDapurTitle').textContent = 'Edit Data Dapur & Saldo VA';
  modalDapur.show();
}

async function simpanDapur() {
  const id       = document.getElementById('dapur-id').value;
  const nama     = document.getElementById('dapur-nama').value.trim();
  const kode     = document.getElementById('dapur-kode').value.trim();
  const urutan   = parseInt(document.getElementById('dapur-urutan').value) || 0;
  const alamat   = document.getElementById('dapur-alamat').value.trim();
  const nomor_va = document.getElementById('dapur-nomor-va').value.trim();
  const saldo_va = parseFloat(document.getElementById('dapur-saldo-va').value) || 0.0;
  const no_wa    = document.getElementById('dapur-no-wa').value.trim();
  const no_wa_akuntan = document.getElementById('dapur-no-wa-akuntan').value.trim();
  const notif_pengajuan_aktif = document.getElementById('dapur-notif-pengajuan').checked;
  const notif_validasi_aktif  = document.getElementById('dapur-notif-validasi').checked;
  const aktif    = document.getElementById('dapur-aktif').checked;

  if (!nama) {
    Swal.fire({icon: 'warning', title: 'Nama Wajib Diisi', text: 'Nama dapur tidak boleh kosong.'});
    return;
  }

  const payload = { nama, kode, urutan, alamat, nomor_va, saldo_va, no_wa, no_wa_akuntan, notif_pengajuan_aktif, notif_validasi_aktif, aktif };
  const url = id ? `/api/dapur/${id}` : '/api/dapur';
  const method = id ? 'PUT' : 'POST';

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

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

    if (id) {
      const idx = daftarDapur.findIndex(x => x.id === parseInt(id));
      if (idx !== -1) daftarDapur[idx] = saved;
    } else {
      daftarDapur.push(saved);
    }
    daftarDapur.sort((a,b) => (a.urutan - b.urutan) || a.nama.localeCompare(b.nama));
    renderTabelDapur();
    modalDapur.hide();

    Swal.fire({icon: 'success', title: 'Berhasil!', text: 'Data dapur tersimpan.', timer: 1500, showConfirmButton: false});
  } catch (e) {
    Swal.fire({icon: 'error', title: 'Gagal', text: e.message});
  } finally {
    btn.disabled = false;
  }
}

async function hapusDapur(id) {
  const res = await Swal.fire({
    title: 'Hapus Dapur ini?',
    text: 'Catatan belanja pada dapur ini akan tetap tersimpan.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    confirmButtonText: 'Ya, Hapus',
    cancelButtonText: 'Batal'
  });
  if (!res.isConfirmed) return;

  try {
    const resp = await fetch(`/api/dapur/${id}`, { method: 'DELETE' });
    if (!resp.ok) throw new Error('Gagal menghapus');
    daftarDapur = daftarDapur.filter(x => x.id !== id);
    renderTabelDapur();
    Swal.fire({icon: 'success', title: 'Terhapus', timer: 1200, showConfirmButton: false});
  } catch (e) {
    Swal.fire({icon: 'error', title: 'Error', text: e.message});
  }
}

// ── MANAJEMEN KATEGORI PENGAJUAN ──
function filterJenisKategori(jenis, btn) {
  filterJenisKat = jenis;
  document.querySelectorAll('.kat-filter-btn').forEach(b => b.classList.remove('active'));
  if (btn) btn.classList.add('active');
  renderTabelKategori();
}

function renderTabelKategori() {
  const tbody = document.getElementById('tbody-kategori');
  let list = daftarKategori;
  if (filterJenisKat) {
    list = list.filter(k => k.jenis === filterJenisKat);
  }

  if (!list.length) {
    tbody.innerHTML = `<tr><td colspan="6" class="text-center text-muted py-4">Belum ada kategori yang sesuai.</td></tr>`;
    return;
  }

  tbody.innerHTML = list.map((k, idx) => {
    const badgeJenis = k.jenis === 'OPERASIONAL'
      ? `<span class="badge" style="background:#8b5cf6; color:#fff; font-size:0.75rem;"><i class="bi bi-wallet2 me-1"></i>Operasional</span>`
      : `<span class="badge bg-primary" style="font-size:0.75rem;"><i class="bi bi-box-seam me-1"></i>Barang / Pangan</span>`;

    const badgeAktif = k.aktif
      ? `<span class="badge bg-success" style="font-size:0.75rem;"><i class="bi bi-check-circle me-1"></i>Aktif</span>`
      : `<span class="badge bg-secondary" style="font-size:0.75rem;">Nonaktif</span>`;

    return `<tr>
      <td class="text-center text-muted fw-bold">${k.urutan || (idx + 1)}</td>
      <td>
        <span class="fw-semibold text-dark">${k.nama}</span>
      </td>
      <td>${badgeJenis}</td>
      <td class="small text-muted">${k.deskripsi || '-'}</td>
      <td class="text-center">${badgeAktif}</td>
      <td class="text-end">
        <button class="btn btn-xs btn-outline-warning btn-sm py-0 px-2" onclick="editKategori(${k.id})" title="Edit Kategori">
          <i class="bi bi-pencil"></i>
        </button>
        <button class="btn btn-xs btn-outline-danger btn-sm py-0 px-2" onclick="hapusKategori(${k.id})" title="Hapus Kategori">
          <i class="bi bi-trash"></i>
        </button>
      </td>
    </tr>`;
  }).join('');
}

function bukaModalKategori() {
  document.getElementById('kat-id').value = '';
  document.getElementById('kat-nama').value = '';
  document.getElementById('kat-jenis').value = filterJenisKat || 'BARANG';
  document.getElementById('kat-urutan').value = (daftarKategori.length + 1);
  document.getElementById('kat-deskripsi').value = '';
  document.getElementById('kat-aktif').checked = true;
  document.getElementById('modalKategoriTitle').textContent = 'Tambah Kategori Pengajuan';
  modalKategori.show();
}

function editKategori(id) {
  const k = daftarKategori.find(x => x.id === id);
  if (!k) return;
  document.getElementById('kat-id').value = k.id;
  document.getElementById('kat-nama').value = k.nama;
  document.getElementById('kat-jenis').value = k.jenis || 'BARANG';
  document.getElementById('kat-urutan').value = k.urutan || 1;
  document.getElementById('kat-deskripsi').value = k.deskripsi || '';
  document.getElementById('kat-aktif').checked = Boolean(k.aktif);
  document.getElementById('modalKategoriTitle').textContent = 'Edit Kategori Pengajuan';
  modalKategori.show();
}

async function simpanKategori() {
  const id        = document.getElementById('kat-id').value;
  const nama      = document.getElementById('kat-nama').value.trim();
  const jenis     = document.getElementById('kat-jenis').value;
  const urutan    = parseInt(document.getElementById('kat-urutan').value) || 0;
  const deskripsi = document.getElementById('kat-deskripsi').value.trim();
  const aktif     = document.getElementById('kat-aktif').checked;

  if (!nama) {
    Swal.fire({icon: 'warning', title: 'Nama Wajib Diisi', text: 'Nama kategori tidak boleh kosong.'});
    return;
  }

  const payload = { nama, jenis, urutan, deskripsi, aktif };
  const url = id ? `/api/kategori/${id}` : '/api/kategori';
  const method = id ? 'PUT' : 'POST';

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

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

    if (id) {
      const idx = daftarKategori.findIndex(x => x.id === parseInt(id));
      if (idx !== -1) daftarKategori[idx] = saved;
    } else {
      daftarKategori.push(saved);
    }
    daftarKategori.sort((a,b) => (a.urutan - b.urutan) || a.nama.localeCompare(b.nama));
    renderTabelKategori();
    modalKategori.hide();

    Swal.fire({icon: 'success', title: 'Berhasil!', text: 'Kategori pengajuan tersimpan.', timer: 1500, showConfirmButton: false});
  } catch (e) {
    Swal.fire({icon: 'error', title: 'Gagal', text: e.message});
  } finally {
    btn.disabled = false;
  }
}

async function hapusKategori(id) {
  const res = await Swal.fire({
    title: 'Hapus Kategori ini?',
    text: 'Pengajuan lama dengan kategori ini tidak akan terhapus.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    confirmButtonText: 'Ya, Hapus',
    cancelButtonText: 'Batal'
  });
  if (!res.isConfirmed) return;

  try {
    const resp = await fetch(`/api/kategori/${id}`, { method: 'DELETE' });
    if (!resp.ok) throw new Error('Gagal menghapus');
    daftarKategori = daftarKategori.filter(x => x.id !== id);
    renderTabelKategori();
    Swal.fire({icon: 'success', title: 'Terhapus', timer: 1200, showConfirmButton: false});
  } catch (e) {
    Swal.fire({icon: 'error', title: 'Error', text: e.message});
  }
}

// Live preview nama dapur
document.getElementById('s-nama-dapur').addEventListener('input', function() {
  document.getElementById('prev-nama-dapur').textContent = this.value || 'SPPG SENDANGREJO';
  document.querySelectorAll('.sidebar-brand h5').forEach(el => {
    el.innerHTML = `<i class="bi bi-grid-3x3-gap-fill me-1"></i> ${this.value || 'SPPG'}`;
  });
});

document.querySelector('[name=nama_pengelola]').addEventListener('input', function() {
  document.getElementById('prev-pengelola').textContent = this.value;
});
document.querySelector('[name=alamat_dapur]').addEventListener('input', function() {
  document.getElementById('prev-alamat').textContent = this.value;
});
document.querySelector('[name=no_telepon]').addEventListener('input', function() {
  document.getElementById('prev-telp').textContent = this.value;
});

// Simulasi potongan
function getFeeVal(name) {
  return parseInt(document.querySelector('[name=' + name + ']').value) || 0;
}
function fmt(n) {
  return 'Rp ' + n.toLocaleString('id-ID');
}
function updateSimulasi() {
  const total   = parseFloat(document.getElementById('sim-total').value) || 0;
  const feeBri  = getFeeVal('admin_fee_bri');
  const feeNon  = getFeeVal('admin_fee_non_bri');
  document.getElementById('sim-bri').textContent     = fmt(Math.max(0, total - feeBri));
  document.getElementById('sim-non-bri').textContent = fmt(Math.max(0, total - feeNon));
}
document.querySelectorAll('.fee-input').forEach(inp => {
  inp.addEventListener('input', updateSimulasi);
});
updateSimulasi();

// Simpan Pengaturan Umum
async function simpanPengaturan() {
  const form   = document.getElementById('form-pengaturan');
  const inputs = form.querySelectorAll('[name]');
  const payload = {};
  inputs.forEach(inp => {
    if (inp.type === 'checkbox') {
      payload[inp.name] = inp.checked ? '1' : '0';
    } else {
      payload[inp.name] = inp.value.trim();
    }
  });

  const btn = form.querySelector('button[type=button]');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Menyimpan...';

  try {
    const resp = await fetch('/api/pengaturan', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(payload)
    });
    if (!resp.ok) throw new Error('Gagal menyimpan');

    const badge = document.getElementById('saved-badge');
    badge.classList.add('show');
    setTimeout(() => badge.classList.remove('show'), 3000);
    Swal.fire({
      icon: 'success',
      title: 'Tersimpan!',
      text: 'Pengaturan identitas, admin fee, dan notifikasi berhasil diperbarui.',
      timer: 1500,
      showConfirmButton: false
    });
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal', text: e.message});
  } finally {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-save me-2"></i>Simpan Pengaturan';
  }
}

// ── TEST KONEKSI NOTIFIKASI ──

async function testKoneksiTelegram() {
  const token  = document.getElementById('s-tg-token').value.trim();
  const chatId = document.getElementById('s-tg-chat-id').value.trim();

  if (!token || !chatId) {
    Swal.fire({
      icon: 'warning',
      title: 'Data Belum Lengkap',
      text: 'Mohon isi Bot Token dan Chat ID Telegram terlebih dahulu.'
    });
    return;
  }

  const btn = document.getElementById('btn-test-tg');
  const origHtml = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Mengirim...';

  try {
    const res = await fetch('/api/notifications/test', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        channel: 'telegram',
        token: token,
        chat_id: chatId
      })
    });
    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Gagal mengirim');
    Swal.fire({
      icon: 'success',
      title: 'Berhasil Terhubung! 🚀',
      text: data.message
    });
  } catch(e) {
    Swal.fire({
      icon: 'error',
      title: 'Gagal Mengirim Telegram',
      html: `<div class="text-danger small">${e.message}</div><div class="mt-2 text-muted small">Pastikan Anda sudah mengklik <strong>/start</strong> di bot Telegram Anda atau bot sudah ditambahkan ke grup.</div>`
    });
  } finally {
    btn.disabled = false;
    btn.innerHTML = origHtml;
  }
}

async function testKoneksiWhatsApp() {
  const provider = document.getElementById('s-wa-provider').value;
  const url      = document.getElementById('s-wa-url').value.trim();
  const token    = document.getElementById('s-wa-token').value.trim();
  const target   = document.getElementById('s-wa-target').value.trim();

  if (!token || !target) {
    Swal.fire({
      icon: 'warning',
      title: 'Data Belum Lengkap',
      text: 'Mohon isi API Token dan Nomor/Grup Tujuan WhatsApp terlebih dahulu.'
    });
    return;
  }

  const btn = document.getElementById('btn-test-wa');
  const origHtml = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Mengirim...';

  try {
    const res = await fetch('/api/notifications/test', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        channel: 'whatsapp',
        provider: provider,
        url: url,
        token: token,
        target: target
      })
    });
    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Gagal mengirim');
    Swal.fire({
      icon: 'success',
      title: 'Berhasil Terhubung! 🚀',
      text: data.message
    });
  } catch(e) {
    Swal.fire({
      icon: 'error',
      title: 'Gagal Mengirim WhatsApp',
      html: `<div class="text-danger small">${e.message}</div><div class="mt-2 text-muted small">Pastikan API Key/Token valid dan device di dashboard gateway aktif (connected).</div>`
    });
  } finally {
    btn.disabled = false;
    btn.innerHTML = origHtml;
  }
}

async function broadcastRekapHariIni() {
  const confirm = await Swal.fire({
    title: 'Kirim Rekap Hari Ini?',
    text: 'Sistem akan mengirimkan rekapitulasi seluruh pengeluaran hari ini ke Telegram dan WhatsApp yang aktif.',
    icon: 'question',
    showCancelButton: true,
    confirmButtonText: 'Ya, Broadcast Sekarang',
    cancelButtonText: 'Batal'
  });
  if (!confirm.isConfirmed) return;

  const btn = document.getElementById('btn-broadcast-rekap');
  const origHtml = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Mengirim...';

  try {
    const res = await fetch('/api/notifications/send-daily-summary', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({})
    });
    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Gagal mengirim');
    Swal.fire({
      icon: 'success',
      title: 'Terkirim! 📊',
      text: data.message
    });
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal Broadcast', text: e.message});
  } finally {
    btn.disabled = false;
    btn.innerHTML = origHtml;
  }
}

// Inisialisasi daftar saat halaman dimuat
renderTabelDapur();
renderTabelKategori();

// ── TEMPLATE NOTIFIKASI ──
const TEMPLATE_DEFAULT = {
  'belanja-pengajuan-wa': `🔔 *PENGAJUAN BELANJA BAHAN BARU*

• *Unit Dapur:* {nama_dapur}
• *Tanggal:* {tanggal}
• *Kategori:* {kategori}
• *Penerima:* {penerima}
• *Net Transfer:* Rp {nominal} ke {no_rek}
• *Keterangan:* {keperluan}

_Menunggu verifikasi dan validasi bendahara._`,

  'belanja-pengajuan-tg': `🔔 <b>PENGAJUAN BELANJA BAHAN BARU</b>

• <b>Unit Dapur:</b> {nama_dapur}
• <b>Tanggal:</b> {tanggal}
• <b>Kategori:</b> {kategori}
• <b>Penerima:</b> {penerima}
• <b>Net Transfer:</b> Rp {nominal} ke {no_rek}
• <b>Keterangan:</b> {keperluan}

<i>Menunggu verifikasi dan validasi bendahara.</i>`,

  'belanja-validasi-wa': `✅ *VALIDASI BELANJA BAHAN DISETUJUI*

• *Unit Dapur:* {nama_dapur}
• *Penerima:* {penerima}
• *Kategori:* {kategori}
• *Net Transfer:* Rp {nominal} ke {no_rek}
• *Divalidasi oleh:* {validator}
• *Waktu:* {waktu}

_Pengajuan telah divalidasi dan siap diproses transfer bank._`,

  'belanja-validasi-tg': `✅ <b>VALIDASI BELANJA BAHAN DISETUJUI</b>

• <b>Unit Dapur:</b> {nama_dapur}
• <b>Penerima:</b> {penerima}
• <b>Kategori:</b> {kategori}
• <b>Net Transfer:</b> Rp {nominal} ke {no_rek}
• <b>Divalidasi oleh:</b> {validator}
• <b>Waktu:</b> {waktu}

<i>Pengajuan telah divalidasi dan siap diproses transfer bank.</i>`,

  'ops-pengajuan-wa': `🔔 *PENGAJUAN BIAYA OPERASIONAL BARU*

• *Unit Dapur:* {nama_dapur}
• *Tanggal:* {tanggal}
• *Kategori:* {kategori}
• *Keperluan:* {keperluan}
• *Nominal:* Rp {nominal}
• *Penerima:* {penerima} ({no_rek})

_Menunggu verifikasi dan validasi bendahara._`,

  'ops-pengajuan-tg': `🔔 <b>PENGAJUAN BIAYA OPERASIONAL BARU</b>

• <b>Unit Dapur:</b> {nama_dapur}
• <b>Tanggal:</b> {tanggal}
• <b>Kategori:</b> {kategori}
• <b>Keperluan:</b> {keperluan}
• <b>Nominal:</b> Rp {nominal}
• <b>Penerima:</b> {penerima} ({no_rek})

<i>Menunggu verifikasi dan validasi bendahara.</i>`,

  'ops-validasi-wa': `✅ *VALIDASI BIAYA OPERASIONAL DISETUJUI*

• *Unit Dapur:* {nama_dapur}
• *Keperluan:* {keperluan}
• *Net Transfer:* Rp {nominal} ke {no_rek}
• *Penerima:* {penerima}
• *Divalidasi oleh:* {validator}
• *Waktu:* {waktu}

_Pengajuan telah divalidasi dan siap diproses transfer bank._`,

  'ops-validasi-tg': `✅ <b>VALIDASI BIAYA OPERASIONAL DISETUJUI</b>

• <b>Unit Dapur:</b> {nama_dapur}
• <b>Keperluan:</b> {keperluan}
• <b>Net Transfer:</b> Rp {nominal} ke {no_rek}
• <b>Penerima:</b> {penerima}
• <b>Divalidasi oleh:</b> {validator}
• <b>Waktu:</b> {waktu}

<i>Pengajuan telah divalidasi dan siap diproses transfer bank.</i>`
};

function resetTemplateDefault() {
  Swal.fire({
    title: 'Reset ke Template Default?',
    text: 'Semua template pada tab yang aktif saat ini akan dikembalikan ke format bawaan sistem.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Ya, Reset',
    cancelButtonText: 'Batal'
  }).then(res => {
    if (!res.isConfirmed) return;
    Object.keys(TEMPLATE_DEFAULT).forEach(key => {
      const el = document.getElementById(`tmpl-${key}`);
      if (el) el.value = TEMPLATE_DEFAULT[key];
    });
    Swal.fire({icon: 'success', title: 'Direset!', text: 'Template dikembalikan ke format default.', timer: 1500, showConfirmButton: false});
  });
}

async function simpanTemplateNotif() {
  const keys = ['belanja-pengajuan-wa','belanja-pengajuan-tg','belanja-validasi-wa','belanja-validasi-tg',
                 'ops-pengajuan-wa','ops-pengajuan-tg','ops-validasi-wa','ops-validasi-tg'];
  const payload = {};
  keys.forEach(k => {
    const el = document.getElementById(`tmpl-${k}`);
    if (el) payload[`tmpl_${k.replace(/-/g,'_')}`] = el.value;
  });

  const btn = document.querySelector('#card-template-notif .btn-success');
  if (btn) { btn.disabled = true; btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...'; }

  try {
    const resp = await fetch('/api/pengaturan', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(payload)
    });
    if (!resp.ok) {
      const err = await resp.json();
      throw new Error(err.error || 'Gagal menyimpan template');
    }
    Swal.fire({icon: 'success', title: 'Template Tersimpan!', text: 'Template notifikasi berhasil disimpan.', timer: 1500, showConfirmButton: false});
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal', text: e.message});
  } finally {
    if (btn) { btn.disabled = false; btn.innerHTML = '<i class="bi bi-save me-1"></i>Simpan Template'; }
  }
}

// ── MANAJEMEN AKUN & PENGGUNA ──
const modalUser = new bootstrap.Modal(document.getElementById('modalUser'));
let daftarUsers = [];

function populateUserDapurDropdown() {
  const sel = document.getElementById('user-dapur');
  let opts = '<option value="">-- Bebas / Lintas Dapur --</option>';
  daftarDapur.forEach(d => {
    opts += `<option value="${d.id}">${d.nama}</option>`;
  });
  sel.innerHTML = opts;
}

function onRoleChange() {
  const role = document.getElementById('user-role').value;
  const wrap = document.getElementById('wrap-user-dapur');
  if (role === 'admin_dapur') {
    wrap.classList.remove('opacity-50');
  } else {
    wrap.classList.add('opacity-50');
  }
}

async function loadUsers() {
  try {
    const resp = await fetch('/api/users');
    if (resp.status === 403) {
      document.getElementById('tbody-users').innerHTML = `<tr><td colspan="6" class="text-center text-muted py-3 small"><i class="bi bi-shield-lock me-1"></i>Hanya Super Admin yang dapat mengelola daftar akun pengguna.</td></tr>`;
      return;
    }
    daftarUsers = await resp.json();
    renderTabelUsers();
  } catch(e) {
    document.getElementById('tbody-users').innerHTML = `<tr><td colspan="6" class="text-center text-danger py-3 small">Gagal memuat daftar pengguna.</td></tr>`;
  }
}

function roleBadge(role) {
  if (role === 'super_admin') return '<span class="badge bg-primary">👑 Super Admin</span>';
  if (role === 'validator') return '<span class="badge bg-success">🛡️ Validator</span>';
  if (role === 'admin_dapur') return '<span class="badge bg-warning text-dark">🍳 Admin Dapur</span>';
  return '<span class="badge bg-secondary">👀 Viewer</span>';
}

function renderTabelUsers() {
  const tbody = document.getElementById('tbody-users');
  if (!daftarUsers.length) {
    tbody.innerHTML = `<tr><td colspan="6" class="text-center text-muted py-3 small">Belum ada akun terdaftar</td></tr>`;
    return;
  }
  tbody.innerHTML = daftarUsers.map(u => {
    const statusBadge = u.aktif
      ? '<span class="badge bg-success-subtle text-success border border-success-subtle">Aktif</span>'
      : '<span class="badge bg-danger-subtle text-danger border border-danger-subtle">Nonaktif</span>';

    const dapurBadge = u.dapur_nama
      ? `<span class="badge bg-light text-dark border"><i class="bi bi-buildings me-1 text-primary"></i>${u.dapur_nama}</span>`
      : '<span class="text-muted small">Semua / Lintas Dapur</span>';

    return `<tr>
      <td><span class="font-monospace fw-semibold">${u.username}</span></td>
      <td class="fw-semibold">${u.nama_lengkap}</td>
      <td>${roleBadge(u.role)}</td>
      <td>${dapurBadge}</td>
      <td class="text-center">${statusBadge}</td>
      <td class="text-end">
        <button class="btn btn-xs btn-outline-primary btn-sm py-0 px-2" onclick="editUser(${u.id})" title="Edit User">
          <i class="bi bi-pencil"></i>
        </button>
        <button class="btn btn-xs btn-outline-danger btn-sm py-0 px-2" onclick="hapusUser(${u.id})" title="Hapus User">
          <i class="bi bi-trash"></i>
        </button>
      </td>
    </tr>`;
  }).join('');
}

function bukaModalUser() {
  populateUserDapurDropdown();
  document.getElementById('user-id').value = '';
  document.getElementById('user-username').value = '';
  document.getElementById('user-username').disabled = false;
  document.getElementById('user-nama').value = '';
  document.getElementById('user-role').value = 'admin_dapur';
  document.getElementById('user-dapur').value = (daftarDapur.length > 0 ? daftarDapur[0].id : '');
  document.getElementById('user-password').value = '';
  document.getElementById('req-pwd').classList.remove('d-none');
  document.getElementById('hint-pwd').textContent = 'Password minimal 4 karakter.';
  document.getElementById('user-aktif').checked = true;
  document.getElementById('modalUserTitle').innerHTML = '<i class="bi bi-person-plus me-2"></i>Tambah Pengguna Baru';
  onRoleChange();
  modalUser.show();
}

function editUser(id) {
  const u = daftarUsers.find(x => x.id === id);
  if (!u) return;
  populateUserDapurDropdown();
  document.getElementById('user-id').value = u.id;
  document.getElementById('user-username').value = u.username;
  document.getElementById('user-username').disabled = true; // username tidak diubah
  document.getElementById('user-nama').value = u.nama_lengkap;
  document.getElementById('user-role').value = u.role;
  document.getElementById('user-dapur').value = u.dapur_id || '';
  document.getElementById('user-password').value = '';
  document.getElementById('req-pwd').classList.add('d-none');
  document.getElementById('hint-pwd').textContent = 'Kosongkan jika tidak ingin mengganti password.';
  document.getElementById('user-aktif').checked = Boolean(u.aktif);
  document.getElementById('modalUserTitle').innerHTML = '<i class="bi bi-person-gear me-2"></i>Edit Data Pengguna';
  onRoleChange();
  modalUser.show();
}

async function simpanUser() {
  const id       = document.getElementById('user-id').value;
  const username = document.getElementById('user-username').value.trim().toLowerCase();
  const nama     = document.getElementById('user-nama').value.trim();
  const role     = document.getElementById('user-role').value;
  const dapurId  = document.getElementById('user-dapur').value;
  const password = document.getElementById('user-password').value.trim();
  const aktif    = document.getElementById('user-aktif').checked;

  if (!username || !nama) {
    Swal.fire({icon: 'warning', title: 'Data Kurang Lengkap', text: 'Username dan Nama Lengkap wajib diisi.'});
    return;
  }
  if (!id && !password) {
    Swal.fire({icon: 'warning', title: 'Password Wajib', text: 'Password wajib diisi untuk pengguna baru.'});
    return;
  }

  const payload = {
    username,
    nama_lengkap: nama,
    role,
    dapur_id: dapurId ? parseInt(dapurId) : null,
    aktif
  };
  if (password) payload.password = password;

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

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

  try {
    const resp = await fetch(url, {
      method,
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(payload)
    });
    if (!resp.ok) {
      const err = await resp.json();
      throw new Error(err.error || 'Gagal menyimpan user');
    }
    modalUser.hide();
    Swal.fire({icon: 'success', title: 'Tersimpan!', timer: 1200, showConfirmButton: false});
    loadUsers();
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Kesalahan', text: e.message});
  } finally {
    btn.disabled = false;
  }
}

async function hapusUser(id) {
  const res = await Swal.fire({
    title: 'Hapus Pengguna ini?',
    text: 'Pengguna yang dihapus tidak akan dapat login lagi ke sistem.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    confirmButtonText: 'Ya, Hapus',
    cancelButtonText: 'Batal'
  });
  if (!res.isConfirmed) return;

  try {
    const resp = await fetch(`/api/users/${id}`, { method: 'DELETE' });
    if (!resp.ok) {
      const err = await resp.json();
      throw new Error(err.error || 'Gagal menghapus user');
    }
    daftarUsers = daftarUsers.filter(x => x.id !== id);
    renderTabelUsers();
    Swal.fire({icon: 'success', title: 'Terhapus', timer: 1200, showConfirmButton: false});
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal', text: e.message});
  }
}

// Muat data user
loadUsers();

// ── ZONA BAHAYA: RESET DATA TRANSAKSI & ANALISA ──
function getModalKonfirmasiReset() {
  const el = document.getElementById('modalKonfirmasiReset');
  if (!el) return null;
  return bootstrap.Modal.getInstance(el) || new bootstrap.Modal(el);
}

function pilihSemuaModulReset(pilih) {
  document.querySelectorAll('.chk-reset-modul').forEach(chk => {
    chk.checked = pilih;
  });
}

function bukaModalKonfirmasiReset() {
  const selectedModules = [];
  document.querySelectorAll('.chk-reset-modul:checked').forEach(c => {
    selectedModules.push(c.value);
  });

  if (selectedModules.length === 0) {
    Swal.fire({icon: 'warning', title: 'Perhatian', text: 'Pilih minimal satu modul data yang ingin di-reset.'});
    return;
  }

  const targetDapur = document.getElementById('reset-target-dapur');
  const targetLabel = (targetDapur && targetDapur.selectedIndex >= 0) ? targetDapur.options[targetDapur.selectedIndex].text : 'Semua Unit Dapur';
  const targetEl = document.getElementById('modal-reset-target-label');
  if (targetEl) targetEl.textContent = targetLabel;

  const labelsMap = {
    'va': 'Saldo & Mutasi VA',
    'belanja': 'Validasi Belanja Bahan',
    'operasional': 'Biaya Operasional',
    'analitik': 'Analitik & Pengajuan Belanja'
  };

  const badgeHtml = selectedModules.map(m => `<span class="badge bg-danger text-white me-1">${labelsMap[m] || m}</span>`).join(' ');
  const badgeListEl = document.getElementById('reset-summary-badge-list');
  if (badgeListEl) badgeListEl.innerHTML = badgeHtml;

  const pwdEl = document.getElementById('reset-password-confirm');
  if (pwdEl) pwdEl.value = '';
  const chkPaham = document.getElementById('chk-paham-resiko');
  if (chkPaham) chkPaham.checked = false;

  const modal = getModalKonfirmasiReset();
  if (modal) {
    modal.show();
  } else {
    Swal.fire({icon: 'error', title: 'Kesalahan Sistem', text: 'Elemen modal reset data tidak ditemukan.'});
  }
}

async function prosesEksekusiReset() {
  const pwdInput = document.getElementById('reset-password-confirm');
  const pwd = pwdInput ? pwdInput.value.trim() : '';
  const chkPaham = document.getElementById('chk-paham-resiko');
  const paham = chkPaham ? chkPaham.checked : false;

  if (!pwd) {
    Swal.fire({icon: 'warning', title: 'Perhatian', text: 'Masukkan password Super Admin untuk melanjutkan.'});
    return;
  }

  if (!paham) {
    Swal.fire({icon: 'warning', title: 'Konfirmasi Diperlukan', text: 'Centang kotak persetujuan risiko sebelum menjalankan reset.'});
    return;
  }

  const selectedModules = [];
  document.querySelectorAll('.chk-reset-modul:checked').forEach(c => {
    selectedModules.push(c.value);
  });
  const targetDapur = document.getElementById('reset-target-dapur') ? document.getElementById('reset-target-dapur').value : 'all';

  const btn = document.getElementById('btn-proses-reset');
  if (btn) {
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Menjalankan Reset...';
  }

  try {
    const res = await fetch('/api/system/reset-data', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        password: pwd,
        target_dapur_id: targetDapur,
        modules: selectedModules
      })
    });

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

    const modal = getModalKonfirmasiReset();
    if (modal) modal.hide();

    let detailsMsg = (data.details || []).join('<br>• ');
    await Swal.fire({
      icon: 'success',
      title: 'Reset Data Berhasil!',
      html: `
        <div class="text-start small">
          <p class="mb-1 text-success fw-bold">${data.message}</p>
          <div class="p-2 bg-light rounded border mb-2">
            <strong>Rincian Hasil:</strong><br>• ${detailsMsg}
          </div>
          ${data.backup_file ? `<p class="mb-0 text-muted" style="font-size:0.75rem;"><i class="bi bi-shield-check text-success me-1"></i>File snapshot cadangan tersimpan di: <code>${data.backup_file}</code></p>` : ''}
        </div>
      `,
      confirmButtonText: 'Muat Ulang Halaman'
    });

    location.reload();
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal Reset', text: e.message});
  } finally {
    if (btn) {
      btn.disabled = false;
      btn.innerHTML = '<i class="bi bi-check-lg me-1"></i> Ya, Jalankan Reset Sekarang';
    }
  }
}

// ── MANAJEMEN DATABASE (BACKUP, DOWNLOAD & RESTORE) ──
let modalRestoreDbInstance = null;
function getModalRestoreDb() {
  const el = document.getElementById('modalRestoreDb');
  if (!el) return null;
  if (!modalRestoreDbInstance) modalRestoreDbInstance = new bootstrap.Modal(el);
  return modalRestoreDbInstance;
}

function bukaModalRestoreDb() {
  const modal = getModalRestoreDb();
  if (modal) {
    document.getElementById('restore-file-input').value = '';
    document.getElementById('restore-password-input').value = '';
    muatDaftarSnapshotServer();
    modal.show();
  }
}

async function jalankanSnapshotDb() {
  const btn = document.getElementById('btnSnapshotDb');
  const origText = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Membuat Snapshot...';

  try {
    const res = await fetch('/api/system/auto-backup', { method: 'POST' });
    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Gagal membuat snapshot database');

    Swal.fire({
      icon: 'success',
      title: 'Snapshot Berhasil Dibuat!',
      html: `
        <div class="text-start small">
          <p class="mb-1 text-success fw-bold">${data.message}</p>
          <div class="p-2 bg-light rounded border">
            <strong>File:</strong> <code>${data.filename}</code><br>
            <strong>Ukuran:</strong> ${data.size_kb} KB<br>
            <strong>Waktu:</strong> ${data.timestamp}
          </div>
        </div>
      `,
      timer: 3000
    });

    muatDaftarSnapshotServer();
  } catch(e) {
    Swal.fire({ icon: 'error', title: 'Gagal', text: e.message });
  } finally {
    btn.disabled = false;
    btn.innerHTML = origText;
  }
}

async function muatDaftarSnapshotServer() {
  const tbody = document.getElementById('tbody-snapshot-list');
  const selectServer = document.getElementById('restore-server-select');
  if (!tbody) return;

  try {
    const res = await fetch('/api/system/backups-list');
    const data = await res.json();
    const files = data.backups || [];

    if (files.length === 0) {
      tbody.innerHTML = `<tr><td colspan="4" class="text-center text-muted py-2">Belum ada file snapshot cadangan di server.</td></tr>`;
      if (selectServer) selectServer.innerHTML = '<option value="">-- Belum ada berkas cadangan di server --</option>';
      return;
    }

    tbody.innerHTML = files.map(f => `
      <tr>
        <td class="fw-semibold font-monospace">${f.filename}</td>
        <td>${f.size_kb} KB</td>
        <td>${f.created_at}</td>
        <td class="text-end">
          <button type="button" class="btn btn-xs btn-outline-danger py-0 px-2" style="font-size:0.72rem;" onclick="pilihRestoreSnapshot('${f.filename}')" title="Pulihkan dari file ini">
            <i class="bi bi-arrow-repeat me-1"></i>Restore
          </button>
        </td>
      </tr>
    `).join('');

    if (selectServer) {
      selectServer.innerHTML = '<option value="">-- Pilih Berkas Cadangan --</option>' + 
        files.map(f => `<option value="${f.filename}">${f.filename} (${f.size_kb} KB - ${f.created_at})</option>`).join('');
    }
  } catch (e) {
    tbody.innerHTML = `<tr><td colspan="4" class="text-center text-danger py-2">Gagal memuat snapshot: ${e.message}</td></tr>`;
  }
}

function pilihRestoreSnapshot(filename) {
  bukaModalRestoreDb();
  // Pindahkan tab ke "Pilih Dari Server"
  const tabServerBtn = document.getElementById('tab-res-server');
  if (tabServerBtn) {
    bootstrap.Tab.getOrCreateInstance(tabServerBtn).show();
  }
  const select = document.getElementById('restore-server-select');
  if (select) select.value = filename;
}

async function jalankanRestoreDb() {
  const pwd = document.getElementById('restore-password-input').value.trim();
  if (!pwd) {
    Swal.fire({ icon: 'warning', title: 'Password Wajib Diisi', text: 'Masukkan password Anda untuk konfirmasi restore database.' });
    return;
  }

  // Tentukan sumber restore (upload file atau snapshot server)
  const isTabUpload = document.getElementById('pane-res-upload').classList.contains('active');
  const formData = new FormData();
  formData.append('password', pwd);

  if (isTabUpload) {
    const fileInput = document.getElementById('restore-file-input');
    if (!fileInput.files || fileInput.files.length === 0) {
      Swal.fire({ icon: 'warning', title: 'Pilih File', text: 'Silakan pilih file .db yang ingin diunggah untuk restore.' });
      return;
    }
    formData.append('backup_file', fileInput.files[0]);
  } else {
    const serverFile = document.getElementById('restore-server-select').value;
    if (!serverFile) {
      Swal.fire({ icon: 'warning', title: 'Pilih Snapshot', text: 'Silakan pilih salah satu file snapshot cadangan di server.' });
      return;
    }
    formData.append('snapshot_filename', serverFile);
  }

  const { isConfirmed } = await Swal.fire({
    icon: 'warning',
    title: 'Konfirmasi Terakhir Restore Database',
    text: 'Apakah Anda YAKIN ingin menimpa database aktif saat ini? Seluruh transaksi dan data akan disesuaikan dengan file cadangan ini!',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    cancelButtonColor: '#6c757d',
    confirmButtonText: 'Ya, Timpa & Pulihkan Database!',
    cancelButtonText: 'Batal'
  });

  if (!isConfirmed) return;

  const btn = document.getElementById('btnEksekusiRestore');
  const origText = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Memulihkan Database...';

  try {
    const res = await fetch('/api/system/restore-db', {
      method: 'POST',
      body: formData
    });
    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Gagal merestore database');

    const modal = getModalRestoreDb();
    if (modal) modal.hide();

    await Swal.fire({
      icon: 'success',
      title: 'Database Berhasil Dipulihkan!',
      text: data.message,
      confirmButtonText: 'Muat Ulang Halaman'
    });

    location.reload();
  } catch(e) {
    Swal.fire({ icon: 'error', title: 'Gagal Restore', text: e.message });
  } finally {
    btn.disabled = false;
    btn.innerHTML = origText;
  }
}

// Muat daftar snapshot saat halaman dimuat
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(muatDaftarSnapshotServer, 800);
});
</script>
{% endblock %}