@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="/store/user" method="POST" enctype="multipart/form-data">
			@csrf
			@method('POST')
			<!-- 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 mb-2" src="{{asset($avatar)}}"><br>
						<input type="file" accept=".jpg,.jpeg,.png" name="avatar" class="form-control" onchange="previewAvatar(event)" value="old('avatar')">
					</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="{{old('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="{{old('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="{{old('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="{{old('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="{{old('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="{{old('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>
						<input type="email" name="email" class="form-control" value="{{old('email')}}" required>
					</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="{{old('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="{{old('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" {{old('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" {{old('informbyemail') == 1 ? 'checked' : ''}}>
							<label class="form-check-label" for="email">Email</label>
						</div>
					</div>
				</div>
			</div>
			<!-- Contact -->

			<!-- 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>
							@if($usr->role!='safety')
							<option {{old('role') == 'admin' ? 'selected' : '' }} value="admin">Admin</option>
							<option {{old('role') == 'accounting' ? 'selected' : '' }} value="accounting">Accounting</option>
							<option {{old('role') == 'safety' ? 'selected' : '' }} value="safety">Safety</option>
							<option {{old('role') == 'dispatch' ? 'selected' : '' }} value="dispatch">Dispatch</option>
							@endif
							<option {{old('role') == 'owner' ? 'selected' : '' }} value="owner">Owner</option>
							<option {{old('role') == 'driver' ? 'selected' : '' }} value="driver">Driver</option>
							<option {{old('role') == 'dispatch' ? 'selected' : '' }} value="dispatch">Dispatch</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 {{old('active') == 'driver' ? 'selected' : '' }} value="1">Active</option>
							<option {{old('active') == 'driver' ? 'selected' : '' }} value="0">Deleted</option>
						</select>
					</div>
				</div>
			</div>
			<!-- Settings -->

			<div class="row">
				<div class="col-12 offset-0 offset-md-9 col-md-3 mb-3">
					<button class="btn btn-success w-100">Create user</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>
@endsection