<?= $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;">Manajemen User</h3>
        <button class="btn btn-primary" onclick="tambahUser()">
            <i class="fas fa-plus"></i> Tambah User
        </button>
    </div>

    <table id="tableUser" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Username</th>
                <th>Role</th>
                <th>Tgl Dibuat</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            <?php $no = 1; foreach($users as $u): ?>
            <tr>
                <td><?= $no++ ?></td>
                <td><?= $u['name'] ?></td>
                <td><?= $u['username'] ?></td>
                <td>
                    <?php if($u['role'] == 'admin'): ?>
                        <span class="btn btn-sm btn-primary" style="pointer-events: none;">Admin</span>
                    <?php else: ?>
                        <span class="btn btn-sm btn-success" style="pointer-events: none;">User</span>
                    <?php endif; ?>
                </td>
                <td><?= $u['created_at'] ?></td>
                <td>
                    <button class="btn btn-sm btn-success" title="Edit" onclick='editUser(<?= json_encode($u) ?>)'><i class="fas fa-edit"></i></button>
                    <?php if($u['id'] != session()->get('id')): ?>
                    <a href="<?= base_url('users/hapus/'.$u['id']) ?>" class="btn btn-sm btn-danger" onclick="return confirm('Yakin hapus?')"><i class="fas fa-trash"></i></a>
                    <?php endif; ?>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<!-- Modal User -->
<div class="modal-overlay" id="modalUser">
    <div class="modal">
        <div class="modal-header">
            <h3>Form User</h3>
            <button class="close-btn" onclick="closeModal('modalUser')">&times;</button>
        </div>
        <form action="<?= base_url('users/simpan') ?>" method="post">
            <div class="modal-body" style="display: grid; gap: 15px;">
                <input type="hidden" name="id" id="user_id">
                <div class="form-group"><label>Nama Lengkap</label><input type="text" name="name" class="form-control" required></div>
                <div class="form-group"><label>Username</label><input type="text" name="username" class="form-control" required></div>
                <div class="form-group"><label>Password (Kosongkan jika tidak ingin mengubah)</label><input type="password" name="password" class="form-control"></div>
                <div class="form-group">
                    <label>Role</label>
                    <select name="role" class="form-control" required>
                        <option value="user">User</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" onclick="closeModal('modalUser')">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('#tableUser');
    });
    function tambahUser() { 
        document.getElementById('user_id').value = '';
        document.querySelector('#modalUser form').reset();
        openModal('modalUser'); 
    }
    function editUser(data) {
        document.getElementById('user_id').value = data.id;
        document.querySelector('#modalUser input[name="name"]').value = data.name;
        document.querySelector('#modalUser input[name="username"]').value = data.username;
        document.querySelector('#modalUser select[name="role"]').value = data.role;
        openModal('modalUser');
    }
</script>
<?= $this->endSection() ?>
