@extends('layout')

@section('body')
<div class="row px-0 px-md-3 my-4">
	@if(session('message'))
	<div class="alert alert-success alert-dismissible fade show" role="alert">
		<strong>{{ session('message') }}</strong>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@endif
	@error('firstname')
	<div class="alert alert-danger alert-dismissible fade show" role="alert">
		<strong>{{ $message }}</strong>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@enderror
	@error('lastname')
	<div class="alert alert-danger alert-dismissible fade show" role="alert">
		<strong>{{ $message }}</strong>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@enderror
	@error('email')
	<div class="alert alert-danger alert-dismissible fade show" role="alert">
		<strong>{{ $message }}</strong>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@enderror
	@error('cellphone')
	<div class="alert alert-danger alert-dismissible fade show" role="alert">
		<strong>{{ $message }}</strong>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@enderror
	@error('role')
	<div class="alert alert-danger alert-dismissible fade show" role="alert">
		<strong>{{ $message }}</strong>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@enderror
	@error('active')
	<div class="alert alert-danger alert-dismissible fade show" role="alert">
		<strong>{{ $message }}</strong>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@enderror
	
	<div class="col-12 mb-3">
		<form action="/update/user" method="POST" enctype="multipart/form-data">
			@csrf
			@method('PUT')
			<!-- Profile -->
			<div class="blck-white mb-3">
				<h5 class="ms-2 my-2">User Information:</h5>
				<div class="row">
					<div class="col-12 offset-0 offset-md-4 col-md-4 mb-3 text-center">
						<img class="profile-avatar profileavataredit mb-2" src="{{asset($user->avatar)}}"><br>
						<input type="file" accept=".jpg,.jpeg,.png" name="avatar" class="form-control" onchange="previewAvatar(event)">
					</div>
					<div class="clearfix"></div>
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">First Name<span class="fw-medium text-danger">*</span>:</label>
						<input type="text" name="firstname" class="form-control" value="{{$user->firstname}}" required>
					</div>
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">Last Name<span class="fw-medium text-danger">*</span>:</label>
						<input type="text" name="lastname" class="form-control" value="{{$user->lastname}}" required>
					</div>
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">Middle Name:</label>
						<input type="text" name="middlename" class="form-control" value="{{$user->middlename}}">
					</div>

					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">Date Of Birth:</label>
						<input type="date" name="dateofbirth" class="form-control" value="{{$user->dateofbirth}}">
					</div>
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">SSN:</label>
						<input type="text" name="ssn" class="form-control" value="{{$user->ssn}}">
					</div>
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">Salary:</label>
						<input type="text" name="salary" class="form-control" value="{{$user->salary}}">
					</div>
				</div>
			</div>
			<!-- Profile -->

			<!-- Contact -->
			<div class="blck-white mb-3">
				<h5 class="ms-2 my-2">Contact Information:</h5>
				<div class="row">
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">Email<span class="fw-medium text-danger">*</span>:</label>
						@if($usr->role == 'admin')
						<input type="email" name="email" class="form-control" value="{{$user->email}}" required>
						@else
						<span class="form-control disabled">{{$user->email}}</span>
						@endif
					</div>
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">Cell Phone<span class="fw-medium text-danger">*</span>:</label>
						<input type="text" name="cellphone" class="form-control" value="{{$user->cellphone}}" required>
					</div>
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">Home Phone:</label>
						<input type="text" name="homephone" class="form-control" value="{{$user->homephone}}">
					</div>
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label me-2">Inform by:</label>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="checkbox" name="informbyphone" id="phone" value="1" {{$user->informbyphone==1?'checked':''}}>
							<label class="form-check-label" for="phone">Phone (SMS)</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="checkbox" name="informbyemail" id="email" value="1" {{$user->informbyemail==1?'checked':''}}>
							<label class="form-check-label" for="email">Email</label>
						</div>
					</div>
				</div>
			</div>
			<!-- Contact -->

			@if($usr->role == 'admin')
			<!-- Settings -->
			<div class="blck-white mb-3">
				<h5 class="ms-2 my-2">Settings:</h5>
				<div class="row">
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">Role<span class="fw-medium text-danger">*</span>:</label>
						<select name="role" class="form-control" required>
							<option {{$user->role == 'admin' ? 'selected' : '' }} value="admin">Admin</option>
							<option {{$user->role == 'accounting' ? 'selected' : '' }} value="accounting">Accounting</option>
							<option {{$user->role == 'safety' ? 'selected' : '' }} value="safety">Safety</option>
							<option {{$user->role == 'dispatch' ? 'selected' : '' }} value="dispatch">Dispatch</option>
							<option {{$user->role == 'owner' ? 'selected' : '' }} value="owner">Owner</option>
							<option {{$user->role == 'driver' ? 'selected' : '' }} value="driver">Driver</option>
						</select>
					</div>
					<div class="col-12 col-md-4 mb-3">
						<label class="form-label">Status<span class="fw-medium text-danger">*</span>:</label>
						<select name="active" class="form-control" required>
							<option {{$user->active == 1 ? 'selected' : '' }} value="1">Active</option>
							<option {{$user->active == 0 ? 'selected' : '' }} value="0">Deleted</option>
						</select>
					</div>
				</div>
			</div>
			<!-- Settings -->
			@endif

			<div class="row">
				@if($usr->role == 'admin')
				<div class="col-12 offset-0 offset-md-6 col-md-3 mb-3">
					<span class="btn btn-outline-danger w-100" onclick="deleteuser()">Delete user</span>
				</div>
				@endif
				<div class="col-12 col-md-3 mb-3">
					<button class="btn btn-primary w-100">Save changes</button>
				</div>
			</div>
		</form>
	</div>
</div>
@endsection

@section('script')
<script>
function previewAvatar(ev){
    const file = ev.target.files[0];
    if(file){
    	const reader = new FileReader();
    	reader.onload = function (e) {
            const imagePreview = document.querySelector('.profileavataredit');
            imagePreview.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
}
</script>

@if($usr->role == 'admin')
<script>
// delete
function deleteuser(){
	fetch('/delete/user', {
		method: 'PUT',
		headers:{
			'X-CSRF-TOKEN': '{{ csrf_token() }}',
		},
	})
	.then(response => {
		if(response.ok){
			return response.text();
		}
	})
	.then(data => {
		console.log(data);
		if(data == 'deleted'){
			return window.location.replace('/users/{{$user->id}}');
		}
	})
	.catch(error => {
		console.log(error);
	});
}
</script>
@endif
@endsection