<?php
/**
 * register_page.php - Premium Register Interface
 * Fitur: Toggle Password (Mata), Glassmorphism, & Ultra Responsive
 * Developer: Sikawarsito, S.Kom
 */
session_start();
include '../config/database.php';

// Ambil Nama Aplikasi dari DB agar sinkron
$cfg = mysqli_fetch_assoc(mysqli_query($conn, "SELECT nama_aplikasi FROM settings WHERE id = 1"));
$app_name = $cfg['nama_aplikasi'] ?? 'AI Workspace';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Daftar Akun | <?= htmlspecialchars($app_name) ?></title>
    
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --glass-bg: rgba(255, 255, 255, 0.92);
        }

        body { 
            background: #f1f5f9;
            background-image: 
                radial-gradient(at 0% 0%, rgba(102, 126, 234, 0.12) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(118, 75, 162, 0.12) 0px, transparent 50%);
            min-height: 100dvh; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-family: 'Plus Jakarta Sans', sans-serif;
            margin: 0;
            padding: 20px;
        }

        .register-card { 
            background: var(--glass-bg); 
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 40px; 
            border-radius: 35px; 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); 
            width: 100%;
            max-width: 420px; 
            border: 1px solid rgba(255, 255, 255, 0.7); 
            animation: slideUp 0.7s ease-out;
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .brand-icon {
            width: 65px;
            height: 65px;
            background: var(--primary-gradient);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: white;
            font-size: 32px;
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.25);
        }

        h3 { color: #1e293b; font-weight: 800; letter-spacing: -0.5px; }
        
        .form-label { font-weight: 700; font-size: 0.75rem; color: #64748b; text-transform: uppercase; margin-bottom: 7px; letter-spacing: 0.5px; }
        
        .form-control {
            border-radius: 14px;
            padding: 11px 16px;
            border: 1px solid #e2e8f0;
            background: rgba(255, 255, 255, 0.8);
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.08);
            border-color: #667eea;
            background: white;
        }

        /* Password Wrapper for Eye Icon */
        .password-wrapper { position: relative; }
        .toggle-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #94a3b8;
            font-size: 1.1rem;
            z-index: 10;
            transition: color 0.2s;
        }
        .toggle-password:hover { color: #667eea; }

        .btn-register {
            background: var(--primary-gradient);
            border: none;
            border-radius: 14px;
            padding: 13px;
            font-weight: 700;
            color: white;
            margin-top: 10px;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
        }

        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3);
            opacity: 0.95;
        }

        .footer-dev {
            margin-top: 35px;
            padding-top: 20px;
            border-top: 1px solid rgba(0,0,0,0.04);
            text-align: center;
        }

        @media (max-width: 480px) {
            .register-card { padding: 35px 22px; border-radius: 28px; }
            h3 { font-size: 1.4rem; }
        }
    </style>
</head>
<body>

<div class="register-card shadow-2xl">
    <div class="brand-icon">
        <i class="bi bi-person-plus-fill"></i>
    </div>
    
    <div class="text-center mb-4">
        <h3>Registrasi Akun</h3>
        <p class="text-muted small">Bergabunglah dengan komunitas AI Kami</p>
    </div>

    <form action="../api/register.php" method="POST">
        <div class="mb-3">
            <label class="form-label">Email Terdaftar</label>
            <input type="email" name="email" class="form-control" placeholder="contoh@domain.com" required>
        </div>

        <div class="mb-3">
            <label class="form-label">Username</label>
            <input type="text" name="username" class="form-control" placeholder="Buat username unik" required>
        </div>
        
        <div class="mb-4">
            <label class="form-label">Password</label>
            <div class="password-wrapper">
                <input type="password" name="password" id="passInput" class="form-control" placeholder="Buat password kuat" required>
                <i class="bi bi-eye-slash toggle-password" id="toggleEye"></i>
            </div>
        </div>
        
        <div class="d-grid">
            <button type="submit" class="btn btn-register shadow">DAFTAR SEKARANG</button>
        </div>
    </form>
    
    <div class="text-center mt-4">
        <p class="small text-muted">Sudah punya akun? <a href="login_page.php" class="text-decoration-none fw-bold text-primary">Login Disini</a></p>
    </div>

    <div class="footer-dev">
        <div class="fw-bold text-dark small" style="opacity: 0.5; font-size: 0.7rem;">
            &copy; <?= date('Y') ?> All Rights Reserved<br>
            Developed by <span class="text-primary">Sikawarsito, S.Kom</span>
        </div>
    </div>
</div>

<script>
    // --- FITUR MATA (SHOW/HIDE PASSWORD) ---
    const toggleEye = document.querySelector('#toggleEye');
    const passInput = document.querySelector('#passInput');

    toggleEye.addEventListener('click', function () {
        // Toggle tipe input
        const type = passInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passInput.setAttribute('type', type);
        
        // Toggle ikon
        this.classList.toggle('bi-eye');
        this.classList.toggle('bi-eye-slash');
    });
</script>

</body>
</html>