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

<div class="card card-emerald card-outline shadow">
    <div class="card-header">
        <h3 class="card-title">Daftar Akun Pengguna</h3>
        <div class="card-tools">
            <button class="btn btn-emerald btn-sm" data-toggle="modal" data-target="#modalTambahUser">
                <i class="fas fa-user-plus"></i> Tambah Pengguna Baru
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover table-striped mb-0">
            <thead class="bg-light">
                <tr>
                    <th width="5%" class="text-center">No</th>
                    <th>Nama Lengkap</th>
                    <th>Username</th>
                    <th>Role / Hak Akses</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php $no = 1;
                foreach ($users as $u) : ?>
                    <tr>
                        <td class="text-center"><?= $no++ ?></td>
                        <td><b><?= $u['nama_lengkap'] ?></b></td>
                        <td><?= $u['username'] ?></td>
                        <td>
                            <?php if ($u['role'] == 'admin'): ?>
                                <span class="badge badge-danger text-uppercase">Admin</span>
                            <?php elseif ($u['role'] == 'bendahara'): ?>
                                <span class="badge badge-warning text-uppercase">Bendahara</span>
                            <?php else: ?>
                                <span class="badge badge-success text-uppercase">Pengurus</span>
                            <?php endif; ?>
                        </td>
                        <td class="text-center">
                            <button class="btn btn-xs btn-info btn-edit-user"
                                data-id="<?= $u['id_user'] ?>"
                                data-nama="<?= $u['nama_lengkap'] ?>"
                                data-username="<?= $u['username'] ?>"
                                data-role="<?= $u['role'] ?>"
                                data-toggle="modal" data-target="#modalEditUser">
                                <i class="fas fa-edit"></i>
                            </button>
                            <a href="<?= base_url('user/hapus/' . $u['id_user']) ?>" class="btn btn-xs btn-danger" onclick="return confirm('Apakah Anda yakin ingin menghapus akses login akun ini?')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="modalTambahUser" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-emerald text-white">
                <h5 class="modal-title"><i class="fas fa-user-plus mr-2"></i> Buat Akun Baru</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form action="<?= base_url('user/simpan') ?>" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Nama Lengkap</label>
                        <input type="text" name="nama_lengkap" class="form-control" placeholder="Contoh: Budi Santoso" required>
                    </div>
                    <div class="form-group">
                        <label>Username</label>
                        <input type="text" name="username" class="form-control" placeholder="Gunakan huruf kecil tanpa spasi" required>
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" name="password" class="form-control" placeholder="Minimal 6 karakter" required>
                    </div>
                    <div class="form-group">
                        <label>Hak Akses (Role)</label>
                        <select name="role" class="form-control" required>
                            <option value="pengurus">Pengurus (Bisa input data & transaksi)</option>
                            <option value="bendahara">Bendahara (Fokus ke laporan keuangan)</option>
                            <option value="admin">Admin Utama (Akses Penuh)</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-emerald">Simpan Akun</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalEditUser" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title"><i class="fas fa-user-edit mr-2"></i> Edit Akun Pengguna</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form id="formEditUser" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Nama Lengkap</label>
                        <input type="text" name="nama_lengkap" id="edit_nama" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Username</label>
                        <input type="text" name="username" id="edit_username" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Role</label>
                        <select name="role" id="edit_role" class="form-control" required>
                            <option value="pengurus">Pengurus</option>
                            <option value="bendahara">Bendahara</option>
                            <option value="admin">Admin Utama</option>
                        </select>
                    </div>
                    <div class="form-group border-top pt-3 mt-3">
                        <label>Reset Password (Opsional)</label>
                        <input type="password" name="password" class="form-control" placeholder="Ketik password baru...">
                        <small class="text-danger">* Kosongkan kolom ini jika tidak ingin mengubah password.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-info">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        $('.btn-edit-user').on('click', function() {
            const id = $(this).data('id');
            $('#formEditUser').attr('action', '<?= base_url('user/update') ?>/' + id);

            $('#edit_nama').val($(this).data('nama'));
            $('#edit_username').val($(this).data('username'));
            $('#edit_role').val($(this).data('role'));
        });
    });
</script>

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