<?= $this->extend('layout/main') ?>
<?= $this->section('content') ?>

<div class="glass-card" style="width: 100%; overflow-x: auto;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <h3 class="card-title" style="margin-bottom: 0;">
            <i class="fas fa-barcode" style="margin-right: 8px; color: var(--primary);"></i>
            Kode Barang (KIB)
        </h3>
        <?php if(session()->get('role') == 'admin'): ?>
        <button class="btn btn-primary" onclick="tambahKib()">
            <i class="fas fa-plus"></i> Tambah KIB
        </button>
        <?php endif; ?>
    </div>

    <!-- Form Tambah/Edit KIB -->
    <?php if(session()->get('role') == 'admin'): ?>
    <div id="formKib" style="display:none; background: rgba(67,97,238,0.06); border: 1px solid rgba(67,97,238,0.2); border-radius: 12px; padding: 20px; margin-bottom: 25px;">
        <h4 style="margin-bottom: 15px; color: var(--primary);" id="formKibTitle">Tambah KIB Baru</h4>
        <form action="<?= base_url('master/simpan-kib') ?>" method="post">
            <input type="hidden" name="id" id="kib_id">
            <div style="display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 12px; align-items: end;">
                <div class="form-group">
                    <label class="form-label">KIB</label>
                    <input type="text" name="nama_kib" id="kib_nama" class="form-control" placeholder="KIB-A" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Kode Brg</label>
                    <input type="text" name="kode_brg" id="kib_kode" class="form-control" placeholder="1.3.1.01." required>
                </div>
                <div class="form-group">
                    <label class="form-label">Keterangan</label>
                    <input type="text" name="keterangan" id="kib_ket" class="form-control" placeholder="Keterangan (opsional)">
                </div>
                <div style="display:flex; gap:8px;">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan</button>
                    <button type="button" class="btn btn-danger" onclick="tutupForm()"><i class="fas fa-times"></i></button>
                </div>
            </div>
        </form>
    </div>
    <?php endif; ?>

    <!-- Tabel KIB -->
    <table id="tableKib" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th>No.</th>
                <th>KIB</th>
                <th>Kode Brg</th>
                <th>Keterangan</th>
                <th>Jumlah Item</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            <?php $no = 1; foreach($kibList as $k): ?>
            <tr>
                <td><?= $no++ ?></td>
                <td><strong><?= $k['nama_kib'] ?></strong></td>
                <td><code style="background: rgba(67,97,238,0.1); padding: 2px 8px; border-radius: 4px; color: var(--primary);"><?= $k['kode_brg'] ?></code></td>
                <td><?= $k['keterangan'] ?: '-' ?></td>
                <td>
                    <?php $jml = (int)($k['jumlah_item'] ?? 0); ?>
                    <span class="btn btn-sm <?= $jml > 0 ? 'btn-primary' : 'btn-secondary' ?>" 
                          style="pointer-events:none; min-width:70px;">
                        <i class="fas fa-list"></i> <?= $jml ?> Item
                    </span>
                </td>
                <td style="white-space: nowrap;">
                    <a href="<?= base_url('master/kode-barang/atur/'.$k['id']) ?>" class="btn btn-sm btn-primary" title="Atur Detail">
                        <i class="fas fa-list-ul"></i> Atur
                    </a>
                    <?php if(session()->get('role') == 'admin'): ?>
                    <button class="btn btn-sm btn-success" onclick='editKib(<?= json_encode($k) ?>)' title="Update">
                        <i class="fas fa-edit"></i> Update
                    </button>
                    <a href="<?= base_url('master/hapus-kib/'.$k['id']) ?>" class="btn btn-sm btn-danger" onclick="return confirm('Yakin hapus KIB ini beserta seluruh detailnya?')" title="Delete">
                        <i class="fas fa-trash"></i> Delete
                    </a>
                    <?php endif; ?>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    $(document).ready(function() {
        initDataTable('#tableKib');
    });

    function tambahKib() {
        document.getElementById('formKibTitle').innerText = 'Tambah KIB Baru';
        document.getElementById('kib_id').value = '';
        document.getElementById('kib_nama').value = '';
        document.getElementById('kib_kode').value = '';
        document.getElementById('kib_ket').value = '';
        document.getElementById('formKib').style.display = 'block';
        document.getElementById('kib_nama').focus();
    }

    function editKib(data) {
        document.getElementById('formKibTitle').innerText = 'Update KIB: ' + data.nama_kib;
        document.getElementById('kib_id').value = data.id;
        document.getElementById('kib_nama').value = data.nama_kib;
        document.getElementById('kib_kode').value = data.kode_brg;
        document.getElementById('kib_ket').value = data.keterangan;
        document.getElementById('formKib').style.display = 'block';
        document.getElementById('formKib').scrollIntoView({ behavior: 'smooth' });
    }

    function tutupForm() {
        document.getElementById('formKib').style.display = 'none';
    }
</script>
<?= $this->endSection() ?>
