@extends('layouts.app')

@section('title', 'Verify Email')

@section('content')
<div class="min-vh-100 d-flex align-items-center justify-content-center bg-gradient-primary">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-5">
                <!-- Email Verification Card -->
                <div class="card shadow-lg border-0 rounded-3">
                    <div class="card-body p-5">
                        <!-- Header -->
                        <div class="text-center mb-4">
                            <div class="d-flex align-items-center justify-content-center mb-3">
                                <i class="bi bi-file-earmark-text text-primary fs-1 me-2"></i>
                                <span class="fs-2 fw-bold text-primary">Resume Builder</span>
                            </div>
                            <div class="verification-icon mb-3">
                                <i class="bi bi-envelope-check text-primary" style="font-size: 4rem;"></i>
                            </div>
                            <h2 class="fw-bold mb-2">Verify Your Email</h2>
                            <p class="text-muted">Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you?</p>
                        </div>

                        <!-- Session Status -->
                        @if (session('status') == 'verification-link-sent')
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="bi bi-check-circle me-2"></i>
                                A new verification link has been sent to the email address you provided during registration.
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        <!-- Verification Form -->
                        <form method="POST" action="{{ route('verification.send') }}">
                            @csrf
                            <button type="submit" class="btn btn-primary btn-lg w-100 mb-3">
                                <i class="bi bi-envelope-paper me-2"></i>
                                Resend Verification Email
                            </button>
                        </form>

                        <!-- Logout Form -->
                        <form method="POST" action="{{ route('logout') }}" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-outline-secondary btn-lg w-100">
                                <i class="bi bi-box-arrow-right me-2"></i>
                                Log Out
                            </button>
                        </form>

                        <!-- Additional Info -->
                        <div class="mt-4">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center">
                                    <h6 class="fw-bold mb-2">Didn't receive the email?</h6>
                                    <p class="text-muted small mb-0">
                                        Check your spam folder or contact support if you continue having issues.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Back to Home -->
                <div class="text-center mt-4">
                    <a href="{{ route('home') }}" class="text-white text-decoration-none">
                        <i class="bi bi-arrow-left me-2"></i>
                        Back to Home
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

.card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.verification-icon {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background: linear-gradient(135deg, #0d6efd, #6f42c1);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0b5ed7, #5a32a3);
}

.btn-outline-secondary {
    border-color: #dee2e6;
    color: #6c757d;
}

.btn-outline-secondary:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #495057;
}

.alert {
    border-radius: 10px;
    border: none;
}

/* Info card styling */
.card.bg-light {
    background: rgba(248, 249, 250, 0.8) !important;
    backdrop-filter: blur(10px);
}

/* Responsive */
@media (max-width: 768px) {
    .card-body {
        padding: 2rem !important;
    }
}
</style>
@endpush

@push('scripts')
<script>
// Add some interactivity
document.addEventListener('DOMContentLoaded', function() {
    // Add loading state to resend button
    const resendForm = document.querySelector('form[action*="verification.send"]');
    if (resendForm) {
        resendForm.addEventListener('submit', function() {
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<i class="bi bi-arrow-clockwise me-2"></i>Sending...';
            submitBtn.disabled = true;
            
            // Reset button after 3 seconds
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }, 3000);
        });
    }
});
</script>
@endpush