<div class="page-title">
  <div>
    <h1><i class="fa fa-key"></i> Role</h1>
    <p>View all Roles</p>
  </div>  
</div>
<div class="card">
    <div class='row'>
        <div class='col-xs-12 col-sm-12 col-md-12'>
            <div class='panel panel-primary ch'>
                <div class='panel-heading'>
                    <h4 class='text-center'>Role Management</h4>
                </div>
                
                <div class='panel-body'>
           			<div class='mb-3 text-right'>
						<button class='btn btn-sm btn-success' data-toggle='modal' data-target='#addRoleModal'>➕ Add Role</button>
					</div>
					<br />
                    <?php
$query = "SELECT * FROM `role`";
$run_query = mysqli_query($connection, $query);
if (mysqli_num_rows($run_query) > 0):
    $i = 0;
?>
<div class="table-responsive">
    <table class="table table-bordered hover table-sm" id="myTable">
        <thead>
            <tr>
                <th>S/N</th>
                <th>Role</th>
                <th>Type</th>                 
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <?php while ($result = mysqli_fetch_assoc($run_query)):
                $i++;
                $role_id = $result['id'];
                $all_role = $result['role_name'];
				$all_type = $result['role_type'];
            ?>
            <tr>
                <td><?= $i ?></td>
                <td><?= htmlspecialchars($all_role ?? '') ?></td>                
                <td><?= htmlspecialchars($all_type ?? '') ?></td>
                <td>
                    <form method="POST" action="" style="display:inline-block">
                        <input type="hidden" name="hide_role_del" value="<?= $role_id ?>" />
                        <input type="submit" name="delete_role_btn" value="Delete" class="btn btn-xs btn-danger" />
                    </form>

                    <button 
                        type="button" 
                        class="btn btn-xs btn-primary" 
                        data-toggle="modal" 
                        data-target="#editRoleModal<?= $role_id ?>">
                        Edit
                    </button>

                    <!-- Edit Modal -->
                    <div class="modal fade" id="editRoleModal<?= $role_id ?>" tabindex="-1" role="dialog" aria-labelledby="editRoleModalLabel<?= $role_id ?>" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <form method="POST" action="">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="editRoleModalLabel<?= $role_id ?>">Edit Role</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <input type="hidden" name="edit_role_id" value="<?= $role_id ?>" />
                                        <div class="form-group">
                                            <label>Name</label>
                                            <input type="text" name="edit_role_name" class="form-control" value="<?= htmlspecialchars($all_role ?? '') ?>" required />
                                        </div>
                                        <div class="form-group">
                                            <label>Type</label>
                                            <select name="edit_role_type" class="form-control">
											  <option value="<?= htmlspecialchars($all_type ?? '') ?>"></option>
											  <option value="staff">Staff</option>
											  <option value="student">Student</option>
											</select>
                                        </div>                                           
                                    </div>
                                    <div class="modal-footer">
                                        <button type="submit" name="update_role_btn" class="btn btn-success">Save changes</button>
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <?php endwhile; ?>
        </tbody>
    </table>
</div>
<?php endif; ?>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- Add Class Modal -->
					<div class='modal fade' id='addRoleModal' tabindex='-1' role='dialog' aria-labelledby='addRoleModalLabel' aria-hidden='true'>
						<div class='modal-dialog' role='document'>
							<div class='modal-content'>
								<form method='POST' action=''>
									<div class='modal-header'>
										<h5 class='modal-title' id='addRoleModalLabel'>Add New Role</h5>
										<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
										    <span aria-hidden='true'>&times;</span>
										</button>
									</div>
									<div class='modal-body'>
										<div class='form-group'>
										    <label>Name</label>
										    <input type="text" name="new_role_name" class="form-control" required />
										</div>
									</div>
									<div class='modal-footer'>
										<button type='submit' name='add_role_btn' class='btn btn-primary'>Add Role</button>
										<button type='button' class='btn btn-secondary' data-dismiss='modal'>Cancel</button>
									</div>
								</form>
							</div>
						</div>
					</div>
