@extends('layout.master', [
'activePage' => $activePage,
'categoria' => $categoria,
'menuParent' => $menuParent,
'titlePage' => $titlePage
])


@push('plugin-styles')
{!! Html::style('assets/css/loader.css') !!}
{!! Html::style('assets/css/apps/tickets.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
{!! Html::style('plugins/table/datatable/dt-global_style.css') !!}
@endpush

@section('content')
<!--  Navbar Starts / Breadcrumb Area Starts -->
<div class="sub-header-container">
	<header class="header navbar navbar-expand-sm">
		<ul class="navbar-nav flex-row">
			<li>
				<div class="page-header">
					<nav class="breadcrumb-one" aria-label="breadcrumb">
						<ol class="breadcrumb">
							<li class="breadcrumb-item active" aria-current="page">
								<span> {{__('PERFILES Y USUARIOS')}}</span>
							</li>
						</ol>
					</nav>
				</div>
			</li>
		</ul>
	</header>
</div>

<div class="layout-px-spacing">
	<div class="container-fluid p-0">
		<ul class="nav nav-pills nav-pills-primary" role="tablist">
			<li class="nav-item" onclick="loadPerfiles()">
				<a class="nav-link active" data-toggle="tab" href="#link1" role="tablist">
					Perfiles
				</a>
			</li>
			<li class="nav-item" onclick="loadUsuarios()">
				<a class="nav-link" data-toggle="tab" href="#link2" role="tablist">
					Usuarios
				</a>
			</li>
		</ul>
		<hr>
		<div class="tab-content tab-space">
			<div class="tab-pane active" id="link1">
				<div class="row justify-content-end">
					<div class="col-md-4 text-right">
						<button class="btn btn-primary" onclick="nuevoPerfil();">Nuevo perfil</button>
					</div>
				</div>
				<div class="row date-table-container layout-top-spacing">
					<div class="table-responsive">
						<table class="table table-hover display nowrap" style="width:100%" id="tablePerfiles">
							<thead>
								<tr>
									<th class="no-content"></th>
									<th>ID</th>
									<th>Nombre del perfil</th>
									<th>Estatus</th>
									<th>Fecha de creación</th>
									<th>Última actualización</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="tab-pane" id="link2">
				<div class="row justify-content-end">
					<div class="col-md-4 text-right">
						<button class="btn btn-primary" onclick="nuevoUsuario();">Nuevo usuario</button>
					</div>
				</div>
				<div class="row date-table-container layout-top-spacing">
					<div class="table-responsive">
						<table class="table table-bordered table-hover" id="tableUsuarios" style="width:100%">
							<thead>
								<tr>
									<th class="no-content"></th>
									<th>ID</th>
									<th>Nombre del
										usuario
									</th>
									<th>Correo</th>
									<th>Perfil</th>
									<th>Sucursal</th>
									<th>Estatus</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade draggable" id="modalPerfil" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="text_title_modal_informacion"></h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<i class="las la-times"></i>
				</button>
			</div>
			<div class="modal-body">
				<h6 class="text-center card-description mt-1 mb-2">Selecciona los menús a los cuales tendra acceso
					el perfil</h6>

				<div class="row">
					<div class="col-md-8">
						<div class="row mb-2">
							<div class="col-12">
								<button class="btn btn-primary " id="btnSelect" onclick="selectAll(1)">
									Seleccionar todos
								</button>
								<button class="btn btn-danger" style="display:none ;" id="btnClear" onclick="selectAll(2)">Limpiar seleccionados
								</button>
							</div>
						</div>

						<div id="accordion" role="tablist">
							@foreach ($data['menus'] as $nodePadre)
							@if ($nodePadre['nombre']=='PROYECTOS')
							@if (count($nodePadre['categorias']) > 0)
							<div class="card card-collapse">
								<div class="card-header" role="tab" id="heading_{{ $nodePadre['nombre'] }}">
									<h6 class="mb-0">
										<a class="collapsed" data-toggle="collapse" href="#collapse_{{ $nodePadre['nombre'] }}" aria-expanded="false" aria-controls="collapse_{{ $nodePadre['nombre'] }}">
											{{ $nodePadre['nombre'] }}
											<i class="la la-angle-down"></i>
										</a>
									</h6>
								</div>
								<div id="collapse_{{ $nodePadre['nombre'] }}" class="collapse" role="tabpanel" aria-labelledby="heading_{{ $nodePadre['nombre'] }}">
									<div class="card-body ">
										<div class="material-datatables table-wrapper col-md-12 m-0 p-0">
											<table class="table table-no-bordered table-hover" cellspacing="0" id="tableOperaciones" width="100%" style="width:100%">
												<thead>
												</thead>
												<tbody>
													<tr>
														<td><span class="font-15">Seleccionar todos</span></td>
														<td><input type="checkbox" name="selectMenu" value="check_cat_{{ $nodePadre['nombre'] }}"></td>
													</tr>
													<tr>
														<td> <span class="font-15"> {{$nodePadre['categorias'][0]['menus'][0]->nombre_largo}}</span></td>
														<td><input class="acciones check_cat_{{ $nodePadre['nombre'] }}" type="checkbox" name="prods" value="{{$nodePadre['categorias'][0]['menus'][0]->clave}}" id="check_{{$nodePadre['categorias'][0]['menus'][0]->clave}}"></td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							@endif
							@else
							<div class="card card-collapse">
								<div class="card-header" role="tab" id="heading_{{ $nodePadre['nombre'] }}">
									<h6 class="mb-0">
										<a class="collapsed" data-toggle="collapse" href="#collapse_{{ $nodePadre['nombre'] }}" aria-expanded="false" aria-controls="collapse_{{ $nodePadre['nombre'] }}">
											{{ $nodePadre['nombre'] }}
											<i class="la la-angle-down"></i>
										</a>
									</h6>
								</div>
								<div id="collapse_{{ $nodePadre['nombre'] }}" class="collapse" role="tabpanel" aria-labelledby="heading_{{ $nodePadre['nombre'] }}" data-parent="#accordion">
									<div class="card-body py-0 px-1">
										@foreach($nodePadre['categorias'] as $nodeCategoria)
										<div class="card card-collapse bg-light">
											<div class="card-header" role="tab" id="heading_{{ $nodePadre['nombre'] }}-{{ $nodeCategoria['id'] }}">
												<h6 class="mb-0">
													<a class="collapsed" data-toggle="collapse" href="#collapse_{{ $nodePadre['nombre'] }}-{{ $nodeCategoria['id'] }}" aria-expanded="false" aria-controls="collapse_{{ $nodePadre['nombre'] }}-{{ $nodeCategoria['id'] }}">
														{{ $nodeCategoria['nombre'] }}
														<i class="la la-angle-down"></i>
													</a>
												</h6>
											</div>
											<div id="collapse_{{ $nodePadre['nombre'] }}-{{ $nodeCategoria['id'] }}" class="collapse" role="tabpanel" aria-labelledby="heading_{{ $nodePadre['nombre'] }}-{{ $nodeCategoria['id'] }}">
												<div class="card-body ">
													<div class="material-datatables table-wrapper col-md-12 m-0 p-0">
														<table class="table table-no-bordered table-hover" cellspacing="0" id="tableOperaciones" width="100%" style="width:100%">
															<thead>
															</thead>
															<tbody>
																<tr>
																	<td><span class="font-15">Seleccionar todos</span></td>
																	<td><input type="checkbox" name="selectMenu" value="check_cat_{{ $nodePadre['nombre'] }}-{{ $nodeCategoria['id'] }}"></td>
																</tr>
																@foreach($nodeCategoria['menus'] as $nodeMenus)
																<tr>
																	<td> <span class="font-15"> {{$nodeMenus->nombre_largo}}</span></td>
																	<td><input class="acciones check_cat_{{ $nodePadre['nombre'] }}-{{ $nodeCategoria['id'] }}" type="checkbox" name="prods" value="{{$nodeMenus->clave}}" id="check_{{$nodeMenus->clave}}"></td>
																</tr>
																@endforeach
															</tbody>
														</table>
													</div>
												</div>
											</div>
										</div>
										@endforeach
									</div>
								</div>
							</div>
							@endif
							@endforeach
						</div>

					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label>Nombre del perfil: <span class="text-danger">*</span></label>
							<input type="text" class="form-control form-control-sm" id="nombre_perfil" data-inputmask="'mask': '9999-9999-9999-9999'">
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
				<button type="button" class="btn btn-primary" onclick="guardarPerfil()">Guardar</button>
			</div>
		</div>
	</div>
</div>
<div class="modal draggable fade" id="modalUsuario" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="text_title_modal_informacion2"></h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<i class="las la-times"></i>
				</button>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-4">
						<div class="form-group">
							<label for="descripcion" class="bmd-label-floating">Nombres <span class="text-danger"> *</span></label>
							<input type="text" class="form-control" id="nombres">
						</div>
					</div>
					<!--<div class="col-md-4">
                            <div class="form-group">
                                <label for="descripcion" class="bmd-label-floating">Apellidos <span class="text-danger"> *</span></label>
                                <input type="text" class="form-control" id="apellidos">
                            </div>
                        </div>-->
					<div class="col-md-4">
						<div class="form-group">
							<label for="clave" class="bmd-label-floating">Nombre de usuario <span class="text-danger"> *</span></label>
							<input type="text" class="form-control" id="name">
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label for="descripcion" class="bmd-label-floating">Correo <span class="text-danger"> *</span></label>
							<input type="email" class="form-control" id="email">
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-3">
						<div class="form-group">
							<label for="clave" class="bmd-label-floating">Contraseña <span class="text-danger"> *</span></label>
							<input type="password" class="form-control" id="password">
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label for="clave" class="bmd-label-floating">Confirmar contraseña <span class="text-danger"> *</span></label>
							<input type="password" class="form-control" id="password_confirm">
						</div>
					</div>
					<div class="col-md-2 mt-4">
						<button id="btn1" class="btn btn-secondary btn-sm" onclick="verContraseñas(1)">
							<i class="la la-eye"></i>
						</button>
						<button style="display: none;" id="btn2" class="btn btn-dark btn-sm" onclick="verContraseñas(2)">
							<i class="la la-eye-slash"></i>
						</button>
					</div>
					<div class="col-md-4 col-xs-12">
						<div class="form-group">
							<label>Perfil <span class="text-danger"> *</span></label>
							<select class="form-control " style="display:inline-block" id="id_perfil" data-style="select-with-transition" data-width="100%" data-live-search="true">
								<option value="0" selected disabled>-Selecciona-</option>
								@foreach($data['perfiles'] as $p)
								<option value="{{$p->id}}">{{$p->nombre}}</option>
								@endforeach
							</select>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4 col-xs-12">
						<div class="form-group">
							<label>Sucursal <span class="text-danger"> *</span></label>
							<select class="form-control " style="display:inline-block" id="id_sucursal" data-style="select-with-transition" data-width="100%" data-live-search="true">
								<option value="0" selected disabled>-Selecciona-</option>
								@foreach($data['sucursales'] as $su)
								<option value="{{$su->id}}">{{$su->descripcion}}</option>
								@endforeach
							</select>
						</div>
					</div>
					@if($data['usuarios_proyectos'])
					<div class="col-md-4">
						<div class="form-group">
							<label>Usuario Proyectos</label>
							<select class="form-control " style="display:inline-block" id="id_user_proyectos" data-style="select-with-transition" data-width="100%" data-live-search="true">
								<option value="0" selected disabled>-Selecciona-</option>
								@foreach($data['usuarios_proyectos'] as $su)
								<option value="{{$su->id}}">{{$su->name}} - {{ $su->username }} - {{ $su->email }}</option>
								@endforeach
							</select>
						</div>
					</div>
					@endif
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
				<button type="button" class="btn btn-primary" onclick="guardarUsuario()">Guardar</button>
			</div>
		</div>
	</div>
</div>
<style>
	.table-wrapper {
		max-height: 350px;
		overflow-y: auto;
		/* Scroll vertical cuando sea necesario */
	}

	.table {
		width: 100%;
		border-collapse: collapse;
		/* Asegura que no haya separación entre las celdas */
	}

    .btn-submit:hover {
        background-color: #E8C552 !important;
        color: black !important;
        border-color: #E8C552 !important
    }
</style>

<input type="hidden" id="id_usuario_hidden">
<input type="hidden" id="id_perfil_hidden">

<div class="modal fade draggable" id="modal-acciones-bloqueadas" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Acciones de <span id="nombre-perfil">XXX</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>

            <div class="modal-body">
                <input type="hidden" id="idPerfil">
                <form action="#" method="post" id="frm_acciones" class="w-100">
                    <div class="col-md-12" id="fragmento_acciones" role="tablist">

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
{!! Html::script('plugins/table/datatable/datatables.js') !!}
{!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
{!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
{!! Html::script('assets/js/loader.js') !!}
@endpush

@push('custom-scripts')
@csrf
<script>

    const workDoneSuccessMessage = {
        icon: 'success',
        title: '¡Acciones asignadas con éxito!',
        text: 'Se han cerrado las sesiones de todos los que pertenecen a ese perfil.'
    }

	$(document).ready(function() {
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
		loadPerfiles();
		// loadUsuarios();
	});

	// PERFILES

	function loadPerfiles() {
		//$('#').DataTable();
		$('#tablePerfiles').dataTable().fnDestroy();
		$('#tablePerfiles').DataTable({
			lengthMenu: [10, 15, 20, 50, 100],
			processing: true,
			responsive: true,
			scrollY: '50vh',
			scrollCollapse: true,
			ajax: {
				url: "{{url('configuracion/perfiles/get_perfiles')}}",
				type: "POST",
			},
			columns: [{
					data: "acciones"
				},
				{
					data: "id"
				},
				{
					data: "nombre"
				},
				{
					data: "estatus"
				},
				{
					data: "created_at"
				},
				{
					data: "updated_at"
				},

			],
			order: [
				[0, "asc"]
			],

		});

	}


	function nuevoPerfil() {
		$('#text_title_modal_informacion').text('Agregar nuevo perfil');
		$('#modalPerfil').modal('show');
		limpiarSection(2);
	}

	$('input[name="selectMenu"]').change(function() {
		if ($(this).is(':checked')) {
			$('.' + this.value).prop('checked', true)
		} else {
			$('.' + this.value).prop('checked', false)
		}

	});

	function selectAll(tipo) {
		if (tipo == 1) {
			$('#btnClear').show()
			$('#btnSelect').hide()
			$('.acciones').prop('checked', true);
			// showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', 'Se han seleccionado todos los menús.')
		} else {
			$('#btnClear').hide()
			$('#btnSelect').show()
			$('.acciones').prop('checked', false);
			// showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', 'Se han limpiado los menús seleccionados.')

		}

	}

	function guardarPerfil() {
		var nombre = $('#nombre_perfil').val(),
			id_perfil = $('#id_perfil_hidden').val();

		var menusPerfil = new Array;
		$('input.acciones[type=checkbox]').each(function() {
			if (this.checked) {
				menusPerfil.push(this.value)
			}
		});
		if (menusPerfil.length == 0) {
			Swal.fire({
				type: 'error',
				icon: 'warning',
				title: 'Por lo menos debes seleccionar un menú para el perfil',
				showConfirmButton: false,
				timer: 2500
			});
			return false;
		}
		if (nombre == '') {
			Swal.fire({
				type: 'error',
				icon: 'warning',
				title: 'Debes ingresar toda la información del perfil',
				showConfirmButton: false,
				timer: 2500
			});
			return false;
		}

		// $('#loadingModal').modal('show');
		$.ajax({
				url: "{{ url('configuracion/perfiles/save_perfil')}}",
				type: 'POST',
				dataType: 'json',
				data: {
					id: id_perfil,
					nombre: nombre,
					menus: menusPerfil,
					estatus: 1,
				},
			})
			.done(function(resp) {
				limpiarSection(2);
				$('#modalPerfil').modal('hide');
				$('#tablePerfiles').DataTable().ajax.reload();
				$('#success_message').text(resp.mensaje);
				$('#success').show();
			})
			.fail(function() {
				console.log("error");
				Swal.fire({
					type: 'error',
					icon: 'warning',
					title: 'Algo salio mal durante el proceso, intentalo más tarde',
					showConfirmButton: false,
					timer: 2500
				});
			})
			.always(function(resp) {
				console.log("complete");
				// $('#loadingModal').modal('hide');
			});
	}

	function activarDesPerfil(id) {
		//console.log(val,id)
		var act_des = 0

		if ($('#actdes_' + id).prop('checked')) {
			act_des = 1
		} else {
			act_des = 0

		}
		$.ajax({
				url: "{{ url('configuracion/perfiles/update_perfil')}}",
				type: 'POST',
				dataType: 'json',
				data: {
					estatus: act_des,
					id: id
				},
			})
			.done(function(resp) {
				$('#tablePerfiles').DataTable().ajax.reload();
				// showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
				$('#success_message').text(resp.mensaje);
				$('#success').show();
			})
			.fail(function() {
				console.log("error");
			})
			.always(function(resp) {
				console.log("complete");

			});

	}

	function editarPerfil(id) {
		limpiarSection(2)
		$.ajax({
				url: "{{url('configuracion/perfiles/get_perfil')}}",
				type: 'POST',
				dataType: 'json',
				data: {
					id: id,
				}
			})
			.done(function(resp) {
				console.log("success");
				if (resp.result == 1) {
					$('#modalPerfil').modal('show');
					$('#text_title_modal_informacion').text('Editar perfil')
					$('#id_perfil_hidden').val(resp.data['perfil']['id']);
					$('#nombre_perfil').val(resp.data['perfil']['nombre']);
				}
				$.each(resp.data['menus_perfil'], function(index, value) {
					$('#check_' + value['menu_clave']).prop('checked', true);
				})
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			});
	}

	function eliminarPerfil(id) {
		Swal.fire({
			title: '¿Estás seguro de eliminar?',
			text: "Esta acción no es reversible",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			cancelButtonText: 'Cancelar',
			confirmButtonText: 'Sí, eliminar'
		}).then((result) => {
			if (result.value) {
				// $('#loadingLoad').modal('show')
				$.ajax({
						url: "{{url('configuracion/perfiles/delete_perfil')}}",
						type: 'POST',
						dataType: 'json',
						data: {
							id: id,
						}
					})
					.done(function(resp) {
						console.log("success");
						if (resp.result == 1) {
							// showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
							Swal.fire({
								type: 'success',
								title: resp.mensaje,
								showConfirmButton: false,
								timer: 2500
							});
							$('#tablePerfiles').DataTable().ajax.reload();
						} else {
							// $('#loadingLoad').modal('hide')
							Swal.fire({
								type: 'success',
								title: resp.mensaje,
								showConfirmButton: false,
								timer: 2500
							});
							// showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.mensaje)
						}
					})
					.fail(function() {
						console.log("error");
					})
					.always(function(resp) {
						console.log("complete");

					});

			}
		})
	}

	// USUARIOS
	function loadUsuarios() {
		//$('#').DataTable();
		$('#tableUsuarios').dataTable().fnDestroy();
		$('#tableUsuarios').DataTable({
			lengthMenu: [10, 15, 20, 50, 100],
			processing: true,
			responsive: true,
			scrollY: '50vh',
			scrollCollapse: true,
			ajax: {
				url: "{{url('configuracion/perfiles/get_usuarios')}}",
				type: "POST",
			},
			columns: [{
					data: "acciones"
				},
				{
					data: "id"
				},
				{
					data: "name"
				},
				{
					data: "email"
				},
				{
					data: "perfil"
				},
				{
					data: "sucursal"
				},
				{
					data: "estatus"
				},

			],
			order: [
				[0, "asc"]
			],

		});

	}

	function nuevoUsuario() {
		$('#text_title_modal_informacion2').text('Agregar nuevo usuario');
		$('#modalUsuario').modal('show')
		limpiarSection(1);
	}

	function limpiarSection(tipo) {
		if (tipo == 1) {
			$('#id_usuario_hidden').val('');
			$('#nombres').val('');
			$('#apellidos').val('');
			$('#name').val('');
			$('#email').val('');
			$('#password').val('');
			$('#password_confirm').val('');
			$('#telefono').val('');
			$('#imgContent').attr('src', "http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png");
			$('#extension').val('');
			$('#celular').val('');
			$('#id_perfil').val(0);
			$('#id_sucursal').val(0);

		} else {
			$('#id_perfil_hidden').val('');
			$('#nombre_perfil').val('');
			$('#btnClear').hide()
			$('#btnSelect').show()
			$('input.acciones[type="checkbox"]').prop('checked', false)
		}

	}

	function error() {
		Swal.fire({
			type: 'error',
			icon: 'warning',
			title: 'Contraseña no valida',
			html: '<label class="text-secondary h6" >La contraseña debe de tener:</label></br>' +
				'<label class="text-secondary"><span class="text-danger">1. </span>Deben de ser iguales.</label></br>' +
				'<label class="text-secondary"><span class="text-danger">2. </span>Tener por lo menos una letra.</label></br>' +
				'<label class="text-secondary"><span class="text-danger">3. </span>Tener por lo menos un numero.</label></br>' +
				'<label class="text-secondary"><span class="text-danger">4. </span>Tener por lo menos un caracter especial ( * + - . _ ).</label></br>' +
				'<label class="text-secondary"><span class="text-danger">5. </span>Tener logitud mayor o igual a 8.</label>',
		})
	}

	function tiene_letras(password) {
		var letras = "abcdefghyjklmnñopqrstuvwxyz";
		password = password.toLowerCase();
		for (i = 0; i < password.length; i++) {
			if (letras.indexOf(password.charAt(i), 0) != -1) {
				return 1;
			}
		}
		return 0;
	}

	function guardarUsuario() {
		var id_usuario = $('#id_usuario_hidden').val();
		var nombres = $('#nombres').val();
		//var apellidos = $('#apellidos').val();
		var name = $('#name').val();
		var email = $('#email').val();
		var password = $('#password').val();
		//var telefono = $('#telefono').val();
		//var extension = $('#extension').val();
		//var celular = $('#celular').val();
		var password_confirm = $('#password_confirm').val();
		var id_perfil = $('#id_perfil option:selected').val();
		var id_sucursal = $('#id_sucursal option:selected').val();
		var id_user_proyectos = $('#id_user_proyectos').val()
		if (nombres == '' || name == '' || password == '' || password_confirm == '' || id_perfil == 0 || id_sucursal == 0) {
			// showNotification('error', 'top', 'center', 'danger', '¡ERROR!', '');
			Swal.fire({
				type: 'error',
				icon: 'warning',
				title: 'Debes ingresar toda la información del usuario',
				showConfirmButton: false,
				timer: 2500
			});
			return false;
		}
		const regex = /^[0-9]*$/;
		var longitud = password.length,
			bandera = false,
			bandera2 = false,
			bandera3 = false;
		for (var i = 0; i <= longitud - 1; i++) {
			if (regex.test(password[i])) {
				var bandera = true;
			} else {
				if (password[i] == password[i].toUpperCase()) {
					var bandera2 = true;
				}
			}
		}
		if (password.includes('*') || password.includes('+') || password.includes('.') || password.includes('-') || password.includes('_')) {
			var bandera3 = true;
		}
		var a = tiene_letras(password)
		if (a == 0) {
			error()
			return false;
		}
		if (longitud < 8) {
			error()
			return false;
		}
		if (!bandera || !bandera2 || !bandera3) {
			error()
			return false;
		}
		if (password != password_confirm) {
			error()
			return false;
		}

		$('#loadingModal').modal('show');
		$.ajax({
				url: "{{ url('configuracion/perfiles/save_usuario')}}",
				type: 'POST',
				dataType: 'json',
				data: {
					id: id_usuario,
					name: nombres,
					//apellidos: apellidos,
					username: name,
					email: email,
					password: password,
					id_perfil: id_perfil,
					id_sucursal: id_sucursal,
					//telefono: telefono,
					//extension: extension,
					//celular: celular,
					estatus: 1,
					secret: password_confirm,
					id_user_proyectos: id_user_proyectos,
				},
			})
			.done(function(resp) {
				$('#loadingModal').modal('hide');
				limpiarSection(1);
				$('#modalUsuario').modal('hide');
				$('#tableUsuarios').DataTable().ajax.reload();
				$('#success_message').text(resp.mensaje);
				$('#success').show();
			})
			.fail(function() {
				console.log("error");
			})
			.always(function(resp) {
				console.log("complete");
				setTimeout(() => {
					$('#loadingModal').modal('hide');
				}, 2000);

			});

	}

	function activarDes(id) {
		//console.log(val,id)
		var act_des = 0

		if ($('#actdes_' + id).prop('checked')) {
			act_des = 1
		} else {
			act_des = 0

		}
		$.ajax({
				url: "{{ url('configuracion/perfiles/update_usuario')}}",
				type: 'POST',
				dataType: 'json',
				data: {
					estatus: act_des,
					id: id
				},
			})
			.done(function(resp) {
				if (resp.result == 1) {
					$('#tableUsuarios').DataTable().ajax.reload();
					// showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje);
					Swal.fire({
						type: 'success',
						title: resp.mensaje,
						showConfirmButton: false,
						timer: 2500
					});
				}
			})
			.fail(function() {
				console.log("error");
			})
			.always(function(resp) {
				console.log("complete");

			});

	}

	function editar(id) {
		$.ajax({
				url: "{{url('configuracion/perfiles/get_usuario')}}",
				type: 'POST',
				dataType: 'json',
				data: {
					id: id,
				}
			})
			.done(function(resp) {
				console.log(resp);
				if (resp.result == 1) {
					$('#modalUsuario').modal('show');
					$('#text_title_modal_informacion2').text('Editar usuario')
					$('#id_usuario_hidden').val(resp.data['id']);
					$('#nombres').val(resp.data['name']);
					//$('#apellidos').val(resp.data['apellidos']);
					$('#email').val(resp.data['email']);
					$('#name').val(resp.data['username']);
					$('#password').val(atob(resp.data['secret']));
					$('#password_confirm').val(atob(resp.data['secret']));
					$('#id_perfil').val(resp.data['id_perfil']);
					$('#id_sucursal').val(resp.data['id_sucursal']);
					$('#id_user_proyectos').val(resp.data['id_user_proyectos']);

					//$('#telefono').val(resp.data['telefono']);
					//$('#extension').val(resp.data['extension']);
					//$('#celular').val(resp.data['celular']);
				}
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			});
	}

	function eliminar(id) {
		Swal.fire({
			title: '¿Estás seguro de eliminar?',
			text: "Esta acción no es reversible",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			cancelButtonText: 'Cancelar',
			confirmButtonText: 'Sí, eliminar'
		}).then((result) => {
			if (result.value) {
				// $('#loadingLoad').modal('show')
				$.ajax({
						url: "{{url('configuracion/perfiles/delete_usuario')}}",
						type: 'POST',
						dataType: 'json',
						data: {
							id: id,
						}
					})
					.done(function(resp) {
						console.log("success");
						$('#tableUsuarios').DataTable().ajax.reload();
						Swal.fire({
							type: 'success',
							title: resp.mensaje,
							showConfirmButton: false,
							timer: 2500
						});
					})
					.fail(function() {
						console.log("error");
					})
					.always(function(resp) {
						console.log("complete");

					});

			}
		})
	}

	function verContraseñas(tipo) {
		if (tipo == 1) {
			document.getElementById("password").type = "text"
			document.getElementById("password_confirm").type = "text"
			$('#btn1').hide();
			$('#btn2').show();

		} else {
			$('#btn2').hide();
			$('#btn1').show();
			document.getElementById("password").type = "password"
			document.getElementById("password_confirm").type = "password"
		}
	}

    function mostrarAccionesBloqueadas(perfil, nombre) {
        if(perfil) {
            $('#nombre-perfil').text(nombre);

            $.ajax({
                url: "{{ url('operaciones/acciones/buscar-acciones') }}",
                data: {
                    id: perfil
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal"). modal("hide")
                        fillAcciones(res.acciones)
                        $('#idPerfil').val(perfil);
                        $('#modal-acciones-bloqueadas').modal('show');
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        if(error.status == 404) {
                            Swal.fire({
                                icon: "error",
                                title: "Error al procesar la petición",
                                text: error.responseText
                            });

                            return false;
                        }

                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }
    }

    function fillAcciones(acciones) {
        const $fragmento = $('#fragmento_acciones');
        $fragmento.empty();

        let html = '';
        Object.keys(acciones).forEach((programa, index) => {
            let body = '';

            acciones[programa].forEach((accion, index) => {
                const indiceAccion = index + 1;
                const checked = accion.habilitado ? 'checked' : '';

                if (indiceAccion % 3 === 1) {
                    body += `<div class="row">`;
                }

                body += `
                    <div class="col-md-4 d-flex justify-content-between align-items-center">
                        <label class="pointer bs-popover" data-container="body" data-trigger="hover" data-content="${accion.descripcion}" for="checkbox${accion.id}">${accion.accion}</label>
                        <input type="checkbox" name="accion" data-id="${accion.id}" id="checkbox${accion.id}" ${checked}>
                    </div>`;

                if (indiceAccion % 3 === 0) {
                    body += `</div>`;
                }
            });

            if (acciones[programa].length % 3 !== 0) {
                body += `</div>`;
            }

            html += `
                <div class="card card-collapse mt-3">
                    <div class="card-header d-flex justify-content-between align-items-center" role="tab" id="heading_${index}">
                        <h5 class="mb-0">
                            <a class="collapsed" data-toggle="collapse" href="#tab_${index}"
                            aria-expanded="false" aria-controls="collapse4">
                                ${programa}
                                <i class="la la-angle-down"></i>
                            </a>
                        </h5>

                        <button id="btnChangeStates${index}" type="button" class="btn btn-secondary btn-submit d-inline-flex align-items-center" data-accion='deshabilitar'>
                            <i class="las la-ban"></i>
                            <span class="ml-2">Dehabilitar</span>
                        </button>
                    </div>
                    <div id="tab_${index}" class="collapse" role="tabpanel"
                        aria-labelledby="heading_${index}" data-parent="#fragmento_acciones">
                        <div class="card-body">
                            ${body}
                        </div>
                    </div>
                </div>
            `;
        });

        html += `
            <hr>
            <div class="justify-content-end">
                <div class="col text-right">
                    <button id="btnSave" type="button" class="btn btn-primary btn-submit btn-lg d-inline-flex align-items-center">
                        <i class="las la-save icon-large"></i>
                        <span class="ml-2">Guardar informacion</span>
                    </button>
                    <button id="btnHabilitar" type="button" class="btn btn-secondary btn-submit btn-lg d-inline-flex align-items-center" data-accion='deshabilitar'>
                        <i class="las la-ban icon-large"></i>
                        <span class="ml-2">Deshabilitar todo</span>
                    </button>
                    <button id="btnClose" type="button" class="btn btn-danger btn-submit btn-lg d-inline-flex align-items-center">
                        <i class="las la-times icon-large"></i>
                        <span class="ml-2">Cerrar</span>
                    </button>
                </div>
            </div>
        `;

        $fragmento.append(html);
        desbloquearAccionesBotones(Object.keys(acciones));
    }

    function desbloquearAccionesBotones(programas) {

        $('.bs-popover').popover();

        $('#btnSave').on('click', () => {
            const formData = new FormData();
            formData.append('id', $('#idPerfil').val());

            const checkboxes = $('input[name="accion"]');

            checkboxes.each(function () {
                const id = this.getAttribute('data-id');
                const isChecked = $(this).is(':checked');

                if(isChecked) {
                    formData.append('accionesDeshabilitadas[]', id);
                }
            });

            $.ajax({
                url: "{{ url('operaciones/acciones/guardar-acciones') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(workDoneSuccessMessage);
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        if(error.status == 404) {
                            Swal.fire({
                                icon: "error",
                                title: "Error al procesar la petición",
                                text: error.responseText
                            });

                            return false;
                        }

                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        });

        $('#btnHabilitar').on('click', function () {
            const isHabilitar = this.getAttribute('data-accion') === 'habilitar';
            const checkboxes = $('#fragmento_acciones').find('input[type="checkbox"]');
            checkboxes.each(function() {
                $(this).prop('checked', !isHabilitar);
            });

            const btn = $(this);

            btn.html(isHabilitar ?
                `<i class="las la-ban"></i>
                <span class="ml-2">Deshabilitar</span>` :
                `<i class="las la-star"></i>
                <span class="ml-2">Habilitar</span>`);

            this.setAttribute('data-accion', isHabilitar ? 'deshabilitar' : 'habilitar');
            btn.toggleClass('btn-success', !isHabilitar);
            btn.toggleClass('btn-secondary', isHabilitar);
        });

        $('#btnClose').on('click', () => {
            $('#modal-acciones-bloqueadas').modal('hide');
            $('#fragmento-acciones').empty();
            $('#idPerfil').val('');
        });

        programas.forEach((programa, index) => {
            $(`#btnChangeStates${index}`).on('click', function() {
                const isHabilitar = this.getAttribute('data-accion') === 'habilitar';
                const checkboxes = $(`#tab_${index}`).find('input[type="checkbox"]');
                checkboxes.each(function() {
                    $(this).prop('checked', !isHabilitar);
                });

                const btn = $(this);

                btn.html(isHabilitar ?
                    `<i class="las la-ban"></i>
                    <span class="ml-2">Deshabilitar</span>` :
                    `<i class="las la-star"></i>
                    <span class="ml-2">Habilitar</span>`);

                this.setAttribute('data-accion', isHabilitar ? 'deshabilitar' : 'habilitar');
                btn.toggleClass('btn-success', !isHabilitar);
                btn.toggleClass('btn-secondary', isHabilitar);
            });
        });
    }
</script>
@endpush