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

:root {
  --teal-900: #0d3d38;
  --teal-800: #0b5a52;
  --teal-700: #0b7a6e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-100: #ccfbf1;
  --teal-50:  #f0fdfa;
  --green-600: #059669;
  --green-500: #10b981;
  --green-50:  #ecfdf5;
  --red-500:  #ef4444;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-900:#0f172a;
}

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

/* ── Outer Container ── */
.pem-outer {
  max-width: 680px;
  margin: 0 auto;
}

/* ── Card ── */
.pem-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; }
}

/* ── Card Header ── */
.pem-header {
  background: linear-gradient(135deg, var(--green-600) 0%, var(--green-500) 60%, #34d399 100%);
  padding: 22px 28px 20px;
  position: relative;
  overflow: hidden;
}
.pem-header::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,.09);
}
.pem-header::after {
  content: '';
  position: absolute; bottom: -50px; right: 60px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.pem-header-inner {
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
.pem-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;
}
.pem-header h5 {
  color: #fff; font-size: 1.1rem; font-weight: 800; margin: 0 0 2px;
}
.pem-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;
}
.pem-header .back-link:hover { color: #fff; }

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

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

/* ── Section Divider ── */
.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);
}

/* ── Form 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; }

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

/* ── Kas Selector ── */
.kas-select-wrap { position: relative; }
.kas-badge-preview {
  margin-top: 10px;
  display: none;
  align-items: center; gap: 10px;
  background: var(--green-50);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 9px; padding: 10px 14px;
  animation: fadeUp .2s ease;
}
.kas-badge-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  font-size: .78rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.kas-badge-info {
  font-size: .78rem; color: var(--green-600); font-weight: 600;
}
.kas-badge-info small { display: block; color: var(--slate-400); font-weight: 500; margin-top: 1px; }

/* ── Footer Buttons ── */
.pem-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; cursor: pointer;
}
.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(--green-600), var(--green-500));
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem; font-weight: 800;
  box-shadow: 0 4px 14px rgba(16,185,129,.30);
  transition: transform .15s, box-shadow .15s;
}
.btn-save:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,185,129,.38); }
.btn-save:active { transform: scale(.97); }

/* ── Required asterisk ── */
.req { color: var(--red-500); margin-left: 2px; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .pem-body { padding: 18px 16px; }
  .pem-header { padding: 18px 16px 16px; }
  .pem-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="pem-wrapper container-fluid">
  <div class="pem-outer">
    <div class="pem-card">

      <!-- HEADER -->
      <div class="pem-header">
        <div class="pem-header-inner">
          <div class="pem-header-icon"><i class="bi bi-plus-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 Pemasukan Kas</h5>
          </div>
        </div>
      </div>

      <!-- BODY -->
      <div class="pem-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/pemasukan'); ?>" method="post" id="formPemasukan">

          <!-- ── 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="Iuran Warga"       <?php echo set_select('kategori', 'Iuran Warga'); ?>>Iuran Warga</option>
                  <option value="Sumbangan"         <?php echo set_select('kategori', 'Sumbangan'); ?>>Sumbangan</option>
                  <option value="Angsuran Pinjaman" <?php echo set_select('kategori', 'Angsuran Pinjaman'); ?>>Angsuran Pinjaman</option>
                  <option value="Setoran Tabungan"  <?php echo set_select('kategori', 'Setoran Tabungan'); ?>>Setoran Tabungan</option>
                  <option value="Bantuan"           <?php echo set_select('kategori', 'Bantuan'); ?>>Bantuan</option>
                  <option value="Lainnya"           <?php echo set_select('kategori', 'Lainnya'); ?>>Lainnya</option>
                </select>
              </div>
            </div>
          </div>

          <!-- ── Rekening Tujuan ── -->
          <div class="form-section">
            <div class="form-section-label"><i class="bi bi-wallet2"></i>Rekening Tujuan</div>
            <div class="field-solo">
              <label class="form-label">Masuk ke Kas <span class="req">*</span></label>
              <div class="kas-select-wrap">
                <select name="master_kas_id" class="form-select" id="kasSelect" required>
                  <option value="">-- Pilih Rekening / Kas Tujuan --</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-norek="<?php echo htmlspecialchars($mk->nomor_rekening ?? ''); ?>"
                            <?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 . ')';
                        if ($mk->nomor_rekening) echo ' — ' . $mk->nomor_rekening;
                      ?>
                    </option>
                  <?php endforeach; ?>
                </select>

                <!-- Badge preview -->
                <div class="kas-badge-preview" id="kasBadgePreview">
                  <span class="kas-badge-pill" id="kasBadgePill">
                    <i class="bi bi-wallet2" id="kasBadgeIcon"></i>
                    <span id="kasBadgeKode"></span>
                  </span>
                  <div class="kas-badge-info">
                    <span id="kasBadgeNama"></span>
                    <small id="kasBadgeNorek"></small>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- ── Nominal & Keterangan ── -->
          <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="formatNominalHint(this)">
              </div>
              <div class="nominal-hint" id="nominalHint"></div>
            </div>
            <div class="field-solo" style="margin-bottom:0;">
              <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>

        </form>
      </div>

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

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

<script>
const kasSelect   = document.getElementById('kasSelect');
const preview     = document.getElementById('kasBadgePreview');
const pill        = document.getElementById('kasBadgePill');
const pillKode    = document.getElementById('kasBadgeKode');
const pillNama    = document.getElementById('kasBadgeNama');
const pillNorek   = document.getElementById('kasBadgeNorek');
const pillIcon    = document.getElementById('kasBadgeIcon');

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

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

  const warna = opt.dataset.warna || '#059669';
  const jenis = opt.dataset.jenis || 'tunai';
  pill.style.background = warna;
  pillKode.textContent  = opt.dataset.kode;
  pillNama.textContent  = opt.dataset.nama;
  pillNorek.textContent = opt.dataset.norek ? 'No. Rek: ' + opt.dataset.norek : '';
  pillIcon.className    = 'bi ' + (jenisToBiClass[jenis] || 'bi-wallet2');
  preview.style.display = 'flex';
});

// Format nominal ke terbilang ringkas
function formatNominalHint(input) {
  const v = parseInt(input.value) || 0;
  const hint = document.getElementById('nominalHint');
  if (v <= 0) { hint.textContent = ''; return; }
  let text = 'Rp ';
  if (v >= 1_000_000_000)     text += (v/1_000_000_000).toFixed(2) + ' Miliar';
  else if (v >= 1_000_000)    text += (v/1_000_000).toFixed(2) + ' Juta';
  else if (v >= 1_000)        text += (v/1_000).toFixed(0) + ' Ribu';
  hint.textContent = text;
}

// Trigger jika ada nilai dari set_value (validasi gagal)
if (kasSelect.value) kasSelect.dispatchEvent(new Event('change'));
if (document.getElementById('nominalInput').value)
  formatNominalHint(document.getElementById('nominalInput'));
</script>