@extends('admin.layouts.adminApp', ["title" => "Telbanda admin"])

@section('content')
	<section class="container-fluid pt-3 mt-4">
		<div class="">
			<div class="row pb-3">
				<div class="col-12 col-lg-10">
					<div class="input-group ">

						<input type="text" class="form-control  border-right-0 rounded-x-left text-std-2"
							   placeholder="Pesquisar por utilizadores">
						<div class="input-group-prepend">
                                    <span class="input-group-text rounded-x-right bg-white border-left-0 rounded-right "><i
												class="fa fa-search text-palid-2"></i></span>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-2">
					<button class="btn btn-outline-dark text-std d-block mx-auto py-2 rounded-x px-4 text-violet " style="border:2px solid rgba(209,196,233 ,1); background: transparent;" data-toggle="modal"
							data-target="#add-user-modal">
						<i class="material-icons float-left mr-2">add</i>
						Utilizador
					</button>
				</div>
			</div>

			<table class="table table-hover" id="users">
				<thead>
				<tr>
					<th class="sm-font text-center text-std-2 text-uppercase">Nome</th>
					<th class="sm-font text-center text-std-2 text-uppercase">Tipo de utilizador</th>
					<th class="sm-font text-center text-std-2 text-uppercase">Email</th>
					<th class="sm-font text-center text-std-2 text-uppercase" colspan="2" rowspan="2"><i
								class="fa fa-cogs"></i></th>
				</tr>
				</thead>
				<tbody class="user-holder">
				@foreach($users as $user)
					<tr class="sm-font">
						<td class="text-center text-std-2">{{$user->username}}</td>
						<td class="text-center text-std-2">{{$user->user_type
						}}</td>
						<td class="text-center text-std-2">{{$user->email}}</td>
						<td class="text-center text-std-2 product-price">
							<button class="btn btn-danger rounded-x btn-rem-user" data-toggle="modal"
									data-target="#remove-user-modal" data-id="{{$user->id_user}}">
								<i class="material-icons sm-font">delete</i>
							</button>
						</td>
					</tr>
				@endforeach
				</tbody>
			</table>

		</div>
	</section>
	<div class="modal fade" id="add-user-modal">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">

				<!-- Modal Header -->
				<div class="modal-header "><h6 class="text-std-2 sm-font text-violet mb-0 modal-title">Registro de utilizador</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<!-- Modal body -->
				<div class="modal-body px-0 bg-light">
					<form class="container-fluid py-3">
						<div class="form-group">
							<label class="sm-font text-std-2" for="usr">Nome:</label>
							<input type="text" class="form-control border-x text-std-2" id="name" placeholder="Nome do utilizador">
						</div>

						<div class="form-group">
							<label class="sm-font text-std-2" for="pwd">Email:</label>
							<input type="text" class="form-control border-x text-std-2" id="email" placeholder="Email do utilizador">
						</div>

						<div class="form-group">
							<label class="sm-font text-std-2" >Tipo de utilizador:</label>
							<select id="user-type" class="custom-select border-x text-std-2">
								<option selected>Selecione tipo de utilizador</option>
								<option value="3">Técnico</option>
								<option value="2">Atendente</option>
								<option value="1">Administrador</option>
							</select>
						</div>

						<div class="form-group">
							<label class="sm-font text-std-2" for="pwd">Número de telefone:</label>
							<input type="text" class="form-control border-x text-std-2" id="phone" placeholder="Número de telefone">
						</div>

					</form>
				</div>

				<!-- Modal footer -->
				<div class="modal-footer bg-light border-top-0">
					<button class="btn btn-outline-dark text-std btn-add-user py-2 rounded-x px-4 text-violet "
							style="border:2px solid rgba(209,196,233 ,1); background: transparent;">
						<i class="material-icons float-left mr-2">add</i>
						Utilizador
					</button>
				</div>

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

	<div class="modal fade" id="remove-user-modal">
		<div class="modal-dialog modal-dialog-centered rounded">
			<div class="modal-content">

				<!-- Modal Header -->
				<div class="modal-header "><h6 class="text-std-2 sm-font text-violet mb-0 modal-title">Remover utilizador</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<!-- Modal body -->
				<div class="modal-body  bg-light">
					<p class="text-std-2">
						Tem a certeza que deseja remover este utilizador ?
					</p>
				</div>

				<!-- Modal footer -->
				<div class="modal-footer bg-light border-top-0">
					<button class="btn btn-success text-std-2 btn-delete-user font-weight-normal  py-2 rounded-x px-4 sm-font ">
						Sim
					</button>
					<button class="btn btn-outline-danger text-std-2 font-weight-normal  py-2 rounded-x px-4 sm-font ">
						Não
					</button>
				</div>

			</div>
		</div>
	</div>
	@push("scripts")
		<script src="assets/js/main.js"></script>
		<script src="views/admin/assets/js/users.js"></script>
		<!--<script src="views/admin/assets/js/main.js"></script>-->
	@endpush

@endsection