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

<?= $this->section('content') ?>

<?php if (session()->getFlashdata('success')): ?>
    <div class="alert alert-success alert-dismissible fade show mb-3" role="alert">
        <i class="fas fa-check-circle mr-2"></i> <?= session()->getFlashdata('success') ?>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
<?php endif; ?>

<?php if (session()->getFlashdata('error')): ?>
    <div class="alert alert-danger alert-dismissible fade show mb-3" role="alert">
        <i class="fas fa-ban mr-2"></i> <?= session()->getFlashdata('error') ?>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
<?php endif; ?>

<div class="card card-emerald card-outline shadow">
    <div class="card-header">
        <h3 class="card-title">Daftar Pengguna Sistem (Akun)</h3>
        <div class="card-tools">
            
        </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>Surel (Email)</th>
                    <th>Peran</th>
                    <th class="text-center" width="15%">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><span class="badge badge-light border"><?= $u['username'] ?></span></td>
                        <td><?= $u['surel'] ?></td>
                        <td>
                            <?php if ($u['role'] == 'admin'): ?>
                                <span class="badge badge-danger text-uppercase"><?= $u['role'] ?></span>
                            <?php else: ?>
                                <span class="badge badge-success bg-emerald text-uppercase"><?= $u['role'] ?></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-surel="<?= $u['surel'] ?>"
                                data-role="<?= $u['role'] ?>"
                                data-toggle="modal" data-target="#modalEditUser" title="Edit Akun">
                                <i class="fas fa-edit"></i>
                            </button>
                           
                        </td>
                    </tr>
                <?php endforeach; ?>
                <?php if (empty($users)): ?>
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">Belum ada akun pengguna yang terdaftar.</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="modalTambahUser" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <form action="<?= base_url('user/simpan') ?>" method="post" id="formTambahUser">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Nama Lengkap <span class="text-danger">*</span></label>
                        <input type="text" name="nama_lengkap" class="form-control" placeholder="Nama lengkap pemilik akun" required>
                    </div>
                    <div class="form-group">
                        <label>Username <span class="text-danger">*</span></label>
                        <input type="text" name="username" class="form-control" placeholder="Contoh: admin_sarirasa" required>
                    </div>
                    <div class="form-group">
                        <label>Surel <span class="text-danger">*</span></label>
                        <input type="email" name="surel" class="form-control" placeholder="alamat@domain.com" required>
                    </div>
                    <div class="form-group">
                        <label>Password <span class="text-danger">*</span></label>
                        <input type="password" name="password" class="form-control" placeholder="Minimal 6 karakter" required minlength="6">
                    </div>
                    <div class="form-group">
                        <label>Peran Sistem <span class="text-danger">*</span></label>
                        <select name="role" class="form-control" required>
                            <option value="">-- Pilih Peran --</option>
                            <option value="admin">Admin</option>
                            <option value="operator">Operator Kelompok</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" role="dialog" aria-hidden="true">
    <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 <span class="text-danger">*</span></label>
                        <input type="text" name="nama_lengkap" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Username <span class="text-danger">*</span></label>
                        <input type="text" name="username" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Surel <span class="text-danger">*</span></label>
                        <input type="email" name="surel" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Password Baru <small class="text-muted">(Kosongkan jika tidak diganti)</small></label>
                        <input type="password" name="password" class="form-control" placeholder="Masukkan password baru jika ingin ganti" minlength="6">
                    </div>
                    <div class="form-group">
                        <label>Peran Sistem <span class="text-danger">*</span></label>
                        <select name="role" class="form-control" required>
                            <option value="admin">Admin</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-info">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const tombolEdit = document.querySelectorAll('.btn-edit-user');
        const formEdit = document.getElementById('formEditUser');
        
        tombolEdit.forEach(button => {
            button.addEventListener('click', function() {
                const id = button.getAttribute('data-id');
                formEdit.setAttribute('action', '<?= base_url('user/update') ?>/' + id);

                formEdit.querySelector('input[name="nama_lengkap"]').value = button.getAttribute('data-nama');
                formEdit.querySelector('input[name="username"]').value = button.getAttribute('data-username');
                formEdit.querySelector('input[name="surel"]').value = button.getAttribute('data-surel');
                formEdit.querySelector('select[name="role"]').value = button.getAttribute('data-role');
            });
        });

        // PROTEKSI INPUT REAL-TIME
        document.querySelectorAll('input[name="nama_lengkap"]').forEach(input => {
            input.addEventListener('input', function() {
                this.value = this.value.replace(/[^a-zA-Z\s]/g, '');
            });
        });

        document.querySelectorAll('input[name="username"]').forEach(input => {
            input.addEventListener('input', function() {
                this.value = this.value.toLowerCase().replace(/[^a-z0-9_]/g, '');
            });
        });
    });
</script>

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