@extends('layout.master')

@push('plugin-styles')
    {!! Html::style('assets/css/loader.css') !!}
    {!! Html::style('plugins/apex/apexcharts.css') !!}
    {!! Html::style('assets/css/dashboard/dashboard_1.css') !!}
    {!! Html::style('plugins/flatpickr/flatpickr.css') !!}
    {!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
    {!! Html::style('assets/css/elements/tooltip.css') !!}
    {!! Html::style('plugins/table/datatable/datatables.css') !!}
    {!! Html::style('plugins/table/datatable/dt-global_style.css') !!}
@endpush

@section('content')
    <br>
    <!--  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"><a href="javascript:void(0);"> {{__('CR')}}</a></li>
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Clientes')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span> {{__('PERFILES Y USUARIOS')}}</span></li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  Navbar Ends / Breadcrumb Area Ends -->

    <div class="col-md-12">


        <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">
                    <table class="table table-bordered table-hover" cellspacing="0" id="tablePerfiles" width="100%"
                           style="width: 100%;">
                        <thead>
                        <tr>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">ID</th>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Nombre del
                                perfil
                            </th>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Estatus</th>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Acciones</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </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">
                    <table class="table table-bordered table-hover" cellspacing="0" id="tableUsuarios" width="100%"
                           style="width:100%">
                        <thead>
                        <tr>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">ID</th>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Nombre del
                                usuario
                            </th>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Correo</th>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Perfil</th>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Sucursal</th>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Estatus</th>
                            <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Acciones</th>
                        </tr>
                        </thead>
                        <tbody>

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

    </div>

    <!--<div class="content">
        <div class="container-fluid">
            <div class="row">
                <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>
            <div class="row">
                <div class="col-md-12">


                            <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">
                                        <table class="table table-bordered table-hover" cellspacing="0" id="tablePerfiles" width="100%" style="width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Nombre del perfil</th>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Estatus</th>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </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">
                                        <table class="table table-bordered table-hover" cellspacing="0" id="tableUsuarios" width="100%" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Nombre del usuario</th>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Correo</th>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Perfil</th>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Sucursal</th>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Estatus</th>
                                                    <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>

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

                </div>
            </div>
        </div>
    </div>-->
    <div class="modal draggable fade" id="modalPerfil" 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_informacion"></h4>
                </div>
                <div class="modal-body">
                    <h5 class="text-center card-description mt-1 mb-2">Selecciona los menús a los cuales tendra acceso
                        el perfil</h5>

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

                            <div id="accordion" role="tablist">
                                @foreach (session('menus') as $categoria => $node)
                                    <div class="card card-collapse">
                                        <div class="card-header" role="tab" id="heading_{{ $categoria }}">
                                            <h5 class="mb-0">
                                                <a class="collapsed" data-toggle="collapse" href="#{{ $categoria }}"
                                                   aria-expanded="false" aria-controls="collapse4">
                                                    {{ $categoria }}
                                                    <i class="la la-angle-down"></i>

                                                </a>
                                            </h5>
                                        </div>
                                        <div id="{{ $categoria }}" class="collapse" role="tabpanel"
                                             aria-labelledby="heading_{{ $categoria }}" data-parent="#accordion">
                                            <div class="card-body">
                                                <div class="material-datatables 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>Seleccionar todos</td>
                                                            <td><input type="checkbox" name="selectMenu"
                                                                       value="check_cat"></td>
                                                        </tr>
                                                        @foreach($node as $m)
                                                            <tr>
                                                                <td>{{$m->nombre_largo}}</td>
                                                                <td><input class="acciones check_cat" type="checkbox"
                                                                           name="prods" value="{{$m->id}}"
                                                                           id="check_{{$m->id}}"></td>
                                                            </tr>
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @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-secondary" data-bs-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>
                </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>
                    <div class="row">
                        <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 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 text-right">
                            <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>
                    <div class="row">
                        <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 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>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="descripcion" class="bmd-label-floating">Teléfono <span class="text-danger"> *</span></label>
                                <input type="number" class="form-control" id="telefono">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="descripcion" class="bmd-label-floating">Extensión <span class="text-danger"> *</span></label>
                                <input type="number" class="form-control" id="extension">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="clave" class="bmd-label-floating">Celular <span
                                            class="text-danger"> *</span></label>
                                <input type="number" class="form-control" id="celular">
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="guardarUsuario()">Guardar</button>
                </div>
            </div>
        </div>
    </div>


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

@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
    <!--  The following JS library files are loaded to use Copy CSV Excel Print Options-->
    {!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.html5.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.print.min.js') !!}
    <!-- The following JS library files are loaded to use PDF Options-->
    {!! Html::script('plugins/table/datatable/button-ext/pdfmake.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/vfs_fonts.js') !!}
@endpush

@push('custom-scripts')
    @csrf
    <script>
		$(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: "id"
				},
					{
						data: "nombre"
					},
					{
						data: "estatus"
					},
					{
						data: "acciones"
					},

				],
				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',
					title: 'Por lo menos debes seleccionar un menú para el perfil',
					showConfirmButton: false,
					timer: 2500
				});
				return false;
			}
			if (nombre == '') {
				Swal.fire({
					type: 'error',
					title: 'Debes ingresar toda la información del perfil',
					showConfirmButton: false,
					timer: 2500
				});
				return false;
			}
			$.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');
					Swal.fire({
						type: 'success',
						title: resp.mensaje,
						showConfirmButton: false,
						timer: 2500
					});
				})
				.fail(function () {
					console.log("error");
					Swal.fire({
						type: 'error',
						title: 'Algo salio mal durante el proceso, intentalo más tarde',
						showConfirmButton: false,
						timer: 2500
					});
				})
				.always(function (resp) {
					console.log("complete");

				});
		}

		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)
					Swal.fire({
						type: 'success',
						title: resp.mensaje,
						showConfirmButton: false,
						timer: 2500
					});
				})
				.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')
						$('.filled').addClass('is-filled');
						$('#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['id_menu']).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: "id"
				},
					{
						data: "name"
					},
					{
						data: "email"
					},
					{
						data: "perfil"
					},
					{
						data: "sucursal"
					},
					{
						data: "estatus"
					},
					{
						data: "acciones"
					},
				],
				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);
				$('.selectpicker').selectpicker('refresh');
				$('.filled').removeClass('is-filled');

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

		}

		function error() {
			Swal.fire({
				type: 'error',
				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();

			if (nombres == '' || name == '' || password == '' || password_confirm == '' || id_perfil == 0 || id_sucursal == 0) {
				// showNotification('error', 'top', 'center', 'danger', '¡ERROR!', '');
				Swal.fire({
					type: 'error',
					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;
			}
			$.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,
				},
			})
				.done(function (resp) {
					if (resp.result == 2) {
						Swal.fire({
							type: 'error',
							title: 'Algo salio mal',
							text: resp.mensaje,
							showConfirmButton: false,
							timer: 2500
						});
						return;
					}
					limpiarSection(1);
					$('#modalUsuario').modal('hide');
					Swal.fire({
						type: 'success',
						title: resp.mensaje,
						showConfirmButton: false,
						timer: 3500
					});
					$('#tableUsuarios').DataTable().ajax.reload();
				})
				.fail(function () {
					console.log("error");
				})
				.always(function (resp) {
					console.log("complete");

				});

		}

		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("success");
					if (resp.result == 1) {
						$('#modalUsuario').modal('show');
						$('#text_title_modal_informacion2').text('Editar usuario')
						$('.filled').addClass('is-filled');
						$('#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']);
						$('#telefono').val(resp.data['telefono']);
						$('#extension').val(resp.data['extension']);
						$('#celular').val(resp.data['celular']);
						$('.selectpicker').selectpicker('refresh');
					}
				})
				.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"
			}
		}
    </script>
@endpush