<div class="wraper responsive-width">

	<main>
		<div class="admin_tempblock">
			<div class="admin_tempsec">
				<div class="admin_sec">
					<div class="subsec_sec">
						<div class="subject_r subject_r_lng">
							<div class="subject_lsec">

								<div class="pr-5 mb-4">
									<nav aria-label="breadcrumb">
										<ol class="breadcrumb">
											<li class="breadcrumb-item"><a href="<?= base_url() . 'dashboard' ?>">Dashboard</a></li>
											<li class="breadcrumb-item active" aria-current="page"><?= $title ?></li>
										</ol>
									</nav>
								</div>

								<?php if ($this->session->flashdata('success')) { ?>
									<div class="alert alert-success alert-dismissible fade show mr-5" role="alert">
										<p><b> Success !</b> <?php echo $this->session->flashdata('success') ?></p>
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
								<?php } ?>

								<?php if ($this->session->flashdata('danger')) { ?>
									<div class="alert alert-danger alert-dismissible fade show mr-5" role="alert">
										<p><b> Error !</b><?php echo $this->session->flashdata('danger') ?></p>
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
								<?php } ?>

								<div class="pr-5">
									<div class="row justify-content-center">
										<div class="col-md-4">
											<div class="card">
												<div class="card-body">
													<h5 class="card-title">Add New Role</h5>
													<form method="post" action="<?php echo base_url(); ?>staff-roles">
														<div class="form-group mb-0">
															<label class="has-float-label">
																<input type="text" id="title" name="title" class=" form-control" placeholder='Enter role title' required>
																<span>Role Title</span>
															</label>
														</div>

														<div class=" w-100">
															<input type="submit" name="addStaffRole" id="addStaffRole" class="btn btn-sm btn-success w-100" value="Add">
														</div>

													</form>
												</div>
											</div>
										</div>
										<div class="col-md-8 pl-0">
											<div class="col-md-12 border rounded py-3">

												<!--  -->
												<table id="tbl" class="display table-responsive">
													<thead>
														<tr>
															<th class="textCenter">S.No</th>
															<th class="textCenter">Role Title</th>
															<th class="textCenter">Is Active</th>
															<th class="textCenter">Action</th>
														</tr>
													</thead>
													<tbody>
														<?php
														foreach ($staffRole_list as $role_Key => $role) {
														?>
															<tr>
																<td><?= $role_Key + 1 ?></td>
																<td><?= $role['title'] ?></td>
																<td><?= ucfirst($role['is_active']) ?></td>
																<td>
																	<button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#updateModal<?= $role['id'] ?>">
																		<i class="fa fa-edit"></i>
																	</button>

																	<div class="modal fade" id="updateModal<?= $role['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
																		<div class="modal-dialog" role="document">
																			<div class="modal-content">
																				<div class="modal-header">
																					<h5 class="modal-title" id="exampleModalLabel">Update</h5>
																					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
																						<span aria-hidden="true">&times;</span>
																					</button>
																				</div>
																				<form action="<?= base_url(); ?>staff-roles" method="POST" onkeydown=" return event.key != 'Enter'">
																					<div class="modal-body">
																						<input type="hidden" name="roleId" value="<?= $role['id'] ?>">

																						<div class="form-group mb-0">
																							<label class="has-float-label">
																								<input type="text" id="title" name="title" class=" form-control" value="<?= $role['title'] ?>" placeholder='Enter role title' required>
																								<span>Role Title</span>
																							</label>
																						</div>
																						<div class="form-group mt-4">
																							<label class="has-float-label">
																								<select id="is_active" class="form-control custom-select" placeholder="Is Active" name="is_active">
																									<option value="yes" <?= $role['is_active'] == 'yes' ? 'selected' : '' ?>>
																										Yes
																									</option>
																									<option value="no" <?= $role['is_active'] == 'no' ? 'selected' : '' ?>>
																										No
																									</option>
																								</select>
																								<span>Is Active</span>
																							</label>
																						</div>
																					</div>
																					<div class="modal-footer">
																						<button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">Close</button>
																						<input type="submit" name="updateStaffRole" class="btn btn-sm btn-success" value="Update">
																					</div>
																				</form>
																			</div>
																		</div>
																	</div>

																</td>
															</tr>
														<?php
														}
														?>

													</tbody>
												</table>
											</div>

										</div>
									</div>

								</div>


							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>

</div>

<!--End right-top side-->

<!-- <script src="<?php echo base_url(); ?>assets-bustracking/js/jquery-3.2.1.slim.min.js"></script> -->
<script src="<?php echo base_url(); ?>assets-bustracking/js/jquery-3.4.1.min.js"></script>
<script src="<?php echo base_url(); ?>assets-bustracking/js/popper.min.js"></script>
<script src="<?php echo base_url(); ?>assets-bustracking/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script defer src="<?php echo base_url(); ?>assets-bustracking/js/all.js"></script>
<script defer src="<?php echo base_url(); ?>assets-bustracking/js/main.js"></script>
<script src="<?php echo base_url(); ?>assets-bustracking/owl-carousel/js/owl.carousel.min.js"></script>
<script>
	$(document).ready(function() {
		//table js
		$('#tbl').DataTable({
			"lengthMenu": [
				[25, 50, 100, 150, -1],
				[25, 50, 100, 150, "All"]
			]
		});
		//table js end

	});
</script>