@extends('web.layouts.auth')

@section('title', '이메일 인증 완료 | PIN FOR YOU')
@section('meta_description', 'PIN FOR YOU 이메일 인증 완료 안내 페이지입니다.')
@section('canonical', url('/auth/email-verified'))

@section('h1', '이메일 인증이 완료되었습니다')
@section('desc', '인증이 정상적으로 확인되었습니다. 잠시 후 로그인 페이지로 이동합니다.')
@section('card_aria', '이메일 인증 완료 안내')
@section('show_cs_links', true)

@section('auth_content')
    <div class="auth-panel is-active" data-step="done">
        <div class="auth-field" style="margin-bottom:14px;">
            <div class="auth-help" style="font-size:14px; line-height:1.7;">
                <b>{{ $email }}</b><br>
                인증이 완료되었습니다.
            </div>
        </div>

        <div class="auth-actions">
            <a class="auth-btn auth-btn--primary" href="{{ $loginUrl }}">
                로그인하기
            </a>
        </div>

        <div class="auth-help" style="margin-top:12px;">
            <span id="redirectMsg">5초 후 로그인 페이지로 이동합니다.</span>
        </div>
    </div>
@endsection

@section('auth_bottom')
    {{-- 필요 시 하단 문구 --}}
@endsection

@push('scripts')
    <script>
        (function () {
            const url = @json($loginUrl);
            const total = 5;

            const el = document.getElementById('redirectMsg');
            let left = total;

            const tick = () => {
                if (el) el.textContent = `${left}초 후 로그인 페이지로 이동합니다.`;
                if (left <= 0) {
                    location.href = url;
                    return;
                }
                left -= 1;
                setTimeout(tick, 1000);
            };

            // 시작
            tick();
        })();
    </script>
@endpush