@extends('layouts.guest')

@section('namePage', 'Email Verifikasi')

@section('content')
    <div class="flex flex-col items-center justify-between gap-6">
        <div class="text-center">
            Terima kasih telah mendaftar! Silakan verifikasi email Anda melalui tautan yang kami kirimkan ke alamat email
            yang terdaftar.
        </div>

        <!-- COUNTDOWN -->
        <div id="countdown" class="text-center text-sm font-medium text-red-600">
            ⏳ Link verifikasi akan kedaluwarsa dalam <span id="time">05:00</span>
        </div>

        <div class="text-center text-sm text-gray-600">
            Jika email verifikasi belum diterima dalam beberapa menit, silakan periksa folder
            <strong>Spam</strong> atau <strong>Promosi</strong>.
            Tambahkan alamat email kami ke daftar kontak Anda agar email berikutnya dapat masuk ke inbox.
        </div>

        <div class="text-center text-sm text-gray-600">
            Apabila Anda masih belum menerima email verifikasi, silakan hubungi kami melalui
            <a href="mailto:support@newsmaker.id" class="text-primary font-medium">
                support@newsmaker.id
            </a>
            atau klik ikon <strong>Halaman Support</strong> yang ada di bawah untuk mendapatkan bantuan lebih lanjut.
        </div>

        @if (session('status') === 'verification-link-sent')
            <div class="font-medium text-sm text-green-600">
                Link verifikasi baru telah berhasil dikirim ke alamat email Anda.
            </div>
        @endif

        <div class="flex flex-col items-center justify-between gap-3">
            <form method="POST" action="{{ route('verification.send') }}">
                @csrf
                <x-primary-button id="resendBtn" disabled>
                    Kirim Ulang Email Verifikasi
                </x-primary-button>
            </form>

            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="underline text-sm">
                    Keluar
                </button>
            </form>
        </div>
    </div>

    <!-- SCRIPT COUNTDOWN -->
    <script>
        let time = 300; // 5 menit dalam detik
        const timeDisplay = document.getElementById('time');
        const resendBtn = document.getElementById('resendBtn');

        const timer = setInterval(() => {
            const minutes = String(Math.floor(time / 60)).padStart(2, '0');
            const seconds = String(time % 60).padStart(2, '0');

            timeDisplay.textContent = `${minutes}:${seconds}`;

            if (time <= 0) {
                clearInterval(timer);
                timeDisplay.textContent = '00:00';
                resendBtn.removeAttribute('disabled');
                resendBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            }

            time--;
        }, 1000);
    </script>
@endsection