@extends('dispatch._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
	<div class="blck-white mb-3">
		<span class="ms-2 h5">Personal Information:</span>
		<span class="edit icon-inactive pointer ms-2"><i class="bi bi-pencil-square"></i></span>
		<div class="row g-2 mt-1">
			<div class="col-12 offset-lg-2 col-lg-10">
				<div class="avatar mb-2 mx-auto mx-lg-0"><img src="{{ $user->avatar }}" width="200" class="img-fluid"></div>
			</div>
			<div class="clearfix mt-0"></div>
			<div class="col-4 col-lg-2">Full Name:</div>
			<div class="col-8 col-lg-10 fw-medium">{{ $user->firstname }} {{ $user->lastname }} {{ $user->middlename }}</div>
			<div class="col-4 col-lg-2">Date Of Birth:</div>
			<div class="col-8 col-lg-10 fw-medium">{{ $user->dateofbirth ? date('d.m.Y', strtotime($user->dateofbirth)) : '-' }}</div>
			<div class="col-4 col-lg-2">Cell Phone:</div>
			<div class="col-8 col-lg-10 fw-medium">{{ $user->cellphone ? $user->cellphone : '-' }}</div>
			<div class="col-4 col-lg-2">Home Phone:</div>
			<div class="col-8 col-lg-10 fw-medium">{{ $user->homephone ? $user->homephone : '-' }}</div>
			<div class="col-4 col-lg-2">Email:</div>
			<div class="col-8 col-lg-10 fw-medium">{{ $user->email }}</div>
			<div class="col-4 col-lg-2">SSN:</div>
			<div class="col-8 col-lg-10 fw-medium">{{ $user->ssn ? $user->ssn : '-' }}</div>
			<div class="col-4 col-lg-2">Inform by:</div>
			<div class="col-8 col-lg-10 fw-medium">
				<i class="bi bi-{{ $user->informbyemail?'check-square':'x-square'}}"></i> Email
				<i class="bi bi-{{ $user->informbyphone?'check-square':'x-square'}}"></i> Phone
			</div>
		</div>
	</div>
	<div class="blck-white mb-3 form-update" style="display:none">
		<h5 class="ms-2 mt-1 mb-3">Personal Information:</h5>
		<form class="row g-2" action="/user/account/update" method="POST" enctype="multipart/form-data">
			@csrf
			@method('PUT')
			<div class="offset-lg-2 col-12 col-lg-4">
				<div class="avatar mb-2 mx-auto"><img src="{{ $user->avatar }}" width="200" class="img-fluid"></div>
				<label for="uploadAvatar" class="form-label btn btn-primary w-100">Change Image</label>
				<input type="file" class="form-control visually-hidden" name="avatar" id="uploadAvatar">
			</div>
			<div class="clearfix mt-0"></div>
			<div class="col-4 col-lg-2">First Name<span class="text-danger fw-bold">*</span>:</div>
			<div class="col-8 col-lg-4"><input type="text" class="form-control" name="firstname" value="{{ $user->firstname }}" required>@error('firstname') <small class="text-danger">This is required field</small> @enderror</div>
			<div class="clearfix mt-0"></div>
			<div class="col-4 col-lg-2">Last Name<span class="text-danger fw-bold">*</span>:</div>
			<div class="col-8 col-lg-4"><input type="text" class="form-control" name="lastname" value="{{ $user->lastname }}" required>@error('lastname') <small class="text-danger">{{$message}}</small> @enderror</div>
			<div class="clearfix mt-0"></div>
			<div class="col-4 col-lg-2">Middle Name:</div>
			<div class="col-8 col-lg-4"><input type="text" class="form-control" name="middlename" value="{{ $user->middlename }}"></div>
			<div class="clearfix mt-0"></div>
			<div class="col-4 col-lg-2">Date Of Birth:</div>
			<div class="col-8 col-lg-4"><input type="date" class="form-control" name="dateofbirth" value="{{ $user->dateofbirth?date('Y-m-d', strtotime($user->dateofbirth)):now()->format('Y-m-d') }}"></div>
			<div class="clearfix mt-0"></div>
			<div class="col-4 col-lg-2">Cell Phone:</div>
			<div class="col-8 col-lg-4"><input type="text" class="form-control" name="cellphone" value="{{ $user->cellphone }}"></div>
			<div class="clearfix mt-0"></div>
			<div class="col-4 col-lg-2">Home Phone:</div>
			<div class="col-8 col-lg-4"><input type="text" class="form-control" name="homephone" value="{{ $user->homephone }}"></div>
			<div class="clearfix mt-0"></div>
			<div class="col-4 col-lg-2">Email<span class="text-danger fw-bold">*</span>:</div>
			<div class="col-8 col-lg-4"><input type="text" class="form-control" name="email" value="{{ $user->email }}" required>@error('email') <small class="text-danger">{{ $message }}</small> @enderror</div>
			<div class="clearfix mt-0"></div>
			<div class="col-4 col-lg-2">SSN:</div>
			<div class="col-8 col-lg-4"><input type="text" class="form-control" name="ssn" value="{{ $user->ssn }}"></div>
			<div class="clearfix mt-0"></div>
			<div class="col-4 col-lg-2">Inform by:</div>
			<div class="col-8 col-lg-10">
				<input type="checkbox" name="informbyemail" value="1" class="form-check-input" id="informEmail" {{ $user->informbyemail == 1 ? 'checked':'' }}>
				<label class="form-check-label" form="informEmail">Email</label>
				<input type="checkbox" name="informbyphone" value="1" class="form-check-input" id="informPhone" {{ $user->informbyphone == 1 ? 'checked':'' }}>
				<label class="form-check-label" form="informPhone">Phone</label>
			</div>
			<div class="col-12 col-md-2">
				<button class="btn btn-primary w-100">Save</button>
			</div>
		</form>
	</div>
</div>
@endsection

@section('script')
<script>
const editBtn = document.querySelector('span.edit');
const formBlock = document.querySelector('div.form-update');
editBtn.addEventListener('click', ()=>{
	editBtn.parentNode.style.display="none";
	formBlock.style.display="block";
});
const fileInput = document.querySelector('#uploadAvatar');
const avatar = document.querySelector('.avatar img');
fileInput.addEventListener('change', function (event) {
    const file = event.target.files[0]; // Get the selected file
    if (file) {
        const reader = new FileReader();
        reader.onload = function () {
            avatar.src = reader.result; // Set the image source to the data URL
        };
        reader.readAsDataURL(file); // Read the file as a data URL
    } else {
        avatar.src = 'https://placehold.co/300?text={{$user->firstname[0]}}+{{$user->lastname[0]}}'; // Clear the image source if no file is selected
    }
});
</script>
@endsection