@extends('front.layouts.master')

@section('content')
<div class="auth-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-5">
                <div class="auth-card">
                    <div class="auth-header">
                        <div class="auth-logo">
                            <img src="{{asset('front/images/logo_white.svg')}}" class="img-fluid" alt="logo" width="120" height="40" decoding="async">
                        </div>
                        <h2 class="auth-title">@lang('front.Verify Your Email')</h2>
                        <p class="auth-subtitle">@lang('front.Before proceeding, please check your email for a verification link.')</p>
                    </div>

                    <div class="auth-body">
                        @if (session('resent'))
                            <div class="alert alert-success" role="alert">
                                @lang('front.A fresh verification link has been sent to your email address.')
                            </div>
                        @endif

                        <div class="verification-info">
                            <div class="verification-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                                    <polyline points="22,6 12,13 2,6"></polyline>
                                </svg>
                            </div>
                            
                            <div class="verification-text">
                                <p>@lang('front.We have sent a verification link to:')</p>
                                <strong>{{ Auth::user()->email }}</strong>
                            </div>

                            <div class="verification-steps">
                                <div class="step">
                                    <span class="step-number">1</span>
                                    <span class="step-text">@lang('front.Check your email inbox')</span>
                                </div>
                                <div class="step">
                                    <span class="step-number">2</span>
                                    <span class="step-text">@lang('front.Click the verification link')</span>
                                </div>
                                <div class="step">
                                    <span class="step-number">3</span>
                                    <span class="step-text">@lang('front.Complete your registration')</span>
                                </div>
                            </div>
                        </div>

                        <div class="auth-actions">
                            <form method="POST" action="{{ route('verification.resend') }}" id="resend-form">
                                @csrf
                                <button type="submit" class="btn btn-primary btn-block" id="resend-btn">
                                    @lang('front.Resend Verification Email')
                                </button>
                            </form>

                            <div class="auth-links">
                                <a href="{{ route('user.logout') }}" class="btn btn-outline-secondary btn-block">
                                    @lang('front.Logout')
                                </a>
                            </div>
                        </div>

                        <div class="auth-footer">
                            <p class="text-muted">
                                @lang('front.Didn\'t receive the email? Check your spam folder or')
                                <a href="javascript:void(0)" onclick="document.getElementById('resend-form').submit();" class="text-primary d-inline-flex align-items-center" id="request-new-link">
                                    @lang('front.Resend Verification Email')
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: #f7f3f3;
    padding: 2rem 0;
}

.auth-card {
    background: white;
    /* border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
    overflow: hidden;
}

.auth-header {
    text-align: center;
    padding: 2rem 2rem 1rem;
    background: #19B36B;
}

.auth-logo {
    margin-bottom: 1rem;
}

.auth-logo img {
    max-height: 60px;
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    color: #fff;
    font-size: 0.95rem;
    margin: 0;
}

.auth-body {
    padding: 2rem;
}

.verification-info {
    text-align: center;
    margin-bottom: 2rem;
}

.verification-icon {
    margin-bottom: 1.5rem;
    color: #19b36b;
    width: auto;
    height: auto;
}

.verification-text {
    margin-bottom: 2rem;
}

.verification-text p {
    color: #666;
    margin-bottom: 0.5rem;
}

.verification-text strong {
    color: #333;
    font-size: 1.1rem;
}

.verification-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    /* border-radius: 8px; */
    border-left: 4px solid #19b36b;
}

.step-number {
    background: #19b36b;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.step-text {
    color: #333;
    font-weight: 500;
    text-align: right;
}

.auth-actions {
    margin-bottom: 1.5rem;
}

.btn-block {
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #14965A;
    border: none;
    color: white;
    border-radius: 0;
}

.btn-primary:hover {
    transform: translateY(-2px);
    background-color: #14965A !important;
    border-color: #14965A !important;
    box-shadow: unset !important;
}

.text-primary{
    color: #14965A !important;
}

.btn-outline-secondary {
    border: 2px solid #dee2e6;
    color: #6c757d;
    background: transparent;
    border-radius: 0;
}

.btn-outline-secondary:hover {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
}

.auth-links {
    margin-top: 1rem;
}

.auth-footer {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.auth-footer p {
    margin: 0;
    font-size: 0.9rem;
}

.auth-footer a {
    text-decoration: none;
    font-weight: 500;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.alert {
    border-radius: 8px;
    border: none;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
}

@media (max-width: 768px) {
    .auth-container {
        padding: 1rem;
    }
    
    .auth-header,
    .auth-body {
        padding: 1.5rem;
    }
    
    .verification-steps {
        gap: 0.75rem;
    }
    
    .step {
        padding: 0.75rem;
    }

    @keyframes spin-loader {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('resend-btn');
    var linkBtn = document.getElementById('request-new-link');
    var form = document.getElementById('resend-form');
    var cooldown = parseInt('{{ $cooldown_seconds ?? 0 }}');

    function updateTimer() {
        if (cooldown > 0) {
            btn.disabled = true;
            btn.textContent = '{{ __("front.Please wait before requesting another email.") }} (' + cooldown + 's)';
            if (linkBtn) linkBtn.style.pointerEvents = 'none';
            if (linkBtn) linkBtn.style.opacity = '0.5';
            cooldown--;
            setTimeout(updateTimer, 1000);
        } else {
            btn.disabled = false;
            btn.textContent = '{{ __("front.Resend Verification Email") }}';
            if (linkBtn) linkBtn.style.pointerEvents = 'auto';
            if (linkBtn) linkBtn.style.opacity = '1';
            delete btn.dataset.submitted;
        }
    }

    if (cooldown > 0) {
        updateTimer();
    }

    form.addEventListener('submit', function(event) {
        if (cooldown > 0 || btn.dataset.submitted) {
            event.preventDefault();
            return false;
        }
        btn.dataset.submitted = 'true';
        btn.disabled = true;
        
        var spinnerHtml = '<svg style="width: 1rem; height: 1rem; animation: spin-loader 1s linear infinite; margin-left: 5px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" style="opacity: 0.25;"></circle><path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" style="opacity: 0.75;"></path></svg>';
        
        btn.innerHTML = spinnerHtml + '{{ __("front.Sending...") }}';
        
        if (linkBtn) {
            linkBtn.style.pointerEvents = 'none';
            linkBtn.style.opacity = '0.5';
            linkBtn.innerHTML = spinnerHtml + '{{ __("front.Sending...") }}';
        }
    });
});
</script>
@endsection