@extends('auth-base')

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

@section('content')

    @push('styles')
        <style>
            /* Background image with overlay effect - same as other auth pages */
            body {
                font-family: 'Figtree', sans-serif;
                background-image: url('{{ asset('dynaweb4/img/background.jpg') }}');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                background-attachment: fixed;
            }

            /* Animation for smooth entrance */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-10px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes slideUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes pulse {

                0%,
                100% {
                    opacity: 1;
                }

                50% {
                    opacity: 0.7;
                }
            }

            .animate-fade-in {
                animation: fadeIn 0.5s ease-out;
            }

            .animate-slide-up {
                animation: slideUp 0.6s ease-out;
            }

            .animate-pulse-slow {
                animation: pulse 2s ease-in-out infinite;
            }

            /* Glassmorphism card effect - premium look (consistent with all forms) */
            .glass-card {
                background-color: rgba(255, 255, 255, 0.96);
                backdrop-filter: blur(8px);
                transition: all 0.3s ease;
            }

            .glass-card:hover {
                transform: translateY(-3px);
                box-shadow: 0 25px 35px -12px rgba(0, 0, 0, 0.2);
            }

            /* Button and input focus effect */
            .btn-focus-effect:focus {
                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
            }

            /* Custom scrollbar */
            ::-webkit-scrollbar {
                width: 8px;
            }

            ::-webkit-scrollbar-track {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
            }

            ::-webkit-scrollbar-thumb {
                background: #818cf8;
                border-radius: 10px;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: #6366f1;
            }
        </style>
    @endpush


    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 px-4 py-8">

        <!-- Logo / Brand - consistent with other auth pages -->
        <div class="mb-5 animate-fade-in">
            <a href="/">
                <img src="{{ asset('dynaweb4/img/logo-small.png') }}" alt="Logo"
                    class="w-20 h-20 rounded-2xl shadow-xl object-cover p-1.5 bg-white/90 backdrop-blur-sm">
            </a>
        </div>

        <!-- Email Verification Card - glass card style -->
        <div
            class="w-full max-w-md px-7 py-8 glass-card shadow-xl overflow-hidden sm:rounded-2xl border border-gray-100 animate-slide-up">

            <!-- Header Section with Envelope Icon -->
            <div class="text-center mb-6">
                <div
                    class="mx-auto w-16 h-16 bg-gradient-to-br from-rose-100 to-red-100 rounded-2xl flex items-center justify-center mb-4 shadow-inner">
                    <svg class="w-8 h-8 text-rose-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
                            d="M16 13l4 3m0 0l-4 3m4-3H3" />
                    </svg>
                </div>
                <h2 class="text-2xl font-bold text-gray-900">
                    Verify Your Email
                </h2>
                <p class="text-sm text-gray-600 mt-2">
                    Almost there! Please verify your email address.
                </p>
            </div>

            <!-- Info Message -->
            <div class="mb-5 p-3 bg-amber-50 rounded-xl border border-amber-200 text-center">
                <p class="text-xs text-amber-800 flex items-center justify-center gap-2">
                    <svg class="w-4 h-4 text-amber-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                            clip-rule="evenodd" />
                    </svg>
                    We sent a verification link to your email address
                </p>
            </div>

            <!-- Success Status Message -->
            @if (session('status') == 'verification-link-sent')
                <div class="mb-5 text-sm text-green-700 bg-green-50 border-l-4 border-green-500 rounded-lg p-3 animate-fade-in">
                    <div class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd" />
                        </svg>
                        A new verification link has been sent to your email address.
                    </div>
                </div>
            @endif

            <!-- Instructions -->
            <div class="mb-6 text-center">
                <p class="text-gray-700 text-sm leading-relaxed">
                    Please check your inbox and click the verification link to activate your account.
                </p>
                <p class="text-gray-500 text-xs mt-2">
                    Didn't receive the email? Check your spam folder or request a new one below.
                </p>
            </div>

            <!-- Resend Verification Email Button -->
            <form method="POST" action="{{ route('user.verification.resend') }}" class="mb-4">
                @csrf
                <button type="submit"
                    class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-rose-800 to-red-900 hover:from-rose-900 hover:to-red-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600 transition duration-150 transform hover:scale-[1.02] btn-focus-effect">
                    <span class="flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M7 16l.01-.01M17 16l.01-.01" />
                        </svg>
                        Resend Verification Email
                    </span>
                </button>
            </form>

            <!-- Logout Form -->
            <form method="POST" action="{{ route('user.logout') }}" class="text-center">
                @csrf
                <button type="submit"
                    class="text-sm text-gray-500 hover:text-gray-700 hover:underline transition flex items-center justify-center gap-1 mx-auto">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                    </svg>
                    Logout
                </button>
            </form>

            <!-- Divider -->
            <div class="relative my-6">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-200"></div>
                </div>
                <div class="relative flex justify-center text-xs">
                    <span class="px-2 bg-white text-gray-400">Need help?</span>
                </div>
            </div>

            <!-- Support Links -->
            <div class="text-center space-y-2">
                <p class="text-xs text-gray-500">
                    <a href="#" class="text-indigo-500 hover:text-indigo-700 hover:underline">Contact Support</a>
                    <span class="mx-2">•</span>
                    <a href="{{ route('user.login') }}" class="text-indigo-500 hover:text-indigo-700 hover:underline">Back
                        to Login</a>
                </p>
            </div>

            <!-- Info Box - Tips -->
            <div class="mt-5 p-3 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-100">
                <p class="text-xs text-blue-800 font-medium flex items-center gap-1">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                            clip-rule="evenodd" />
                    </svg>
                    Verification Note:
                </p>
                <p class="text-xs text-blue-700 mt-1">You'll need to verify your email before accessing all features.
                    The verification link expires after 24 hours.</p>
            </div>
        </div>

    </div>

@endsection