@extends('layouts.portal.app')
@section('content')
<script type="text/javascript" src="{{ url('custom/js/jquery-3.3.1.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ url('custom/smart-search/jquery-ui.min.css') }}">

<div class="content-wrapper">
	<div class="container-xxl flex-grow-1 container-p-y">
		<div class="card">
			<h4 class="breadcrumb"> <span class="text-muted fw-light breadcrumb-link"> Home /</span> Users - {{ $users->total() }} records fetched </h4>

			@if(Session::has('errorResponse')) 
			<h6 class="row"> 
				<div class="col-md-12 temporary-alert">
					<div class="alert alert-danger alert-dismissible" role="alert"> <i class="fa fa-info-circle"></i> {!! Session::has('errorResponse') ? Session::get("errorResponse") : '' !!} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button> </div>
				</div>
			</h6>
			@endif

			<div class="card-header d-flex border-top rounded-0 flex-wrap py-2">
				<label> 
					<input type="text" class="keyword form-control" placeholder="Search user"> 
					<input type="hidden" name="user_id" class="user-id">
				</label>

				<div class="ms-auto d-flex justify-content-start justify-content-md-end align-items-baseline pull-right">
					@if(Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Users.create'))
						<a href="javascript:;" class="btn btn-outline-primary ms-2 ms-sm-0 waves-effect waves-light create-user disabled-btn"><span><i class="ti ti-plus me-0 me-sm-1 ti-xs"></i> Add User </span></a> 
					@endif
				</div>
			</div>
		</div>

		<div class="pt-3">
			<div class="card">
				<div class="card-datatable table-responsive text-nowrap">
					<table class="table">
						<thead class="border-top">
							<tr>
								<th> # </th>
								<th> Username </th>
								<th> Contacts </th>
								<th> Actions </th>
							</tr>
						</thead>

						<tbody>
							@foreach($users as $user)
								<tr>
									<td> 
										<a href="javascript:;" @if(Auth::user()->hasRole('Administrator')) class="user-details{{ $user->id }} text-success" @else class="text-success" @endif> #{{ $user->ref_no }} </a> @if($user->can('Administer Company')) <span class="float-end" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Company Admin"> <i class="menu-icon tf-icons ti ti-toggle-right text-success"></i> </span> @endif 
									</td>

									<td> 
										<i class="ti ti-user"></i> {{ $user->username }} <br>
										<small> @if($user->status == 1) <span class="text-success"> <i class="ti ti-circle-check"></i> active </span> @else <span class="text-warning"> <i class="ti ti-circle-x"></i> inactive </span> @endif </small>
									</td>

									<td> <a href="tel:{{ $user->phone }}"><i class="ti ti-phone"></i> {{ $user->phone }} </a><br>
										<small> <i> <a href="mailto:{{ $user->email }}"><i class="ti ti-mail"></i> {{ $user->email }} </a></i></small>
									</td>

									<td> 
										@if(Auth::user()->hasRole('Administrator'))
											<a href="{{ $user->id }}" class="add-user-role text-primary disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Role"> <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-user-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4" /><path d="M15 19l2 2l4 -4" /></svg> </a>
										@endif

										@if(Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company'))
											<a href="{{ $user->id }}" class="reset-user-password text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Reset Password"> <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-lock-open-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 11h2a2 2 0 0 1 2 2v2m0 4a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h4" /><path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M8 11v-3m.347 -3.631a4 4 0 0 1 7.653 1.631" /><path d="M3 3l18 18" /></svg> </a>
										@endif

										@if(Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Users.edit'))
											<a href="{{ $user->id }}" class="edit-user{{ $user->id }} text-success disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit User"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-edit"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg> </a>
										@endif

										@if($user->status == 0 && (Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Users.activate')))
											<a href="{{ $user->id }}" class="activate-user text-primary disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Activate User"> <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" /></svg> </a>
										@elseif($user->status == 1 && (Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Users.deactivate')))
											<a href="{{ $user->id }}" class="deactivate-user text-warning disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Deactivate User"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-cancel"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M18.364 5.636l-12.728 12.728" /></svg> </a>
										@endif
									</td>
								</tr>	

								@include('portal.users.edit')

								@include('portal.users.details')

								<script type="text/javascript">
									document.addEventListener('DOMContentLoaded', function()
									{
										$('.edit-user{{ $user->id }}').click(function(e){
											e.preventDefault();

											$('#edit-user{{ $user->id }}').offcanvas("toggle");
										});

										$('.user-details{{ $user->id }}').click(function(e){
											e.preventDefault();

											$('#user-details{{ $user->id }}').offcanvas("toggle");
										});

										$(".edit-user{{ $user->id }}-form").validator().on("submit", function (event) 
									    {
									        if (event.isDefaultPrevented()) 
									        {
									            //submitMSG(false, "All fields must be filled");
									        } else 
									        {
									            event.preventDefault();

									            var app_url = $('#app_url').val();
									            var csrf_token = $('meta[name="csrf-token"]').attr('content');

									            $('.edit-user{{ $user->id }}-spinner').show();

									            $.ajax({
									                url: ''+app_url+'update-user',
									                type: 'POST',
									                data: new FormData(this),
									                contentType: false,
									                cache: false, 
									                processData: false,
									                dataType: 'JSON',
									                success : function(data)
									                {
									                    if (data.status == "ok")
									                    {
									                        $('.edit-user{{ $user->id }}-spinner').hide();
									                        submitMSG(true, data.reason);

									                        window.setTimeout(function() 
									                        {
									                            location.reload();
									                        }, 100);
									                    }else 
									                    {
									                        $('.edit-user{{ $user->id }}-spinner').hide();
									                        submitMSG(false, data.reason);
									                    }
									                }
									            });
									        }
									    });

									    function submitMSG(valid, msg)
									    {
									        var msgClasses = valid ? "text-success text-center" : "text-danger text-center";
									        $("#edit-user{{ $user->id }}-response").removeClass().addClass(msgClasses).text(msg);
									    }
									});
								</script>
							@endforeach
						</tbody>
					</table>
					
					<div class="d-flex justify-content-between align-items-center px-3 pb-3"> {{ $users->render() }} </div>
				</div>
			</div>
		</div>
	</div>

	@include('portal.users.activate')
	<script type="text/javascript" src="{{ url('custom/users/activate.js') }}"></script>

	@include('portal.users.add-role')
	<script type="text/javascript" src="{{ url('custom/users/add-role.js') }}"></script>

	@include('portal.users.deactivate')
	<script type="text/javascript" src="{{ url('custom/users/deactivate.js') }}"></script>

	@include('portal.users.reset-user-password')
	<script type="text/javascript" src="{{ url('custom/users/reset-user-password.js') }}"></script>

	@include('portal.companies.delete')
	<script type="text/javascript" src="{{ url('custom/companies/delete.js') }}"></script>

	<script src="{{ url('custom/smart-search/jquery-ui.min.js') }}" type="text/javascript"></script>

	<script type="text/javascript">
		(function($) 
		{
			var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

			$( ".keyword" ).autocomplete({
				source: function(request, response) 
				{
					$.ajax({
						url:"{{ url('smartly-search-users') }}",
						type: 'post',
						dataType: "json",
						data: {
							_token: CSRF_TOKEN,
							keyword: request.term
						},

						success: function(data) 
						{
							response(data);
						}
					});
				},

				select: function (event, ui) 
				{
					var app_url = $('#app_url').val();

					window.location.href = ""+app_url+"found-users/"+ui.item.user_id+"";
				}
			});
		})(jQuery);
	</script>
</div>
@endsection