<!-- views/tabungan/setor.php — Redesigned to match Iuran Warga theme -->

<style>
:root {
  --teal-primary:  #20c997;
  --teal-dark:     #17a589;
  --teal-light:    #d1f5ec;
  --teal-xlight:   #f0fdf9;
  --text-main:     #1e293b;
  --text-muted:    #64748b;
  --text-light:    #94a3b8;
  --border:        #e2e8f0;
  --card-bg:       #ffffff;
  --page-bg:       #f8fafc;
  --danger:        #ef4444;
  --danger-bg:     #fef2f2;
  --danger-border: #fecaca;
  --info-bg:       #eff6ff;
  --info-text:     #2563eb;
  --info-border:   #bfdbfe;
  --success-bg:    #f0fdf4;
  --success-text:  #16a34a;
  --success-border:#bbf7d0;
  --shadow-md:     0 4px 16px rgba(0,0,0,.08);
  --radius:        14px;
  --radius-sm:     9px;
  --radius-xs:     6px;
}

.setor-page {
  background: var(--page-bg);
  min-height: 100vh;
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media(min-width:768px){ .setor-page { padding: 36px 24px 60px; } }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-decoration: none; margin-bottom: 20px; transition: color .15s;
  align-self: flex-start; max-width: 960px; width: 100%;
}
.back-link:hover { color: var(--teal-dark); }

/* Steps */
.steps { display: flex; width: 100%; max-width: 960px; margin-bottom: 20px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 15px; left: 50%; width: 100%;
  height: 2px; background: var(--border); z-index: 0;
}
.step.done:not(:last-child)::after { background: var(--teal-primary); }
.step-dot {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border);
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text-muted); z-index: 1;
  position: relative; transition: all .2s;
}
.step.active .step-dot { border-color: var(--teal-primary); background: var(--teal-primary); color: #fff; }
.step.done .step-dot   { border-color: var(--teal-primary); background: var(--teal-primary); color: #fff; }
.step-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-top: 5px; text-align: center; }
.step.active .step-label { color: var(--teal-dark); }

/* Card */
.setor-card {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
  width: 100%; max-width: 960px; overflow: hidden;
}
.setor-card-header {
  padding: 22px 32px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
}
.setor-header-icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--teal-light); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.setor-header-icon i { font-size: 22px; color: var(--teal-dark); }
.setor-header-title { font-size: 17px; font-weight: 700; color: var(--text-main); margin: 0; }
.setor-header-sub   { font-size: 13px; color: var(--text-muted); margin: 0; }
.setor-card-body { padding: 28px 32px 32px; }
@media(max-width:480px){
  .setor-card-header { padding: 16px; }
  .setor-card-body   { padding: 16px; }
}

/* 2-column grid on desktop */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
@media(max-width:640px){ .form-grid-2 { grid-template-columns: 1fr; } }
.form-grid-full { grid-column: 1 / -1; }

/* Alerts */
.alert-custom {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 13.5px; margin-bottom: 20px;
}
.alert-danger-c { background: var(--danger-bg);  border: 1px solid var(--danger-border); color: #b91c1c; }
.alert-info-c   { background: var(--info-bg);    border: 1px solid var(--info-border);   color: var(--info-text); }
.alert-custom i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* Section label */
.form-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}

/* Form elements */
.form-group { margin-bottom: 18px; }
.f-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 6px; }
.f-label .req { color: var(--danger); margin-left: 2px; }
.f-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

.f-input, .f-select, .f-textarea {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-main); background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.f-input:focus, .f-select:focus, .f-textarea:focus {
  border-color: var(--teal-primary); box-shadow: 0 0 0 3px rgba(32,201,151,.15);
}
.f-input[readonly] { background: var(--page-bg); color: var(--text-muted); cursor: not-allowed; }
.f-textarea { resize: vertical; min-height: 80px; }
.f-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
input[type=number].f-input::-webkit-inner-spin-button,
input[type=number].f-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number].f-input { -moz-appearance: textfield; }

/* File upload */
.f-file-wrap {
  border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  padding: 20px 16px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; position: relative; background: #fafafa;
}
.f-file-wrap:hover, .f-file-wrap.drag { border-color: var(--teal-primary); background: var(--teal-xlight); }
.f-file-wrap i { font-size: 28px; color: var(--teal-primary); display: block; margin-bottom: 6px; }
.f-file-wrap p { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; }
.f-file-wrap strong { color: var(--teal-dark); }
.f-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.f-file-name {
  margin-top: 8px; font-size: 12.5px; color: var(--success-text);
  display: none; align-items: center; gap: 5px;
  background: var(--success-bg); border: 1px solid var(--success-border);
  border-radius: var(--radius-xs); padding: 5px 10px;
}

/* Nominal chips */
.nominal-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.n-chip {
  padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--border); background: #fff; color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
.n-chip:hover { border-color: var(--teal-primary); color: var(--teal-dark); background: var(--teal-xlight); }

/* Kas info box */
.kas-info-box {
  margin-top: 10px; padding: 14px; border-radius: var(--radius-sm);
  background: var(--success-bg); border: 1px solid var(--success-border); display: none;
}
.kas-info-row { display: flex; align-items: center; gap: 10px; }
.kas-badge-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px; color: #fff;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.kas-info-name  { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.kas-info-norek { font-size: 12px; color: var(--text-muted); }
.kas-info-note  { font-size: 12px; color: var(--success-text); margin-top: 8px; display: flex; align-items: center; gap: 5px; }

/* Divider */
.setor-divider { height: 1px; background: var(--border); margin: 22px 0; }

/* Footer */
.setor-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.btn-back-f {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--radius-sm);
  background: #fff; border: 1.5px solid var(--border);
  color: var(--text-muted); font-size: 13.5px; font-weight: 600;
  text-decoration: none; transition: all .15s;
}
.btn-back-f:hover { border-color: var(--text-muted); color: var(--text-main); }
.btn-submit-f {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; border-radius: var(--radius-sm);
  background: var(--teal-primary); border: none; color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s;
  flex: 1; justify-content: center; max-width: 260px;
}
.btn-submit-f:hover { background: var(--teal-dark); }
.btn-submit-f:disabled { opacity: .7; cursor: not-allowed; }
</style>

<div class="setor-page">

  <a href="<?php echo base_url('tabungan'); ?>" class="back-link">
    <i class="bi bi-arrow-left"></i> Kembali ke Tabungan
  </a>

  <!-- Progress Steps -->
  <div class="steps">
    <div class="step active" id="s1">
      <div class="step-dot">1</div>
      <div class="step-label">Data</div>
    </div>
    <div class="step" id="s2">
      <div class="step-dot">2</div>
      <div class="step-label">Pembayaran</div>
    </div>
    <div class="step" id="s3">
      <div class="step-dot"><i class="bi bi-check" style="font-size:13px;"></i></div>
      <div class="step-label">Konfirmasi</div>
    </div>
  </div>

  <div class="setor-card">
    <div class="setor-card-header">
      <div class="setor-header-icon">
        <i class="bi bi-arrow-down-circle"></i>
      </div>
      <div>
        <p class="setor-header-title">Pengajuan Setoran Tabungan</p>
        <p class="setor-header-sub">Isi formulir lalu unggah bukti pembayaran</p>
      </div>
    </div>

    <div class="setor-card-body">

      <?php if (validation_errors()): ?>
      <div class="alert-custom alert-danger-c">
        <i class="bi bi-exclamation-circle-fill"></i>
        <div><?php echo validation_errors(); ?></div>
      </div>
      <?php endif; ?>
      <?php if ($this->session->flashdata('error')): ?>
      <div class="alert-custom alert-danger-c">
        <i class="bi bi-exclamation-circle-fill"></i>
        <div><?php echo $this->session->flashdata('error'); ?></div>
      </div>
      <?php endif; ?>

      <form action="<?php echo base_url('tabungan/setor'); ?>" method="post" enctype="multipart/form-data" id="setorForm">

        <!-- ── Kolom kiri: Identitas | Kolom kanan: Kas Tujuan ── -->
        <div class="form-grid-2">

          <!-- Kolom Kiri -->
          <div>
            <p class="form-section-label">Identitas Penabung</p>

            <?php if ($user_role == 'warga'): ?>
            <div class="form-group">
              <label class="f-label">Nama Warga</label>
              <input type="text" class="f-input" value="<?php echo $warga_saya->nama_lengkap; ?>" readonly>
              <input type="hidden" name="warga_id" value="<?php echo $warga_saya->id; ?>">
            </div>
            <?php if (!$punya_tabungan): ?>
            <div class="form-group">
              <label class="f-label">Jenis Tabungan <span class="req">*</span></label>
              <select name="jenis_tabungan" class="f-select">
                <option value="sukarela">Sukarela</option>
                <option value="wajib">Wajib</option>
                <option value="arisan">Arisan</option>
              </select>
            </div>
            <?php endif; ?>
            <?php else: ?>
            <div class="form-group">
              <label class="f-label">Pilih Warga <span class="req">*</span></label>
              <select name="warga_id" class="f-select" required>
                <option value="">— Pilih Warga —</option>
                <?php foreach ($warga as $w): ?>
                <option value="<?php echo $w->id; ?>"><?php echo $w->nama_lengkap; ?> (NIK: <?php echo $w->nik; ?>)</option>
                <?php endforeach; ?>
              </select>
            </div>
            <div class="form-group">
              <label class="f-label">Jenis Tabungan <span class="req">*</span></label>
              <select name="jenis_tabungan" class="f-select">
                <option value="sukarela">Sukarela</option>
                <option value="wajib">Wajib</option>
                <option value="arisan">Arisan</option>
              </select>
            </div>
            <?php endif; ?>

            <!-- Nominal -->
            <div style="height:1px;background:var(--border);margin:18px 0;"></div>
            <p class="form-section-label">Detail Setoran</p>

            <div class="form-group">
              <label class="f-label">Nominal Setor <span class="req">*</span></label>
              <input type="number" name="nominal" class="f-input" id="nominalInput"
                min="10000" value="<?php echo set_value('nominal'); ?>"
                required placeholder="Contoh: 50000">
              <div class="nominal-chips">
                <button type="button" class="n-chip" onclick="setNominal(10000)">Rp 10.000</button>
                <button type="button" class="n-chip" onclick="setNominal(25000)">Rp 25.000</button>
                <button type="button" class="n-chip" onclick="setNominal(50000)">Rp 50.000</button>
                <button type="button" class="n-chip" onclick="setNominal(100000)">Rp 100.000</button>
                <button type="button" class="n-chip" onclick="setNominal(200000)">Rp 200.000</button>
              </div>
              <div class="f-hint">Minimal Rp 10.000</div>
            </div>

            <div class="form-group">
              <label class="f-label">Keterangan <small style="font-weight:400;color:var(--text-light);">(opsional)</small></label>
              <textarea name="keterangan" class="f-textarea"
                placeholder="Contoh: Setoran bulan Februari..."><?php echo set_value('keterangan'); ?></textarea>
            </div>
          </div><!-- /kolom kiri -->

          <!-- Kolom Kanan -->
          <div>
            <p class="form-section-label">Rekening / Kas Tujuan</p>

            <div class="form-group">
              <label class="f-label">Setoran Masuk ke Kas <span class="req">*</span></label>
              <select name="master_kas_id" class="f-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 $mk->warna; ?>"
                  data-kode="<?php echo $mk->kode; ?>"
                  data-norek="<?php echo $mk->nomor_rekening; ?>"
                  data-atasnama="<?php echo $mk->atas_nama; ?>"
                  data-jenis="<?php echo $mk->jenis; ?>"
                  data-nama="<?php echo $mk->nama; ?>"
                  <?php echo set_select('master_kas_id', $mk->id); ?>>
                  <?php
                    $icon = $mk->jenis === 'bank' ? '🏦' : ($mk->jenis === 'ewallet' ? '📱' : '💵');
                    echo $icon . ' ' . $mk->nama . ' (' . $mk->kode . ')';
                    if ($mk->nomor_rekening) echo ' — ' . $mk->nomor_rekening;
                  ?>
                </option>
                <?php endforeach; ?>
              </select>
              <div class="kas-info-box" id="kasInfo">
                <div class="kas-info-row">
                  <span class="kas-badge-pill" id="kasBadge">
                    <i class="bi bi-wallet2" id="kasIcon"></i>
                    <span id="kasKode"></span>
                  </span>
                  <div>
                    <div class="kas-info-name"  id="kasNamaDetail"></div>
                    <div class="kas-info-norek" id="kasNorek"></div>
                  </div>
                </div>
                <div class="kas-info-note">
                  <i class="bi bi-arrow-down-circle"></i>
                  Setoran masuk ke rekening ini setelah diverifikasi admin
                </div>
              </div>
            </div>

            <!-- Bukti transfer: hanya untuk warga -->
            <?php if ($user_role == 'warga'): ?>
            <div style="height:1px;background:var(--border);margin:18px 0;"></div>
            <p class="form-section-label">Bukti Pembayaran</p>
            <div class="form-group">
              <label class="f-label">Upload Bukti Transfer <span class="req">*</span></label>
              <div class="f-file-wrap" id="fileWrap">
                <input type="file" name="bukti_transfer" class="f-file-input" id="fileInput" accept="image/*,.pdf" required>
                <i class="bi bi-cloud-arrow-up"></i>
                <p><strong>Klik untuk upload</strong> atau seret file ke sini</p>
                <p>JPG, PNG, PDF — maks. 2MB</p>
              </div>
              <div class="f-file-name" id="fileName">
                <i class="bi bi-check-circle-fill"></i>
                <span id="fileNameText"></span>
              </div>
              <div class="f-hint">Upload struk transfer atau foto bukti pembayaran</div>
            </div>
            <?php else: ?>
            <!-- Admin: tidak perlu bukti transfer, tampilkan info saja -->
            <div style="height:1px;background:var(--border);margin:18px 0;"></div>
            <div class="alert-custom" style="background:#fff7ed;border:1px solid #fed7aa;color:#92400e;margin-bottom:0;">
              <i class="bi bi-shield-check-fill" style="color:#f97316;"></i>
              <div>
                <strong>Mode Admin</strong> — Setoran yang diinput admin akan langsung <strong>otomatis terverifikasi</strong> tanpa perlu bukti transfer.
              </div>
            </div>
            <?php endif; ?>

          </div><!-- /kolom kanan -->
        </div><!-- /form-grid-2 -->

        <div class="alert-custom alert-info-c" style="margin-top:20px;margin-bottom:0;">
          <i class="bi bi-info-circle-fill"></i>
          <?php if ($user_role == 'admin'): ?>
          <div>Setoran yang diinput admin akan <strong>langsung terupdate</strong> ke saldo warga dan kas RT.</div>
          <?php else: ?>
          <div>Setoran akan diproses setelah <strong>disetujui admin</strong>. Saldo dan kas RT otomatis terupdate.</div>
          <?php endif; ?>

        <div class="setor-footer">
          <a href="<?php echo base_url('tabungan'); ?>" class="btn-back-f">
            <i class="bi bi-arrow-left"></i> Kembali
          </a>
          <button type="submit" class="btn-submit-f" id="submitBtn">
            <i class="bi bi-send"></i> Ajukan Setoran
          </button>
        </div>

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

<script>
/* Kas info */
const kasSelect     = document.getElementById('kasSelect');
const kasInfo       = document.getElementById('kasInfo');
const kasBadge      = document.getElementById('kasBadge');
const kasKode       = document.getElementById('kasKode');
const kasNamaDetail = document.getElementById('kasNamaDetail');
const kasNorek      = document.getElementById('kasNorek');
const kasIcon       = document.getElementById('kasIcon');
const iconMap       = { bank:'bi-bank', ewallet:'bi-phone-fill', tunai:'bi-cash-stack' };

kasSelect.addEventListener('change', function () {
  const opt = this.options[this.selectedIndex];
  if (this.value) {
    kasBadge.style.backgroundColor = opt.dataset.warna || '#20c997';
    kasIcon.className = 'bi ' + (iconMap[opt.dataset.jenis] || 'bi-wallet2');
    kasKode.textContent = opt.dataset.kode;
    kasNamaDetail.textContent = opt.dataset.nama || opt.text.split('(')[0].trim();
    kasNorek.textContent = opt.dataset.norek
      ? 'No. Rek: ' + opt.dataset.norek + (opt.dataset.atasnama ? ' a.n. ' + opt.dataset.atasnama : '')
      : (opt.dataset.atasnama || '');
    kasInfo.style.display = 'block';
  } else {
    kasInfo.style.display = 'none';
  }
  checkProgress();
});
if (kasSelect.value) kasSelect.dispatchEvent(new Event('change'));

/* Nominal chips */
function setNominal(v) {
  document.getElementById('nominalInput').value = v;
  checkProgress();
}

/* File input — hanya ada untuk warga */
const fileInputEl = document.getElementById('fileInput');
if (fileInputEl) {
  fileInputEl.addEventListener('change', function () {
    const fn = document.getElementById('fileName');
    if (this.files && this.files[0]) {
      document.getElementById('fileNameText').textContent = this.files[0].name;
      fn.style.display = 'flex';
    } else {
      fn.style.display = 'none';
    }
    checkProgress();
  });
  const fileWrap = document.getElementById('fileWrap');
  if (fileWrap) {
    ['dragenter','dragover'].forEach(e => fileWrap.addEventListener(e, () => fileWrap.classList.add('drag')));
    ['dragleave','drop'].forEach(e => fileWrap.addEventListener(e, () => fileWrap.classList.remove('drag')));
  }
}

/* Progress steps */
function activateStep(n) {
  ['s1','s2','s3'].forEach((id, i) => {
    const el = document.getElementById(id);
    el.classList.remove('active','done');
    if (i < n) el.classList.add('done');
    else if (i === n) el.classList.add('active');
  });
}
function checkProgress() {
  const kasOk  = kasSelect.value !== '';
  const nomEl  = document.getElementById('nominalInput');
  const nomOk  = nomEl && parseInt(nomEl.value) >= 10000;
  const fileEl = document.getElementById('fileInput');
  // Admin tidak perlu file; warga perlu file
  const fileOk = !fileEl || (fileEl.files && fileEl.files[0]);
  if (fileOk && kasOk && nomOk) activateStep(2);
  else if (kasOk || nomOk) activateStep(1);
  else activateStep(0);
}
document.getElementById('nominalInput').addEventListener('input', checkProgress);

/* Submit loading */
document.getElementById('setorForm').addEventListener('submit', function () {
  const btn = document.getElementById('submitBtn');
  btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> Mengirim...';
  btn.disabled = true;
});
</script>