{% extends "base.html" %}

{% block title %}Register - VacationWeb{% endblock %}

{% block extra_css %}
<style>
    /* Cosmic Background */
    body {
        background: linear-gradient(135deg, #0c2461, #1e3799, #4a69bd);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
        overflow-x: hidden;
        min-height: 100vh;
        transition: background 1s ease;
    }
    
    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    body[data-theme="sunset"] { background: linear-gradient(135deg, #ff6b6b, #ee5a24, #ff9f43) !important; }
    body[data-theme="ocean"] { background: linear-gradient(135deg, #1a2980, #26d0ce, #1a2980) !important; }
    body[data-theme="forest"] { background: linear-gradient(135deg, #0b6623, #4CAF50, #8BC34A) !important; }
    
    #particles-js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; }
    
    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        perspective: 1000px;
    }
    
    .login-card-wrapper {
        position: relative;
        width: 100%;
        max-width: 1200px;
        transform-style: preserve-3d;
        transition: transform 1s;
    }
    
    .login-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        overflow: hidden;
        display: flex;
        position: relative;
        z-index: 1;
    }
    
    .login-left {
        flex: 1;
        padding: 50px;
        background: linear-gradient(135deg, rgba(45, 147, 108, 0.9), rgba(30, 107, 80, 0.7));
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    .malaysia-map {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        opacity: 0.1;
    }

    .destination-carousel {
        position: relative;
        height: 200px;
        margin: 20px 0;
        overflow: hidden;
        border-radius: 20px;
    }
    
    .carousel-slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 20px;
        opacity: 0;
        animation: carousel 20s infinite;
    }
    
    /* Carousel Images */
    .carousel-slide:nth-child(1) { animation-delay: 0s; background-image: url('https://images.unsplash.com/photo-1596422846543-75c6fc197f07?auto=format&fit=crop&w=800&q=80'); }
    .carousel-slide:nth-child(2) { animation-delay: 5s; background-image: url('https://images.unsplash.com/photo-1552084117-56a987666449?auto=format&fit=crop&w=800&q=80'); }
    .carousel-slide:nth-child(3) { animation-delay: 10s; background-image: url('https://images.unsplash.com/photo-1534828736503-7457d3e5f7d9?auto=format&fit=crop&w=800&q=80'); }
    .carousel-slide:nth-child(4) { animation-delay: 15s; background-image: url('https://images.unsplash.com/photo-1570575708074-41c4f6067c3a?auto=format&fit=crop&w=800&q=80'); }

    @keyframes carousel {
        0%, 20% { opacity: 0; transform: translateX(50px); }
        5%, 15% { opacity: 1; transform: translateX(0); }
        25%, 100% { opacity: 0; transform: translateX(-50px); }
    }

    .feature-tag {
        display: inline-block;
        background: rgba(255, 215, 0, 0.2);
        backdrop-filter: blur(10px);
        padding: 5px 15px;
        border-radius: 50px;
        margin: 5px;
        font-size: 12px;
        color: white;
        animation: floatTag 3s ease-in-out infinite;
    }

    @keyframes floatTag {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }
    
    .login-right { flex: 1; padding: 40px; position: relative; transform-style: preserve-3d; }
    
    .welcome-title {
        font-family: 'Playfair Display', serif;
        font-size: 38px;
        background: linear-gradient(45deg, #FFD700, #FFA500);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 5px;
    }
    
    .welcome-subtitle { color: rgba(255, 255, 255, 0.8); font-size: 16px; margin-bottom: 25px; position: relative; }
    
    .form-group { margin-bottom: 20px; position: relative; transform-style: preserve-3d; }
    
    .input-label {
        position: absolute; left: 20px; top: -10px;
        background: linear-gradient(135deg, #2D936C, #1E6B50);
        padding: 3px 12px; border-radius: 8px;
        color: white; font-size: 12px; font-weight: 600;
        z-index: 2; transform: translateZ(20px);
    }
    
    .input-wrapper { position: relative; z-index: 10; }
    
    .form-input {
        width: 100%; padding: 15px 20px;
        background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
        border-radius: 15px; color: white; outline: none; transition: 0.3s;
    }
    
    .form-input:focus { background: rgba(255,255,255,0.1); border-color: #FFD700; }

    .input-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #FFD700; }
    
    .submit-btn {
        width: 100%; padding: 15px;
        background: linear-gradient(135deg, #FFD700, #FFA500);
        border: none; border-radius: 15px;
        color: #1E6B50; font-weight: 700; cursor: pointer;
        transition: 0.3s; z-index: 10; position: relative;
    }
    
    .submit-btn:hover { transform: translateY(-3px) translateZ(10px); box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3); }

    .register-link { text-align: center; margin-top: 25px; }
    .register-link a {
        color: #FFD700; text-decoration: none; font-weight: 600;
        padding: 10px 20px; border: 1px solid rgba(255,215,0,0.3);
        border-radius: 12px; transition: 0.3s; display: inline-block;
    }
    .register-link a:hover { background: rgba(255, 215, 0, 0.1); transform: scale(1.05); }

    .theme-toggle {
        position: fixed; top: 20px; right: 20px; width: 45px; height: 45px;
        background: rgba(255,255,255,0.1); border-radius: 50%;
        color: #FFD700; cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center;
    }
</style>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
{% endblock %}

{% block content %}
<div class="login-container">
    <div id="particles-js"></div>
    
    <div class="login-card-wrapper">
        <div class="login-card">
            <div class="login-left">
                <svg class="malaysia-map" viewBox="0 0 500 500">
                    <path d="M250,100 L350,150 L300,250 L200,300 L150,200 Z" fill="none" stroke="#FFD700" stroke-width="3"></path>
                </svg>
                
                <h1 class="display-5 fw-bold text-white mb-3"><span id="malaysia-title">Start Your Journey</span></h1>
                <p class="text-white mb-4" style="opacity: 0.9;">Join thousands of travelers exploring the hidden gems of Malaysia.</p>
                
                <div class="destination-carousel">
                    <div class="carousel-slide"></div>
                    <div class="carousel-slide"></div>
                    <div class="carousel-slide"></div>
                </div>

                <div class="text-center">
                    <span class="feature-tag">✨ Free Account</span>
                    <span class="feature-tag">🗺️ Trip Planner</span>
                    <span class="feature-tag">📸 Photo Spots</span>
                </div>
            </div>
            
            <div class="login-right">
                <div class="login-form-container">
                    <h1 class="welcome-title"><i class="fas fa-map-marked-alt me-2"></i>Register</h1>
                    <p class="welcome-subtitle">Create your traveler profile today</p>
                    
                    <form action="/register" method="POST" id="registrationForm">
                        <div class="form-group">
                            <label class="input-label">Full Name</label>
                            <div class="input-wrapper">
                                <input type="text" class="form-input" name="name" placeholder="Your Name" required>
                                <span class="input-icon"><i class="fas fa-user"></i></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="input-label">Email</label>
                            <div class="input-wrapper">
                                <input type="email" class="form-input" name="email" placeholder="email@example.com" required>
                                <span class="input-icon"><i class="fas fa-envelope"></i></span>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="input-label">Password</label>
                            <div class="input-wrapper">
                                <input type="password" class="form-input" name="password" placeholder="Create password" required>
                                <span class="input-icon"><i class="fas fa-lock"></i></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="input-label">Confirm Password</label>
                            <div class="input-wrapper">
                                <input type="password" class="form-input" name="confirm_password" placeholder="Repeat password" required>
                                <span class="input-icon"><i class="fas fa-shield-alt"></i></span>
                            </div>
                        </div>
                        
                        <button type="submit" class="submit-btn">
                            <i class="fas fa-paper-plane me-2"></i>Create Account
                        </button>
                        
                        <div class="register-link">
                            <a href="/login"> <i class="fas fa-sign-in-alt me-2"></i>Already a traveler? Login
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <button class="theme-toggle" id="themeToggle"><i class="fas fa-palette"></i></button>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        
        // 1. Keep your existing Particles/Theme toggle code here...
        // ... (particlesJS and themeToggle code) ...

        // 2. THIS IS WHERE YOU PUT THE FORM CODE
        const registrationForm = document.querySelector('form'); // Selects the form
        
        registrationForm.addEventListener('submit', async function(e) {
            e.preventDefault(); // This stops the "blank page" refresh
            
            const formData = new FormData(registrationForm);

            try {
                const response = await fetch('/register', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json(); 

                if (response.ok) {
                    Swal.fire({
                        title: 'Success!',
                        text: 'Redirecting to login...',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false,
                        background: 'rgba(12, 36, 97, 0.9)',
                        color: '#fff'
                    }).then(() => {
                        window.location.href = "/login"; 
                    });
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: result.message || 'Registration failed',
                        icon: 'error'
                    });
                }
            } catch (error) {
                console.error("Fetch error:", error);
            }
        });
    });
</script>
{% endblock %}