@extends('layouts.auth')
@section('title')
    Email  Verification
@endsection
@section('content')
<div class="my-auto" style="margin-top: 100px !important;">
    <div>
        <div class="mx-auto mt-5 mb-3 text-center rounded-full">
        <a href="{{ url('/') }}"><img src="{{ asset('images/logo-dark.png') }}" style="height: 40px;" alt="" class="mx-auto mb-6"></a>
        </div>
    </div>
    <div class="text-center">
        <h5 class="text-lg font-bold text-gray-600 dark:text-gray-100 montserrat">Verify Your <span class="text-orange-500">Email Address</span></h5>
    </div>
    <!-- card body -->
    <div class="p-6 text-center text-gray-600 border-b border-gray-200 dark:text-gray-100">
    @if (session()->has('message'))
    <div class="relative px-4 py-3 m-4 text-green-700 bg-green-100 border border-green-400 rounded alert alert-success" role="alert">
        <span class="block sm:inline"><small>{{ session()->get('message') }}</small></span>
    </div>
    @endif
        <!-- content goes here -->
        {{ __('Well done 👏, now the next step is to verify your email address.') }}<br>
        {{ __('Do check your mailbox as a verification link has been sent to you.') }}<br><br>
        {{ __('If you did not see the mail in your mailbox, please check
            your spam or junk folder.') }}<br></br>
        <b class="my-3 text-red-600">Note: After clicking on the link in your email, you'd first have to login on the same device you clicked the link before you're fully authenticated!</b>
        <form align="center" class="d-inline" method="POST" action="{{ route('verification.resend') }}" id="resendForm">
            @csrf
            Didn't receive an email? <button type="submit" id="resendBtn" class="mt-12 text-orange-500">{{ __('Resend') }}</button>
            <span id="countdown" class="text-gray-500" style="display:none;"></span>
        </form>
    </div>
    <!-- card footer -->
    <div class="p-6 text-center border-gray-200">
        <!-- button link -->
        <a class="w-full px-3 py-3 mt-4 mb-2 font-semibold text-white bg-orange-500 rounded-md"
        href="{{ route('home') }}">I've verified my email</a>
    </div>
</div>

<script>
document.getElementById('resendForm').addEventListener('submit', function(e) {
    var btn = document.getElementById('resendBtn');
    var countdown = document.getElementById('countdown');
    var lastResend = localStorage.getItem('lastResendTime');
    var now = Date.now();
    var cooldown = 120000; // 2 minutes in milliseconds
    
    if (lastResend && (now - lastResend) < cooldown) {
        e.preventDefault();
        var remaining = Math.ceil((cooldown - (now - lastResend)) / 1000);
        alert('Please wait ' + remaining + ' seconds before resending.');
        return false;
    }
    
    localStorage.setItem('lastResendTime', now);
    btn.disabled = true;
    btn.style.display = 'none';
    countdown.style.display = 'inline';
    
    var seconds = 120;
    var timer = setInterval(function() {
        countdown.textContent = 'Resend available in ' + seconds + 's';
        seconds--;
        if (seconds < 0) {
            clearInterval(timer);
            btn.disabled = false;
            btn.style.display = 'inline';
            countdown.style.display = 'none';
        }
    }, 1000);
});

// Check on page load if cooldown is active
window.onload = function() {
    var lastResend = localStorage.getItem('lastResendTime');
    var now = Date.now();
    var cooldown = 120000;
    
    if (lastResend && (now - lastResend) < cooldown) {
        var btn = document.getElementById('resendBtn');
        var countdown = document.getElementById('countdown');
        var remaining = Math.ceil((cooldown - (now - lastResend)) / 1000);
        
        btn.style.display = 'none';
        countdown.style.display = 'inline';
        
        var timer = setInterval(function() {
            countdown.textContent = 'Resend available in ' + remaining + 's';
            remaining--;
            if (remaining < 0) {
                clearInterval(timer);
                btn.style.display = 'inline';
                countdown.style.display = 'none';
            }
        }, 1000);
    }
};
</script>
@endsection