<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<style>
:root {
    --green-main:    #1e7a56;
    --green-dark:    #155c3f;
    --green-light:   #e8f5ef;
    --green-mid:     #27976a;
    --green-sidebar: #186648;
    --danger:        #dc2626;
    --info:          #0891b2;
    --info-light:    #f0fdff;
    --radius:        16px;
    --radius-sm:     10px;
    --shadow:        0 4px 24px rgba(30,122,86,0.10), 0 1px 4px rgba(0,0,0,0.05);
    --shadow-sm:     0 2px 8px rgba(0,0,0,0.07);
}

/* ===== WRAPPER ===== */
.pl-wrapper {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 12px 48px;
}

/* ===== PAGE HEADER ===== */
.pl-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
}
.pl-page-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--green-sidebar);
    margin: 0;
}
.pl-page-header h4 .hi {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--green-sidebar), var(--green-mid));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
    box-shadow: 0 3px 10px rgba(30,122,86,0.28);
    flex-shrink: 0;
}
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 50px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.btn-back:hover {
    border-color: var(--green-main);
    color: var(--green-main);
    background: var(--green-light);
}

/* ===== CARD ===== */
.pl-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.pl-card-header {
    background: linear-gradient(135deg, var(--green-sidebar) 0%, var(--green-main) 60%, var(--green-mid) 100%);
    padding: 22px 26px 20px;
    position: relative;
    overflow: hidden;
}
.pl-card-header::before {
    content: '';
    position: absolute;
    right: -24px; top: -24px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
}
.pl-card-header::after {
    content: '';
    position: absolute;
    right: 50px; bottom: -50px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}
.pl-card-header h5 {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pl-card-header .header-sub {
    color: rgba(255,255,255,0.75);
    font-size: 0.78rem;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.pl-card-body { padding: 26px; }

/* ===== WARGA INFO ===== */
.warga-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 24px;
}
.warga-info-cell {
    padding: 12px 16px;
    background: #f9fafb;
}
.warga-info-cell:first-child { border-right: 1.5px solid #e5e7eb; }
.warga-info-cell .wlabel {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
    margin-bottom: 4px;
}
.warga-info-cell .wvalue {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1f2937;
}
.warga-info-cell .wvalue.code {
    display: inline-block;
    background: var(--green-light);
    color: var(--green-main);
    border: 1px solid #a7d9c1;
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 0.82rem;
}

/* ===== SECTION DIVIDER ===== */
.sec-div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 16px;
}
.sec-div span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #9ca3af;
    white-space: nowrap;
}
.sec-div::before, .sec-div::after {
    content: ''; flex: 1; height: 1px; background: #e5e7eb;
}

/* ===== SIMULASI BOXES ===== */
.simulasi-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}
.sim-box {
    border-radius: var(--radius-sm);
    padding: 16px 12px;
    text-align: center;
    border: 1.5px solid #e5e7eb;
    background: #f8fafb;
    transition: box-shadow .2s;
}
.sim-box:hover { box-shadow: var(--shadow-sm); }
.sim-box.discount { border-color: #a5f3fc; background: var(--info-light); }
.sim-box.total    { border-color: #a7d9c1; background: var(--green-light); }
.sim-box .sblabel {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
    margin-bottom: 6px;
}
.sim-box .sbvalue {
    font-size: 1rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.2;
}
.sim-box.discount .sbvalue { color: var(--info); }
.sim-box.total    .sbvalue { color: var(--green-main); font-size: 1.05rem; }
.sim-box .sbsub {
    font-size: 0.72rem;
    margin-top: 4px;
    font-weight: 600;
}
.sim-box .sbsub.discount { color: var(--info); }
.sim-box .sbsub.green    { color: var(--green-main); }

/* ===== FORM ELEMENTS ===== */
.form-group-c { margin-bottom: 18px; }
.form-label-c {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
    margin-bottom: 7px;
}
.form-label-c .req { color: var(--danger); margin-left: 2px; }

.input-wrap {
    display: flex;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.input-wrap:focus-within {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px rgba(30,122,86,0.13);
}
.input-prefix {
    padding: 0 14px;
    background: #f9fafb;
    border-right: 1.5px solid #e5e7eb;
    display: flex; align-items: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}
.input-wrap input {
    flex: 1; border: none; outline: none;
    padding: 12px 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-main);
    background: transparent;
    min-width: 0;
}
.hint-text {
    font-size: 0.74rem;
    color: #9ca3af;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.custom-select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: #1f2937;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
.custom-select:focus {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px rgba(30,122,86,0.13);
    outline: none;
}

/* ===== ALERT INFO ===== */
.alert-info-c {
    display: flex;
    gap: 12px;
    background: var(--info-light);
    border-left: 4px solid var(--info);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 24px;
}
.alert-info-c .ai-icon { color: var(--info); font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.alert-info-c .ai-body h6 {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0e7490;
    margin: 0 0 6px;
}
.alert-info-c .ai-body ul {
    margin: 0; padding-left: 16px;
}
.alert-info-c .ai-body ul li {
    font-size: 0.8rem;
    color: #4b5563;
    line-height: 1.5;
    margin-bottom: 3px;
}

/* ===== CONFIRM HIGHLIGHT ===== */
.confirm-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--green-light);
    border: 1.5px solid #a7d9c1;
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 8px;
}
.confirm-box .cl { font-size: 0.78rem; font-weight: 600; color: #6b7280; }
.confirm-box .cv { font-size: 1.3rem; font-weight: 800; color: var(--green-main); }

/* ===== SUBMIT BUTTONS ===== */
.btn-submit-green {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-sm);
    border: none;
    background: linear-gradient(135deg, var(--green-sidebar), var(--green-main));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(30,122,86,0.35);
    transition: all .2s;
    letter-spacing: .2px;
}
.btn-submit-green:hover {
    background: linear-gradient(135deg, var(--green-dark), var(--green-sidebar));
    box-shadow: 0 6px 18px rgba(30,122,86,0.42);
    transform: translateY(-1px);
}
.btn-cancel {
    width: 100%;
    padding: 13px;
    border-radius: var(--radius-sm);
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    transition: all .2s;
}
.btn-cancel:hover { border-color: #9ca3af; color: #374151; background: #f9fafb; }

/* ===== MOBILE ===== */
@media (max-width: 576px) {
    .pl-card-body     { padding: 18px 16px 100px; }
    .simulasi-boxes   { grid-template-columns: 1fr 1fr; }
    .simulasi-boxes .sim-box:last-child { grid-column: 1 / -1; }
    .warga-info       { grid-template-columns: 1fr; }
    .warga-info-cell:first-child { border-right: none; border-bottom: 1.5px solid #e5e7eb; }
    .pl-page-header   { flex-direction: column; align-items: flex-start; }

    .mobile-sticky {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        padding: 12px 16px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
        z-index: 100;
    }
    .desktop-actions { display: none; }
}
@media (min-width: 577px) {
    .mobile-sticky { display: none; }
}
</style>

<div class="pl-wrapper">

    <!-- Page Header -->
    <div class="pl-page-header">
        <h4>
            <span class="hi"><i class="bi bi-lightning-fill"></i></span>
            Pelunasan Dipercepat
        </h4>
        <a href="<?php echo base_url('pinjaman/detail/'.$pinjaman->id); ?>" class="btn-back">
            <i class="bi bi-arrow-left"></i> Kembali ke Detail
        </a>
    </div>

    <div class="pl-card">
        <!-- Card Header -->
        <div class="pl-card-header">
            <h5><i class="bi bi-calculator"></i> Simulasi Pelunasan Dipercepat</h5>
            <div class="header-sub">Kalkulasi otomatis dengan diskon 10% dari sisa pinjaman</div>
        </div>

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

            <!-- Warga Info -->
            <div class="warga-info">
                <div class="warga-info-cell">
                    <div class="wlabel">Kode Pinjaman</div>
                    <div class="wvalue"><span class="code"><?php echo $pinjaman->kode_pinjaman; ?></span></div>
                </div>
                <div class="warga-info-cell">
                    <div class="wlabel">Nama Peminjam</div>
                    <div class="wvalue"><?php echo $pinjaman->nama_lengkap; ?></div>
                </div>
            </div>

            <!-- Simulasi Boxes -->
            <div class="sec-div"><span>Perhitungan Pelunasan</span></div>
            <div class="simulasi-boxes">
                <div class="sim-box">
                    <div class="sblabel">Sisa Pinjaman</div>
                    <div class="sbvalue">Rp <?php echo number_format($pinjaman->sisa_pinjaman, 0, ',', '.'); ?></div>
                </div>
                <div class="sim-box discount">
                    <div class="sblabel">Diskon Percepatan</div>
                    <div class="sbvalue">- Rp <?php echo number_format($diskon, 0, ',', '.'); ?></div>
                    <div class="sbsub discount">10% dari sisa</div>
                </div>
                <div class="sim-box total">
                    <div class="sblabel">Total Pelunasan</div>
                    <div class="sbvalue">Rp <?php echo number_format($total_pelunasan, 0, ',', '.'); ?></div>
                    <div class="sbsub green">Yang harus dibayar</div>
                </div>
            </div>

            <!-- Form -->
            <form action="<?php echo base_url('pinjaman/pelunasan_dipercepat/'.$pinjaman->id); ?>" method="post" id="formPelunasan">

                <div class="sec-div"><span>Detail Pembayaran</span></div>

                <!-- Nominal -->
                <div class="form-group-c">
                    <label class="form-label-c">Nominal yang Dibayar <span class="req">*</span></label>
                    <div class="input-wrap">
                        <span class="input-prefix">Rp</span>
                        <input type="number" name="nominal_dibayar" id="nominal_dibayar"
                               value="<?php echo $total_pelunasan; ?>" required step="0.01">
                    </div>
                    <div class="hint-text"><i class="bi bi-info-circle"></i> Total setelah diskon 10% sudah terisi otomatis</div>
                </div>

                <!-- Kas -->
                <div class="form-group-c">
                    <label class="form-label-c">Masuk ke Kas <span class="req">*</span></label>
                    <select class="custom-select" name="master_kas_id" required>
                        <option value="">-- Pilih Kas Tujuan --</option>
                        <?php foreach($kas_list as $kas): ?>
                        <option value="<?php echo $kas->id; ?>">
                            <?php echo $kas->kode; ?> — <?php echo $kas->nama; ?>
                            &nbsp;(Rp <?php echo number_format($kas->saldo_realtime ?? 0, 0, ',', '.'); ?>)
                        </option>
                        <?php endforeach; ?>
                    </select>
                    <div class="hint-text"><i class="bi bi-info-circle"></i> Pemasukan pelunasan akan dicatat ke kas terpilih</div>
                </div>

                <!-- Info -->
                <div class="alert-info-c">
                    <i class="bi bi-info-circle-fill ai-icon"></i>
                    <div class="ai-body">
                        <h6>Informasi Pelunasan Dipercepat</h6>
                        <ul>
                            <li>Mendapatkan <strong>diskon 10%</strong> dari sisa pinjaman</li>
                            <li>Status pinjaman akan berubah menjadi <strong>LUNAS</strong></li>
                            <li>Semua angsuran yang tersisa akan otomatis dilunasi</li>
                            <li>Proses <strong>tidak dapat dibatalkan</strong> setelah dikonfirmasi</li>
                        </ul>
                    </div>
                </div>

                <!-- Confirm Box -->
                <div class="confirm-box">
                    <div class="cl">💰 Total yang Harus Dibayar</div>
                    <div class="cv">Rp <?php echo number_format($total_pelunasan, 0, ',', '.'); ?></div>
                </div>

                <!-- Desktop Actions -->
                <div class="desktop-actions" style="display:flex;flex-direction:column;gap:0">
                    <button type="submit" class="btn-submit-green"
                            onclick="return confirm('Yakin proses pelunasan dipercepat ini?\nPinjaman akan LUNAS dan tidak dapat dibatalkan.')">
                        <i class="bi bi-check-circle"></i> Proses Pelunasan Sekarang
                    </button>
                    <a href="<?php echo base_url('pinjaman/detail/'.$pinjaman->id); ?>" class="btn-cancel">
                        Batal
                    </a>
                </div>

            </form>
        </div><!-- /card-body -->
    </div><!-- /card -->
</div>

<!-- Mobile Sticky Footer -->
<div class="mobile-sticky">
    <button type="submit" form="formPelunasan" class="btn-submit-green"
            onclick="return confirm('Yakin proses pelunasan dipercepat?\nTidak dapat dibatalkan.')">
        <i class="bi bi-check-circle"></i> Proses Pelunasan
    </button>
    <a href="<?php echo base_url('pinjaman/detail/'.$pinjaman->id); ?>" class="btn-cancel" style="margin-top:0">Batal</a>
</div>

<script>
document.getElementById('formPelunasan').addEventListener('submit', function(e) {
    var nominal = parseFloat(document.getElementById('nominal_dibayar').value);
    var total   = <?php echo $total_pelunasan; ?>;
    if (Math.abs(nominal - total) > 1) {
        if (!confirm('Nominal tidak sesuai dengan total pelunasan.\nLanjutkan tetap?')) {
            e.preventDefault();
        }
    }
});
</script>