<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - {{ config('app.name', 'Laravel') }}</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Inter', sans-serif;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        
        .animate-fadeIn {
            animation: fadeIn 0.6s ease forwards;
        }
        
        .animate-pulse-slow {
            animation: pulse 3s ease-in-out infinite;
        }
        
        .login-card {
            animation: fadeIn 0.8s ease forwards;
            backdrop-filter: blur(10px);
        }
        
        .input-focus-effect {
            transition: all 0.3s ease;
        }
        
        .input-focus-effect:focus {
            border-color: #f97316;
            box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
        }
        
        .btn-orange {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .btn-orange::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #ea580c, #f97316);
            transition: left 0.3s ease;
        }
        
        .btn-orange:hover::before {
            left: 0;
        }
        
        .btn-orange:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3);
        }
        
        .btn-orange span {
            position: relative;
            z-index: 1;
        }
        
        .link-hover {
            transition: all 0.2s ease;
        }
        
        .link-hover:hover {
            color: #ea580c;
        }
        
        .hero-pattern {
            background: radial-gradient(circle at 10% 20%, rgba(249, 115, 22, 0.05) 0%, transparent 30%),
                        radial-gradient(circle at 90% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 30%),
                        radial-gradient(circle at 30% 80%, rgba(249, 115, 22, 0.05) 0%, transparent 30%);
        }
        
        .floating-shape {
            position: absolute;
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.1));
            border-radius: 50%;
            filter: blur(60px);
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center bg-gradient-to-br from-orange-50 via-white to-orange-50 hero-pattern relative overflow-hidden">
    
    <!-- DECORATIVE BACKGROUND SHAPES -->
    <div class="floating-shape w-96 h-96 -top-48 -left-48 animate-pulse-slow"></div>
    <div class="floating-shape w-80 h-80 -bottom-40 -right-40 animate-pulse-slow" style="animation-delay: 1s;"></div>
    <div class="floating-shape w-64 h-64 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-float"></div>
    
    <!-- FLOATING ORNAMENTS -->
    <div class="absolute top-20 left-20 text-orange-200 animate-float">
        <i class="fas fa-shopping-cart text-6xl opacity-20"></i>
    </div>
    <div class="absolute bottom-20 right-20 text-orange-200 animate-float" style="animation-delay: 2s;">
        <i class="fas fa-box text-7xl opacity-20"></i>
    </div>
    <div class="absolute top-40 right-40 text-orange-200 animate-float" style="animation-delay: 1.5s;">
        <i class="fas fa-tag text-5xl opacity-20"></i>
    </div>
    <div class="absolute bottom-40 left-40 text-orange-200 animate-float" style="animation-delay: 0.5s;">
        <i class="fas fa-truck text-6xl opacity-20"></i>
    </div>

    <!-- FLASH MESSAGE (TOP CENTER - AUTO HIDE) -->
    @if (session('status'))
        <div id="flash-message"
            class="fixed top-6 left-1/2 -translate-x-1/2
                   bg-gradient-to-r from-green-500 to-green-600 text-white
                   px-8 py-4 rounded-2xl shadow-2xl
                   text-sm font-medium flex items-center gap-3
                   transition-all duration-500 z-50 animate-fadeIn">
            <i class="fas fa-check-circle text-white text-lg"></i>
            <span>{{ session('status') }}</span>
            <button onclick="this.parentElement.style.opacity='0'; setTimeout(() => this.parentElement.remove(), 500)" 
                    class="ml-4 text-white/80 hover:text-white transition">
                <i class="fas fa-times"></i>
            </button>
        </div>
    @endif

    <!-- ERROR MESSAGE -->
    @if ($errors->any())
        <div id="error-message"
            class="fixed top-6 left-1/2 -translate-x-1/2
                   bg-gradient-to-r from-red-500 to-red-600 text-white
                   px-8 py-4 rounded-2xl shadow-2xl
                   text-sm font-medium flex items-center gap-3
                   transition-all duration-500 z-50 animate-fadeIn">
            <i class="fas fa-exclamation-circle text-white text-lg"></i>
            <span>{{ $errors->first() }}</span>
            <button onclick="this.parentElement.style.opacity='0'; setTimeout(() => this.parentElement.remove(), 500)" 
                    class="ml-4 text-white/80 hover:text-white transition">
                <i class="fas fa-times"></i>
            </button>
        </div>
    @endif

    <!-- LOGIN CARD PREMIUM -->
    <div class="w-full max-w-md relative z-10 px-4">
        <!-- BRAND LOGO -->
        <div class="text-center mb-8 animate-fadeIn">
            <div class="flex justify-center mb-4">
                <div class="w-20 h-20 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center shadow-xl transform rotate-3 hover:rotate-0 transition-transform floating">
                    <span class="text-white font-bold text-3xl">{{ substr(config('app.name', 'Laravel'), 0, 1) }}</span>
                </div>
            </div>
            <h2 class="text-3xl font-bold text-gray-800 mb-2">{{ config('app.name', 'Laravel') }}</h2>
            <p class="text-gray-500">Toko Online Terpercaya</p>
        </div>

        <!-- LOGIN CARD -->
        <div class="bg-white/90 backdrop-blur-md rounded-3xl shadow-2xl p-8 border border-white/20 login-card">
            <!-- HEADER -->
            <div class="text-center mb-8">
                <div class="inline-block px-4 py-2 bg-orange-100 text-orange-600 rounded-full text-sm font-semibold mb-3">
                    <i class="fas fa-lock mr-2"></i>
                    Akses Akun
                </div>
                <h1 class="text-2xl font-bold text-gray-800 mb-2">
                    Selamat Datang Kembali
                </h1>
                <p class="text-gray-500 text-sm">
                    Masuk untuk mengakses akun Anda
                </p>
            </div>

            <!-- FORM -->
            <form method="POST" action="{{ route('login') }}" class="space-y-6">
                @csrf

                <!-- EMAIL FIELD -->
                <div class="group">
                    <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-envelope text-orange-500 mr-2"></i>
                        Alamat Email
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-envelope text-gray-400 group-focus-within:text-orange-500 transition"></i>
                        </div>
                        <input id="email" 
                               type="email" 
                               name="email" 
                               value="{{ old('email') }}" 
                               required 
                               autofocus
                               placeholder="contoh@email.com"
                               class="w-full pl-10 pr-4 py-3.5 border-2 border-gray-200 rounded-xl
                                      focus:border-orange-500 focus:ring-0
                                      input-focus-effect text-gray-700 placeholder-gray-400
                                      transition-all">
                    </div>
                    @error('email')
                        <p class="text-sm text-red-500 mt-2 flex items-center gap-1">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- PASSWORD FIELD -->
                <div class="group">
                    <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-lock text-orange-500 mr-2"></i>
                        Kata Sandi
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-lock text-gray-400 group-focus-within:text-orange-500 transition"></i>
                        </div>
                        <input id="password" 
                               type="password" 
                               name="password" 
                               required
                               placeholder="Masukkan kata sandi"
                               class="w-full pl-10 pr-12 py-3.5 border-2 border-gray-200 rounded-xl
                                      focus:border-orange-500 focus:ring-0
                                      input-focus-effect text-gray-700 placeholder-gray-400
                                      transition-all">
                        <button type="button" 
                                onclick="togglePassword()"
                                class="absolute right-3 top-1/2 -translate-y-1/2
                                       text-gray-400 hover:text-orange-600
                                       transition-all duration-300">
                            <svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            </svg>
                        </button>
                    </div>
                    @error('password')
                        <p class="text-sm text-red-500 mt-2 flex items-center gap-1">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- REMEMBER ME & FORGOT PASSWORD -->
                <div class="flex items-center justify-between">

                    @if (Route::has('password.request'))
                        <a href="{{ route('password.request') }}" 
                           class="text-sm font-medium text-orange-600 hover:text-orange-700 
                                  transition-all hover:underline flex items-center gap-1">
                            <i class="fas fa-key"></i>
                            Lupa Password?
                        </a>
                    @endif
                </div>

                <!-- LOGIN BUTTON -->
                <button type="submit" 
                        class="w-full btn-orange text-white font-bold py-3.5 px-4 rounded-xl
                               relative overflow-hidden group shadow-xl">
                    <span class="relative z-10 flex items-center justify-center gap-3">
                        <i class="fas fa-sign-in-alt"></i>
                        Masuk Sekarang
                    </span>
                </button>

                <!-- REGISTER LINK -->
                <div class="text-center pt-4 border-t border-gray-100">
                    <p class="text-gray-600 text-sm">
                        Belum punya akun?
                        <a href="{{ route('register') }}" 
                           class="font-bold text-orange-600 hover:text-orange-700 
                                  transition-all hover:underline ml-1">
                            Daftar Sekarang
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </div>

    <!-- AUTO HIDE FLASH MESSAGE -->
    <script>
        // Flash message auto hide
        const flash = document.getElementById('flash-message');
        if (flash) {
            setTimeout(() => {
                flash.style.opacity = '0';
                flash.style.transform = 'translateX(-50%) translateY(-20px)';
            }, 3000);
            setTimeout(() => {
                flash.remove();
            }, 3500);
        }

        // Error message auto hide
        const error = document.getElementById('error-message');
        if (error) {
            setTimeout(() => {
                error.style.opacity = '0';
                error.style.transform = 'translateX(-50%) translateY(-20px)';
            }, 5000);
            setTimeout(() => {
                error.remove();
            }, 5500);
        }
    </script>

    <!-- PASSWORD TOGGLE SCRIPT -->
    <script>
        const eyeOpen = `
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M15 12a3 3 0 11-6 0 3 3 0 016 0"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M2.458 12C3.732 7.943 7.523 5
            12 5c4.477 0 8.268 2.943
            9.542 7-1.274 4.057-5.065 7-9.542
            7-4.477 0-8.268-2.943-9.542-7z"/>
        `;

        const eyeClose = `
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M13.875 18.825A10.05 10.05 0 0112 19
            c-4.478 0-8.268-2.943-9.542-7
            a9.956 9.956 0 012.042-3.368M6.1 6.1
            A9.956 9.956 0 0112 5c4.478 0 8.268
            2.943 9.542 7a9.97 9.97 0 01-4.132
            5.411M15 12a3 3 0 11-6 0
            3 3 0 016 0z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M3 3l18 18"/>
        `;

        const password = document.getElementById("password");
        const icon = document.getElementById("eyeIcon");

        // DEFAULT: PASSWORD TERTUTUP (eye slash)
        if (icon) {
            icon.innerHTML = eyeClose;
        }

        function togglePassword() {
            if (password.type === "password") {
                password.type = "text";
                icon.innerHTML = eyeOpen;
            } else {
                password.type = "password";
                icon.innerHTML = eyeClose;
            }
        }

        // Add animation on input focus
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('focus', () => {
                input.parentElement?.parentElement?.classList.add('focused');
            });
            input.addEventListener('blur', () => {
                input.parentElement?.parentElement?.classList.remove('focused');
            });
        });
    </script>
</body>
</html>