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

<!-- Breadcrumb -->
<div style="margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: #666; font-size: 0.9rem;">
    <a href="<?= base_url('master/kode-barang') ?>" style="color: var(--primary); text-decoration: none;">
        <i class="fas fa-barcode"></i> Kode Barang
    </a>
    <i class="fas fa-chevron-right" style="font-size: 0.75rem;"></i>
    <span style="font-weight: 600; color: var(--text);"><?= $kib['nama_kib'] ?> — <?= $kib['kode_brg'] ?></span>
</div>

<div class="glass-card" style="width: 100%; overflow-x: auto;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <div>
            <h3 class="card-title" style="margin-bottom: 4px;">
                Tambah Data Barang <?= $kib['nama_kib'] ?>
            </h3>
            <p style="color: #666; margin: 0; font-size: 0.9rem;">Prefix kode: <code style="background: rgba(67,97,238,0.1); padding: 2px 8px; border-radius:4px; color: var(--primary);"><?= $kib['kode_brg'] ?></code></p>
        </div>
    </div>

    <!-- Form Tambah Detail -->
    <?php if(session()->get('role') == 'admin'): ?>
    <div style="background: rgba(67,97,238,0.06); border: 1px solid rgba(67,97,238,0.2); border-radius: 12px; padding: 20px; margin-bottom: 25px;">
        <form action="<?= base_url('master/simpan-kib-detail') ?>" method="post" id="formDetail">
            <input type="hidden" name="id_kib_kategori" value="<?= $kib['id'] ?>">
            <input type="hidden" name="id" id="detail_id">
            <div style="display: grid; grid-template-columns: auto auto 1fr 2fr auto; gap: 12px; align-items: end;">
                <div class="form-group">
                    <label class="form-label">Kode Prefix</label>
                    <input type="text" name="kode_prefix" id="kode_prefix" class="form-control" 
                           value="<?= $kib['kode_brg'] ?>" readonly 
                           style="background: rgba(67,97,238,0.08); font-weight: 600; color: var(--primary); min-width: 100px;">
                </div>
                <div class="form-group">
                    <label class="form-label">No. Urut</label>
                    <input type="text" name="kode_urut" id="kode_urut" class="form-control" 
                           value="<?= $nextNo ?>" placeholder="01" maxlength="4" style="width: 70px; text-align:center; font-weight:600;">
                </div>
                <div class="form-group">
                    <label class="form-label">Jenis Barang</label>
                    <input type="text" name="nama_barang" id="detail_nama" class="form-control" placeholder="Jenis barang" required>
                </div>
                <div style="display:flex; gap:8px;">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> Tambah</button>
                    <button type="button" class="btn btn-warning" onclick="resetForm()"><i class="fas fa-undo"></i></button>
                </div>
            </div>
            <!-- Preview kode lengkap -->
            <div style="margin-top: 10px; font-size: 0.85rem; color: #666;">
                Preview kode: <strong id="previewKode" style="color: var(--primary); font-size: 1rem;"><?= $kib['kode_brg'] . $nextNo ?></strong>
            </div>
        </form>
    </div>
    <?php endif; ?>

    <!-- Tabel Detail -->
    <h4 style="margin-bottom: 12px; color: var(--text);">
        <span style="background: rgba(67,97,238,0.1); color: var(--primary); padding: 3px 12px; border-radius: 20px; font-size: 0.9rem;">
            Data Barang <?= $kib['nama_kib'] ?>
        </span>
    </h4>
    <table id="tableDetail" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Kode Lengkap</th>
                <th>Jenis Barang</th>
                <?php if(session()->get('role') == 'admin'): ?>
                <th>Aksi</th>
                <?php endif; ?>
            </tr>
        </thead>
        <tbody>
            <?php foreach($details as $d): ?>
            <tr>
                <td>
                    <code style="background: rgba(67,97,238,0.1); padding: 3px 10px; border-radius: 6px; color: var(--primary); font-size: 0.9rem;">
                        <?= $d['kode'] ?>
                    </code>
                </td>
                <td><?= $d['nama_barang'] ?></td>
                <?php if(session()->get('role') == 'admin'): ?>
                <td style="white-space: nowrap;">
                    <button class="btn btn-sm btn-success" onclick='editDetail(<?= json_encode($d) ?>, "<?= $kib['kode_brg'] ?>")'>
                        <i class="fas fa-edit"></i> Update
                    </button>
                    <a href="<?= base_url('master/hapus-kib-detail/'.$d['id']) ?>" class="btn btn-sm btn-danger" onclick="return confirm('Yakin hapus?')">
                        <i class="fas fa-trash"></i> Delete
                    </a>
                </td>
                <?php endif; ?>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>

    <div style="margin-top: 20px;">
        <a href="<?= base_url('master/kode-barang') ?>" class="btn btn-danger">
            <i class="fas fa-arrow-left"></i> Kembali
        </a>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
    const kodePrefix = "<?= $kib['kode_brg'] ?>";

    $(document).ready(function() {
        initDataTable('#tableDetail');

        // Update preview saat no urut berubah
        $('#kode_urut').on('input', function() {
            $('#previewKode').text(kodePrefix + $(this).val());
        });
    });

    function resetForm() {
        document.getElementById('detail_id').value = '';
        document.getElementById('detail_nama').value = '';
        document.getElementById('kode_prefix').value = kodePrefix;
    }

    function editDetail(data, prefix) {
        // Pisahkan prefix dari nomor urut
        let kodeUrut = data.kode.replace(prefix, '');
        document.getElementById('detail_id').value = data.id;
        document.getElementById('kode_prefix').value = prefix;
        document.getElementById('kode_urut').value = kodeUrut;
        document.getElementById('detail_nama').value = data.nama_barang;
        document.getElementById('previewKode').textContent = data.kode;
        document.getElementById('formDetail').scrollIntoView({ behavior: 'smooth' });
    }
</script>
<?= $this->endSection() ?>
