<?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,#7c3aed,#a78bfa); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem; box-shadow:0 4px 12px rgba(124,58,237,.32); flex-shrink:0; }
.ar-breadcrumb { display:flex; align-items:center; gap:6px; font-size:.77rem; color:#94a3b8; padding-left:51px; }
.ar-breadcrumb a { color:#7c3aed; text-decoration:none; font-weight:600; }
.form-card { background:#fff; border-radius:14px; box-shadow:0 1px 8px rgba(0,0,0,.07); border:none; }
.form-label { font-size:.83rem; font-weight:700; color:#374151; margin-bottom:5px; }
.form-control, .form-select { border-radius:9px; border:1.5px solid #e5e7eb; font-size:.875rem; padding:.55rem .85rem; transition:border-color .18s, box-shadow .18s; }
.form-control:focus, .form-select:focus { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.section-title { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:#7c3aed; margin-bottom:14px; padding-bottom:6px; border-bottom:2px solid #f3f0ff; }
.stok-info { padding:10px 14px; border-radius:9px; background:#f3f0ff; border:1px solid #ddd6fe; font-size:.82rem; color:#5b21b6; }
.btn-submit { padding:11px 36px; border-radius:50px; background:#7c3aed; border:none; color:#fff; font-weight:700; font-size:.88rem; box-shadow:0 3px 12px rgba(124,58,237,.28); transition:all .2s; }
.btn-submit:hover { background:#6d28d9; transform:translateY(-1px); }
</style>

<!-- Header -->
<div class="ar-page-header">
    <div class="ar-header-left">
        <h4>
            <span class="hi"><i class="bi bi-plus-circle"></i></span>
            Catat Peminjaman Barang
        </h4>
        <div class="ar-breadcrumb">
            <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
            <span>/</span>
            <a href="<?php echo base_url('peminjaman-inventaris'); ?>">Peminjaman</a>
            <span>/</span>
            <span>Tambah</span>
        </div>
    </div>
    <a href="<?php echo base_url('peminjaman-inventaris'); ?>" class="btn btn-sm btn-outline-secondary rounded-pill px-3">
        <i class="bi bi-arrow-left me-1"></i> Kembali
    </a>
</div>

<?php if($this->session->flashdata('error')): ?>
<div class="alert alert-danger alert-dismissible fade show rounded-3 border-0 mb-3">
    <i class="bi bi-exclamation-circle-fill me-2"></i><?php echo $this->session->flashdata('error'); ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<form method="POST" action="<?php echo base_url('peminjaman-inventaris/tambah'); ?>">
    <?php echo form_open('peminjaman-inventaris/tambah'); ?>
    <div class="row g-4">

        <!-- KIRI -->
        <div class="col-lg-7">
            <div class="form-card p-4">

                <!-- Pilih Barang -->
                <div class="section-title"><i class="bi bi-box-seam me-1"></i>Data Barang</div>

                <div class="mb-3">
                    <label class="form-label">Barang yang Dipinjam <span class="text-danger">*</span></label>
                    <select class="form-select" name="inventaris_id" id="inventarisSelect" required>
                        <option value="">— Pilih Barang —</option>
                        <?php foreach($inventaris as $inv): ?>
                        <option value="<?php echo $inv->id; ?>"
                            data-stok="<?php echo $inv->jumlah; ?>"
                            data-satuan="<?php echo $inv->satuan; ?>"
                            data-kondisi="<?php echo $inv->kondisi; ?>"
                            <?php echo ($selected_inv && $selected_inv->id == $inv->id) ? 'selected' : ''; ?>>
                            <?php echo "[{$inv->kode_barang}] " . htmlspecialchars($inv->nama_barang ?? '') . " — {$inv->jumlah} {$inv->satuan}"; ?>
                        </option>
                        <?php endforeach; ?>
                    </select>
                    <?php echo form_error('inventaris_id', '<small class="text-danger">', '</small>'); ?>
                </div>

                <!-- Info stok (dinamis via JS) -->
                <div id="stokInfo" class="stok-info mb-3" style="display:none;">
                    <i class="bi bi-info-circle me-1"></i>
                    Stok total: <strong id="stokTotal">-</strong> &nbsp;|&nbsp;
                    Tersedia: <strong id="stokTersedia" style="color:#059669;">-</strong>
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-sm-6">
                        <label class="form-label">Jumlah Pinjam <span class="text-danger">*</span></label>
                        <input type="number" name="jumlah_pinjam" class="form-control" min="1" value="<?php echo set_value('jumlah_pinjam', 1); ?>" required>
                        <?php echo form_error('jumlah_pinjam', '<small class="text-danger">', '</small>'); ?>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label">Kondisi Saat Dipinjam</label>
                        <select name="kondisi_awal" class="form-select">
                            <option value="baik" <?php echo set_select('kondisi_awal','baik',true); ?>>✅ Baik</option>
                            <option value="rusak_ringan" <?php echo set_select('kondisi_awal','rusak_ringan'); ?>>⚠️ Rusak Ringan</option>
                            <option value="rusak_berat" <?php echo set_select('kondisi_awal','rusak_berat'); ?>>❌ Rusak Berat</option>
                        </select>
                    </div>
                </div>

                <!-- Tanggal -->
                <div class="section-title mt-4"><i class="bi bi-calendar3 me-1"></i>Tanggal</div>
                <div class="row g-3">
                    <div class="col-sm-6">
                        <label class="form-label">Tanggal Pinjam <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_pinjam" class="form-control"
                               value="<?php echo set_value('tanggal_pinjam', date('Y-m-d')); ?>" required>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label">Rencana Tanggal Kembali <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_rencana_kembali" class="form-control"
                               value="<?php echo set_value('tanggal_rencana_kembali'); ?>" required>
                    </div>
                </div>

                <div class="mt-3">
                    <label class="form-label">Keperluan / Keterangan</label>
                    <textarea name="keperluan" class="form-control" rows="3"
                              placeholder="Untuk acara apa / keperluan peminjaman..."><?php echo set_value('keperluan'); ?></textarea>
                </div>
            </div>
        </div>

        <!-- KANAN -->
        <div class="col-lg-5">
            <div class="form-card p-4">
                <div class="section-title"><i class="bi bi-person me-1"></i>Data Peminjam</div>

                <!-- Cari Warga (opsional) -->
                <div class="mb-3">
                    <label class="form-label">Warga RT <span class="text-muted fw-normal">(opsional)</span></label>
                    <select name="warga_id" class="form-select" id="wargaSelect">
                        <option value="">— Non-warga / Isi manual —</option>
                        <?php foreach($warga as $w): ?>
                        <option value="<?php echo $w->id; ?>"
                                data-nama="<?php echo htmlspecialchars($w->nama_lengkap ?? ''); ?>"
                                data-hp="<?php echo $w->no_hp ?? ''; ?>">
                            <?php echo htmlspecialchars($w->nama_lengkap ?? '') . ' (' . $w->nik . ')'; ?>
                        </option>
                        <?php endforeach; ?>
                    </select>
                    <small class="text-muted">Pilih jika peminjam adalah warga terdaftar</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Nama Peminjam <span class="text-danger">*</span></label>
                    <input type="text" name="nama_peminjam" id="namaPeminjam" class="form-control"
                           placeholder="Nama lengkap peminjam"
                           value="<?php echo set_value('nama_peminjam'); ?>" required>
                    <?php echo form_error('nama_peminjam', '<small class="text-danger">', '</small>'); ?>
                </div>

                <div class="mb-3">
                    <label class="form-label">No. HP Peminjam</label>
                    <input type="text" name="no_hp_peminjam" id="noHpPeminjam" class="form-control"
                           placeholder="08xx-xxxx-xxxx"
                           value="<?php echo set_value('no_hp_peminjam'); ?>">
                </div>

                <!-- Ringkasan -->
                <div class="mt-4 p-3 rounded-3" style="background:#f8f5ff;border:1px dashed #c4b5fd;">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-info-circle" style="color:#7c3aed;"></i>
                        <span class="fw-bold" style="font-size:.82rem;color:#5b21b6;">Catatan Penting</span>
                    </div>
                    <ul class="mb-0 ps-3" style="font-size:.8rem;color:#5b21b6;line-height:1.7;">
                        <li>Pastikan stok tersedia sebelum menyimpan</li>
                        <li>Barang wajib dikembalikan sesuai tanggal</li>
                        <li>Proses "Kembali" dilakukan setelah barang tiba</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <!-- Submit -->
    <div class="d-flex justify-content-end gap-2 mt-4">
        <a href="<?php echo base_url('peminjaman-inventaris'); ?>" class="btn btn-outline-secondary rounded-pill px-4">Batal</a>
        <button type="submit" class="btn-submit">
            <i class="bi bi-save me-1"></i> Simpan Peminjaman
        </button>
    </div>
    </form>

<script>
// Isi nama & hp dari data warga
document.getElementById('wargaSelect').addEventListener('change', function() {
    const opt = this.options[this.selectedIndex];
    if (opt.value) {
        document.getElementById('namaPeminjam').value = opt.dataset.nama || '';
        document.getElementById('noHpPeminjam').value = opt.dataset.hp   || '';
    }
});

// Info stok (stok dipinjam di-fetch via halaman — estimasi client side)
document.getElementById('inventarisSelect').addEventListener('change', function() {
    const opt   = this.options[this.selectedIndex];
    const info  = document.getElementById('stokInfo');
    if (opt.value) {
        const stok = opt.dataset.stok || 0;
        document.getElementById('stokTotal').textContent    = stok + ' ' + (opt.dataset.satuan || '');
        document.getElementById('stokTersedia').textContent = '(cek di detail barang)';
        info.style.display = '';
    } else {
        info.style.display = 'none';
    }
});

// Trigger jika sudah pre-selected
if (document.getElementById('inventarisSelect').value) {
    document.getElementById('inventarisSelect').dispatchEvent(new Event('change'));
}
</script>