@extends('app')

@section('head')
<style>
	.verify-card { max-width: 720px; margin: 40px auto; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.06); padding: 28px; }
	.verify-title { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
	.verify-text { color: #4b5563; line-height: 1.6; margin-bottom: 18px; }
	.verify-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
	.btn-main { display: inline-flex; align-items: center; gap: 8px; background: #217b00; color: #fff; padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; }
	.btn-secondary { background: #f3f4f6; color: #111827; }
	.verify-note { color: #059669; display: none; }
	.verify-note.active { display: block; }
</style>
@endsection

@section('content')
<main>
	<div class="container">
		<div class="verify-card">
			<h1 class="verify-title">Подтвердите адрес электронной почты</h1>
			<p class="verify-text">Мы отправили письмо с подтверждением на ваш email. Пожалуйста, перейдите по ссылке из письма, чтобы завершить регистрацию.
				Если письмо не пришло, вы можете отправить его повторно.</p>

			@if (session('status') == 'verification-link-sent')
				<p id="verify-note" class="verify-note">Новое письмо с подтверждением отправлено на ваш адрес.</p>
			@endif

			<div class="verify-actions">
				<form method="POST" action="{{ route('verification.send') }}">
					@csrf
					<button type="submit" class="btn-main">
						<i class="fa fa-envelope"></i>
						Выслать письмо повторно
					</button>
				</form>

				<form method="POST" action="{{ route('logout') }}">
					@csrf
					<button type="submit" class="btn-main btn-secondary">Выйти</button>
				</form>
			</div>
		</div>
	</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function(){
    var note = document.getElementById('verify-note');
    if(note){
        // Показываем уведомление и скрываем через увеличенную задержку
        note.classList.add('active');
        setTimeout(function(){
            note.classList.remove('active');
        }, 10000); // 10 секунд
    }
});
</script>
@endsection