@extends('home')

@section('body')

@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

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
	<strong>{{ session('error') }}</strong>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<!-- js message alert -->
<div class="msgbox msgbox-success">
	<span class="fw-medium"></span>
	<span class="msgboxclose btn-close pointer"></span>
</div>
<div class="msgbox msgbox-danger">
	<span class="fw-medium"></span>
	<span class="msgboxclose btn-close pointer"></span>
</div>
<!-- js message alert -->

<div class="input-group mb-2">
	<span class="input-group-text" id="basic-addon1">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
			<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
		</svg>
	</span>
	<input type="email" class="form-control" value="{{Auth()->user()->email}}" disabled autocomplete="email" placeholder="Email">
</div>
<div class="mb-3">
	<button class="btn btn-resent-mail btn-primary w-100"><span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Resent verification mail</button>
</div>
@endsection

@section('script')
<script>
document.addEventListener('DOMContentLoaded', function(){
	const btnResent = document.querySelector('.btn-resent-mail');
	const msgboxSuccess = document.querySelector('.msgbox-success');
	const msgboxError = document.querySelector('.msgbox-danger');
	btnResent.addEventListener('click',function(e){
		e.target.classList.add('disabled');
		e.target.firstElementChild.style.display='inline-block';
		fetch('/py/resentconfirmlink?email={{Auth()->user()->email}}',{
			method:'GET',
		})
		.then(response => {
			if(response.ok){
				e.target.firstElementChild.style.display='none';
				return response.json();
			}
		})
		.then(data => {
			if(data.message == 'sent'){
				e.target.classList.remove('disabled');
				msgboxSuccess.style.display='block';
				msgboxSuccess.firstElementChild.innerText='Confirmation mail was resent.';
			} else {
				msgboxError.style.display='block';
				msgboxError.firstElementChild.innerText='Something gone wrong, contact to admin.';
			}
		})
		.catch(error => {
			e.target.firstElementChild.style.display='none';
			msgboxError.style.display='block';
			msgboxError.firstElementChild.innerText='Something gone wrong, contact to admin.';
		});
	});
});
</script>
<script>
// js msgbox alert
document.addEventListener('DOMContentLoaded', function(){
  const msgboxCloseBtn = document.querySelectorAll('.msgboxclose');
  msgboxCloseBtn.forEach((elem)=>{
    elem.addEventListener('click',(e)=>{
      e.target.closest('div').style.display='none';
      e.target.previousElementSibling.innerHTML='';
    });
  });
});
</script>
@endsection