{% extends 'base.html' %}
{% block title %}Manajemen Pagu & RAB MBG - {{ nama_dapur }}{% endblock %}

{% block extra_css %}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Quicksand:wght@600;700;800&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<style>
  :root { 
    --pagu-primary: #2563eb; --pagu-primary-hover: #1d4ed8; --pagu-primary-light: #eff6ff;
    --pagu-success: #10b981; --pagu-success-hover: #059669;
    --pagu-warning: #f59e0b; --pagu-warning-light: #fffbeb;
    --pagu-danger: #ef4444; --pagu-danger-light: #fef2f2;
    --pagu-teal: #0d9488; --pagu-teal-hover: #0f766e; --pagu-teal-light: #f0fdfa; --pagu-teal-border: #ccfbf1;
    --pagu-dark: #0f172a; --pagu-bg: #f8fafc; --pagu-text-main: #334155; --pagu-text-muted: #64748b; 
    --pagu-border: #e2e8f0; --pagu-card-radius: 16px; --pagu-btn-radius: 8px;
  }

  .pagu-wrapper { font-family: 'Inter', sans-serif; color: var(--pagu-text-main); }
  .pagu-wrapper h1, .pagu-wrapper h2, .pagu-wrapper h3, .pagu-wrapper h4, .pagu-wrapper h5, .pagu-wrapper .font-quick {
    font-family: 'Quicksand', sans-serif;
  }

  /* CORE CARD STYLE */
  .pagu-card { 
    background: white; border-radius: var(--pagu-card-radius); padding: 30px 35px; 
    border: 1px solid var(--pagu-border); box-shadow: 0 10px 30px -5px rgba(0,0,0,0.03); margin-bottom: 30px; 
  }
  .pagu-card-title { 
    font-size: 20px; font-weight: 800; color: var(--pagu-dark); margin-bottom: 25px; 
    display: flex; align-items: center; justify-content: space-between; gap: 10px; 
    border-bottom: 2px solid var(--pagu-bg); padding-bottom: 18px; font-family: 'Quicksand', sans-serif; 
  }
  .pagu-card-title i { color: var(--pagu-teal); font-size: 24px; }
  
  .step-badge { 
    display: inline-block; background: var(--pagu-teal); color: white; padding: 4px 10px; 
    border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 15px; 
  }

  /* FORM GRID STEP 1 */
  .form-identity-box { background: #fafaf9; padding: 25px; border-radius: 16px; border: 1px dashed #d6d3d1; margin-bottom: 25px; }
  .grid-identity { display: grid; grid-template-columns: 1fr 1.2fr 0.8fr 0.8fr auto; gap: 18px; align-items: flex-start; }
  
  .pagu-form-group { display: flex; flex-direction: column; gap: 8px; }
  .pagu-form-group label { font-size: 12px; font-weight: 700; color: var(--pagu-text-main); display: flex; align-items: center; gap: 6px; }
  .pagu-form-group input, .pagu-form-group select { 
    padding: 10px 14px; border-radius: var(--pagu-btn-radius); border: 1px solid #cbd5e1; outline: none; 
    font-size: 14px; font-weight: 600; background: white; transition: all 0.2s ease; color: var(--pagu-dark); width: 100%; height: 46px;
  }
  .pagu-form-group input:hover, .pagu-form-group select:hover { border-color: #94a3b8; }
  .pagu-form-group input:focus, .pagu-form-group select:focus { border-color: var(--pagu-teal); box-shadow: 0 0 0 4px var(--pagu-teal-light); }
  .pagu-form-group input:disabled, .pagu-form-group select:disabled { background-color: #f1f5f9; cursor: not-allowed; color: #94a3b8; border-color: #e2e8f0; }

  /* OK CONFIRMATION BUTTON */
  .btn-ok { 
    background: var(--pagu-teal); color: white; border: none; border-radius: var(--pagu-btn-radius); 
    padding: 0 24px; font-weight: 800; font-size: 13px; cursor: pointer; transition: all 0.2s ease; 
    display: flex; align-items: center; justify-content: center; gap: 8px; 
    box-shadow: 0 2px 4px rgba(13, 148, 136, 0.2); height: 46px; margin-top: 24px; white-space: nowrap;
  }
  .btn-ok:hover { background: var(--pagu-teal-hover); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3); }
  .btn-ok.active { background: var(--pagu-text-muted); box-shadow: none; pointer-events: auto; }
  .btn-ok.active:hover { background: var(--pagu-danger); color: white; transform: translateY(0); }

  /* STEP 2: INPUT AREA */
  .pagu-input-area { opacity: 0.35; pointer-events: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(10px); }
  .pagu-input-area.active { opacity: 1; pointer-events: auto; transform: translateY(0); }

  .grid-pagu-main { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 25px; }

  /* 12 PENERIMA MANFAAT GRID */
  .pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 12px; margin-bottom: 25px; }
  .pm-item { 
    background: white; border-radius: 10px; border: 1px solid var(--pagu-border); 
    overflow: hidden; display: flex; flex-direction: column; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
  }
  .pm-item:focus-within { border-color: var(--pagu-teal); box-shadow: 0 0 0 4px var(--pagu-teal-light); transform: translateY(-2px); }
  .pm-item label { 
    display: block; padding: 9px 5px; font-weight: 800; font-size: 11px; color: var(--pagu-text-main); 
    text-align: center; background: var(--pagu-bg); text-transform: uppercase; letter-spacing: 0.5px;
  }
  .pm-item input.input-pm { 
    width: 100%; padding: 10px; border: none; border-top: 1px solid var(--pagu-border); 
    outline: none; text-align: center; font-weight: 800; color: var(--pagu-dark); font-size: 17px; 
  }
  .pm-item select.tier-select { 
    width: 100%; padding: 6px; font-size: 11px; background: white; border: none; 
    border-top: 1px dashed var(--pagu-border); text-align: center; outline: none; font-weight: 700; 
    cursor: pointer; color: var(--pagu-text-muted); transition: 0.2s; text-align-last: center;
  }
  .pm-item select.tier-select:hover { background: #f8fafc; color: var(--pagu-dark); }

  .pm-item.tier1-input label { background: var(--pagu-primary-light); color: var(--pagu-primary-hover); }
  .pm-item.tier2-input label { background: var(--pagu-warning-light); color: #b45309; }

  /* LIVE COMPUTATION CARDS */
  .calc-summary { 
    display: flex; flex-wrap: wrap; gap: 20px; background: var(--pagu-teal-light); 
    padding: 22px 25px; border-radius: 16px; border: 1px solid var(--pagu-teal-border); 
    margin-bottom: 25px; align-items: center; 
  }
  .calc-box { flex: 1; min-width: 220px; }
  .calc-box label { 
    display: block; font-size: 12px; font-weight: 800; color: var(--pagu-teal); 
    margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; 
  }
  .calc-box input { 
    width: 100%; padding: 12px 18px; border: 1px solid var(--pagu-teal-border); 
    border-radius: 10px; outline: none; font-size: 22px; font-weight: 900; 
    background: white; color: var(--pagu-dark); font-family: 'Quicksand', sans-serif; 
  }

  /* ACTION BUTTONS */
  .btn-submit-pagu { 
    background: linear-gradient(135deg, var(--pagu-teal), var(--pagu-teal-hover)); color: white; 
    width: 100%; padding: 16px; font-size: 15px; font-family: 'Quicksand', sans-serif; font-weight: 800; 
    border-radius: 10px; cursor: pointer; border: none; transition: all 0.3s ease; 
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.2); text-transform: uppercase; letter-spacing: 0.8px; 
  }
  .btn-submit-pagu:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13, 148, 136, 0.3); color: white; }
  .btn-batal-edit { 
    background-color: white; color: var(--pagu-text-main); width: 100%; padding: 14px; 
    font-size: 14px; font-weight: 700; border-radius: 10px; cursor: pointer; 
    border: 1px solid var(--pagu-border); margin-top: 12px; display: none; text-align: center; transition: 0.2s; 
  }
  .btn-batal-edit:hover { background: var(--pagu-danger-light); color: var(--pagu-danger); border-color: #fca5a5; }

  /* REKAPITULASI HOUSING */
  .rekap-header-control { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
  .dapur-section { background: white; border-radius: 16px; border: 1px solid var(--pagu-border); margin-bottom: 30px; overflow: hidden; box-shadow: 0 4px 20px -5px rgba(0,0,0,0.03); }
  
  .dapur-header-flex { background: white; padding: 18px 25px; border-bottom: 1px solid var(--pagu-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
  .dapur-title-name { font-size: 19px; font-weight: 800; color: var(--pagu-dark); display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-family: 'Quicksand', sans-serif; }
  .dapur-title-name i { color: var(--pagu-teal); background: var(--pagu-teal-light); padding: 8px; border-radius: 10px; }

  .dapur-controls-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  
  .btn-periode-select {
    background-color: var(--pagu-bg); color: var(--pagu-dark); border: 1px solid #cbd5e1; padding: 8px 36px 8px 14px; border-radius: var(--pagu-btn-radius); 
    font-size: 13.5px; font-weight: 700; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    transition: 0.2s all ease-in-out; font-family: 'Quicksand', sans-serif;
  }
  .btn-periode-select:hover { border-color: var(--pagu-teal); background-color: white; }

  .btn-print-dapur { 
    background: white; color: var(--pagu-text-main); padding: 8px 16px; border-radius: var(--pagu-btn-radius); 
    font-weight: 700; font-size: 13px; border: 1px solid var(--pagu-border); cursor: pointer; 
    display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; font-family: 'Quicksand', sans-serif; 
  }
  .btn-print-dapur:hover { background: var(--pagu-bg); color: var(--pagu-dark); border-color: #cbd5e1; }

  /* SUMMARY BANNER */
  .summary-banner {
    background: var(--pagu-teal-light); padding: 14px 22px; display: flex; justify-content: space-between; 
    align-items: center; border-bottom: 1px solid var(--pagu-border); font-size: 13.5px; 
    color: #0f766e; flex-wrap: wrap; gap: 10px; border-left: 5px solid var(--pagu-teal);
  }
  .summary-banner b { color: var(--pagu-dark); font-weight: 800; font-size: 14.5px; }

  /* HIGH DENSITY DATA TABLE */
  .table-responsive-pagu { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; max-height: 600px; }
  .table-pagu { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1400px; }
  
  .table-pagu thead { position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
  .table-pagu th { 
    padding: 12px 10px; text-align: center; font-size: 11px; text-transform: uppercase; 
    font-weight: 800; border-bottom: 1px solid var(--pagu-border); border-right: 1px solid var(--pagu-border); 
    line-height: 1.3; white-space: nowrap; font-family: 'Quicksand', sans-serif; letter-spacing: 0.5px; 
  }
  .table-pagu th:first-child { border-left: none; }
  
  .th-teal { background: #e6fffa; color: #0f766e; }
  .th-white { background: #f8fafc; color: var(--pagu-dark); }
  
  .bg-tier1 { background-color: #f0f9ff !important; }
  .table-pagu th.bg-tier1 { background-color: #e0f2fe !important; color: #0369a1; border-right-color: #bae6fd; }
  
  .table-pagu td { 
    padding: 12px 10px; border-bottom: 1px solid var(--pagu-border); border-right: 1px solid var(--pagu-border); 
    font-size: 13px; font-weight: 500; text-align: center; white-space: nowrap; background: white; transition: 0.1s; 
  }
  .table-pagu td:last-child { border-right: none; }
  .table-pagu tbody tr:hover td { background: #f8fafc; }
  .table-pagu tbody tr:hover td.bg-tier1 { background: #e0f2fe !important; }
  
  .td-uang { text-align: right !important; font-weight: 700; font-variant-numeric: tabular-nums; font-family: 'Inter', sans-serif; }
  .color-blue { color: var(--pagu-primary); }
  .color-orange { color: var(--pagu-warning); }
  .color-teal { color: var(--pagu-teal); font-weight: 800; }
  .color-total { font-weight: 800; color: var(--pagu-dark); }
  
  .td-jadwal { text-align: left !important; padding-left: 18px !important; }
  .td-jadwal .tgl-utama { font-weight: 800; color: var(--pagu-dark); font-size: 13.5px; }
  .td-jadwal .waktu-input { font-size: 11px; color: var(--pagu-text-muted); margin-top: 2px; }

  .btn-inline { 
    padding: 6px 9px; border-radius: 6px; border: 1px solid var(--pagu-border); background: white; 
    cursor: pointer; font-size: 14px; transition: 0.15s; margin: 0 2px; 
  }
  .btn-edit-sm { color: var(--pagu-primary); }
  .btn-edit-sm:hover { background: var(--pagu-primary-light); border-color: #bfdbfe; }
  .btn-del-sm { color: var(--pagu-danger); }
  .btn-del-sm:hover { background: var(--pagu-danger-light); border-color: #fecaca; }

  @media (max-width: 992px) {
    .grid-identity { grid-template-columns: 1fr 1fr; }
    .grid-identity .btn-ok { grid-column: span 2; margin-top: 5px; }
    .grid-pagu-main { grid-template-columns: 1fr; }
  }
</style>
{% endblock %}

{% block content %}
<div class="pagu-wrapper">

  <!-- TOP HERO BANNER -->
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
    <div>
      <h4 class="fw-bold mb-1 text-dark">
        <i class='bx bx-calculator text-teal me-2' style="color: var(--pagu-teal);"></i>Manajemen Pagu & RAB MBG
      </h4>
      <small class="text-muted">Kelola alokasi Pagu Anggaran dan Rencana Anggaran Biaya (RAB) harian Dapur Makan Bergizi Gratis berdasarkan 12 kategori Penerima Manfaat</small>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ url_for('analitik') }}" class="btn btn-outline-primary btn-sm rounded-pill px-3">
        <i class="bi bi-graph-up-arrow me-1"></i> Ke Dashboard Analitik
      </a>
    </div>
  </div>

  <!-- MAIN CARD: FORM INPUT 2 LANGKAH -->
  <div class="pagu-card">
    <div class="pagu-card-title">
      <div class="d-flex align-items-center gap-2">
        <i class='bx bx-edit-alt'></i>
        <span>Form Input & Alokasi Pagu MBG</span>
      </div>
      <span class="badge bg-light text-dark border px-3 py-2 font-quick" style="font-size: 12px;">
        <i class='bx bx-shield-quarter text-success me-1'></i> Sistem Validasi Bertingkat
      </span>
    </div>

    <form id="formPagu">
      <!-- LANGKAH 1: IDENTITAS PERIODE & LOCK -->
      <span class="step-badge"><i class='bx bx-lock-alt me-1'></i> Langkah 1: Identitas Periode & Kunci</span>
      <div class="form-identity-box">
        <div class="grid-identity">
          
          <!-- PILIH DAPUR -->
          <div class="pagu-form-group">
            <label><i class='bx bx-store-alt text-teal'></i> Unit Dapur</label>
            <select id="inputDapur" required {% if user_role == 'admin_dapur' and user_dapur_id %}disabled{% endif %}>
              <option value="">-- Pilih Unit Dapur --</option>
              {% for d in dapur_list %}
              <option value="{{ d.nama }}" {% if user_role == 'admin_dapur' and user_dapur_id == d.id %}selected{% endif %}>{{ d.nama }}</option>
              {% endfor %}
            </select>
          </div>

          <!-- NAMA PERIODE -->
          <div class="pagu-form-group">
            <label><i class='bx bx-bookmark-alt text-teal'></i> Grup Periode</label>
            <select id="inputNamaPeriode" required>
              <option value="">-- Pilih Periode --</option>
              <option value="NEW" style="color: #2563eb; font-weight: 800;">+ BUAT PERIODE BARU...</option>
            </select>
            <input type="text" id="inputNamaPeriodeBaru" placeholder="Ketik nama periode baru..." style="display:none; margin-top:6px;" />
          </div>

          <!-- TANGGAL AWAL -->
          <div class="pagu-form-group">
            <label><i class='bx bx-calendar text-teal'></i> Tanggal Awal</label>
            <input type="date" id="inputTanggalAwal" required />
          </div>

          <!-- TANGGAL AKHIR -->
          <div class="pagu-form-group">
            <label><i class='bx bx-calendar text-teal'></i> Tanggal Akhir</label>
            <input type="date" id="inputTanggalAkhir" required />
          </div>

          <!-- TOMBOL LOCK / VALIDASI -->
          <button type="button" class="btn-ok" id="btnConfirmIdentity">
            <i class='bx bx-lock-open-alt'></i> VALIDASI
          </button>
        </div>
      </div>

      <!-- LANGKAH 2: PENERIMA MANFAAT & HARGA -->
      <div id="paguInputArea" class="pagu-input-area">
        <span class="step-badge" style="background: var(--pagu-primary);"><i class='bx bx-user-check me-1'></i> Langkah 2: Parameter Penerima Manfaat & Pricing Tiers</span>
        
        <div class="grid-pagu-main">
          <div class="pagu-form-group">
            <label><i class='bx bx-calendar-check text-teal'></i> Tanggal Pagu (Hari Menu)</label>
            <input type="date" id="inputTanggalPagu" required disabled style="background-color:#e2e8f0; cursor:not-allowed;" />
          </div>
          <div class="pagu-form-group">
            <label><i class='bx bx-tag text-primary'></i> Harga Paket 1 (Tier 1)</label>
            <input type="text" id="calcHarga1" value="8.000" required />
          </div>
          <div class="pagu-form-group">
            <label><i class='bx bx-tag text-warning'></i> Harga Paket 2 (Tier 2)</label>
            <input type="text" id="calcHarga2" value="10.000" required />
          </div>
        </div>

        <!-- 12 KATEGORI PENERIMA MANFAAT -->
        <div class="pm-grid">
          <div class="pm-item tier1-input">
            <label>Baduta</label>
            <input type="number" id="pm_baduta" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1" selected>Tier 1</option><option value="2">Tier 2</option></select>
          </div>
          <div class="pm-item tier1-input">
            <label>PAUD/TK</label>
            <input type="number" id="pm_paud" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1" selected>Tier 1</option><option value="2">Tier 2</option></select>
          </div>
          <div class="pm-item tier1-input">
            <label>SD 1-3</label>
            <input type="number" id="pm_sd13" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1" selected>Tier 1</option><option value="2">Tier 2</option></select>
          </div>
          <div class="pm-item tier2-input">
            <label>SD 4-6</label>
            <input type="number" id="pm_sd46" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1">Tier 1</option><option value="2" selected>Tier 2</option></select>
          </div>
          <div class="pm-item tier2-input">
            <label>SMP/MTs</label>
            <input type="number" id="pm_smp" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1">Tier 1</option><option value="2" selected>Tier 2</option></select>
          </div>
          <div class="pm-item tier2-input">
            <label>SMA/SMK</label>
            <input type="number" id="pm_sma" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1">Tier 1</option><option value="2" selected>Tier 2</option></select>
          </div>
          <div class="pm-item tier1-input">
            <label>SLB</label>
            <input type="number" id="pm_slb" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1" selected>Tier 1</option><option value="2">Tier 2</option></select>
          </div>
          <div class="pm-item tier1-input">
            <label>Santri</label>
            <input type="number" id="pm_santri" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1" selected>Tier 1</option><option value="2">Tier 2</option></select>
          </div>
          <div class="pm-item tier2-input">
            <label>Pend/TK</label>
            <input type="number" id="pm_pend" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1">Tier 1</option><option value="2" selected>Tier 2</option></select>
          </div>
          <div class="pm-item tier2-input">
            <label>Bumil</label>
            <input type="number" id="pm_bumil" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1">Tier 1</option><option value="2" selected>Tier 2</option></select>
          </div>
          <div class="pm-item tier2-input">
            <label>Busui</label>
            <input type="number" id="pm_busui" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1">Tier 1</option><option value="2" selected>Tier 2</option></select>
          </div>
          <div class="pm-item tier1-input">
            <label>Lainnya</label>
            <input type="number" id="pm_lainnya" class="input-pm" value="0" min="0" />
            <select class="tier-select"><option value="1" selected>Tier 1</option><option value="2">Tier 2</option></select>
          </div>
        </div>

        <!-- LIVE KALKULASI HASIL -->
        <div class="calc-summary">
          <div class="calc-box">
            <label><i class='bx bx-dish me-1'></i> Total Paket Hari Ini (Porsi)</label>
            <input type="text" id="calcJumlahPaket" value="0" readonly />
          </div>
          <div class="calc-box">
            <label><i class='bx bx-money me-1'></i> Total Estimasi RAB (Rp)</label>
            <input type="text" id="calcRAB" value="0" readonly style="color: var(--pagu-teal);" />
          </div>
        </div>

        <!-- TOMBOL SIMPAN -->
        <button type="submit" class="btn-submit-pagu" id="btnSubmitPagu">
          <i class='bx bx-save me-1'></i> Simpan Data Pagu Harian
        </button>
        <button type="button" class="btn-batal-edit" id="btnBatalEdit" onclick="batalEditPagu()">
          <i class='bx bx-x me-1'></i> Batalkan Mode Koreksi / Edit
        </button>
      </div>
    </form>
  </div>

  <!-- REKAPITULASI SECTION -->
  <div class="rekap-header-control">
    <div>
      <h5 class="fw-bold mb-1 text-dark font-quick"><i class='bx bx-receipt text-teal me-1'></i> Rekapitulasi Riwayat Pagu & RAB</h5>
      <small class="text-muted">Daftar pagu yang telah terdaftar, dikelompokkan berdasarkan unit dapur dan grup periode</small>
    </div>
    <div class="d-flex align-items-center gap-2">
      <select id="filterDapurExcel" class="form-select form-select-sm" style="width: 200px;">
        <option value="">-- Semua Dapur --</option>
        {% for d in dapur_list %}
        <option value="{{ d.nama }}">{{ d.nama }}</option>
        {% endfor %}
      </select>
      <button class="btn btn-outline-success btn-sm d-flex align-items-center gap-1 font-quick fw-bold" onclick="exportExcelPagu()">
        <i class='bx bx-spreadsheet fs-6'></i> Export Excel (.xlsx)
      </button>
    </div>
  </div>

  <!-- CONTAINER DATA PAGU PER DAPUR -->
  <div id="containerDataPagu">
    <div class="text-center py-5 text-muted">
      <div class="spinner-border text-teal mb-2" role="status" style="color: var(--pagu-teal);"></div>
      <p>Memuat rekapitulasi data pagu...</p>
    </div>
  </div>

</div>

<!-- HIDDEN IFRAME FOR SILENT PRINTING -->
<iframe id="printFrameDapur" style="display:none;"></iframe>
{% endblock %}

{% block extra_js %}
<script>
  let canDelete = {{ 'true' if can_delete else 'false' }};
  let modeEditPaguId = null;
  window.dataRawPagu = {};
  window.globalPeriodeData = {};

  function formatRupiah(angka) {
    if (angka === null || angka === undefined) return '0';
    if (typeof angka !== 'string') angka = Math.round(Number(angka)).toString();
    let number_string = angka.replace(/[^,\d]/g, ''),
        split = number_string.split(','),
        sisa = split[0].length % 3,
        rupiah = split[0].substr(0, sisa),
        ribuan = split[0].substr(sisa).match(/\d{3}/gi);
    if(ribuan){ rupiah += (sisa ? '.' : '') + ribuan.join('.'); }
    return rupiah || '0';
  }

  function formatTglIndo(tgl) {
    if(!tgl) return "-";
    return new Date(tgl).toLocaleDateString('id-ID', { year: 'numeric', month: 'short', day: 'numeric' });
  }

  function formatWaktuIndoDetail(iso) {
    if(!iso) return "-";
    const d = new Date(iso);
    return `${d.toLocaleDateString('id-ID', { day:'2-digit', month:'short' })} • ${d.toLocaleTimeString('id-ID', { hour:'2-digit', minute:'2-digit' })} WIB`;
  }

  function getHariName(dateString) {
    if (!dateString) return "";
    return ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"][new Date(dateString).getDay()];
  }

  // LOGIKA DROPDOWN PERIODE
  const selPeriode = document.getElementById('inputNamaPeriode');
  const inputBaru = document.getElementById('inputNamaPeriodeBaru');

  document.getElementById('inputDapur').addEventListener('change', function() {
    const dapur = this.value;
    
    Array.from(selPeriode.options).forEach(opt => {
      if(opt.value !== "" && opt.value !== "NEW") opt.remove();
    });
    
    const existingGroups = selPeriode.querySelectorAll('optgroup');
    existingGroups.forEach(g => g.remove());

    const periodesDapur = new Set();
    for (const key in window.globalPeriodeData) {
      if (key.startsWith(dapur + "_")) {
        periodesDapur.add(key.replace(dapur + "_", ""));
      }
    }

    if(periodesDapur.size > 0) {
      let optGroup = document.createElement('optgroup');
      optGroup.label = "Periode Terdaftar (Pilih untuk Lanjut)";
      
      periodesDapur.forEach(pName => { 
        let opt = document.createElement('option');
        opt.value = pName; opt.text = pName;
        optGroup.appendChild(opt);
      });
      selPeriode.insertBefore(optGroup, selPeriode.querySelector('option[value="NEW"]'));
    }

    selPeriode.value = "";
    inputBaru.style.display = 'none'; inputBaru.value = '';
    document.getElementById('inputTanggalAwal').value = '';
    document.getElementById('inputTanggalAkhir').value = '';
  });

  selPeriode.addEventListener('change', function() {
    const val = this.value;
    const dapur = document.getElementById('inputDapur').value;
    
    if(val === "NEW") {
      inputBaru.style.display = "block";
      inputBaru.focus();
      document.getElementById('inputTanggalAwal').value = '';
      document.getElementById('inputTanggalAkhir').value = '';
    } else {
      inputBaru.style.display = "none";
      inputBaru.value = "";
      
      if(dapur && val) {
        const key = `${dapur}_${val}`;
        if(window.globalPeriodeData[key]) {
          document.getElementById('inputTanggalAwal').value = window.globalPeriodeData[key].tglAwal;
          document.getElementById('inputTanggalAkhir').value = window.globalPeriodeData[key].tglAkhir;
        }
      }
    }
  });

  // TOGGLE LOCK / VALIDASI (LANGKAH 1)
  const btnConfirm = document.getElementById('btnConfirmIdentity');
  const paguInputArea = document.getElementById('paguInputArea');
  const tglPagu = document.getElementById('inputTanggalPagu');

  btnConfirm.addEventListener('click', () => {
    const isLocked = btnConfirm.classList.contains('active');
    
    if (isLocked) {
      // PROSES UNLOCK
      btnConfirm.classList.remove('active');
      btnConfirm.innerHTML = "<i class='bx bx-lock-open-alt'></i> VALIDASI";
      
      document.getElementById('inputDapur').disabled = false;
      document.getElementById('inputNamaPeriode').disabled = false;
      document.getElementById('inputNamaPeriodeBaru').disabled = false;
      document.getElementById('inputTanggalAwal').disabled = false;
      document.getElementById('inputTanggalAkhir').disabled = false;
      
      paguInputArea.classList.remove('active');
      tglPagu.disabled = true;
      tglPagu.style.backgroundColor = "#e2e8f0";
      tglPagu.style.cursor = "not-allowed";
      tglPagu.value = '';
      return;
    }

    // PROSES LOCK
    const dapur = document.getElementById('inputDapur').value;
    let periode = selPeriode.value;
    if(periode === "NEW") periode = inputBaru.value.trim();
    
    if(!dapur || !periode) return Swal.fire('Peringatan', 'Pilih Unit Dapur dan Nama Periode!', 'warning');

    const awal = document.getElementById('inputTanggalAwal').value;
    const akhir = document.getElementById('inputTanggalAkhir').value;

    if(!awal || !akhir) return Swal.fire('Peringatan', 'Tentukan rentang tanggal Awal dan Akhir periode!', 'warning');

    // Aktifkan Input Area Langkah 2
    paguInputArea.classList.add('active');
    tglPagu.disabled = false;
    tglPagu.min = awal;
    tglPagu.max = akhir;
    tglPagu.style.backgroundColor = "white";
    tglPagu.style.cursor = "pointer";
    tglPagu.title = "Pilih Tanggal Pagu";
    
    if (tglPagu.value && (tglPagu.value < awal || tglPagu.value > akhir)) {
      tglPagu.value = '';
    }
    
    btnConfirm.classList.add('active');
    btnConfirm.innerHTML = "<i class='bx bx-lock'></i> TERKUNCI <span style='font-size:10px; font-weight:500; opacity:0.9;'>(Ubah)</span>";
    
    document.getElementById('inputDapur').disabled = true;
    document.getElementById('inputNamaPeriode').disabled = true;
    document.getElementById('inputNamaPeriodeBaru').disabled = true;
    document.getElementById('inputTanggalAwal').disabled = true;
    document.getElementById('inputTanggalAkhir').disabled = true;
  });

  // FORMAT HARGA PAKET & PERHITUNGAN LIVE
  document.getElementById('calcHarga1').addEventListener('keyup', function(){ this.value = formatRupiah(this.value); hitungTotalPM(); });
  document.getElementById('calcHarga2').addEventListener('keyup', function(){ this.value = formatRupiah(this.value); hitungTotalPM(); });

  function hitungTotalPM() {
    let harga1 = parseInt(document.getElementById('calcHarga1').value.replace(/\D/g, '')) || 0;
    let harga2 = parseInt(document.getElementById('calcHarga2').value.replace(/\D/g, '')) || 0;
    let totalPorsi = 0; 
    let totalRAB = 0;

    document.querySelectorAll('.pm-item').forEach(item => {
      let qty = parseInt(item.querySelector('.input-pm').value) || 0;
      let tier = item.querySelector('.tier-select').value;
      totalPorsi += qty;
      totalRAB += (tier === "1" ? qty * harga1 : qty * harga2);
    });

    document.getElementById('calcJumlahPaket').value = totalPorsi.toLocaleString('id-ID');
    document.getElementById('calcRAB').value = formatRupiah(totalRAB.toString());
  }

  document.querySelectorAll('.input-pm, .tier-select').forEach(el => el.addEventListener('input', hitungTotalPM));

  // LOAD DATA PAGU DARI SERVER FLASK
  async function loadDataPagu() {
    const container = document.getElementById('containerDataPagu');
    try {
      const res = await fetch('/api/pagu-mbg');
      const dataList = await res.json();
      container.innerHTML = "";
      window.dataRawPagu = {};
      window.globalPeriodeData = {};
      window.dataGlobalExcelPagu = [];

      if(!dataList || dataList.length === 0) { 
        container.innerHTML = `
          <div class="text-center py-5 text-muted bg-white rounded-3 border">
            <i class="bx bx-folder-open fs-1 text-secondary mb-2"></i>
            <p class="mb-0 fw-semibold">Belum ada riwayat pagu & RAB MBG terdaftar.</p>
            <small>Gunakan form di atas untuk membuat pagu periode perdana.</small>
          </div>
        `; 
        return; 
      }

      const groupDapur = {};
      dataList.forEach(data => {
        const id = data.id;
        const dapur = data.nama_dapur || "Tanpa Nama";
        const periode = data.nama_periode || "Pagu Harian";
        
        window.dataRawPagu[id] = data;
        
        const key = `${dapur}_${periode}`;
        if(!window.globalPeriodeData[key]) {
          window.globalPeriodeData[key] = { 
            tglAwal: data.tanggal_awal || data.tanggal_pagu, 
            tglAkhir: data.tanggal_akhir || data.tanggal_pagu 
          };
        }

        if(!groupDapur[dapur]) groupDapur[dapur] = { periodes: {} };
        if(!groupDapur[dapur].periodes[periode]) {
          groupDapur[dapur].periodes[periode] = { 
            list: [], 
            totalUang: 0, 
            totalPorsi: 0, 
            tglAwal: data.tanggal_awal, 
            tglAkhir: data.tanggal_akhir 
          };
        }
        
        groupDapur[dapur].periodes[periode].list.push(data);
        groupDapur[dapur].periodes[periode].totalUang += (data.rab_total || 0);
        groupDapur[dapur].periodes[periode].totalPorsi += (data.jumlah_paket_mbg || 0);

        window.dataGlobalExcelPagu.push({ 
          "Unit Dapur": dapur, 
          "Nama Periode": periode, 
          "Tanggal Hari": data.tanggal_pagu, 
          "Total Paket (Porsi)": data.jumlah_paket_mbg, 
          "RAB (Total)": data.rab_total 
        });
      });

      // Trigger pembaruan daftar periode di select dapur saat ini
      document.getElementById('inputDapur').dispatchEvent(new Event('change'));

      for (const [namaDapur, dData] of Object.entries(groupDapur)) {
        const safeId = namaDapur.replace(/[^a-zA-Z0-9]/g, '_');
        const section = document.createElement('div');
        section.className = 'dapur-section';
        section.setAttribute('data-dapur', namaDapur);

        let options = "";
        let firstPer = "";
        Object.keys(dData.periodes).forEach((p, i) => { 
          if(i === 0) firstPer = p; 
          options += `<option value="${p}">${p}</option>`; 
        });

        let html = `
          <div class="dapur-header-flex">
            <div class="dapur-title-name"><i class='bx bx-store-alt'></i> ${namaDapur}</div>
            <div class="dapur-controls-right">
              <button class="btn-print-dapur" onclick="cetakPeriodeDapur('${namaDapur}', '${safeId}')"><i class='bx bx-printer'></i> Cetak PDF</button>
              <select class="btn-periode-select sub-drop-${safeId}" onchange="filterPeriodeUI(this, '${safeId}')">${options}</select>
            </div>
          </div>
        `;

        for (const [pName, pData] of Object.entries(dData.periodes)) {
          let isShow = pName === firstPer ? '' : 'display:none;';
          let range = pData.tglAwal ? `${formatTglIndo(pData.tglAwal)} s/d ${formatTglIndo(pData.tglAkhir)}` : 'Harian';
          
          html += `
            <div class="per-block-${safeId}" data-periode="${pName}" style="${isShow}">
              <div class="summary-banner">
                <div class="summary-date"><i class='bx bx-calendar'></i> Rentang Tanggal: <b>${range}</b></div>
                <div class="summary-total"><i class='bx bx-wallet'></i> Total Anggaran Periode: <b>Rp ${formatRupiah(pData.totalUang)}</b> &nbsp;|&nbsp; <b>${pData.totalPorsi.toLocaleString('id-ID')} Porsi</b></div>
              </div>
              <div class="table-responsive-pagu">
                <table class="table-pagu">
                  <thead>
                    <tr>
                      <th rowspan="2" class="th-teal" style="text-align:left; padding-left:18px; width:200px;">Jadwal & Waktu Input</th>
                      <th rowspan="2" class="th-teal">Total Paket</th>
                      <th colspan="12" class="th-white">Kategori Penerima Manfaat</th>
                      <th rowspan="2" class="th-teal">Harga 1 (Rp)</th>
                      <th rowspan="2" class="th-teal">Harga 2 (Rp)</th>
                      <th rowspan="2" class="th-teal" style="width:140px;">RAB (Rp)</th>
                      <th rowspan="2" class="th-white" style="width:90px;">Aksi</th>
                    </tr>
                    <tr>
                      <th class="bg-tier1">Baduta</th><th class="bg-tier1">PAUD/TK</th><th class="bg-tier1">SD 1-3</th>
                      <th>SD 4-6</th><th>SMP/MTs</th><th>SMA/SMK</th>
                      <th class="bg-tier1">SLB</th><th class="bg-tier1">Santri</th>
                      <th>Pend/TK</th><th>Bumil</th><th>Busui</th>
                      <th class="bg-tier1">Lainnya</th>
                    </tr>
                  </thead>
                  <tbody>
          `;

          pData.list.sort((a, b) => new Date(a.tanggal_pagu) - new Date(b.tanggal_pagu));

          pData.list.forEach(item => {
            const pm = item.detail_pm || {};
            html += `
              <tr>
                <td class="td-jadwal">
                  <div class="tgl-utama">${formatTglIndo(item.tanggal_pagu)}</div>
                  <div class="waktu-input"><i class='bx bx-time'></i> ${formatWaktuIndoDetail(item.waktu_input)}</div>
                </td>
                <td class="color-total">${(item.jumlah_paket_mbg || 0).toLocaleString('id-ID')}</td>
                <td class="bg-tier1">${pm.baduta || '-'}</td>
                <td class="bg-tier1">${pm.paud || '-'}</td>
                <td class="bg-tier1">${pm.sd13 || '-'}</td>
                <td>${pm.sd46 || '-'}</td>
                <td>${pm.smp || '-'}</td>
                <td>${pm.sma || '-'}</td>
                <td class="bg-tier1">${pm.slb || '-'}</td>
                <td class="bg-tier1">${pm.santri || '-'}</td>
                <td>${pm.pend || '-'}</td>
                <td>${pm.bumil || '-'}</td>
                <td>${pm.busui || '-'}</td>
                <td class="bg-tier1">${pm.lainnya || '-'}</td>
                <td class="td-uang color-blue">${formatRupiah(item.harga_satuan_1 || 0)}</td>
                <td class="td-uang color-orange">${formatRupiah(item.harga_satuan_2 || 0)}</td>
                <td class="td-uang color-teal">Rp ${formatRupiah(item.rab_total || 0)}</td>
                <td>
                  <button type="button" class="btn-inline btn-edit-sm" onclick="editPagu('${item.id}')" title="Koreksi / Edit Data"><i class='bx bx-edit-alt'></i></button>
                  ${canDelete ? `<button type="button" class="btn-inline btn-del-sm" onclick="hapusPagu('${item.id}')" title="Hapus"><i class='bx bx-trash'></i></button>` : ''}
                </td>
              </tr>
            `;
          });

          html += `</tbody></table></div></div>`;
        }
        section.innerHTML = html;
        container.appendChild(section);
      }

      document.getElementById('filterDapurExcel').dispatchEvent(new Event('change'));
    } catch(e) { 
      console.error(e);
      container.innerHTML = '<div class="alert alert-danger">Gagal memuat riwayat pagu dari server.</div>';
    }
  }

  window.filterPeriodeUI = function(sel, safeId) {
    const val = sel.value;
    document.querySelectorAll(`.per-block-${safeId}`).forEach(b => {
      b.style.display = b.getAttribute('data-periode') === val ? '' : 'none';
    });
  };

  document.getElementById('filterDapurExcel').addEventListener('change', function(){
    const val = this.value.toLowerCase();
    document.querySelectorAll('.dapur-section').forEach(s => {
      s.style.display = (!val || s.getAttribute('data-dapur').toLowerCase() === val) ? '' : 'none';
    });
  });

  // CETAK PDF / SILENT PRINT VIA IFRAME
  window.cetakPeriodeDapur = function(namaDapur, safeId) {
    const dropdown = document.querySelector(`.sub-drop-${safeId}`);
    if(!dropdown) return;
    const selectedPeriode = dropdown.value;

    const filteredRows = Object.values(window.dataRawPagu).filter(item => 
      item.nama_dapur === namaDapur && item.nama_periode === selectedPeriode
    );

    if(filteredRows.length === 0) return Swal.fire('Info', 'Tidak ada data untuk dicetak.', 'info');
    
    filteredRows.sort((a, b) => new Date(a.tanggal_pagu) - new Date(b.tanggal_pagu));

    let tglRange = filteredRows[0].tanggal_awal ? `${formatTglIndo(filteredRows[0].tanggal_awal)} s/d ${formatTglIndo(filteredRows[0].tanggal_akhir)}` : '-';
    let trHtml = "";
    let grandTotalPorsi = 0;
    let grandTotalRAB = 0;

    filteredRows.forEach((item, index) => {
      const pm = item.detail_pm || {};
      grandTotalPorsi += (item.jumlah_paket_mbg || 0);
      grandTotalRAB += (item.rab_total || 0);

      trHtml += `
        <tr>
          <td style="text-align:center;">${index+1}</td>
          <td><b>${formatTglIndo(item.tanggal_pagu)}</b><br><small>${getHariName(item.tanggal_pagu)}</small></td>
          <td style="text-align:center; font-weight:700;">${(item.jumlah_paket_mbg||0).toLocaleString('id-ID')}</td>
          <td class="bg-tier1">${pm.baduta||'-'}</td><td class="bg-tier1">${pm.paud||'-'}</td><td class="bg-tier1">${pm.sd13||'-'}</td>
          <td>${pm.sd46||'-'}</td><td>${pm.smp||'-'}</td><td>${pm.sma||'-'}</td>
          <td class="bg-tier1">${pm.slb||'-'}</td><td class="bg-tier1">${pm.santri||'-'}</td>
          <td>${pm.pend||'-'}</td><td>${pm.bumil||'-'}</td><td>${pm.busui||'-'}</td>
          <td class="bg-tier1">${pm.lainnya||'-'}</td>
          <td style="text-align:right;">${formatRupiah(item.harga_satuan_1 || 0)}</td>
          <td style="text-align:right;">${formatRupiah(item.harga_satuan_2 || 0)}</td>
          <td style="text-align:right; font-weight:700; background:#f0fdfa;">${formatRupiah(item.rab_total || 0)}</td>
        </tr>
      `;
    });

    let printFrame = document.getElementById('printFrameDapur');
    if (!printFrame) {
      printFrame = document.createElement('iframe');
      printFrame.id = 'printFrameDapur';
      printFrame.style.display = 'none';
      document.body.appendChild(printFrame);
    }

    const doc = printFrame.contentWindow.document;
    doc.open();
    doc.write(`
      <!DOCTYPE html>
      <html><head><title>Cetak Pagu - ${namaDapur}</title>
      <style>
        body { font-family: Arial, sans-serif; padding: 25px; color: #1e293b; font-size: 11px; }
        .header { text-align: center; border-bottom: 3px double #000; padding-bottom: 12px; margin-bottom: 15px; }
        .header h2 { margin: 0; font-size: 18px; text-transform: uppercase; color: #0f766e; }
        .info-panel { margin-bottom: 15px; font-size: 12px; line-height: 1.6; }
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { border: 1px solid #cbd5e1; padding: 7px 5px; text-align: center; font-size: 10.5px; }
        th { background-color: #f1f5f9; font-weight: bold; font-size: 10px; }
        .bg-tier1 { background-color: #f0f7ff !important; }
        .footer-sign { margin-top: 40px; display: flex; justify-content: space-between; padding: 0 50px; }
        .sign-box { text-align: center; width: 180px; }
        .line { margin-top: 60px; border-bottom: 1px solid #000; }
      </style></head><body>
        <div class="header"><h2>REKAPITULASI PAGU ANGGARAN & PM MBG</h2><h3>${namaDapur}</h3></div>
        <div class="info-panel">
          <b>Grup Periode:</b> ${selectedPeriode} <br>
          <b>Rentang Waktu:</b> ${tglRange} <br>
          <b>Tanggal Cetak:</b> ${new Date().toLocaleString('id-ID')}
        </div>
        <table>
          <thead>
            <tr>
              <th rowspan="2">No</th><th rowspan="2">Tanggal Hari</th><th rowspan="2">Total Porsi</th>
              <th colspan="12">Rincian Kategori Penerima Manfaat</th>
              <th rowspan="2">Harga 1</th><th rowspan="2">Harga 2</th><th rowspan="2">Total RAB</th>
            </tr>
            <tr>
              <th class="bg-tier1">Baduta</th><th class="bg-tier1">PAUD</th><th class="bg-tier1">SD 1-3</th>
              <th>SD 4-6</th><th>SMP</th><th>SMA</th>
              <th class="bg-tier1">SLB</th><th class="bg-tier1">Santri</th>
              <th>Pend</th><th>Bumil</th><th>Busui</th>
              <th class="bg-tier1">Lain</th>
            </tr>
          </thead>
          <tbody>
            ${trHtml}
            <tr style="background:#f8fafc; font-weight:bold;">
              <td colspan="2" style="text-align:right;">TOTAL AKUMULASI</td>
              <td>${grandTotalPorsi.toLocaleString('id-ID')}</td>
              <td colspan="12"></td>
              <td colspan="2"></td>
              <td style="text-align:right; font-size:12px; color:#0f766e;">Rp ${formatRupiah(grandTotalRAB)}</td>
            </tr>
          </tbody>
        </table>
        <div class="footer-sign">
          <div class="sign-box"><p>Disusun Oleh,</p><div class="line"></div><p>Logistik Dapur</p></div>
          <div class="sign-box"><p>Mengetahui,</p><div class="line"></div><p>Verifikator / Bendahara</p></div>
        </div>
      </body></html>
    `);
    doc.close();

    setTimeout(() => {
      printFrame.contentWindow.focus();
      printFrame.contentWindow.print();
    }, 500);
  };

  // EXPORT EXCEL DENGAN SHEETJS
  window.exportExcelPagu = function() {
    const filterDapur = document.getElementById('filterDapurExcel').value;
    let recordsToExport = [];

    document.querySelectorAll('.dapur-section').forEach(section => {
      const namaDapur = section.getAttribute('data-dapur');
      if (filterDapur === "" || filterDapur === namaDapur) {
        const activePeriode = section.querySelector('.btn-periode-select').value;
        const filteredRaw = Object.values(window.dataRawPagu).filter(item => 
          item.nama_dapur === namaDapur && item.nama_periode === activePeriode
        );

        filteredRaw.sort((a,b) => new Date(a.tanggal_pagu) - new Date(b.tanggal_pagu));
        filteredRaw.forEach(item => {
          const pm = item.detail_pm || {};
          recordsToExport.push({
            "Unit Dapur": item.nama_dapur,
            "Nama Periode": item.nama_periode,
            "Tanggal Hari": item.tanggal_pagu,
            "Total Paket (Porsi)": item.jumlah_paket_mbg,
            "Baduta": pm.baduta || 0,
            "PAUD/TK": pm.paud || 0,
            "SD 1-3": pm.sd13 || 0,
            "SD 4-6": pm.sd46 || 0,
            "SMP/MTs": pm.smp || 0,
            "SMA/SMK": pm.sma || 0,
            "SLB": pm.slb || 0,
            "Santri": pm.santri || 0,
            "Pend/TK": pm.pend || 0,
            "Bumil": pm.bumil || 0,
            "Busui": pm.busui || 0,
            "Lainnya": pm.lainnya || 0,
            "Harga Paket 1": item.harga_satuan_1 || 0,
            "Harga Paket 2": item.harga_satuan_2 || 0,
            "Total RAB Real": item.rab_total || 0,
            "Waktu Input Sistem": formatWaktuIndoDetail(item.waktu_input)
          });
        });
      }
    });

    if (recordsToExport.length === 0) return Swal.fire('Info', 'Tidak ada data pada periode terpilih.', 'info');

    const ws = XLSX.utils.json_to_sheet(recordsToExport);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Rekap Pagu");

    let fname = "Rekap_Pagu_MBG.xlsx";
    if (filterDapur !== "") {
      const safeDap = filterDapur.replace(/\s+/g, '_');
      const safePer = recordsToExport[0]["Nama Periode"].replace(/[^a-zA-Z0-9]/g, '_');
      fname = `Pagu_${safeDap}_${safePer}.xlsx`;
    }
    XLSX.writeFile(wb, fname);
  };

  // SUBMIT FORM DATA PAGU
  document.getElementById('formPagu').addEventListener('submit', async (e) => {
    e.preventDefault();
    let periode = document.getElementById('inputNamaPeriode').value;
    if(periode === "NEW") periode = document.getElementById('inputNamaPeriodeBaru').value.trim();

    const payload = {
      id: modeEditPaguId,
      nama_dapur: document.getElementById('inputDapur').value,
      nama_periode: periode,
      tanggal_awal: document.getElementById('inputTanggalAwal').value,
      tanggal_akhir: document.getElementById('inputTanggalAkhir').value,
      tanggal_pagu: document.getElementById('inputTanggalPagu').value,
      harga_satuan_1: parseInt(document.getElementById('calcHarga1').value.replace(/\D/g,'')) || 0,
      harga_satuan_2: parseInt(document.getElementById('calcHarga2').value.replace(/\D/g,'')) || 0,
      jumlah_paket_mbg: parseInt(document.getElementById('calcJumlahPaket').value.replace(/\D/g,'')) || 0,
      rab_total: parseInt(document.getElementById('calcRAB').value.replace(/\D/g,'')) || 0,
      detail_pm: {
        baduta: parseInt(document.getElementById('pm_baduta').value)||0, 
        paud: parseInt(document.getElementById('pm_paud').value)||0, 
        sd13: parseInt(document.getElementById('pm_sd13').value)||0, 
        sd46: parseInt(document.getElementById('pm_sd46').value)||0, 
        smp: parseInt(document.getElementById('pm_smp').value)||0, 
        sma: parseInt(document.getElementById('pm_sma').value)||0,
        slb: parseInt(document.getElementById('pm_slb').value)||0, 
        santri: parseInt(document.getElementById('pm_santri').value)||0, 
        pend: parseInt(document.getElementById('pm_pend').value)||0, 
        bumil: parseInt(document.getElementById('pm_bumil').value)||0, 
        busui: parseInt(document.getElementById('pm_busui').value)||0, 
        lainnya: parseInt(document.getElementById('pm_lainnya').value)||0
      }
    };

    try {
      Swal.fire({ title:'Menyimpan...', didOpen:()=>Swal.showLoading() });
      const res = await fetch('/api/pagu-mbg', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const result = await res.json();
      if(!res.ok || !result.ok) {
        throw new Error(result.error || 'Gagal menyimpan data.');
      }

      Swal.fire('Berhasil', result.message || 'Data Pagu disimpan.', 'success');
      
      modeEditPaguId = null;
      document.getElementById('btnSubmitPagu').innerHTML = "<i class='bx bx-save me-1'></i> Simpan Data Pagu Harian";
      document.getElementById('btnBatalEdit').style.display = "none";
      
      // Kosongkan inputan PM harian tetapi pertahankan identitas jika mau lanjut input hari berikutnya
      document.getElementById('inputTanggalPagu').value = '';
      document.querySelectorAll('.input-pm').forEach(i => i.value = 0);
      hitungTotalPM();
      
      loadDataPagu();
    } catch(err) { 
      Swal.fire('Error', err.message || 'Gagal simpan data pagu.', 'error'); 
    }
  });

  // EDIT DATA PAGU
  window.editPagu = function(id) {
    const d = window.dataRawPagu[id];
    if(!d) return;
    modeEditPaguId = id;
    
    if(btnConfirm.classList.contains('active')) btnConfirm.click(); // Unlock first
    
    document.getElementById('inputDapur').value = d.nama_dapur;
    
    const sel = document.getElementById('inputNamaPeriode');
    let optionExists = Array.from(sel.options).some(opt => opt.value === d.nama_periode);
    if(optionExists) {
      sel.value = d.nama_periode;
      document.getElementById('inputNamaPeriodeBaru').style.display = 'none';
    } else {
      sel.value = "NEW";
      const inputBaru = document.getElementById('inputNamaPeriodeBaru');
      inputBaru.style.display = 'block';
      inputBaru.value = d.nama_periode;
    }
    
    document.getElementById('inputTanggalAwal').value = d.tanggal_awal || d.tanggal_pagu;
    document.getElementById('inputTanggalAkhir').value = d.tanggal_akhir || d.tanggal_pagu;
    
    btnConfirm.click(); // Lock it
    document.getElementById('inputTanggalPagu').value = d.tanggal_pagu;

    document.getElementById('calcHarga1').value = formatRupiah(d.harga_satuan_1 || 8000);
    document.getElementById('calcHarga2').value = formatRupiah(d.harga_satuan_2 || 10000);

    const pm = d.detail_pm || {};
    document.getElementById('pm_baduta').value = pm.baduta||0; 
    document.getElementById('pm_paud').value = pm.paud||0;
    document.getElementById('pm_sd13').value = pm.sd13||0; 
    document.getElementById('pm_sd46').value = pm.sd46||0;
    document.getElementById('pm_smp').value = pm.smp||0; 
    document.getElementById('pm_sma').value = pm.sma||0;
    document.getElementById('pm_slb').value = pm.slb||0; 
    document.getElementById('pm_santri').value = pm.santri||0;
    document.getElementById('pm_pend').value = pm.pend||0; 
    document.getElementById('pm_bumil').value = pm.bumil||0;
    document.getElementById('pm_busui').value = pm.busui||0; 
    document.getElementById('pm_lainnya').value = pm.lainnya||0;

    hitungTotalPM();
    document.getElementById('btnSubmitPagu').innerHTML = "<i class='bx bx-refresh me-1'></i> Perbarui Data Pagu Harian";
    document.getElementById('btnBatalEdit').style.display = "block";
    window.scrollTo({top: 0, behavior: 'smooth'});
  };

  window.batalEditPagu = function() {
    modeEditPaguId = null;
    document.getElementById('formPagu').reset();
    
    if(btnConfirm.classList.contains('active')) btnConfirm.click(); // unlock
    
    document.getElementById('inputNamaPeriodeBaru').style.display = 'none';
    document.getElementById('btnBatalEdit').style.display = "none";
    document.getElementById('btnSubmitPagu').innerHTML = "<i class='bx bx-save me-1'></i> Simpan Data Pagu Harian";
    hitungTotalPM();
  };

  // HAPUS DATA PAGU
  window.hapusPagu = async function(id) {
    if(!canDelete) return;
    const res = await Swal.fire({ 
      title: 'Hapus data pagu harian ini?', 
      text: 'Data yang dihapus tidak dapat dipulihkan kembali.',
      icon: 'warning', 
      showCancelButton: true, 
      confirmButtonColor: '#ef4444',
      cancelButtonColor: '#64748b',
      confirmButtonText: 'Ya, Hapus Data',
      cancelButtonText: 'Batal'
    });
    
    if(res.isConfirmed) {
      try {
        Swal.fire({ title: 'Menghapus...', didOpen: () => Swal.showLoading() });
        const resp = await fetch(`/api/pagu-mbg/${id}`, { method: 'DELETE' });
        const d = await resp.json();
        if(resp.ok && d.ok) {
          Swal.fire('Terhapus', 'Data pagu berhasil dihapus.', 'success');
          loadDataPagu();
        } else {
          Swal.fire('Gagal', d.error || 'Gagal menghapus data.', 'error');
        }
      } catch(e) {
        Swal.fire('Error', 'Terjadi kesalahan sistem saat menghapus.', 'error');
      }
    }
  };

  // INISIALISASI
  document.addEventListener('DOMContentLoaded', () => {
    hitungTotalPM();
    loadDataPagu();
  });
</script>
{% endblock %}