@extends('layouts.nova')

@section('content')
<div class="px-4 py-8 md:px-6 md:py-10">
    <div class="mx-auto w-full max-w-xl rounded-2xl border border-sb-line bg-panel-dark shadow-sb p-6 md:p-8">
        <div class="mb-4 text-sm text-sb-muted">
            <p class="font-medium text-white">Check your inbox</p>
            @if($email !== '')
                <p class="mt-1">We sent a verification link to <strong class="text-white">{{ $email }}</strong>.</p>
                <p class="mt-1">Click the link in that email to continue setup.</p>
            @else
                <p class="mt-1">Enter your email to resend verification if needed.</p>
            @endif
        </div>

        @if (session('status'))
            <div class="mb-4 rounded-md border border-green-700/60 bg-green-900/20 px-3 py-2 text-sm text-green-300">
                {{ session('status') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="mb-4 rounded-md border border-red-700/60 bg-red-900/20 px-3 py-2 text-sm text-red-300">
                {{ $errors->first() }}
            </div>
        @endif

        <form method="POST" action="{{ route('register.resend') }}" class="space-y-4" id="resend-form" data-resend-seconds="{{ (int) $resendSeconds }}">
            @csrf

            <div>
                <x-input-label for="email" value="Email" class="text-sb-muted" />
                <x-text-input id="email" class="block mt-1 w-full bg-black/20 border-sb-line text-white" type="email" name="email" :value="old('email', $email)" required autocomplete="email" />
                <x-input-error :messages="$errors->get('email')" class="mt-2" />
            </div>

            <div class="flex items-center justify-between gap-3">
                <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
                    <a class="underline text-sm text-sb-muted hover:text-white" href="{{ route('login') }}">Back to login</a>
                    <a class="underline text-sm text-sb-muted hover:text-white" href="{{ route('register', ['email' => $email]) }}">Change email</a>
                </div>

                <x-primary-button id="resend-btn" class="justify-center" type="submit">
                    Resend verification email
                </x-primary-button>
            </div>

            <p id="resend-timer" class="text-xs text-sb-muted"></p>
        </form>
    </div>
</div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('resend-form');
            const button = document.getElementById('resend-btn');
            const timerText = document.getElementById('resend-timer');

            if (!form || !button || !timerText) return;

            let remaining = parseInt(form.dataset.resendSeconds || '0', 10);

            const render = () => {
                if (remaining > 0) {
                    button.setAttribute('disabled', 'disabled');
                    timerText.textContent = `You can resend in ${remaining}s.`;
                } else {
                    button.removeAttribute('disabled');
                    timerText.textContent = 'Did not receive it? You can resend now.';
                }
            };

            render();
            if (remaining <= 0) return;

            const interval = setInterval(() => {
                remaining -= 1;
                render();

                if (remaining <= 0) {
                    clearInterval(interval);
                }
            }, 1000);
        });
    </script>
@endsection