<!-- verifikasi_cicilan.php -->
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#20c997;--teal-dark:#0fa37f;--teal-light:#d1fae5;
  --red:#ef4444;--red-light:#fee2e2;
  --amber:#f59e0b;--amber-light:#fef3c7;
  --g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;
  --g400:#9ca3af;--g500:#6b7280;--g700:#374151;--g900:#111827;
  --rsm:8px;--rmd:12px;--rlg:14px;
}

/* ===== DESKTOP ===== */
.shell{
  display:grid;
  grid-template-rows:52px 1fr;
  grid-template-columns:300px 1fr;
  height:calc(100vh - 60px);
  font-family:system-ui,sans-serif;
  font-size:13px;
  color:var(--g900);
  background:var(--g50);
}
.topbar{grid-column:1/-1;grid-row:1;background:#fff;border-bottom:1.5px solid var(--g200);display:flex;align-items:center;gap:12px;padding:0 18px;flex-shrink:0}
.topbar-icon{width:30px;height:30px;background:#fef3c7;border-radius:var(--rmd);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.topbar-icon i{font-size:.82rem;color:#d97706}
.topbar-title{font-size:.9rem;font-weight:800;color:var(--g900)}
.topbar-sub{font-size:.7rem;color:var(--g500);margin-left:5px}
.topbar-badge{margin-left:auto;border-radius:999px;font-size:.66rem;font-weight:700;padding:3px 10px;background:#fef3c7;color:#92400e;white-space:nowrap}

.col-left{grid-column:1;grid-row:2;background:#fff;border-right:1.5px solid var(--g200);display:flex;flex-direction:column;overflow:hidden;min-height:0}
.col-right{grid-column:2;grid-row:2;padding:12px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}

.panel-head{padding:9px 14px;border-bottom:1.5px solid var(--g100);background:var(--g50);display:flex;align-items:center;gap:6px;flex-shrink:0}
.panel-head i{font-size:.78rem;color:var(--teal)}
.panel-head i.warn{color:#d97706}
.section-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--g500)}
.panel-body{padding:14px;flex:1;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}

/* Info rows */
.info-row{display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--g100)}
.info-row:last-child{border-bottom:none}
.info-lbl{font-size:.69rem;color:var(--g500);flex-shrink:0;width:110px}
.info-val{font-size:.76rem;font-weight:700;color:var(--g900);text-align:right}

.nominal-big{font-size:1.4rem;font-weight:800;color:#16a34a;text-align:center;padding:12px 0}

.badge-metode{display:inline-flex;align-items:center;gap:4px;background:var(--g100);color:var(--g700);border-radius:999px;padding:3px 9px;font-size:.68rem;font-weight:700}
.badge-wait{background:#fef3c7;color:#92400e;border-radius:999px;font-size:.68rem;font-weight:700;padding:3px 9px}

/* Bukti preview */
.bukti-wrap{border:1.5px dashed var(--g200);border-radius:var(--rmd);overflow:hidden;background:var(--g50)}
.bukti-wrap img{width:100%;max-height:220px;object-fit:contain;display:block;padding:8px}
.bukti-wrap .bukti-pdf{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;font-size:.78rem;color:var(--g500)}
.bukti-wrap .bukti-none{text-align:center;padding:24px;font-size:.75rem;color:var(--g400)}
.bukti-link{display:block;text-align:center;font-size:.7rem;color:var(--teal);font-weight:700;padding:6px;border-top:1px solid var(--g100);text-decoration:none}
.bukti-link:hover{background:var(--teal-light)}

/* Form verifikasi */
.veri-card{background:#fff;border-radius:var(--rlg);border:1.5px solid var(--g100);overflow:hidden}
.veri-card-head{padding:9px 14px;border-bottom:1.5px solid var(--g100);background:var(--g50);display:flex;align-items:center;gap:6px}
.veri-card-head i{font-size:.78rem;color:#d97706}
.veri-card-body{padding:14px;display:flex;flex-direction:column;gap:12px}

.field-grp{display:flex;flex-direction:column;gap:4px}
.field-lbl{font-size:.71rem;font-weight:700;color:var(--g700)}
.field-lbl .req{color:var(--red);margin-left:2px}
.fc{border:1.5px solid var(--g200);border-radius:var(--rsm);font-size:.8rem;padding:7px 10px;color:var(--g900);background:#fff;width:100%;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.fc:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(32,201,151,.13)}
textarea.fc{resize:none;height:60px}

/* Action buttons */
.action-bar{padding:12px 14px;border-top:1.5px solid var(--g100);background:var(--g50);display:flex;gap:8px;flex-shrink:0;align-items:center}
.btn-back{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:var(--rsm);font-size:.78rem;font-weight:700;border:1.5px solid var(--g200);background:#fff;color:var(--g500);text-decoration:none;cursor:pointer;transition:all .15s}
.btn-back:hover{border-color:var(--g400);color:var(--g700)}
.btn-tolak{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--rsm);font-size:.8rem;font-weight:700;border:1.5px solid #fecaca;background:var(--red-light);color:#991b1b;cursor:pointer;transition:all .15s}
.btn-tolak:hover{background:#fecaca}
.btn-terima{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border-radius:var(--rsm);font-size:.8rem;font-weight:700;border:none;background:var(--teal);color:#fff;cursor:pointer;margin-left:auto;box-shadow:0 2px 8px rgba(32,201,151,.28);transition:background .15s,transform .1s}
.btn-terima:hover{background:var(--teal-dark);transform:translateY(-1px)}

/* Warning box */
.warn-box{background:#fffbeb;border:1.5px solid #fde68a;border-radius:var(--rmd);padding:9px 12px;font-size:.69rem;color:#92400e;line-height:1.65}
.warn-box .warn-ttl{font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:5px}

/* ===== MOBILE ===== */
.mobile-shell{display:none;flex-direction:column;font-family:system-ui,sans-serif;font-size:13px;color:var(--g900);background:var(--g50);min-height:100vh}
.mob-topbar{background:#fff;border-bottom:1.5px solid var(--g200);display:flex;align-items:center;gap:10px;padding:12px 16px}
.mob-topbar-icon{width:32px;height:32px;background:#fef3c7;border-radius:var(--rmd);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mob-topbar-icon i{font-size:.82rem;color:#d97706}
.mob-title{font-size:.9rem;font-weight:800}
.mob-sub{font-size:.68rem;color:var(--g500);margin-top:1px}
.mob-badge{margin-left:auto;border-radius:999px;font-size:.64rem;font-weight:700;padding:3px 9px;background:#fef3c7;color:#92400e;flex-shrink:0}
.mob-content{padding:12px;display:flex;flex-direction:column;gap:12px;padding-bottom:24px}
.mob-card{background:#fff;border-radius:var(--rlg);border:1.5px solid var(--g100);overflow:hidden}
.mob-card-head{padding:9px 14px;border-bottom:1.5px solid var(--g100);background:var(--g50);display:flex;align-items:center;gap:6px}
.mob-card-head i{font-size:.78rem;color:var(--teal)}
.mob-card-head i.warn{color:#d97706}
.mob-card-head span{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--g500)}
.mob-card-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.mob-field-grp{display:flex;flex-direction:column;gap:4px}
.mob-field-lbl{font-size:.72rem;font-weight:700;color:var(--g700)}
.mob-field-lbl .req{color:var(--red);margin-left:2px}
.mob-fc{border:1.5px solid var(--g200);border-radius:var(--rsm);font-size:.84rem;padding:8px 10px;color:var(--g900);background:#fff;width:100%;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.mob-fc:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(32,201,151,.13)}
textarea.mob-fc{resize:none;height:64px}
.mob-action-bar{display:flex;gap:8px;padding:12px 14px;border-top:1.5px solid var(--g100);background:var(--g50);flex-wrap:wrap}
.mob-btn-back{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:9px 12px;border-radius:var(--rsm);font-size:.8rem;font-weight:700;border:1.5px solid var(--g200);background:#fff;color:var(--g500);text-decoration:none;cursor:pointer}
.mob-btn-tolak{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:9px;border-radius:var(--rsm);font-size:.82rem;font-weight:700;border:1.5px solid #fecaca;background:var(--red-light);color:#991b1b;cursor:pointer}
.mob-btn-terima{flex:2;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:var(--rsm);font-size:.84rem;font-weight:700;border:none;background:var(--teal);color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(32,201,151,.28)}

@media(max-width:767px){
  .shell{display:none}
  .mobile-shell{display:flex}
}
</style>

<?php
  $bulan_nama = ['','Januari','Februari','Maret','April','Mei','Juni',
                 'Juli','Agustus','September','Oktober','November','Desember'];
  $ext        = pathinfo($cicilan->bukti_transfer ?? '', PATHINFO_EXTENSION);
  $is_image   = in_array(strtolower($ext), ['jpg','jpeg','png']);
  $is_pdf     = strtolower($ext) === 'pdf';
  $bukti_url  = $cicilan->bukti_transfer ? base_url('uploads/iuran/' . $cicilan->bukti_transfer) : null;
?>

<!-- ============================================================ -->
<!-- DESKTOP                                                       -->
<!-- ============================================================ -->
<div class="shell">

  <!-- Topbar -->
  <div class="topbar">
    <div class="topbar-icon"><i class="bi bi-shield-check"></i></div>
    <span class="topbar-title">Verifikasi Cicilan</span>
    <small class="topbar-sub">Tinjau bukti dan tentukan keputusan</small>
    <span class="topbar-badge"><i class="bi bi-hourglass-split"></i> Menunggu Verifikasi</span>
  </div>

  <!-- Kolom Kiri: Detail Cicilan -->
  <div class="col-left">
    <div class="panel-head">
      <i class="bi bi-receipt"></i>
      <span class="section-label">Detail Cicilan</span>
    </div>
    <div class="panel-body">

      <div class="nominal-big">
        Rp <?php echo number_format($cicilan->nominal_cicilan, 0, ',', '.'); ?>
        <div style="font-size:.68rem;font-weight:500;color:var(--g500);margin-top:2px">Nominal Cicilan Ke-<?php echo $cicilan->ke; ?></div>
      </div>

      <div>
        <?php
          $rows = [
            ['Nama Warga',   $cicilan->nama_lengkap],
            ['Jenis Iuran',  $cicilan->nama_iuran],
            ['Tanggal Bayar',date('d M Y', strtotime($cicilan->tanggal_bayar))],
            ['Metode',       ucfirst($cicilan->metode_pembayaran)],
            ['Keterangan',   $cicilan->keterangan ?: '—'],
          ];
          foreach($rows as $r):
        ?>
        <div class="info-row">
          <span class="info-lbl"><?php echo $r[0]; ?></span>
          <span class="info-val"><?php echo $r[1]; ?></span>
        </div>
        <?php endforeach; ?>
      </div>

      <!-- Bukti -->
      <div>
        <div style="font-size:.68rem;font-weight:700;color:var(--g700);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em">Bukti Pembayaran</div>
        <div class="bukti-wrap">
          <?php if($is_image && $bukti_url): ?>
            <img src="<?php echo $bukti_url; ?>" alt="Bukti Transfer">
            <a href="<?php echo $bukti_url; ?>" target="_blank" class="bukti-link">
              <i class="bi bi-zoom-in"></i> Lihat Ukuran Penuh
            </a>
          <?php elseif($is_pdf && $bukti_url): ?>
            <div class="bukti-pdf">
              <i class="bi bi-file-earmark-pdf-fill" style="font-size:1.6rem;color:#dc2626"></i>
              <span>Dokumen PDF</span>
            </div>
            <a href="<?php echo $bukti_url; ?>" target="_blank" class="bukti-link">
              <i class="bi bi-box-arrow-up-right"></i> Buka PDF
            </a>
          <?php else: ?>
            <div class="bukti-none"><i class="bi bi-image" style="font-size:1.4rem;display:block;margin-bottom:6px"></i>Tidak ada bukti</div>
          <?php endif; ?>
        </div>
      </div>

    </div>
  </div>

  <!-- Kolom Kanan: Form Keputusan -->
  <div class="col-right">

    <div class="warn-box">
      <div class="warn-ttl"><i class="bi bi-exclamation-triangle-fill"></i> Perhatian</div>
      Pastikan nominal, bukti pembayaran, dan metode sudah sesuai sebelum menerima cicilan ini.
      Cicilan yang diterima akan otomatis masuk ke kas tujuan dan memperbarui saldo tagihan warga.
    </div>

    <div class="veri-card">
      <div class="veri-card-head">
        <i class="bi bi-check2-circle warn"></i>
        <span class="section-label">Keputusan Verifikasi</span>
      </div>
      <form action="<?php echo base_url('iuran/verifikasi_cicilan/' . $cicilan->id); ?>" method="post" id="veriForm">
        <div class="veri-card-body">

          <div class="field-grp">
            <label class="field-lbl">Kas Tujuan <span class="req">*</span></label>
            <select name="master_kas_id" class="fc" id="kas_select" required>
              <option value="">-- Pilih Kas --</option>
              <?php foreach($kas_list as $k): ?>
                <option value="<?php echo $k->id; ?>"><?php echo $k->nama; ?></option>
              <?php endforeach; ?>
            </select>
            <div style="font-size:.62rem;color:var(--g400);margin-top:2px">
              Wajib diisi jika menerima cicilan
            </div>
          </div>

          <div class="field-grp">
            <label class="field-lbl">Catatan (opsional)</label>
            <textarea name="catatan_verifikasi" class="fc" placeholder="Tambahkan catatan verifikasi..."></textarea>
          </div>

        </div>
        <div class="action-bar">
          <a href="<?php echo base_url('iuran/history_cicilan/' . $cicilan->pembayaran_iuran_id); ?>" class="btn-back">
            <i class="bi bi-arrow-left"></i> Kembali
          </a>
          <button type="button" class="btn-tolak"
                  data-confirm="Tolak cicilan ini? Data akan dihapus dan warga perlu mengulang pembayaran."
                  data-title="Konfirmasi Tolak" data-type="danger">
            <i class="bi bi-x-circle"></i> Tolak
          </button>
          <button type="button" class="btn-terima"
                  onclick="validateTerima(event, false)">
            <i class="bi bi-check-circle-fill"></i> Terima & Verifikasi
          </button>
        </div>
      </form>
    </div>

  </div>

</div><!-- end .shell -->


<!-- ============================================================ -->
<!-- MOBILE                                                        -->
<!-- ============================================================ -->
<div class="mobile-shell">

  <div class="mob-topbar">
    <div class="mob-topbar-icon"><i class="bi bi-shield-check"></i></div>
    <div>
      <div class="mob-title">Verifikasi Cicilan</div>
      <div class="mob-sub">Ke-<?php echo $cicilan->ke; ?> &bull; <?php echo $cicilan->nama_lengkap; ?></div>
    </div>
    <span class="mob-badge">Menunggu</span>
  </div>

  <div class="mob-content">

    <!-- Nominal -->
    <div class="mob-card">
      <div class="mob-card-head">
        <i class="bi bi-receipt"></i>
        <span>Detail Cicilan</span>
      </div>
      <div class="mob-card-body">
        <div style="text-align:center;padding:8px 0">
          <div style="font-size:.65rem;color:var(--g400);margin-bottom:3px">NOMINAL CICILAN KE-<?php echo $cicilan->ke; ?></div>
          <div style="font-size:1.5rem;font-weight:800;color:#16a34a">
            Rp <?php echo number_format($cicilan->nominal_cicilan, 0, ',', '.'); ?>
          </div>
        </div>
        <?php
          $rows = [
            ['Warga',        $cicilan->nama_lengkap],
            ['Iuran',        $cicilan->nama_iuran],
            ['Tgl Bayar',    date('d M Y', strtotime($cicilan->tanggal_bayar))],
            ['Metode',       ucfirst($cicilan->metode_pembayaran)],
            ['Keterangan',   $cicilan->keterangan ?: '—'],
          ];
          foreach($rows as $r):
        ?>
        <div class="info-row">
          <span class="info-lbl"><?php echo $r[0]; ?></span>
          <span class="info-val"><?php echo $r[1]; ?></span>
        </div>
        <?php endforeach; ?>
      </div>
    </div>

    <!-- Bukti Mobile -->
    <div class="mob-card">
      <div class="mob-card-head">
        <i class="bi bi-image"></i>
        <span>Bukti Pembayaran</span>
      </div>
      <div style="padding:12px 14px">
        <div class="bukti-wrap">
          <?php if($is_image && $bukti_url): ?>
            <img src="<?php echo $bukti_url; ?>" alt="Bukti" style="width:100%;max-height:260px;object-fit:contain;display:block;padding:8px">
            <a href="<?php echo $bukti_url; ?>" target="_blank" class="bukti-link">
              <i class="bi bi-zoom-in"></i> Lihat Ukuran Penuh
            </a>
          <?php elseif($is_pdf && $bukti_url): ?>
            <div class="bukti-pdf">
              <i class="bi bi-file-earmark-pdf-fill" style="font-size:2rem;color:#dc2626"></i>
              <span>Dokumen PDF</span>
            </div>
            <a href="<?php echo $bukti_url; ?>" target="_blank" class="bukti-link">
              <i class="bi bi-box-arrow-up-right"></i> Buka PDF
            </a>
          <?php else: ?>
            <div class="bukti-none"><i class="bi bi-image" style="font-size:1.5rem;display:block;margin-bottom:6px"></i>Tidak ada bukti</div>
          <?php endif; ?>
        </div>
      </div>
    </div>

    <!-- Form Keputusan Mobile -->
    <div class="mob-card">
      <div class="mob-card-head">
        <i class="bi bi-check2-circle warn"></i>
        <span>Keputusan Verifikasi</span>
      </div>
      <form action="<?php echo base_url('iuran/verifikasi_cicilan/' . $cicilan->id); ?>" method="post" id="veriFormMob">
        <div class="mob-card-body">
          <div style="background:#fffbeb;border:1.5px solid #fde68a;border-radius:var(--rmd);padding:9px 12px;font-size:.7rem;color:#92400e;line-height:1.6">
            <strong>Perhatian:</strong> Pastikan nominal dan bukti sudah sesuai sebelum menerima.
          </div>
          <div class="mob-field-grp">
            <label class="mob-field-lbl">Kas Tujuan <span class="req">*</span></label>
            <select name="master_kas_id" class="mob-fc" id="mob_kas_select" required>
              <option value="">-- Pilih Kas --</option>
              <?php foreach($kas_list as $k): ?>
                <option value="<?php echo $k->id; ?>"><?php echo $k->nama; ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="mob-field-grp">
            <label class="mob-field-lbl">Catatan (opsional)</label>
            <textarea name="catatan_verifikasi" class="mob-fc" placeholder="Tambahkan catatan..."></textarea>
          </div>
        </div>
        <div class="mob-action-bar">
          <a href="<?php echo base_url('iuran/history_cicilan/' . $cicilan->pembayaran_iuran_id); ?>" class="mob-btn-back">
            <i class="bi bi-arrow-left"></i>
          </a>
          <button type="button" class="mob-btn-tolak"
                  data-confirm="Tolak cicilan ini?" data-title="Tolak Cicilan" data-type="danger">
            <i class="bi bi-x-circle"></i> Tolak
          </button>
          <button type="button" class="mob-btn-terima"
                  onclick="validateTerima(event, true)">
            <i class="bi bi-check-circle-fill"></i> Terima
          </button>
        </div>
      </form>
    </div>

  </div>
</div><!-- end .mobile-shell -->

<script>
function validateTerima(e, isMobile) {
  e.preventDefault();
  const sel = document.getElementById(isMobile ? 'mob_kas_select' : 'kas_select');
  if (!sel.value) {
    alert('Pilih kas tujuan terlebih dahulu sebelum menerima cicilan!');
    sel.focus();
    return;
  }
  
  GlobalModal.confirm({
    title: 'Konfirmasi Terima',
    message: 'Terima cicilan ini? Nominal akan masuk ke kas yang dipilih.',
    type: 'success',
    confirmText: 'Ya, Terima',
    onConfirm: function() {
        const form = document.getElementById(isMobile ? 'veriFormMob' : 'veriForm');
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'aksi';
        input.value = 'terima';
        form.appendChild(input);
        form.submit();
    }
  });
}
</script>