<!-- views/kas/pengeluaran.php -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --teal-700: #0b7a6e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-50:  #f0fdfa;
  --red-700:  #b91c1c;
  --red-600:  #dc2626;
  --red-500:  #ef4444;
  --red-400:  #f87171;
  --red-50:   #fef2f2;
  --green-600: #059669;
  --green-500: #10b981;
  --amber-500: #f59e0b;
  --amber-50:  #fffbeb;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-900:#0f172a;
}

.pen-wrapper {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--slate-900);
  padding-bottom: 40px;
}

.pen-outer {
  max-width: 680px;
  margin: 0 auto;
}

/* ── Card ── */
.pen-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.08);
  overflow: hidden;
  animation: fadeUp .35s ease both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:none; }
}

/* ── Header ── */
.pen-header {
  background: linear-gradient(135deg, var(--red-700) 0%, var(--red-500) 60%, var(--red-400) 100%);
  padding: 22px 28px 20px;
  position: relative;
  overflow: hidden;
}
.pen-header::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,.09);
}
.pen-header::after {
  content: '';
  position: absolute; bottom: -50px; right: 60px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.pen-header-inner {
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
.pen-header-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: rgba(255,255,255,.18);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
}
.pen-header h5 {
  color: #fff; font-size: 1.1rem; font-weight: 800; margin: 0 0 2px;
}
.pen-header .back-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,.75); font-size: .78rem; text-decoration: none;
  transition: color .15s;
}
.pen-header .back-link:hover { color: #fff; }

/* ── Body ── */
.pen-body { padding: 26px 28px; }

/* ── Alert ── */
.alert-err {
  background: var(--red-50); border: 1px solid #fecaca; border-radius: 9px;
  color: var(--red-700); padding: 11px 14px;
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .84rem; margin-bottom: 22px;
}

/* ── Section ── */
.form-section { margin-bottom: 22px; }
.form-section-label {
  font-size: .72rem; font-weight: 700; color: var(--slate-400);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 7px;
}
.form-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--slate-100);
}

/* ── Controls ── */
.form-label {
  font-size: .81rem; font-weight: 700; color: var(--slate-700);
  margin-bottom: 6px; display: block;
}
.form-control, .form-select {
  width: 100%; padding: 10px 13px; font-size: .875rem;
  border: 1.5px solid var(--slate-200); border-radius: 9px;
  background: #fff; color: var(--slate-900);
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-control:focus, .form-select:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}
textarea.form-control { resize: vertical; min-height: 88px; }
.form-control::placeholder { color: var(--slate-400); }

.field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 16px;
}
.field-col { display: flex; flex-direction: column; }
.field-solo { margin-bottom: 16px; }
.req { color: var(--red-500); margin-left: 2px; }

/* ── Nominal ── */
.nominal-wrap { position: relative; }
.nominal-prefix {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: .83rem; font-weight: 700; color: var(--red-500);
  pointer-events: none;
}
.nominal-wrap .form-control {
  padding-left: 42px;
  font-weight: 700; font-size: 1rem;
}
.nominal-hint { font-size: .72rem; color: var(--slate-400); margin-top: 4px; font-weight: 500; }

/* ── Kas Selector Preview ── */
.kas-preview {
  margin-top: 10px; display: none;
  background: var(--red-50);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 9px; padding: 12px 14px;
  gap: 12px; align-items: center;
  animation: fadeUp .2s ease;
}
.kas-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 20px;
  font-size: .78rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.kas-preview-info { flex: 1; min-width: 0; }
.kas-preview-nama { font-size: .82rem; font-weight: 700; color: var(--slate-700); margin-bottom: 2px; }

/* Saldo display */
.saldo-display {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 700;
}
.saldo-display .saldo-label { font-weight: 500; color: var(--slate-400); font-size: .76rem; }
.saldo-ok     { color: var(--green-600); }
.saldo-warn   { color: var(--amber-500); }
.saldo-danger { color: var(--red-600); }

/* Saldo warning box */
.saldo-warn-box {
  display: none; margin-top: 8px;
  background: var(--amber-50); border: 1px solid rgba(245,158,11,.25);
  border-radius: 8px; padding: 8px 12px;
  font-size: .78rem; color: #92400e;
  display: none; align-items: center; gap: 7px;
}

/* ── File Upload ── */
.file-drop {
  border: 2px dashed var(--slate-200); border-radius: 9px;
  padding: 18px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--slate-50); position: relative;
}
.file-drop:hover, .file-drop.dragover {
  border-color: var(--red-400); background: var(--red-50);
}
.file-drop input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.file-drop-icon { font-size: 1.6rem; color: var(--slate-300); margin-bottom: 6px; }
.file-drop p { font-size: .8rem; color: var(--slate-400); margin: 0; }
.file-drop strong { color: var(--slate-600); }
.file-drop .file-name {
  margin-top: 6px; font-size: .78rem; font-weight: 700;
  color: var(--teal-700); display: none;
}

/* ── Footer ── */
.pen-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-100);
  gap: 10px;
}
.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 9px;
  border: 1.5px solid var(--slate-200); background: #fff;
  color: var(--slate-500); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; font-weight: 700; text-decoration: none;
  transition: all .15s;
}
.btn-back:hover { background: var(--slate-100); border-color: var(--slate-300); color: var(--slate-700); }

.btn-save {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: 9px;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--red-700), var(--red-500));
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem; font-weight: 800;
  box-shadow: 0 4px 14px rgba(239,68,68,.28);
  transition: transform .15s, box-shadow .15s;
}
.btn-save:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(239,68,68,.38); }
.btn-save:active { transform: scale(.97); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .pen-body    { padding: 18px 16px; }
  .pen-header  { padding: 18px 16px 16px; }
  .pen-footer  { padding: 14px 16px; flex-direction: column-reverse; align-items: stretch; }
  .btn-back, .btn-save { justify-content: center; width: 100%; }
  .field-row { grid-template-columns: 1fr; gap: 12px; }
}
</style>

<div class="pen-wrapper container-fluid">
  <div class="pen-outer">
    <div class="pen-card">

      <!-- HEADER -->
      <div class="pen-header">
        <div class="pen-header-inner">
          <div class="pen-header-icon"><i class="bi bi-dash-circle-fill"></i></div>
          <div>
            <a href="<?php echo base_url('kas'); ?>" class="back-link">
              <i class="bi bi-arrow-left"></i> Kembali ke Kas RT
            </a>
            <h5>Tambah Pengeluaran Kas</h5>
          </div>
        </div>
      </div>

      <!-- BODY -->
      <div class="pen-body">

        <?php echo validation_errors('<div class="alert-err"><i class="bi bi-exclamation-circle-fill flex-shrink-0 mt-1"></i><span>', '</span></div>'); ?>

        <form action="<?php echo base_url('kas/pengeluaran'); ?>" method="post"
              enctype="multipart/form-data" id="formPengeluaran">

          <!-- ── Informasi Dasar ── -->
          <div class="form-section">
            <div class="form-section-label"><i class="bi bi-info-circle"></i>Informasi Dasar</div>
            <div class="field-row">
              <div class="field-col">
                <label class="form-label">Tanggal <span class="req">*</span></label>
                <input type="date" name="tanggal" class="form-control"
                       value="<?php echo set_value('tanggal', date('Y-m-d')); ?>" required>
              </div>
              <div class="field-col">
                <label class="form-label">Kategori <span class="req">*</span></label>
                <select name="kategori" class="form-select" required>
                  <option value="">-- Pilih Kategori --</option>
                  <option value="Pencairan Pinjaman"  <?php echo set_select('kategori', 'Pencairan Pinjaman'); ?>>Pencairan Pinjaman</option>
                  <option value="Penarikan Tabungan" <?php echo set_select('kategori', 'Penarikan Tabungan'); ?>>Penarikan Tabungan</option>
                  <option value="Operasional RT"     <?php echo set_select('kategori', 'Operasional RT'); ?>>Operasional RT</option>
                  <option value="Kegiatan RT"        <?php echo set_select('kategori', 'Kegiatan RT'); ?>>Kegiatan RT</option>
                  <option value="Pemeliharaan"       <?php echo set_select('kategori', 'Pemeliharaan'); ?>>Pemeliharaan</option>
                  <option value="Lainnya"            <?php echo set_select('kategori', 'Lainnya'); ?>>Lainnya</option>
                </select>
              </div>
            </div>
          </div>

          <!-- ── Sumber Dana ── -->
          <div class="form-section">
            <div class="form-section-label"><i class="bi bi-wallet2"></i>Sumber Dana</div>
            <div class="field-solo">
              <label class="form-label">Keluar dari Kas <span class="req">*</span></label>
              <select name="master_kas_id" class="form-select" id="kasSelect" required>
                <option value="">-- Pilih Rekening / Kas Sumber Dana --</option>
                <?php foreach ($kas_list as $mk): ?>
                  <option value="<?php echo $mk->id; ?>"
                          data-warna="<?php echo htmlspecialchars($mk->warna); ?>"
                          data-kode="<?php echo htmlspecialchars($mk->kode); ?>"
                          data-nama="<?php echo htmlspecialchars($mk->nama); ?>"
                          data-jenis="<?php echo htmlspecialchars($mk->jenis); ?>"
                          data-saldo="<?php echo $mk->saldo_saat_ini; ?>"
                          <?php echo set_select('master_kas_id', $mk->id); ?>>
                    <?php
                      $icon_text = $mk->jenis === 'bank' ? '🏦' : ($mk->jenis === 'ewallet' ? '📱' : '💵');
                      echo $icon_text . ' ' . $mk->nama . ' (' . $mk->kode . ')';
                      echo ' — Saldo: Rp ' . number_format($mk->saldo_saat_ini, 0, ',', '.');
                    ?>
                  </option>
                <?php endforeach; ?>
              </select>

              <!-- Preview saldo -->
              <div class="kas-preview" id="kasPreview">
                <div>
                  <span class="kas-pill" id="kasPill"><i class="bi bi-wallet2" id="kasIcon"></i> <span id="kasKode"></span></span>
                </div>
                <div class="kas-preview-info">
                  <div class="kas-preview-nama" id="kasNama"></div>
                  <div class="saldo-display">
                    <span class="saldo-label">Saldo tersedia:</span>
                    <span id="saldoVal">—</span>
                  </div>
                </div>
              </div>

              <!-- Warning saldo tipis -->
              <div class="saldo-warn-box" id="saldoWarnBox">
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
                <span id="saldoWarnText"></span>
              </div>
            </div>
          </div>

          <!-- ── Detail Transaksi ── -->
          <div class="form-section">
            <div class="form-section-label"><i class="bi bi-cash-coin"></i>Detail Transaksi</div>
            <div class="field-solo">
              <label class="form-label">Nominal <span class="req">*</span></label>
              <div class="nominal-wrap">
                <span class="nominal-prefix">Rp</span>
                <input type="number" name="nominal" class="form-control" id="nominalInput"
                       min="1000" value="<?php echo set_value('nominal'); ?>"
                       required placeholder="0" oninput="handleNominal()">
              </div>
              <div class="nominal-hint" id="nominalHint"></div>
            </div>
            <div class="field-solo">
              <label class="form-label">
                Keterangan <span style="color:var(--slate-400);font-weight:500;">(opsional)</span>
              </label>
              <textarea name="keterangan" class="form-control"
                        placeholder="Tambahkan catatan untuk transaksi ini..."><?php echo set_value('keterangan'); ?></textarea>
            </div>
          </div>

          <!-- ── Bukti Dokumen ── -->
          <div class="form-section" style="margin-bottom:0;">
            <div class="form-section-label"><i class="bi bi-paperclip"></i>Bukti Dokumen <span style="font-weight:400;">(opsional)</span></div>
            <div class="file-drop" id="fileDrop">
              <input type="file" name="bukti_dokumen" id="fileInput"
                     accept=".jpg,.jpeg,.png,.pdf" onchange="showFileName(this)">
              <div class="file-drop-icon"><i class="bi bi-cloud-arrow-up"></i></div>
              <p><strong>Klik untuk upload</strong> atau drag & drop file di sini</p>
              <p style="margin-top:4px;">JPG, PNG, PDF — Maks. 2MB</p>
              <div class="file-name" id="fileName"><i class="bi bi-file-earmark-check me-1"></i><span id="fileNameText"></span></div>
            </div>
          </div>

        </form>
      </div>

      <!-- FOOTER -->
      <div class="pen-footer">
        <a href="<?php echo base_url('kas'); ?>" class="btn-back">
          <i class="bi bi-arrow-left"></i> Kembali
        </a>
        <button type="submit" form="formPengeluaran" class="btn-save">
          <i class="bi bi-check-circle-fill"></i> Simpan Pengeluaran
        </button>
      </div>

    </div>
  </div>
</div>

<script>
const kasSelect   = document.getElementById('kasSelect');
const kasPreview  = document.getElementById('kasPreview');
const kasPill     = document.getElementById('kasPill');
const kasKode     = document.getElementById('kasKode');
const kasNama     = document.getElementById('kasNama');
const kasIcon     = document.getElementById('kasIcon');
const saldoVal    = document.getElementById('saldoVal');
const warnBox     = document.getElementById('saldoWarnBox');
const warnText    = document.getElementById('saldoWarnText');

const jenisToBiClass = { bank: 'bi-bank2', ewallet: 'bi-phone', tunai: 'bi-cash-stack' };

let currentSaldo = 0;

kasSelect.addEventListener('change', function () {
  const opt = this.options[this.selectedIndex];
  if (!this.value) {
    kasPreview.style.display = 'none';
    warnBox.style.display = 'none';
    return;
  }

  currentSaldo = parseFloat(opt.dataset.saldo) || 0;
  const warna  = opt.dataset.warna || '#dc2626';
  const jenis  = opt.dataset.jenis || 'tunai';

  kasPill.style.background = warna;
  kasKode.textContent = opt.dataset.kode;
  kasNama.textContent = opt.dataset.nama;
  kasIcon.className   = 'bi ' + (jenisToBiClass[jenis] || 'bi-wallet2');

  // Saldo color
  const saldoEl = saldoVal;
  saldoEl.textContent = 'Rp ' + currentSaldo.toLocaleString('id-ID');
  saldoEl.className = currentSaldo < 100_000 ? 'saldo-danger' :
                      currentSaldo < 500_000 ? 'saldo-warn'   : 'saldo-ok';

  kasPreview.style.display = 'flex';
  updateWarn();
});

function handleNominal() {
  const v = parseInt(document.getElementById('nominalInput').value) || 0;
  const hint = document.getElementById('nominalHint');

  // Terbilang hint
  let text = '';
  if (v > 0) {
    if (v >= 1_000_000_000)  text = 'Rp ' + (v/1_000_000_000).toFixed(2) + ' Miliar';
    else if (v >= 1_000_000) text = 'Rp ' + (v/1_000_000).toFixed(2) + ' Juta';
    else if (v >= 1_000)     text = 'Rp ' + (v/1_000).toFixed(0) + ' Ribu';
  }
  hint.textContent = text;
  updateWarn();
}

function updateWarn() {
  if (!kasSelect.value) return;
  const nominal = parseInt(document.getElementById('nominalInput').value) || 0;

  if (nominal > currentSaldo) {
    warnText.textContent = 'Nominal melebihi saldo tersedia! Saldo: Rp ' + currentSaldo.toLocaleString('id-ID');
    warnBox.style.display = 'flex';
  } else if (currentSaldo - nominal < 100_000) {
    warnText.textContent = 'Saldo akan menjadi sangat tipis setelah transaksi ini.';
    warnBox.style.display = 'flex';
  } else {
    warnBox.style.display = 'none';
  }
}

// File upload
function showFileName(input) {
  const nameEl = document.getElementById('fileName');
  const nameText = document.getElementById('fileNameText');
  if (input.files && input.files[0]) {
    nameText.textContent = input.files[0].name;
    nameEl.style.display = 'block';
  } else {
    nameEl.style.display = 'none';
  }
}

// Drag & drop visual
const fileDrop = document.getElementById('fileDrop');
fileDrop.addEventListener('dragover',  e => { e.preventDefault(); fileDrop.classList.add('dragover'); });
fileDrop.addEventListener('dragleave', () => fileDrop.classList.remove('dragover'));
fileDrop.addEventListener('drop',      e => { e.preventDefault(); fileDrop.classList.remove('dragover'); });

// Restore state on validation fail
if (kasSelect.value) kasSelect.dispatchEvent(new Event('change'));
if (document.getElementById('nominalInput').value) handleNominal();
</script>