@extends('layouts.auth')

@section('title', 'Register')

@section('content')
<form method="POST" action="{{ route('register.store') }}" style="animation: fadeInUp 1s ease-out;">
    @csrf
    
    <!-- Personal Information Section -->
    <div class="form-section" style="animation: fadeInUp 1.1s ease-out;">
        <div class="section-header">
            <div class="section-icon">
                <i class="fas fa-user"></i>
            </div>
            <h3>Informasi Pribadi</h3>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <div class="form-floating-custom">
                    <i class="fas fa-user form-icon"></i>
                    <input type="text" class="form-input" id="name" name="name" 
                           value="{{ old('name') }}" required autofocus placeholder="Nama Lengkap">
                    <label for="name" class="form-label">Nama Lengkap</label>
                </div>
            </div>
            
            <div class="form-group">
                <div class="form-floating-custom">
                    <i class="fas fa-envelope form-icon"></i>
                    <input type="email" class="form-input" id="email" name="email" 
                           value="{{ old('email') }}" required placeholder="Email">
                    <label for="email" class="form-label">Email Address</label>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Security Section -->
    <div class="form-section" style="animation: fadeInUp 1.2s ease-out;">
        <div class="section-header">
            <div class="section-icon">
                <i class="fas fa-lock"></i>
            </div>
            <h3>Keamanan Akun</h3>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <div class="form-floating-custom">
                    <i class="fas fa-key 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>
            </div>
            
            <div class="form-group">
                <div class="form-floating-custom">
                    <i class="fas fa-shield-alt form-icon"></i>
                    <input type="password" class="form-input" id="password_confirmation" 
                           name="password_confirmation" required placeholder="Konfirmasi Password">
                    <label for="password_confirmation" class="form-label">Konfirmasi Password</label>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Additional Information Section -->
    <div class="form-section" style="animation: fadeInUp 1.3s ease-out;">
        <div class="section-header">
            <div class="section-icon">
                <i class="fas fa-info-circle"></i>
            </div>
            <h3>Informasi Tambahan</h3>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <div class="form-floating-custom">
                    <i class="fas fa-phone form-icon"></i>
                    <input type="tel" class="form-input" id="phone" name="phone" 
                           value="{{ old('phone') }}" placeholder="No. HP">
                    <label for="phone" class="form-label">No. HP (Opsional)</label>
                </div>
            </div>
            
            <div class="form-group">
                <div class="form-floating-custom">
                    <i class="fas fa-map-marker-alt form-icon"></i>
                    <input type="text" class="form-input" id="address" name="address" 
                           value="{{ old('address') }}" placeholder="Alamat">
                    <label for="address" class="form-label">Alamat (Opsional)</label>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Terms Section -->
    <div class="terms-section" style="animation: fadeInUp 1.4s ease-out;">
        <div class="checkbox-wrapper">
            <input type="checkbox" class="checkbox-custom" id="terms" required>
            <label for="terms" class="checkbox-label">
                Saya setuju dengan <a href="#" class="link-custom">syarat dan ketentuan</a> yang berlaku
            </label>
        </div>
    </div>
    
    <!-- Submit Button -->
    <button type="submit" class="btn-login" style="animation: fadeInUp 1.5s ease-out;">
        <i class="fas fa-user-plus me-2"></i>
        Buat Akun Baru
    </button>
</form>

<!-- Links Section -->
<div class="links-section" style="animation: fadeInUp 1.6s ease-out;">
    <p class="mb-2">
        Sudah punya akun? 
        <a href="{{ route('login') }}" class="link-custom">
            Login di sini
        </a>
    </p>
</div>



@section('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 interactions
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 btnRegister = document.querySelector('.btn-login');
btnRegister.addEventListener('mousemove', (e) => {
    const rect = btnRegister.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;
    
    btnRegister.style.transform = `perspective(1000px) rotateY(${deltaX * 5}deg) rotateX(${-deltaY * 5}deg) translateY(-3px)`;
});

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

// Section headers interaction
document.querySelectorAll('.section-icon').forEach(icon => {
    icon.addEventListener('mousemove', (e) => {
        const rect = icon.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;
        
        icon.style.transform = `perspective(1000px) rotateY(${deltaX * 10}deg) rotateX(${-deltaY * 10}deg) scale(1.1)`;
    });
    
    icon.addEventListener('mouseleave', () => {
        icon.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1)';
    });
});

// Initialize starfield
createStarfield();

// FAQ Accordion functionality
document.querySelectorAll('.faq-question').forEach(question => {
    question.addEventListener('click', function() {
        const faqItem = this.parentElement;
        const answer = faqItem.querySelector('.faq-answer');
        const isOpen = answer.style.display === 'block';
        
        // Close all other FAQs
        document.querySelectorAll('.faq-answer').forEach(otherAnswer => {
            otherAnswer.style.display = 'none';
        });
        
        // Toggle current FAQ
        answer.style.display = isOpen ? 'none' : 'block';
        
        // Add animation
        if (!isOpen) {
            answer.style.animation = 'fadeInUp 0.3s ease-out';
        }
    });
});

// Smooth scroll behavior for better UX
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});
</script>
@endsection
@endsection
