<style>
*, *::before, *::after { box-sizing: border-box; }

:root {
    --teal: #20c997;
    --teal-dark: #0fa37f;
    --teal-light: #d1fae5;
    --red: #ef4444;
    --red-light: #fee2e2;
    --yellow: #f59e0b;
    --yellow-light: #fef3c7;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #111827;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
}

/* ===== PAGE HEADER ===== */
.page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.page-header-icon {
    width: 44px; height: 44px; background: var(--yellow-light);
    border-radius: var(--radius-md); display: flex; align-items: center;
    justify-content: center; font-size: 1.2rem; color: var(--yellow); flex-shrink: 0;
}
.page-header h4 { font-size: 1.1rem; font-weight: 800; color: var(--gray-900); margin: 0; line-height: 1.2; }
.page-header small { font-size: .78rem; color: var(--gray-500); display: block; margin-top: 2px; }

/* ===== LAYOUT ===== */
.edit-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    align-items: start;
}
.edit-layout .col-full { grid-column: 1 / -1; }

/* ===== SECTION CARD ===== */
.form-card { background: #fff; border-radius: var(--radius-lg); box-shadow: 0 1px 6px rgba(0,0,0,.08); overflow: hidden; }
.form-card-header {
    padding: 11px 18px; border-bottom: 1.5px solid var(--gray-100);
    display: flex; align-items: center; gap: 8px; background: var(--gray-50);
}
.form-card-header .section-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--gray-500);
}
.form-card-header i { font-size: .88rem; color: var(--teal); }
.form-card-body { padding: 18px; }

/* ===== DETAIL TAGIHAN (sidebar kiri) ===== */
.detail-list { display: flex; flex-direction: column; gap: 14px; }
.detail-item { display: flex; flex-direction: column; gap: 2px; }
.detail-item .dl { font-size: .71rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-400); }
.detail-item .dv { font-size: .88rem; color: var(--gray-900); font-weight: 600; }

/* Status badge */
.status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.sb-lunas   { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.sb-pending { background: var(--red-light); color: #991b1b; border: 1px solid #fecaca; }
.sb-verif   { background: var(--yellow-light); color: #92400e; border: 1px solid #fde68a; }

/* ===== FIELDS ===== */
.field-group { margin-bottom: 16px; }
.field-group:last-child { margin-bottom: 0; }
label.field-label { display: block; font-size: .79rem; font-weight: 700; color: var(--gray-700); margin-bottom: 5px; }
label.field-label .req { color: var(--red); margin-left: 2px; }
label.field-label .opt { font-size: .71rem; font-weight: 500; color: var(--gray-400); margin-left: 4px; }

.form-control, .form-select {
    border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
    font-size: .875rem; padding: 9px 12px; color: var(--gray-900);
    background: #fff; width: 100%;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--teal); box-shadow: 0 0 0 3px rgba(32,201,151,.13); outline: none;
}
.form-control::placeholder { color: var(--gray-400); }
textarea.form-control { resize: vertical; min-height: 100px; }

.field-hint { font-size: .74rem; color: var(--gray-400); margin-top: 5px; display: flex; align-items: center; gap: 4px; }

/* Nominal prefix */
.nominal-wrapper { display: flex; align-items: stretch; }
.nominal-prefix {
    background: var(--gray-100); border: 1.5px solid var(--gray-200); border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    padding: 0 12px; display: flex; align-items: center;
    font-size: .82rem; font-weight: 700; color: var(--gray-500); white-space: nowrap;
}
.nominal-wrapper .form-control { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ===== NOTICE BOXES ===== */
.notice-box {
    border-radius: var(--radius-md); padding: 12px 14px;
    font-size: .79rem; display: flex; gap: 9px; align-items: flex-start; line-height: 1.55;
}
.notice-box i { flex-shrink: 0; margin-top: 1px; }
.notice-box.warning { background: #fffbeb; border: 1.5px solid #fde68a; color: #92400e; }
.notice-box.danger  { background: var(--red-light); border: 1.5px solid #fecaca; color: #991b1b; }

/* ===== ACTION BAR ===== */
.action-bar {
    display: flex; gap: 10px; padding: 14px 18px;
    border-top: 1.5px solid var(--gray-100); background: var(--gray-50);
    align-items: center; justify-content: space-between;
}
.btn-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--radius-sm); font-size: .84rem; font-weight: 700;
    border: 1.5px solid var(--gray-200); background: #fff; color: var(--gray-500);
    text-decoration: none; transition: all .2s; white-space: nowrap;
}
.btn-back:hover { border-color: var(--gray-400); color: var(--gray-700); }
.btn-save {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 22px; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 700;
    border: none; background: var(--yellow); color: #fff; cursor: pointer;
    box-shadow: 0 2px 8px rgba(245,158,11,.28);
    transition: background .2s, transform .1s, box-shadow .2s;
}
.btn-save:hover { background: #d97706; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245,158,11,.35); }
.btn-save:active { transform: translateY(0); }

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
    .edit-layout { grid-template-columns: 1fr; gap: 12px; }
    .edit-layout .col-full { grid-column: 1; }
    .form-card-body { padding: 14px; }
    .action-bar { flex-direction: column; padding: 14px; }
    .btn-back { justify-content: center; width: 100%; }
    .btn-save { width: 100%; justify-content: center; }
}
</style>

<div class="container-fluid px-0 px-md-3 py-3">

    <!-- Page Header -->
    <div class="page-header">
        <div class="page-header-icon">
            <i class="bi bi-pencil-square"></i>
        </div>
        <div>
            <h4>Edit Tagihan Iuran</h4>
            <small>Ubah data nominal atau keterangan tagihan</small>
        </div>
    </div>

    <?php if(validation_errors()): ?>
    <div class="notice-box danger mb-3">
        <i class="bi bi-exclamation-triangle-fill"></i>
        <div><?php echo validation_errors(); ?></div>
    </div>
    <?php endif; ?>

    <?php if($this->session->flashdata('error')): ?>
    <div class="notice-box danger mb-3">
        <i class="bi bi-exclamation-triangle-fill"></i>
        <div><?php echo $this->session->flashdata('error'); ?></div>
    </div>
    <?php endif; ?>

    <?php
    $status = isset($iuran->status_bayar) ? $iuran->status_bayar : (isset($iuran->status) ? $iuran->status : 'pending');
    $bulan_nama = ['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
    ?>

    <form action="" method="post">
    <div class="edit-layout">

        <!-- ── KIRI: Info Tagihan ── -->
        <div class="form-card">
            <div class="form-card-header">
                <i class="bi bi-person-badge"></i>
                <span class="section-label">Info Tagihan</span>
            </div>
            <div class="form-card-body">
                <div class="detail-list">
                    <div class="detail-item">
                        <span class="dl">Nama Warga</span>
                        <span class="dv"><?php echo htmlspecialchars(isset($iuran->nama_lengkap) ? $iuran->nama_lengkap : '-'); ?></span>
                    </div>
                    <div class="detail-item">
                        <span class="dl">Jenis Iuran</span>
                        <span class="dv"><?php echo htmlspecialchars(isset($iuran->nama_iuran) ? $iuran->nama_iuran : '-'); ?></span>
                    </div>
                    <div class="detail-item">
                        <span class="dl">Periode</span>
                        <span class="dv">
                            <?php
                            if(isset($iuran->periode_bulan) && isset($iuran->periode_tahun)) {
                                echo $bulan_nama[(int)$iuran->periode_bulan].' '.$iuran->periode_tahun;
                            } else { echo '-'; }
                            ?>
                        </span>
                    </div>
                    <div class="detail-item">
                        <span class="dl">Nominal Saat Ini</span>
                        <span class="dv" style="color:#059669; font-size:1rem; font-weight:800;">
                            Rp <?php echo number_format($iuran->nominal, 0, ',', '.'); ?>
                        </span>
                    </div>
                    <div class="detail-item">
                        <span class="dl">Status</span>
                        <span>
                            <?php if($status == 'lunas'): ?>
                                <span class="status-badge sb-lunas"><i class="bi bi-check-circle"></i>Lunas</span>
                            <?php elseif($status == 'menunggu_verifikasi'): ?>
                                <span class="status-badge sb-verif"><i class="bi bi-clock-history"></i>Menunggu Verifikasi</span>
                            <?php else: ?>
                                <span class="status-badge sb-pending"><i class="bi bi-exclamation-triangle"></i>Belum Dibayar</span>
                            <?php endif; ?>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── KANAN: Form Edit ── -->
        <div class="form-card">
            <div class="form-card-header">
                <i class="bi bi-pencil"></i>
                <span class="section-label">Ubah Data</span>
            </div>
            <div class="form-card-body">

                <!-- Nominal -->
                <div class="field-group">
                    <label class="field-label">Nominal <span class="req">*</span></label>
                    <div class="nominal-wrapper">
                        <span class="nominal-prefix">Rp</span>
                        <input type="number" name="nominal" class="form-control"
                               required min="0" step="1000"
                               value="<?php echo set_value('nominal', $iuran->nominal); ?>">
                    </div>
                    <div class="field-hint"><i class="bi bi-info-circle"></i> Ubah nominal tagihan jika diperlukan</div>
                </div>

                <!-- Keterangan -->
                <div class="field-group">
                    <label class="field-label">Keterangan <span class="opt">(opsional)</span></label>
                    <textarea name="keterangan" class="form-control" rows="5"
                              placeholder="Catatan tambahan..."><?php echo set_value('keterangan', isset($iuran->keterangan) ? $iuran->keterangan : ''); ?></textarea>
                </div>

                <!-- Warning jika sudah lunas -->
                <?php if($status == 'lunas'): ?>
                <div class="notice-box warning">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <div><strong>Perhatian:</strong> Tagihan ini sudah lunas. Perubahan data dapat mempengaruhi laporan keuangan.</div>
                </div>
                <?php endif; ?>

            </div>

            <!-- Action Bar -->
            <div class="action-bar">
                <a href="<?php echo base_url('iuran'); ?>" class="btn-back">
                    <i class="bi bi-arrow-left"></i> Kembali
                </a>
                <button type="submit" class="btn-save">
                    <i class="bi bi-save2-fill"></i> Update Data
                </button>
            </div>
        </div>

    </div>
    </form>

</div>