<?php $__env->startSection('title', 'Login'); ?>

<?php $__env->startSection('content'); ?>
<form method="POST" action="<?php echo e(route('login.store')); ?>" style="animation: fadeInUp 1s ease-out;">
    <?php echo csrf_field(); ?>
    
    <!-- Email Field -->
    <div class="form-floating-custom">
        <i class="fas fa-envelope form-icon"></i>
        <input type="email" class="form-input" id="email" name="email" 
               value="<?php echo e(old('email')); ?>" required autofocus placeholder="Email">
        <label for="email" class="form-label">Email Address</label>
    </div>

    <!-- Password Field -->
    <div class="form-floating-custom">
        <i class="fas fa-lock form-icon"></i>
        <input type="password" class="form-input" id="password" name="password" required placeholder="Password">
        <label for="password" class="form-label">Password</label>
    </div>

    <!-- Remember Me -->
    <div class="checkbox-wrapper">
        <input type="checkbox" class="checkbox-custom" id="remember" name="remember">
        <label for="remember" class="checkbox-label">Ingat saya</label>
    </div>

    <!-- Submit Button -->
    <button type="submit" class="btn-login">
        <i class="fas fa-sign-in-alt me-2"></i>
        Masuk ke Dashboard
    </button>
</form>

<!-- Links Section -->
<div class="links-section" style="animation: fadeInUp 1.2s ease-out;">
    <p class="mb-2">
        Belum punya akun? 
        <a href="<?php echo e(route('register')); ?>" class="link-custom">
            Daftar sekarang
        </a>
    </p>
    <p>
        <a href="#" class="link-custom">
            Lupa password?
        </a>
    </p>
</div>

<?php $__env->startSection('scripts'); ?>
<script>
// Create starfield background
function createStarfield() {
    const starfield = document.getElementById('starfield');
    const starCount = 150;
    
    for (let i = 0; i < starCount; i++) {
        const star = document.createElement('div');
        star.className = 'star';
        
        // Random position
        star.style.left = Math.random() * 100 + '%';
        star.style.top = Math.random() * 100 + '%';
        
        // Random size
        const size = Math.random() * 3 + 1;
        star.style.width = size + 'px';
        star.style.height = size + 'px';
        
        // Random animation delay
        star.style.animationDelay = Math.random() * 3 + 's';
        
        // Random opacity
        star.style.opacity = Math.random() * 0.8 + 0.2;
        
        starfield.appendChild(star);
    }
}

// Interactive cursor-following stars
document.addEventListener('mousemove', (e) => {
    const stars = document.querySelectorAll('.star');
    const mouseX = e.clientX / window.innerWidth;
    const mouseY = e.clientY / window.innerHeight;
    
    stars.forEach((star, index) => {
        const speed = (index + 1) * 0.01;
        const x = (mouseX - 0.5) * speed * 50;
        const y = (mouseY - 0.5) * speed * 50;
        
        star.style.transform = `translate(${x}px, ${y}px) scale(${1 + Math.sin(Date.now() * 0.001 + index) * 0.2})`;
    });
});

// Form input animations
document.querySelectorAll('.form-input').forEach(input => {
    input.addEventListener('focus', function() {
        this.parentElement.style.transform = 'scale(1.02)';
        // Create sparkle effect
        createSparkles(this.parentElement);
    });
    
    input.addEventListener('blur', function() {
        this.parentElement.style.transform = 'scale(1)';
    });
});

// Create sparkle effect
function createSparkles(element) {
    const rect = element.getBoundingClientRect();
    const sparkleCount = 8;
    
    for (let i = 0; i < sparkleCount; i++) {
        const sparkle = document.createElement('div');
        sparkle.style.position = 'absolute';
        sparkle.style.width = '4px';
        sparkle.style.height = '4px';
        sparkle.style.background = 'var(--cream-400)';
        sparkle.style.borderRadius = '50%';
        sparkle.style.pointerEvents = 'none';
        sparkle.style.zIndex = '1000';
        
        const angle = (i / sparkleCount) * Math.PI * 2;
        const distance = 50;
        const x = rect.left + rect.width / 2 + Math.cos(angle) * distance;
        const y = rect.top + rect.height / 2 + Math.sin(angle) * distance;
        
        sparkle.style.left = x + 'px';
        sparkle.style.top = y + 'px';
        sparkle.style.animation = 'sparkle-fly 0.6s ease-out forwards';
        
        document.body.appendChild(sparkle);
        
        setTimeout(() => sparkle.remove(), 600);
    }
}

// Add sparkle animation
const style = document.createElement('style');
style.textContent = `
    @keyframes sparkle-fly {
        0% {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }
        100% {
            opacity: 0;
            transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
        }
    }
`;
document.head.appendChild(style);

// Button hover effect with parallax
const btnLogin = document.querySelector('.btn-login');
btnLogin.addEventListener('mousemove', (e) => {
    const rect = btnLogin.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    
    const deltaX = (x - centerX) / centerX;
    const deltaY = (y - centerY) / centerY;
    
    btnLogin.style.transform = `perspective(1000px) rotateY(${deltaX * 5}deg) rotateX(${-deltaY * 5}deg) translateY(-3px)`;
});

btnLogin.addEventListener('mouseleave', () => {
    btnLogin.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(0px)';
});

// Logo icon interaction
const logoIcon = document.querySelector('.logo-icon');
logoIcon.addEventListener('mousemove', (e) => {
    const rect = logoIcon.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    
    const deltaX = (x - centerX) / centerX;
    const deltaY = (y - centerY) / centerY;
    
    logoIcon.style.transform = `perspective(1000px) rotateY(${deltaX * 15}deg) rotateX(${-deltaY * 15}deg) scale(1.05)`;
});

logoIcon.addEventListener('mouseleave', () => {
    logoIcon.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1)';
});

// Initialize starfield
createStarfield();
</script>
<?php $__env->stopSection(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.auth', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\yukig\Downloads\Manfutsal\resources\views/auth/login.blade.php ENDPATH**/ ?>