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

<style>
.ar-page-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:14px; margin-bottom:24px; }
.ar-header-left h4 { font-size:1.25rem; font-weight:800; color:#0b5a52; margin:0 0 5px; display:flex; align-items:center; gap:11px; }
.ar-header-left h4 .hi { width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg,#0d9488,#14b8a6); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem; box-shadow:0 4px 12px rgba(13,148,136,0.32); flex-shrink:0; }
.ar-breadcrumb { display:flex; align-items:center; gap:6px; font-size:0.77rem; color:#94a3b8; padding-left:51px; }
.ar-breadcrumb a { color:#0d9488; text-decoration:none; font-weight:600; }
.form-label { font-size:.83rem; font-weight:700; color:#475569; margin-bottom:5px; }
.form-control, .form-select { border-radius:10px; border:1.5px solid #e2e8f0; font-size:.88rem; padding:9px 14px; transition:border-color .2s; }
.form-control:focus, .form-select:focus { border-color:#0d9488; box-shadow:0 0 0 3px rgba(13,148,136,.12); outline:none; }
.section-title { font-size:.8rem; font-weight:800; color:#0d9488; text-transform:uppercase; letter-spacing:.7px; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid #f0fdf9; }

/* Pilihan realisasi card */
.realisasi-opt { display:none; }
.realisasi-opt.active { display:block; }

.jenis-card { border:2px solid #e2e8f0; border-radius:14px; padding:18px 20px; cursor:pointer; transition:all .2s; background:#fff; }
.jenis-card:hover { border-color:#0d9488; background:#f0fdf9; }
.jenis-card.selected { border-color:#0d9488; background:#f0fdf9; }
.jenis-card .jenis-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:10px; }
.jenis-card h6 { font-weight:800; margin-bottom:4px; }
.jenis-card p { font-size:.8rem; color:#64748b; margin:0; }

.btn-simpan { padding:11px 32px; border-radius:50px; background:#0d9488; color:#fff; border:none; font-weight:700; font-size:.88rem; box-shadow:0 3px 12px rgba(13,148,136,0.28); transition:all .2s; }
.btn-simpan:hover { background:#0b7a6e; transform:translateY(-1px); }
.btn-simpan:disabled { background:#94a3b8; box-shadow:none; }
</style>

<!-- Header -->
<div class="ar-page-header">
    <div class="ar-header-left">
        <h4>
            <span class="hi"><i class="bi bi-check2-circle"></i></span>
            Realisasi Rencana Pembelian
        </h4>
        <div class="ar-breadcrumb">
            <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
            <span>/</span>
            <a href="<?php echo base_url('rencana-pembelian'); ?>">Rencana Pembelian</a>
            <span>/</span>
            <span>Realisasi</span>
        </div>
    </div>
</div>

<!-- Ringkasan item -->
<div class="card border-0 shadow-sm mb-4" style="border-radius:12px; border-left:4px solid #0d9488 !important;">
    <div class="card-body py-3 px-4">
        <div class="row g-2 align-items-center">
            <div class="col-md-6">
                <div class="text-muted small mb-1">Barang yang akan direalisasi</div>
                <h5 class="fw-bold text-dark mb-1"><?php echo htmlspecialchars($item->nama_barang); ?></h5>
                <span class="badge rounded-pill bg-light text-secondary border me-2"><?php echo ucfirst($item->kategori); ?></span>
                <code class="small" style="color:#0d9488;"><?php echo $item->kode_rencana; ?></code>
            </div>
            <div class="col-md-3">
                <div class="text-muted small">Jumlah</div>
                <div class="fw-bold"><?php echo $item->jumlah . ' ' . $item->satuan; ?></div>
            </div>
            <div class="col-md-3">
                <div class="text-muted small">Estimasi Harga</div>
                <div class="fw-bold" style="color:#0d9488;">
                    <?php echo $item->estimasi_harga > 0 ? 'Rp ' . number_format($item->estimasi_harga, 0, ',', '.') : '—'; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<?php if ($this->session->flashdata('error')): ?>
<div class="alert alert-danger border-0 rounded-3 d-flex align-items-center gap-2 mb-4">
    <i class="bi bi-x-circle-fill"></i> <?php echo $this->session->flashdata('error'); ?>
</div>
<?php endif; ?>

<div class="card border-0 shadow-sm" style="border-radius:14px; max-width:720px;">
    <div class="card-body p-4">

        <?php echo form_open('rencana-pembelian/proses-realisasi/' . $item->id); ?>
        <input type="hidden" name="jenis_realisasi" id="jenis_realisasi" value="">

        <!-- Pilih Jenis Realisasi -->
        <div class="section-title"><i class="bi bi-ui-checks me-2"></i>Jenis Realisasi</div>
        <div class="row g-3 mb-4">
            <div class="col-6">
                <div class="jenis-card" onclick="pilihJenis('terbeli')" id="card-terbeli">
                    <div class="jenis-icon" style="background:#dcfce7; color:#16a34a;">
                        <i class="bi bi-bag-check"></i>
                    </div>
                    <h6 style="color:#16a34a;">💳 Terbeli</h6>
                    <p>Barang dibeli menggunakan kas RT. Otomatis membuat transaksi pengeluaran kas.</p>
                </div>
            </div>
            <div class="col-6">
                <div class="jenis-card" onclick="pilihJenis('hibah')" id="card-hibah">
                    <div class="jenis-icon" style="background:#f3e8ff; color:#7e22ce;">
                        <i class="bi bi-gift"></i>
                    </div>
                    <h6 style="color:#7e22ce;">🎁 Hibah / Donasi</h6>
                    <p>Barang diterima sebagai hibah atau donasi. Tidak mengurangi saldo kas.</p>
                </div>
            </div>
        </div>

        <!-- Form: TERBELI -->
        <div id="form-terbeli" class="realisasi-opt">
            <div class="section-title"><i class="bi bi-cash-coin me-2"></i>Detail Pembelian</div>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label">Harga Beli Aktual <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <span class="input-group-text" style="border-radius:10px 0 0 10px; border:1.5px solid #e2e8f0; background:#f8fafc; font-size:.85rem;">Rp</span>
                        <input type="text" name="harga_realisasi" id="harga_realisasi" class="form-control"
                               placeholder="<?php echo $item->estimasi_harga > 0 ? number_format($item->estimasi_harga, 0, ',', '.') : '0'; ?>"
                               style="border-radius:0 10px 10px 0;" oninput="formatRibuan(this)">
                    </div>
                    <small class="text-muted" style="font-size:.75rem;">Harga aktual total pembelian</small>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Kas Sumber Dana <span class="text-danger">*</span></label>
                   <select name="master_kas_id" class="form-select">
    <option value="">— Pilih Kas —</option>
    <?php foreach ($kas_list as $k): 
        $saldo = $k->saldo_realtime ?? $k->saldo_saat_ini ?? 0;
    ?>
    <option value="<?php echo $k->id; ?>">
        <?php echo htmlspecialchars($k->nama); ?> 
        (Saldo: Rp <?php echo number_format($saldo, 0, ',', '.'); ?>)
    </option>
    <?php endforeach; ?>
</select>
                <div class="col-md-6">
                    <label class="form-label">Tanggal Pembelian <span class="text-danger">*</span></label>
                    <input type="date" name="tanggal_realisasi" class="form-control" value="<?php echo date('Y-m-d'); ?>" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Lokasi Penyimpanan</label>
                    <input type="text" name="lokasi" class="form-control" placeholder="Contoh: Balai RT / Gudang">
                </div>
            </div>
            <div class="alert border-0 d-flex gap-2" style="background:#fefce8; border-radius:10px; font-size:.83rem;">
                <i class="bi bi-info-circle mt-1" style="color:#ca8a04; flex-shrink:0;"></i>
                <div>
                    Proses ini akan otomatis membuat <strong>transaksi pengeluaran kas</strong> dan
                    menambahkan barang ke <strong>data inventaris</strong>.
                </div>
            </div>
        </div>

        <!-- Form: HIBAH -->
        <div id="form-hibah" class="realisasi-opt">
            <div class="section-title"><i class="bi bi-gift me-2"></i>Detail Hibah</div>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label">Nama Pemberi Hibah <span class="text-danger">*</span></label>
                    <input type="text" name="pemberi_hibah" class="form-control" placeholder="Nama warga / instansi / donatur">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Tanggal Diterima <span class="text-danger">*</span></label>
                    <input type="date" name="tanggal_realisasi" class="form-control" value="<?php echo date('Y-m-d'); ?>">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Lokasi Penyimpanan</label>
                    <input type="text" name="lokasi" class="form-control" placeholder="Contoh: Balai RT / Gudang">
                </div>
            </div>
            <div class="alert border-0 d-flex gap-2" style="background:#faf5ff; border-radius:10px; font-size:.83rem;">
                <i class="bi bi-info-circle mt-1" style="color:#7e22ce; flex-shrink:0;"></i>
                <div>
                    Proses hibah <strong>tidak mengurangi saldo kas</strong>. Barang langsung masuk ke
                    <strong>data inventaris</strong> dengan sumber dana <em>Hibah</em>.
                </div>
            </div>
        </div>

        <!-- Tombol submit -->
        <div class="d-flex gap-3 align-items-center mt-2">
            <button type="submit" class="btn-simpan" id="btnSubmit" disabled>
                <i class="bi bi-check-lg me-2"></i><span id="btnLabel">Pilih jenis realisasi dulu</span>
            </button>
            <a href="<?php echo base_url('rencana-pembelian'); ?>" class="text-muted fw-semibold text-decoration-none" style="font-size:.88rem;">
                <i class="bi bi-arrow-left me-1"></i>Kembali
            </a>
        </div>

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

<script>
function pilihJenis(jenis) {
    // Reset cards
    document.getElementById('card-terbeli').classList.remove('selected');
    document.getElementById('card-hibah').classList.remove('selected');
    document.querySelectorAll('.realisasi-opt').forEach(el => el.classList.remove('active'));

    // Activate selected
    document.getElementById('card-' + jenis).classList.add('selected');
    document.getElementById('form-' + jenis).classList.add('active');
    document.getElementById('jenis_realisasi').value = jenis;

    // Enable submit
    const btn = document.getElementById('btnSubmit');
    btn.disabled = false;
    document.getElementById('btnLabel').textContent =
        jenis === 'terbeli' ? '✅ Proses Pembelian & Masuk Inventaris' : '🎁 Proses Hibah & Masuk Inventaris';
}

function formatRibuan(el) {
    let v = el.value.replace(/\D/g, '');
    el.value = v ? parseInt(v).toLocaleString('id-ID') : '';
}
</script>