@extends('layouts.register')

@section('title', 'Masuk Akun - Kei\'s Store')

@section('content')
<div class="glass-card p-8 md:p-12 shadow-2xl relative overflow-hidden">
    <!-- Ported Decorative Elements (Floating Makeup) -->
    <div class="position-absolute w-100 h-100" style="top:0; left:0; z-index:0; opacity:0.15; pointer-events: none;">
        <div class="floating-item" style="top:5%; left:5%; animation-delay:0s;">
            <svg width="30" height="30" viewBox="0 0 24 24" fill="#ec4899">
                <path d="M18 8V6c0-2.76-2.24-5-5-5S8 3.24 8 6v2c-1.66 0-3 1.34-3 3v8c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3v-8c0-1.66-1.34-3-3-3zm-8-2c0-1.66 1.34-3 3-3s3 1.34 3 3v2h-6V6z"/>
            </svg>
        </div>
        <div class="floating-item" style="bottom:10%; right:5%; animation-delay:1s;">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="#f472b6">
                <path d="M20 12V19C20 20.1 19.1 21 18 21H6C4.9 21 4 20.1 4 19V12" stroke="currentColor" stroke-width="2"/>
                <path d="M12 15L12 3M12 3L8 7M12 3L16 7" stroke="currentColor" stroke-width="2"/>
            </svg>
        </div>
        <div class="floating-item" style="top:30%; right:10%; animation-delay:2s;">
            <svg width="25" height="25" viewBox="0 0 24 24" fill="#db2777">
                <circle cx="12" cy="12" r="3"/>
                <path d="M20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12Z" stroke="currentColor" stroke-width="2"/>
            </svg>
        </div>
        <div class="floating-item" style="bottom:20%; left:10%; animation-delay:3s;">
            <svg width="35" height="35" viewBox="0 0 24 24" fill="#f9a8d4">
                <path d="M12 2L15 8H21L17 12L19 18L12 15L5 18L7 12L3 8H9L12 2Z"/>
            </svg>
        </div>
    </div>

    <!-- Ported Sparkle Effect -->
    <div class="position-absolute w-100 h-100" style="top:0; left:0; z-index:1; pointer-events: none;">
        <div class="sparkle" style="left:10%; top:20%;"></div>
        <div class="sparkle" style="left:85%; top:15%; animation-delay:1s;"></div>
        <div class="sparkle" style="left:50%; top:5%; animation-delay:2s;"></div>
        <div class="sparkle" style="left:20%; bottom:20%; animation-delay:3s;"></div>
        <div class="sparkle" style="left:75%; bottom:25%; animation-delay:4s;"></div>
    </div>

    <div class="relative z-10">
        <!-- Close/Home Button -->
        <div class="flex justify-start mb-4">
            <a href="{{ url('/') }}" class="text-rose-400 hover:text-rose-600 transition-colors flex items-center gap-2 text-sm font-medium">
                <i class="fas fa-arrow-left"></i> Beranda
            </a>
        </div>

        <!-- Logo Section (MAINTAINED & IMPROVED) -->
        <div class="text-center mb-10">
            <div class="logo-wrapper mb-6 inline-block relative">
                <div class="logo-image-container w-28 h-28 md:w-32 md:h-32 mx-auto relative z-10">
                    <img src="{{ asset('images/logo3.jpg') }}" 
                         alt="Kei's Store" 
                         class="w-full h-full object-cover rounded-[30px] border-4 border-white shadow-xl shadow-rose-200/50">
                    
                    <!-- Integrated effects inside new structure -->
                    <div class="logo-ring absolute -inset-3 border-2 border-rose-200/30 rounded-[40px] animate-spin-slow"></div>
                    <div class="logo-ring-inner absolute -inset-2 border-2 border-dashed border-rose-400/40 rounded-[35px] animate-spin-reverse-slow"></div>
                </div>
            </div>
            
            <h1 class="playfair text-4xl md:text-5xl font-bold gradient-text mb-2">Masuk Akun</h1>
            <p class="text-rose-400/80 font-medium tracking-wide">Selamat datang kembali di Kei's Store</p>
        </div>

        <!-- Alert Messages -->
        @if(session('success'))
            <div class="mb-6 animate-slide-down bg-emerald-50 text-emerald-600 p-4 rounded-2xl flex items-center gap-3 border border-emerald-100">
                <i class="fas fa-check-circle"></i>
                <span class="text-sm font-medium">{{ session('success') }}</span>
            </div>
        @endif

        @if(session('error') || $errors->any())
            <div class="mb-6 animate-slide-down bg-rose-50 text-rose-600 p-4 rounded-2xl flex items-center gap-3 border border-rose-100">
                <i class="fas fa-exclamation-circle text-lg"></i>
                <span class="text-sm font-medium">{{ session('error') ?? $errors->first() }}</span>
            </div>
        @endif

        <!-- Login Form -->
        <form method="POST" action="{{ route('login.post') }}" class="space-y-6">
            @csrf
            
            <!-- Email -->
            <div class="space-y-2">
                <label class="block text-sm font-semibold text-rose-500/80 px-1">
                    <i class="far fa-envelope mr-1"></i> Email
                </label>
                <input type="email" name="email" value="{{ old('email') }}"
                       class="w-full bg-white/60 border-2 border-rose-100 focus:border-rose-400 focus:ring-4 focus:ring-rose-200/20 rounded-2xl px-5 py-3.5 transition-all outline-none text-gray-700 placeholder:text-rose-200"
                       placeholder="nama@email.com" required>
            </div>

            <!-- Password -->
            <div class="space-y-2">
                <label class="block text-sm font-semibold text-rose-500/80 px-1">
                    <i class="fas fa-lock mr-1"></i> Password
                </label>
                <div class="relative group">
                    <input type="password" name="password" id="password"
                           class="w-full bg-white/60 border-2 border-rose-100 focus:border-rose-400 focus:ring-4 focus:ring-rose-200/20 rounded-2xl px-5 py-3.5 transition-all outline-none text-gray-700 placeholder:text-rose-200"
                           placeholder="Masukkan password" required>
                    <button type="button" onclick="togglePassword()" 
                            class="absolute right-4 top-1/2 -translate-y-1/2 text-rose-200 hover:text-rose-400 transition-colors p-2">
                        <i class="far fa-eye" id="eye-icon"></i>
                    </button>
                </div>
            </div>

            <!-- Remember Me & Forgot Password -->
            <div class="flex justify-between items-center px-1">
                <div class="flex items-center gap-2">
                    <input class="w-4 h-4 rounded border-rose-200 text-rose-500 focus:ring-rose-400" type="checkbox" name="remember" id="remember">
                    <label class="text-xs text-rose-400/80 font-medium cursor-pointer" for="remember">
                        Ingat Saya
                    </label>
                </div>
                <a href="#" class="text-xs text-rose-500 font-bold hover:underline decoration-2 underline-offset-4">
                    Lupa Password?
                </a>
            </div>

            <!-- Submit Button -->
            <button type="submit" 
                    class="w-full bg-gradient-to-r from-rose-400 to-pink-500 hover:from-rose-500 hover:to-pink-600 text-white font-bold py-4 rounded-2xl shadow-lg shadow-rose-200 hover:shadow-rose-300 hover:-translate-y-0.5 transition-all duration-300 flex items-center justify-center gap-3 mt-4">
                <span>Masuk Sekarang</span>
                <i class="fas fa-sign-in-alt"></i>
            </button>

            <!-- Register Link -->
            <p class="text-center text-rose-400 mt-8 text-sm">
                Belum punya akun? 
                <a href="{{ route('register') }}" class="text-rose-500 font-bold hover:underline transition-all">Daftar di sini</a>
            </p>
        </form>

        <!-- Aesthetic Branding Section -->
        <div class="mt-12 pt-8 border-t border-rose-100/50 flex justify-center items-center gap-8 opacity-50 text-[10px] uppercase tracking-[0.2em] font-bold text-rose-400/70">
            <span class="flex items-center gap-1"><i class="fas fa-gem"></i> Premium</span>
            <span class="flex items-center gap-1"><i class="fas fa-check-circle"></i> Original</span>
            <span class="flex items-center gap-1"><i class="fas fa-star"></i> Trusted</span>
        </div>
    </div>
</div>

<style>
    @keyframes slide-down {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-slide-down {
        animation: slide-down 0.4s ease-out forwards;
    }

    .animate-spin-slow {
        animation: spin 12s linear infinite;
    }
    .animate-spin-reverse-slow {
        animation: spin-reverse 15s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    @keyframes spin-reverse {
        from { transform: rotate(360deg); }
        to { transform: rotate(0deg); }
    }

    /* Floating Animation (Ported from old login) */
    .floating-item {
        position: absolute;
        animation: floatAnimation 8s ease-in-out infinite;
    }
    @keyframes floatAnimation {
        0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
        50% { transform: translateY(-20px) rotate(10deg) scale(1.1); }
    }

    /* Sparkle Animation (Ported from old login) */
    .sparkle {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: white;
        box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.8), 0 0 30px 10px rgba(230, 135, 175, 0.3);
        animation: sparkleAnimation 4s ease-in-out infinite;
    }
    @keyframes sparkleAnimation {
        0%, 100% { opacity: 0; transform: scale(0.5); }
        50% { opacity: 1; transform: scale(1.5); }
    }

    input:focus::placeholder {
        opacity: 0.5;
        transform: translateX(5px);
        transition: all 0.2s ease;
    }

    input[type="checkbox"] {
        accent-color: #e687af;
    }
</style>

<script>
    function togglePassword() {
        const passwordField = document.getElementById('password');
        const eyeIcon = document.getElementById('eye-icon');
        
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            eyeIcon.classList.replace('fa-eye', 'fa-eye-slash');
        } else {
            passwordField.type = 'password';
            eyeIcon.classList.replace('fa-eye-slash', 'fa-eye');
        }
    }
</script>
@endsection