@extends('layouts.app')

@section('content')
    <!-- center column -->
    <div class="col-2" id="authenticated">
        <div class="content content-last">
            <div class="content-bg">
                <div class="content-bg-bottom">
                    <h2>{{ __('app/register.verification.title') }}</h2>

                    <x-registration.progress :step="2" />

                    <div class="pass-lost-inner-content">
                        <div class="input-data-box">
                            <div id="activateAccount" class="inner-form-border">
                                <div class="inner-form-box clearfix">
                                    <h3>{{ __('app/register.verification.activate-account') }}</h3>
                                    <div class="trenner"></div>
                                    <div id="activateBox">
                                        @if(Auth::check() && Auth::user())
                                            <p>{!! __('app/register.verification.welcome', ['username' => Auth::user()->login]) !!}</p>

                                            @if(Auth::user()->hasVerifiedEmail())
                                                <p style="color: #003100;"><strong>{{ __('app/register.verification.email-verified') ?? 'Your email has been verified!' }}</strong></p>
                                                <p>{{ __('app/register.verification.can-play') ?? 'You can now play the game!' }}</p>
                                            @else
                                                <p>{{ __('app/register.verification.registration-complete') }}</p>

                                                <p>
                                                    {!! __('app/register.verification.email-sent') !!}
                                                </p>

                                                @if (session('resent'))
                                                    <p style="color: #003100;"><strong>{{ __('app/register.verification.email-resent') }}</strong></p>
                                                @endif

                                                <p id="resendNormal">
                                                    {{ __('app/register.verification.no-email') }}
                                                    <a href="{{ route('verification.resend') }}">{{ __('app/register.verification.resend-link') }}</a>.
                                                </p>
                                            @endif
                                        @endif
                                    </div>
                                    <h3>{{ __('app/register.verification.download-game') }}</h3>
                                    <div class="trenner"></div>
                                    <a href="{{ url('main/download') }}" id="bigDownload">
                                        {!! __('app/register.verification.download-now') !!}
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="box-foot"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="shadow">&nbsp;</div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            // Auto-refresh page every 5 seconds to check if email has been verified
            var checkInterval = setInterval(function() {
                $.ajax({
                    url: '{{ route('verification.check') }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        if (data.verified === true) {
                            // Email has been verified! Reload the page to show success
                            clearInterval(checkInterval);
                            window.location.reload();
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log('Check verification status error:', error);
                    }
                });
            }, 5000); // Check every 5 seconds
        });
    </script>
@endsection
