@include('header')
	
	<section class="content">
		<div class="botoneraUser" style="float:left;">
			<button class="btn bg-teal" onclick="history.go(-1)"><i class="fas fa-arrow-left"></i> Volver</button>
		</div>

		<div class="container-fluid">
			<div class="row">
				<div class="botoneraUser">
					<button class="btn bg-teal js-right-sidebar" id="btnCreateUser"><i class="fas fa-plus"></i> Registrar</button>
					<a href="{{ url('/sistema/users/disabled') }}" class="btn bg-teal">Usuarios Deshabilitados</a>
				</div>
			</div>
			<div class="row" style="margin-bottom: 50px;">
				<div style="margin-top: 15px;">
					<p style="font-size:18px;font-weight:bold;">Vendedores</p>
				</div>
				<table class="table table-bordered tabla-circuitos" id="tablaVendedores">
					<thead>
						<th>Nombre y Apellido</th>
						<th>DNI</th>
						<th>E-mail</th>
						<th>Tel&eacute;fono</th>
						{{-- <th>Rol</th> --}}
						<th>Acciones</th>
					</thead>
					<tbody>
						@foreach($users as $user)
							@if($user->role == 1)
								@if(Auth::user()->id != $user->id)
									<tr class="user-{{ $user->id }}" data-user="{{ json_encode($user) }}">
										<td><a href="{{ url('sistema/users/' . $user->id) }}">{{ $user->lastName }}, {{ $user->name }}</a></td>
										<td>{{ $user->dni }}</td>
										<td>{{ $user->email }}</td>
										<td>{{ $user->nroTelefono }}</td>
										{{-- <td>{{ $user->role == 1 ? 'Vendedor' : 'Administrador'}}</td> --}}
										<td>
											<div class="dropdown">
												<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
													<i class="fas fa-bars"></i>
													<span class="caret"></span>
												</button>
												<ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="right:0;left:auto;">
													<li><a href="#" class="dropdown-item" data-toggle="modal" data-target="#modalEditarUsuario" onclick="loadDataModalEditarUsuario({{$user->id}},'{{$user->name}}','{{$user->lastName}}','{{$user->dni}}','{{$user->nroTelefono}}','{{$user->role}}','{{$user->email}}');"><i class="fas fa-edit"></i> Editar</a></li>
													<li><a href="#" class="dropdown-item btnDeshabilitarVendedor" data-id="{{ $user->id }}"><i class="fas fa-ban"></i> Deshabilitar</a></li>
												</ul>
											</div>
										</td>
									</tr>
								@endif
							@endif
						@endforeach
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div id="modalEditarUsuario" class="modal fade" role="dialog">
		<div class="modal-dialog" style="max-width: 450px !important;">	
			<!-- Modal content-->
			<div class="modal-content" style="border-radius: 5px;">
				<form action="users/editar-usuario" method="POST">
				@csrf
					<div class="modal-header" style="padding: 5px;"></div>
					<div class="swal-title" style="padding-top: 0px;margin-bottom:0;">Editar Vendedor</div>
					<div>
						<div>
							<div class="swal-text" style="margin:10px 10px 2px 10px;">Nombre</div>
							<div class="" style="padding:0 10px;margin:0 10px;">
								<div class="form-group" style="margin-bottom:0px;">
									<input type="text" name="nombre" id="nombre_usuario_edit" class="form-control" required style="padding-left:5px;border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);">
								</div>
							</div>
						</div>
						<div>
							<div class="swal-text" style="margin:10px 10px 2px 10px;">Apellido</div>
							<div class="" style="padding:0 10px;margin:0 10px;">
								<div class="form-group" style="margin-bottom:0px;">
									<input type="text" name="apellido" id="apellido_usuario_edit" class="form-control" required style="padding-left:5px;border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);">
								</div>
							</div>
						</div>
						<div>
							<div class="swal-text" style="margin:10px 10px 2px 10px;">DNI</div>
							<div class="" style="padding:0 10px;margin:0 10px;">
								<div class="form-group" style="margin-bottom:0px;">
									<input type="text" name="dni" id="dni_usuario_edit" class="form-control" required style="padding-left:5px;border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);">
								</div>
							</div>
						</div>
						<div>
							<div class="swal-text" style="margin:10px 10px 2px 10px;">Teléfono</div>
							<div class="" style="padding:0 10px;margin:0 10px;">
								<div class="form-group" style="margin-bottom:0px;">
									<input type="text" name="telefono" id="telefono_usuario_edit" class="form-control" required style="padding-left:5px;border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);">
								</div>
							</div>
						</div>
						<div>
							<div class="" style="padding:10px 10px 0px 10px;margin:10px 10px 0px 10px;">
								<div class="form-group" style="margin-bottom:5px;">
									<select name="role" id="role_usuario_edit" class="form-control" title="Seleccione un rol" required>
										<option value="1">Vendedor</option>
										<option value="2">Administrador</option>
									</select>
								</div>
							</div>
						</div>
						<div>
							<div class="swal-text" style="margin:10px 10px 2px 10px;">Email</div>
							<div class="" style="padding:0 10px;margin:0 10px;">
								<div class="form-group" style="margin-bottom:0px;">
									<input type="text" name="email" id="email_usuario_edit" class="form-control" required style="padding-left:5px;border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);">
								</div>
							</div>
						</div>
						<div>
							<div class="swal-text" style="margin:10px 10px 2px 10px;">Nueva Contraseña<br><span style="font-style: italic;font-size:12px;">(En caso de no completar, se mantendra la crontaseña actual)</span></div>
							<div class="" style="padding:0 10px;margin:0 10px;">
								<div class="form-group" style="margin-bottom:0px;">
									<input type="text" name="new_password" id="new_password_usuario_edit" class="form-control" style="padding-left:5px;border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);">
								</div>
							</div>
						</div>
					</div>
					<input type="text" id="usuarioID" name="usuarioID" style="display:none;">

					<div class="swal-footer">
						<div class="swal-button-container">
							<button data-dismiss="modal" class="swal-button swal-button--cancel">Cancelar</button>
							<div class="swal-button__loader"></div>
						</div>
						<div class="swal-button-container">
							<button type="submit" class="swal-button swal-button--confirm">Aceptar</button>
							<div class="swal-button__loader"></div>
						</div>
					</div>
				</form>
			</div>	
		</div>
	</div>

@include('footer')

<script> //loadDataModalEditarUsuario
	function loadDataModalEditarUsuario(id,nombre,apellido,dni,telefono,rol,email) {
		$('#usuarioID').val('');
		$('#nombre_usuario_edit').val('');
		$('#apellido_usuario_edit').val('');
		$('#dni_usuario_edit').val('');
		$('#telefono_usuario_edit').val('');
		$('#email_usuario_edit').val('');

		$('#usuarioID').val(id);
		$('#nombre_usuario_edit').val(nombre);
		$('#apellido_usuario_edit').val(apellido);
		$('#dni_usuario_edit').val(dni);
		$('#telefono_usuario_edit').val(telefono);
		$('#role_usuario_edit option:eq('+rol+')').prop('selected', true).change();
		$('#email_usuario_edit').val(email);
	}
</script>