<!-- views/kas/edit.php -->
<?php
$is_pemasukan = ($trx->jenis === 'pemasukan');
$theme_class  = $is_pemasukan ? 'pem' : 'pen';
$primary_hex  = $is_pemasukan ? '#10b981' : '#ef4444';
$header_grad  = $is_pemasukan 
    ? 'linear-gradient(135deg, #059669 0%, #10b981 60%, #34d399 100%)' 
    : 'linear-gradient(135deg, #b91c1c 0%, #ef4444 60%, #f87171 100%)';
?>

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

:root {
  --primary-color: <?php echo $primary_hex; ?>;
  --teal-700: #0b7a6e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-50:  #f0fdfa;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-900:#0f172a;
}

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

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

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

/* ── Body ── */
.edit-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 ── */
.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: #ef4444; 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(--primary-color);
  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(--slate-50);
  border: 1px solid var(--slate-200);
  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; }

/* ── 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 { border-color: var(--primary-color); background: var(--slate-100); }
.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-name { margin-top: 6px; font-size: .78rem; font-weight: 700; color: var(--teal-700); }

/* ── Footer ── */
.edit-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: <?php echo $header_grad; ?>;
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem; font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: transform .15s, box-shadow .15s;
}
.btn-save:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.20); }

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

      <!-- HEADER -->
      <div class="edit-header">
        <div class="edit-header-inner">
          <div class="edit-header-icon">
            <i class="bi <?php echo $is_pemasukan ? 'bi-plus-circle-fill' : '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>Edit <?php echo ucfirst($trx->jenis); ?> Kas</h5>
          </div>
        </div>
      </div>

      <!-- BODY -->
      <div class="edit-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/edit/' . $trx->id); ?>" method="post" enctype="multipart/form-data" id="formEdit">

          <!-- ── 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', $trx->tanggal); ?>" 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>
                  <?php if ($is_pemasukan): ?>
                    <option value="Iuran Warga"       <?php echo set_select('kategori', 'Iuran Warga',       $trx->kategori == 'Iuran Warga'); ?>>Iuran Warga</option>
                    <option value="Sumbangan"         <?php echo set_select('kategori', 'Sumbangan',         $trx->kategori == 'Sumbangan'); ?>>Sumbangan</option>
                    <option value="Angsuran Pinjaman" <?php echo set_select('kategori', 'Angsuran Pinjaman', $trx->kategori == 'Angsuran Pinjaman'); ?>>Angsuran Pinjaman</option>
                    <option value="Setoran Tabungan"  <?php echo set_select('kategori', 'Setoran Tabungan',  $trx->kategori == 'Setoran Tabungan'); ?>>Setoran Tabungan</option>
                    <option value="Bantuan"           <?php echo set_select('kategori', 'Bantuan',           $trx->kategori == 'Bantuan'); ?>>Bantuan</option>
                  <?php else: ?>
                    <option value="Pencairan Pinjaman"  <?php echo set_select('kategori', 'Pencairan Pinjaman',  $trx->kategori == 'Pencairan Pinjaman'); ?>>Pencairan Pinjaman</option>
                    <option value="Penarikan Tabungan" <?php echo set_select('kategori', 'Penarikan Tabungan', $trx->kategori == 'Penarikan Tabungan'); ?>>Penarikan Tabungan</option>
                    <option value="Operasional RT"     <?php echo set_select('kategori', 'Operasional RT',     $trx->kategori == 'Operasional RT'); ?>>Operasional RT</option>
                    <option value="Kegiatan RT"        <?php echo set_select('kategori', 'Kegiatan RT',        $trx->kategori == 'Kegiatan RT'); ?>>Kegiatan RT</option>
                    <option value="Pemeliharaan"       <?php echo set_select('kategori', 'Pemeliharaan',       $trx->kategori == 'Pemeliharaan'); ?>>Pemeliharaan</option>
                  <?php endif; ?>
                  <option value="Lainnya" <?php echo set_select('kategori', 'Lainnya', $trx->kategori == 'Lainnya'); ?>>Lainnya</option>
                </select>
              </div>
            </div>
          </div>

          <!-- ── Kas / Rekening ── -->
          <div class="form-section">
            <div class="form-section-label"><i class="bi bi-wallet2"></i><?php echo $is_pemasukan ? 'Rekening Tujuan' : 'Sumber Dana'; ?></div>
            <div class="field-solo">
              <label class="form-label"><?php echo $is_pemasukan ? 'Masuk ke' : 'Keluar dari'; ?> Kas <span class="req">*</span></label>
              <select name="master_kas_id" class="form-select" id="kasSelect" required>
                <option value="">-- Pilih Kas --</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); ?>"
                          <?php echo set_select('master_kas_id', $mk->id, $trx->master_kas_id == $mk->id); ?>>
                    <?php echo $mk->nama . ' (' . $mk->kode . ')'; ?>
                  </option>
                <?php endforeach; ?>
              </select>

              <div class="kas-preview" id="kasPreview">
                <span class="kas-pill" id="kasPill"><i class="bi bi-wallet2" id="kasIcon"></i> <span id="kasKode"></span></span>
                <div class="kas-preview-info">
                  <div class="kas-preview-nama" id="kasNama"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- ── Detail ── -->
          <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="1" value="<?php echo set_value('nominal', (int)$trx->nominal); ?>"
                       required oninput="formatHint(this)">
              </div>
              <div class="nominal-hint" id="nominalHint"></div>
            </div>
            <div class="field-solo">
              <label class="form-label">Keterangan</label>
              <textarea name="keterangan" class="form-control" placeholder="Catatan tambahan..."><?php echo set_value('keterangan', $trx->keterangan); ?></textarea>
            </div>
          </div>

          <?php if (!$is_pemasukan): ?>
          <!-- ── Bukti ── -->
          <div class="form-section" style="margin-bottom:0;">
            <div class="form-section-label"><i class="bi bi-paperclip"></i>Bukti Dokumen</div>
            <?php if ($trx->bukti_dokumen): ?>
              <div class="mb-2 p-2 border rounded d-flex align-items-center gap-2" style="font-size: .8rem;">
                <i class="bi bi-file-earmark-check text-success"></i>
                <span>File saat ini: <a href="<?php echo base_url('uploads/bukti/' . $trx->bukti_dokumen); ?>" target="_blank"><?php echo $trx->bukti_dokumen; ?></a></span>
              </div>
            <?php endif; ?>
            <div class="file-drop">
              <input type="file" name="bukti_dokumen" accept=".jpg,.jpeg,.png,.pdf" onchange="document.getElementById('fn').textContent = this.files[0].name; document.getElementById('fn').style.display='block';">
              <div class="file-drop-icon"><i class="bi bi-cloud-arrow-up"></i></div>
              <p>Klik atau drop file untuk <strong>mengganti</strong> bukti</p>
              <div class="file-name" id="fn" style="display:none;"></div>
            </div>
          </div>
          <?php endif; ?>

        </form>
      </div>

      <!-- FOOTER -->
      <div class="edit-footer">
        <a href="<?php echo base_url('kas'); ?>" class="btn-back">Batal</a>
        <button type="submit" form="formEdit" class="btn-save">Update Transaksi</button>
      </div>

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

<script>
const kasSelect = document.getElementById('kasSelect');
const preview   = document.getElementById('kasPreview');
const pill      = document.getElementById('kasPill');
const pkode     = document.getElementById('kasKode');
const pnama     = document.getElementById('kasNama');
const picon     = document.getElementById('kasIcon');

const icons = { 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; }
  pill.style.background = opt.dataset.warna || '#64748b';
  pkode.textContent = opt.dataset.kode;
  pnama.textContent = opt.dataset.nama;
  picon.className = 'bi ' + (icons[opt.dataset.jenis] || 'bi-wallet2');
  preview.style.display = 'flex';
});

function formatHint(input) {
  const v = parseInt(input.value) || 0;
  const h = document.getElementById('nominalHint');
  if (v <= 0) { h.textContent = ''; return; }
  let t = 'Rp ';
  if (v >= 1e9) t += (v/1e9).toFixed(2) + ' Miliar';
  else if (v >= 1e6) t += (v/1e6).toFixed(2) + ' Juta';
  else if (v >= 1e3) t += (v/1e3).toFixed(0) + ' Ribu';
  h.textContent = t;
}

if (kasSelect.value) kasSelect.dispatchEvent(new Event('change'));
formatHint(document.getElementById('nominalInput'));
</script>
