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

<?= $this->section('content') ?>
<div class="glass-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <h3 class="card-title" style="margin-bottom: 0;">Data Ruangan</h3>
        <?php if(session()->get('role') == 'admin'): ?>
        <button class="btn btn-primary" onclick="tambahData()">
            <i class="fas fa-plus"></i> Tambah Data
        </button>
        <?php endif; ?>
    </div>

    <table id="tableRuangan" class="display nowrap">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama Ruangan</th>
                <?php if(session()->get('role') == 'admin'): ?>
                <th>Aksi</th>
                <?php endif; ?>
            </tr>
        </thead>
        <tbody>
            <?php $no = 1; foreach($ruangan as $r): ?>
            <tr>
                <td><?= $no++ ?></td>
                <td><?= $r['nama_ruangan'] ?></td>
                <?php if(session()->get('role') == 'admin'): ?>
                <td>
                    <button class="btn btn-sm btn-success" onclick="editData(<?= $r['id'] ?>, '<?= addslashes($r['nama_ruangan']) ?>')">
                        <i class="fas fa-edit"></i>
                    </button>
                    <a href="<?= base_url('master/hapus-ruangan/'.$r['id']) ?>" class="btn btn-sm btn-danger" onclick="return confirm('Yakin ingin menghapus?')">
                        <i class="fas fa-trash"></i>
                    </a>
                </td>
                <?php endif; ?>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<!-- Modal Form -->
<div class="modal-overlay" id="modalForm">
    <div class="modal">
        <div class="modal-header">
            <h3 id="modalTitle">Tambah Ruangan</h3>
            <button class="close-btn" onclick="closeModal('modalForm')">&times;</button>
        </div>
        <form action="<?= base_url('master/simpan-ruangan') ?>" method="post">
            <div class="modal-body">
                <input type="hidden" name="id" id="id">
                <div class="form-group">
                    <label class="form-label">Nama Ruangan</label>
                    <input type="text" name="nama_ruangan" id="nama_ruangan" class="form-control" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" onclick="closeModal('modalForm')">Batal</button>
                <button type="submit" class="btn btn-primary">Simpan</button>
            </div>
        </form>
    </div>
</div>
<?= $this->endSection() ?>

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

    function tambahData() {
        document.getElementById('modalTitle').innerText = 'Tambah Ruangan';
        document.getElementById('id').value = '';
        document.getElementById('nama_ruangan').value = '';
        openModal('modalForm');
    }

    function editData(id, nama) {
        document.getElementById('modalTitle').innerText = 'Edit Ruangan';
        document.getElementById('id').value = id;
        document.getElementById('nama_ruangan').value = nama;
        openModal('modalForm');
    }
</script>
<?= $this->endSection() ?>
