{% extends "base.html" %}

{% block title %}Daftar | D'Tector.AI{% endblock %}

{% block extra_css %}
<style>
    .register-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    }
    .register-card {
        background: #1e293b;
        border-radius: 2rem;
        padding: 2.5rem;
        max-width: 500px;
        width: 100%;
        border: 1px solid #334155;
        animation: fadeInUp 0.6s ease-out;
    }
    .register-header { text-align: center; margin-bottom: 2rem; }
    .register-logo {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        border-radius: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
    }
    .register-logo i { font-size: 2rem; color: white; }
    .register-header h2 { font-size: 1.75rem; margin-bottom: 0.5rem; color: #e2e8f0; }
    .btn-register {
        width: 100%;
        padding: 0.875rem;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        border: none;
        border-radius: 0.75rem;
        color: white;
        font-weight: 600;
        cursor: pointer;
    }
    .btn-register:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px #3b82f6; }
    .login-link { text-align: center; margin-top: 1.5rem; color: #94a3b8; font-size: 0.875rem; }
    .login-link a { color: #3b82f6; text-decoration: none; }
</style>
{% endblock %}

{% block content %}
<div class="register-container">
    <div class="register-card">
        <div class="register-header">
            <div class="register-logo"><i class="fas fa-shield-alt"></i></div>
            <h2>Buat Akun Baru</h2>
            <p>Bergabung dengan D'Tector.AI sekarang</p>
        </div>

        <form id="registerForm">
            <div class="form-group">
                <label>Username</label>
                <input type="text" id="username" placeholder="username_anda" required>
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" id="email" placeholder="email@example.com" required>
            </div>
            <div class="form-group">
                <label>Nama Lengkap</label>
                <input type="text" id="fullname" placeholder="Nama Anda">
            </div>
            <div class="form-group">
                <label>Kata Sandi</label>
                <input type="password" id="password" placeholder="Minimal 6 karakter" required>
            </div>
            <div class="form-group">
                <label>Konfirmasi Kata Sandi</label>
                <input type="password" id="confirm_password" placeholder="Ulangi sandi" required>
            </div>
            <button type="submit" class="btn-register"><i class="fas fa-user-plus"></i> Daftar Sekarang</button>
        </form>

        <div class="login-link">
            Sudah punya akun? <a href="/login">Masuk di sini</a>
        </div>
    </div>
</div>

<script>
    document.getElementById('registerForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const username = document.getElementById('username').value;
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirm_password').value;
        const fullName = document.getElementById('fullname').value;

        // Validasi
        if (password !== confirmPassword) {
            alert('Password tidak cocok!');
            return;
        }

        if (password.length < 6) {
            alert('Password minimal 6 karakter');
            return;
        }

        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';

        try {
            console.log('Mengirim request registrasi...');
            
            const response = await fetch('/api/auth/register', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ 
                    username: username, 
                    email: email, 
                    password: password, 
                    full_name: fullName 
                })
            });
            
            const result = await response.json();
            console.log('Response:', result);

            if (result.success) {
                alert('Registrasi berhasil! Mengarahkan ke dashboard...');
                // Redirect ke dashboard
                window.location.href = '/dashboard';
            } else {
                alert('Error: ' + (result.error || 'Registrasi gagal'));
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Terjadi kesalahan: ' + error.message);
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    });
</script>
{% endblock %}