<?= $this->extend('estructura/header_dashboard'); ?>
<?= $this->section('content'); ?>

<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
	<div class="page-content">
		<div class="container-fluid">
			<!-- start page title -->
			<div class="row">
				<div class="col-12">
					<div class="page-title-box d-sm-flex align-items-center justify-content-between">
						<h4 class="mb-sm-0"><?= $breadcrumb ?></h4>
						<div class="page-title-right">
							<ol class="breadcrumb m-0">
								<li class="breadcrumb-item"><a href="javascript: void(0);">Inicio</a></li>
								<li class="breadcrumb-item active"><?= $breadcrumb ?></li>
							</ol>
						</div>
					</div>
				</div>
			</div>
			<!-- end page title -->
			<div class="row">
				<div class="col-lg-12">
					<div class="card">
						<div class="card-header d-flex align-items-center">
                            <h5 class="card-title mb-0 flex-grow-1"><?= $breadcrumb_alias ?></h5>
                            <div>
								
                            </div>
                        </div>
						<div class="card-body">
							<table id="ajax-usuarios" class="table table-bordered nowrap table-striped align-middle" style="width:100%">
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- container-fluid -->
	</div>
	<!-- End Page-content -->
	<footer class="footer">
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-6">
					<script>document.write(new Date().getFullYear())</script> © Verisure Peru.
				</div>
				<div class="col-sm-6">
					<div class="text-sm-end d-none d-sm-block">
						Desarrollado por <a href="https://linktr.ee/rbarcenac">Verisure Peru</a>
					</div>
				</div>
			</div>
		</div>
	</footer>
</div>
<?= $this->section('js'); ?>
<script>
			$(function () {
				/*$("input[data-bootstrap-switch]").each(function(){
                    $(this).bootstrapSwitch('state', $(this).prop('checked'));
                });*/
				/***SERVERSIDE USUARIOS***/
				assetListVM = {
					dt: null,
					init: function () {
						dt = $('#ajax-usuarios').DataTable({
							"serverSide": true,
							"processing": true,
							"ajax": {
								"url": baseUrl + "/usuariosServerside",
								type: 'GET'
							},
							"columns": [
								{"title": "Código", "data": "IdUsuario", "class": "text-center", "searchable": true },
								{"title": "Nombre y Apellido", "data": "nombre_usuario", "class": "text-center", "searchable": true },
								{"title": "Matrícula", "data": "Matricula", "class": "text-center", "searchable": true },
								{"title": "Documento de Identidad", "data": "NumeroDoc", "class": "text-center", "searchable": true },
								{"title": "Perfil", "data": "perfil_usuario", "class": "text-center", "searchable": true },
								{"title": "Usuario", "data": "Usuario", "class": "text-center", "searchable": true },
								{"title": "Estado",
									"data": "Estado",
									class: 'text-center',
										render: function(data, type, row){  // con row obtienes la información por fila
										return "<span class='badge "+(row.Estado == 'Activo' ? 'bg-success' : 'bg-danger')+"'>"+row.Estado+"</span>";
									}
								},
								{"title": "Acciones", "data": "acciones", "class": "text-center", "searchable": false, "orderable": false },
							],

							"lengthMenu": [[10, 25, 50], [10, 25, 50]],
							responsive: true,
							autoWidth: false,
							"aaSorting": [[1, 'asc']],
						});
					}
				}

				assetListVM.init();
				/****FIN SERVERSIDE USUARIOS****/
			});
		</script>
<?php $this->endSection(); ?>
<!-- Modal Información Operador -->
<div class="modal fade" id="editarPerfilUsuario" tabindex="-1" role="dialog" aria-labelledby="exampleEditarPerfilUsuario" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleEditarPerfilUsuario">Editar Usuario</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form id="formEditarPerfilUsuario" class="formulario" autocomplete="off" action="" method="POST">
				<span class="respuesta"></span>
				<div class="modal-body">
					<div class="row">
						<div class="col-xxl-12 col-md-12 col-12 mb-3">
                            <div>
                                <label for="txtPerfilUsuario" class="form-label">Perfil*</label>
								<select class="form-select" aria-label="Perfil" id="txtPerfilUsuario" name="txtPerfilUsuario">
									<option selected="" value="">Seleccione una opción</option>
								</select>
                            </div>
                        </div>
						<span style="color: red;">* Si procede a realizar el cambio, todos los permisos y rutas personalizadas serán eliminadas y se asignarán los permisos y rutas por defecto del perfil.</span>
						<!--<div class="col-xxl-12 col-md-12 col-12 mb-3">
							<label for="txtPassword" class="form-label">Contraseña</label>
                            <div class="input-group">
                                <input type="text" class="form-control" aria-label="Password" id="txtPassword" name="txtPassword">
                            </div>
                        </div>-->
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
					<button type="submit" id="btnEjecutarOperador" class="btn btn-primary"><i class="mdi mdi-content-save"></i> Actualizar</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- end main content-->
<?php $this->endSection(); ?>