<?php
$set = $func->globalset("semua");
if ($set->upline_wajib) {
	$sarat = "required";
	$wajib = "Wajib Di isi";
} else {
	$sarat = "";
	$wajib = "Optional";
}
?>

<?= view('customer/menu', ['func' => $func, 'db' => $db]) ?>

<style>
    /* Container dengan latar tembus pandang */
    .glass-container {
        max-width: 480px;
        margin: 30px auto 50px;
        padding: 20px;
        position: relative;
    }

    /* Panel kaca dengan efek transparan */
    .glass-panel {
        background: var(--glass-bg, rgba(255, 255, 255, 0.85));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.2));
        border-radius: 20px;
        box-shadow: 0 8px 32px var(--glass-shadow, rgba(0, 0, 0, 0.1));
        padding: 40px 30px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    /* Efek gradien untuk kaca */
    .glass-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color, #3498db), var(--secondary-color, #2ecc71));
        border-radius: 20px 20px 0 0;
        z-index: 1;
    }

    /* Header styling */
    .glass-header {
        text-align: center;
        margin-bottom: 35px;
        position: relative;
        z-index: 2;
    }

    .glass-title {
        font-size: 28px;
        font-weight: 700;
        color: var(--text-color, #2c3e50);
        margin-bottom: 12px;
        letter-spacing: -0.5px;
        background: linear-gradient(135deg, var(--primary-color, #3498db), var(--secondary-color, #2ecc71));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .glass-subtitle {
        font-size: 15px;
        color: var(--label-color, #7f8c8d);
        line-height: 1.5;
        max-width: 90%;
        margin: 0 auto;
    }

    /* Form styling untuk tema kaca */
    .glass-form-group {
        margin-bottom: 22px;
        position: relative;
    }

    .glass-form-label {
        display: block;
        margin-bottom: 10px;
        font-size: 15px;
        font-weight: 600;
        color: var(--label-color, #5d6d7e);
        letter-spacing: 0.3px;
    }

    .glass-form-control {
        width: 100%;
        padding: 16px 20px;
        font-size: 16px;
        background: var(--input-glass-bg, rgba(255, 255, 255, 0.9));
        border: 1.5px solid var(--input-glass-border, rgba(0, 0, 0, 0.08));
        border-radius: 12px;
        color: var(--text-color, #2c3e50);
        transition: all 0.3s ease;
        font-weight: 500;
    }

    .glass-form-control:focus {
        outline: none;
        border-color: var(--primary-color, #3498db);
        background: var(--input-glass-focus, rgba(255, 255, 255, 0.95));
        box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.15);
        transform: translateY(-1px);
    }

    .glass-form-control::placeholder {
        color: var(--placeholder-color, #a0aec0);
        font-weight: normal;
    }

    /* Button dengan efek kaca */
    .glass-submit-btn {
        width: 100%;
        padding: 18px;
        font-size: 17px;
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary-color, #3498db), var(--secondary-color, #2ecc71));
        color: white;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 15px;
        position: relative;
        overflow: hidden;
        letter-spacing: 0.5px;
    }

    .glass-submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(52, 152, 219, 0.3);
    }

    .glass-submit-btn:active {
        transform: translateY(0);
    }

    .glass-submit-btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.7s;
    }

    .glass-submit-btn:hover::after {
        left: 100%;
    }

    /* Toggle password button */
    .glass-password-wrapper {
        position: relative;
    }

    .glass-toggle-password {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: var(--label-color, #7f8c8d);
        cursor: pointer;
        font-size: 20px;
        padding: 8px;
        z-index: 2;
        transition: color 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .glass-toggle-password:hover {
        color: var(--primary-color, #3498db);
        background: rgba(0, 0, 0, 0.05);
    }

    /* Hint dan optional text */
    .glass-hint {
        font-size: 13px;
        color: var(--label-color, #7f8c8d);
        margin-top: 8px;
        display: block;
        padding-left: 5px;
        font-style: italic;
    }

    .glass-optional-text {
        font-size: 12px;
        color: var(--label-color, #7f8c8d);
        margin-top: 6px;
        display: block;
        padding-left: 5px;
        font-style: italic;
    }

    /* Error styling */
    .glass-error {
        border-color: var(--error-color, #e74c3c) !important;
        background: rgba(231, 76, 60, 0.05);
    }

    .glass-error-message {
        font-size: 13px;
        color: var(--error-color, #e74c3c);
        margin-top: 8px;
        padding-left: 5px;
        display: none;
        font-weight: 500;
    }

    /* Error alert */
    .glass-error-alert {
        background: rgba(231, 76, 60, 0.1);
        border: 1px solid rgba(231, 76, 60, 0.3);
        border-radius: 12px;
        padding: 15px 20px;
        margin-bottom: 25px;
        color: var(--error-color, #e74c3c);
        display: none;
        text-align: center;
        font-weight: 500;
    }

    /* ========== POPUP SUKSES ========== */
    .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
        display: none;
        animation: fadeIn 0.3s ease;
    }

    .popup-container {
        background: white;
        border-radius: 20px;
        max-width: 500px;
        width: 100%;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        animation: popupSlide 0.4s ease;
        position: relative;
    }

    .popup-header {
        background: linear-gradient(135deg, var(--primary-color, #3498db), var(--secondary-color, #2ecc71));
        padding: 30px;
        text-align: center;
        color: white;
    }

    .popup-icon {
        font-size: 60px;
        margin-bottom: 15px;
        animation: bounce 1s ease infinite;
    }

    .popup-title {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .popup-subtitle {
        font-size: 16px;
        opacity: 0.9;
    }

    .popup-content {
        padding: 30px;
        background: #f8f9fa;
    }

    .popup-message {
        background: white;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 25px;
        border-left: 4px solid var(--primary-color, #3498db);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .popup-message p {
        margin-bottom: 15px;
        line-height: 1.6;
        color: #333;
        font-size: 15px;
    }

    .popup-email, .popup-phone {
        display: block;
        background: #f1f8ff;
        padding: 12px 15px;
        margin: 10px 0;
        border-radius: 8px;
        font-weight: 600;
        color: #2c3e50;
        border: 1px dashed #3498db;
        font-size: 16px;
    }

    .popup-note {
        font-size: 14px;
        color: #7f8c8d;
        font-style: italic;
        margin-top: 15px;
        padding: 10px;
        background: #fffde7;
        border-radius: 6px;
        border-left: 3px solid #f39c12;
    }

    .popup-actions {
        display: flex;
        gap: 15px;
        margin-top: 25px;
    }

    .popup-btn-login {
        flex: 1;
        padding: 16px;
        background: linear-gradient(135deg, var(--primary-color, #3498db), var(--secondary-color, #2ecc71));
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        text-align: center;
    }

    .popup-btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
        color: white;
        text-decoration: none;
    }

    .popup-btn-close {
        flex: 0 0 auto;
        padding: 16px 25px;
        background: #e0e0e0;
        color: #555;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .popup-btn-close:hover {
        background: #d5d5d5;
        transform: translateY(-2px);
    }

    .popup-footer {
        text-align: center;
        padding: 15px;
        background: #f1f1f1;
        font-size: 14px;
        color: #7f8c8d;
        border-top: 1px solid #e0e0e0;
    }

    .popup-countdown {
        display: inline-block;
        font-weight: 700;
        color: var(--primary-color, #3498db);
        min-width: 20px;
    }

    /* Animations */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes popupSlide {
        from { 
            opacity: 0;
            transform: translateY(-30px) scale(0.95);
        }
        to { 
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    /* Loading overlay */
    .glass-loading {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        z-index: 10;
        display: none;
    }

    .glass-spinner {
        width: 50px;
        height: 50px;
        border: 3px solid rgba(52, 152, 219, 0.2);
        border-radius: 50%;
        border-top-color: var(--primary-color, #3498db);
        animation: glass-spin 1s linear infinite;
        margin-bottom: 20px;
    }

    @keyframes glass-spin {
        to { transform: rotate(360deg); }
    }

    /* Login link */
    .glass-login-link {
        text-align: center;
        margin-top: 30px;
        font-size: 15px;
        color: var(--label-color, #7f8c8d);
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .glass-login-link a {
        color: var(--primary-color, #3498db);
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        padding: 5px 10px;
        border-radius: 6px;
    }

    .glass-login-link a:hover {
        color: var(--primary-hover, #2980b9);
        background: rgba(52, 152, 219, 0.1);
        text-decoration: none;
    }

    /* Back link */
    .glass-back-link {
        text-align: center;
        margin-top: 25px;
    }

    .glass-back-link a {
        color: var(--label-color, #7f8c8d);
        text-decoration: none;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 10px;
        transition: all 0.3s ease;
        background: rgba(0, 0, 0, 0.03);
    }

    .glass-back-link a:hover {
        color: var(--text-color, #2c3e50);
        background: rgba(0, 0, 0, 0.08);
        transform: translateX(-5px);
    }

    /* Dekorasi tambahan untuk efek kaca */
    .glass-decoration {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle, var(--primary-color, rgba(52, 152, 219, 0.1)), transparent);
        z-index: 0;
    }

    .glass-decoration-1 {
        width: 150px;
        height: 150px;
        top: -50px;
        right: -50px;
        opacity: 0.3;
    }

    .glass-decoration-2 {
        width: 100px;
        height: 100px;
        bottom: -30px;
        left: -30px;
        opacity: 0.2;
        background: radial-gradient(circle, var(--secondary-color, rgba(46, 204, 113, 0.1)), transparent);
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .glass-container {
            padding: 15px;
            margin: 20px auto 30px;
        }
        
        .glass-panel {
            padding: 30px 20px;
            border-radius: 16px;
        }
        
        .glass-title {
            font-size: 24px;
        }
        
        .glass-subtitle {
            font-size: 14px;
        }
        
        .glass-form-control {
            padding: 14px 18px;
            font-size: 15px;
        }
        
        .glass-submit-btn {
            padding: 16px;
            font-size: 16px;
        }
        
        .popup-container {
            max-width: 95%;
        }
        
        .popup-header {
            padding: 20px;
        }
        
        .popup-title {
            font-size: 22px;
        }
        
        .popup-content {
            padding: 20px;
        }
        
        .popup-actions {
            flex-direction: column;
        }
        
        .glass-decoration-1,
        .glass-decoration-2 {
            display: none;
        }
    }

    @media (max-width: 480px) {
        .glass-panel {
            padding: 25px 15px;
        }
        
        .glass-title {
            font-size: 22px;
        }
        
        .glass-form-control {
            padding: 12px 16px;
        }
        
        .popup-header {
            padding: 15px;
        }
        
        .popup-title {
            font-size: 20px;
        }
        
        .popup-email, .popup-phone {
            font-size: 14px;
            padding: 10px 12px;
        }
    }
</style>

<!-- ========== POPUP SUKSES ========== -->
<div class="popup-overlay" id="successPopup">
    <div class="popup-container">
        <div class="popup-header">
            <div class="popup-icon">🎉</div>
            <h2 class="popup-title">Selamat, Anda Berhasil Mendaftar!</h2>
            <p class="popup-subtitle">Akun Anda telah berhasil dibuat</p>
        </div>
        
        <div class="popup-content">
            <div class="popup-message">
                <p>Untuk dapat menggunakan akun Anda, silahkan klik link konfirmasi yang sudah Kami kirimkan ke email dan nomor WhatsApp:</p>
                <div class="popup-email" id="popupEmail">contoh@email.com</div>
                <div class="popup-phone" id="popupPhone">081234567890</div>
                <p class="popup-note">Cek kembali di folder SPAM apabila belum ada email verifikasi masuk.</p>
            </div>
            
            <p style="text-align: center; margin: 20px 0 15px; font-weight: 500; color: #555;">
                untuk login klik tombol dibawah ini:
            </p>
            
            <div class="popup-actions">
                <a href="<?= site_url('home/signin') ?>" class="popup-btn-login" id="popupLoginBtn">
                    Login Sekarang
                </a>
                <button class="popup-btn-close" id="popupCloseBtn">
                    Tutup
                </button>
            </div>
            
            <div class="popup-footer">
                Akan dialihkan otomatis ke halaman login dalam 
                <span class="popup-countdown" id="popupCountdown">10</span> detik...
            </div>
        </div>
    </div>
</div>

<div class="glass-container">
    <div class="glass-panel" id="formPanel">
        <!-- Dekorasi latar -->
        <div class="glass-decoration glass-decoration-1"></div>
        <div class="glass-decoration glass-decoration-2"></div>
        
        <!-- Header -->
        <div class="glass-header">
            <h1 class="glass-title">FORMULIR PENDAFTARAN</h1>
            <p class="glass-subtitle">Bergabunglah dengan <?= $set->nama ?> untuk akses layanan terbaik</p>
        </div>

        <!-- Error Alert -->
        <div class="glass-error-alert" id="glassErrorAlert">
            Terjadi kesalahan. Silakan coba lagi.
        </div>

        <!-- Loading Overlay -->
        <div class="glass-loading" id="glassLoading">
            <div class="glass-spinner"></div>
            <p style="margin-top: 15px; font-weight: 600; color: var(--text-color);">Memproses pendaftaran...</p>
        </div>

        <!-- Form - Akan submit normal ke server -->
        <form id="glassForm" method="post" action="<?= site_url('home/signup') ?>">
            <input type="hidden" name="<?= csrf_token(); ?>" value="<?= csrf_hash(); ?>">
            
            <!-- Nama Lengkap -->
            <div class="glass-form-group">
                <label for="nama" class="glass-form-label">Nama Lengkap</label>
                <input type="text" id="nama" name="nama" class="glass-form-control" placeholder="Masukkan nama lengkap" required>
            </div>

            <!-- Nomor Handphone -->
            <div class="glass-form-group">
                <label for="nohp" class="glass-form-label">Nomor Handphone</label>
                <input type="tel" id="nohp" name="nohp" class="glass-form-control" placeholder="Contoh: 081234567890" required>
                <span class="glass-hint">Hanya angka yang diperbolehkan</span>
            </div>

            <!-- Alamat Email -->
            <div class="glass-form-group">
                <label for="email" class="glass-form-label">Alamat Email</label>
                <input type="email" id="email" name="email" class="glass-form-control" placeholder="contoh@email.com" required>
                <div class="glass-error-message" id="emailError">Format email tidak valid</div>
            </div>

            <!-- Kode Upline -->
            <div class="glass-form-group">
                <label for="upline" class="glass-form-label">Kode Upline</label>
                <input type="text" id="upline" name="upline" class="glass-form-control" placeholder="Masukkan kode upline" <?= $sarat ?>>
                <span class="glass-optional-text"><?= $wajib ?></span>
            </div>

            <!-- Password -->
            <div class="glass-form-group">
                <label for="password" class="glass-form-label">Password</label>
                <div class="glass-password-wrapper">
                    <input type="password" id="password" name="pass" class="glass-form-control" placeholder="Buat password yang kuat" required>
                    <button type="button" class="glass-toggle-password" id="togglePassword" aria-label="Tampilkan password">
                        👁️
                    </button>
                </div>
                <span class="glass-hint">Minimal 8 karakter dengan kombinasi huruf dan angka</span>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="glass-submit-btn" id="glassSubmit">
                DAFTAR SEKARANG
            </button>

            <!-- Login Link -->
            <div class="glass-login-link">
                Sudah punya akun? <a href="<?= site_url("home/signin") ?>">Login disini</a>
            </div>
        </form>
    </div>

    <!-- Back Link -->
    <div class="glass-back-link">
        <a href="<?= site_url('home') ?>">← Kembali ke Beranda</a>
    </div>
</div>

<script>
// Global variables untuk popup
let popupCountdownTimer;
let popupCountdownSeconds = 10;

document.addEventListener('DOMContentLoaded', function() {
    console.log('Signup page loaded');
    
    // Toggle password visibility
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');
    
    if (togglePassword && passwordInput) {
        togglePassword.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            this.innerHTML = type === 'password' ? '👁️' : '👁️‍🗨️';
        });
    }
    
    // Phone number validation - only numbers
    const phoneInput = document.getElementById('nohp');
    if (phoneInput) {
        phoneInput.addEventListener('input', function() {
            this.value = this.value.replace(/\D/g, '');
        });
    }
    
    // Form elements
    const glassForm = document.getElementById('glassForm');
    const glassSubmit = document.getElementById('glassSubmit');
    const glassLoading = document.getElementById('glassLoading');
    const glassErrorAlert = document.getElementById('glassErrorAlert');
    const successPopup = document.getElementById('successPopup');
    const popupEmail = document.getElementById('popupEmail');
    const popupPhone = document.getElementById('popupPhone');
    const popupCountdown = document.getElementById('popupCountdown');
    const popupLoginBtn = document.getElementById('popupLoginBtn');
    const popupCloseBtn = document.getElementById('popupCloseBtn');
    
    // Hide error alert initially
    if (glassErrorAlert) {
        glassErrorAlert.style.display = 'none';
    }
    
    // Hide popup initially
    if (successPopup) {
        successPopup.style.display = 'none';
    }
    
    // Form submission - SUBMIT TRADISIONAL
    if (glassForm) {
        glassForm.addEventListener('submit', function(e) {
            console.log('Form submission started');
            
            // Validate all fields dengan JavaScript
            let isValid = true;
            const requiredFields = ['nama', 'nohp', 'email', 'password'];
            
            // Clear previous errors
            hideErrorAlert();
            document.querySelectorAll('.glass-error').forEach(el => {
                el.classList.remove('glass-error');
            });
            document.querySelectorAll('.glass-error-message').forEach(el => {
                el.style.display = 'none';
            });
            
            // Check required fields
            requiredFields.forEach(fieldId => {
                const field = document.getElementById(fieldId);
                if (field && !field.value.trim()) {
                    isValid = false;
                    field.classList.add('glass-error');
                    const errorMsg = field.parentElement.querySelector('.glass-error-message') || document.createElement('div');
                    if (!errorMsg.classList.contains('glass-error-message')) {
                        errorMsg.className = 'glass-error-message';
                        field.parentElement.appendChild(errorMsg);
                    }
                    errorMsg.textContent = 'Field ini wajib diisi';
                    errorMsg.style.display = 'block';
                }
            });
            
            // Validate phone number (minimum 10 digits)
            if (phoneInput && phoneInput.value.trim().length < 10) {
                isValid = false;
                phoneInput.classList.add('glass-error');
                const errorMsg = phoneInput.parentElement.querySelector('.glass-error-message') || document.createElement('div');
                if (!errorMsg.classList.contains('glass-error-message')) {
                    errorMsg.className = 'glass-error-message';
                    phoneInput.parentElement.appendChild(errorMsg);
                }
                errorMsg.textContent = 'Nomor handphone minimal 10 digit';
                errorMsg.style.display = 'block';
            }
            
            // Simple email validation
            const emailInput = document.getElementById('email');
            if (emailInput && emailInput.value) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(emailInput.value)) {
                    isValid = false;
                    emailInput.classList.add('glass-error');
                    const emailError = document.getElementById('emailError');
                    if (emailError) {
                        emailError.textContent = 'Format email tidak valid. Contoh: nama@email.com';
                        emailError.style.display = 'block';
                    }
                }
            }
            
            // Validate password (minimum 8 characters)
            if (passwordInput && passwordInput.value.trim().length < 8) {
                isValid = false;
                passwordInput.classList.add('glass-error');
                const errorMsg = passwordInput.parentElement.querySelector('.glass-error-message') || document.createElement('div');
                if (!errorMsg.classList.contains('glass-error-message')) {
                    errorMsg.className = 'glass-error-message';
                    passwordInput.parentElement.appendChild(errorMsg);
                }
                errorMsg.textContent = 'Password minimal 8 karakter';
                errorMsg.style.display = 'block';
            }
            
            if (!isValid) {
                // Shake animation for error
                glassForm.style.animation = 'shake 0.5s';
                setTimeout(() => {
                    glassForm.style.animation = '';
                }, 500);
                
                // Prevent form submission
                e.preventDefault();
                return false;
            }
            
            // ===== SIMULASI SUKSES: TAMPILKAN POPUP =====
            // UNTUK TESTING - HAPUS INI JIKA SUDAH TERHUBUNG KE SERVER
            
            // Simpan data form untuk ditampilkan di popup
            const userEmail = emailInput ? emailInput.value : '';
            const userPhone = phoneInput ? phoneInput.value : '';
            
            // Tampilkan loading
            glassSubmit.disabled = true;
            if (glassLoading) glassLoading.style.display = 'flex';
            
            // Simulasi proses pendaftaran (3 detik)
            setTimeout(() => {
                // Hide loading
                if (glassLoading) glassLoading.style.display = 'none';
                
                // Show success popup with user data
                showSuccessPopup(userEmail, userPhone);
                
                // Reset form
                glassForm.reset();
                glassSubmit.disabled = false;
            }, 2000);
            
            // UNTUK PRODUKSI: HAPUS BAGIAN DI ATAS DAN BIARKAN INI
            // return true; // Biarkan form submit ke server
            
            // Untuk testing: cegah submit ke server
            e.preventDefault();
            return false;
            // ===== END SIMULASI =====
        });
    }
    
    // Fungsi untuk menampilkan popup sukses
    function showSuccessPopup(email, phone) {
        // Update popup dengan data user
        if (popupEmail && email) {
            popupEmail.textContent = email;
        }
        if (popupPhone && phone) {
            popupPhone.textContent = phone;
        }
        
        // Tampilkan popup
        if (successPopup) {
            successPopup.style.display = 'flex';
            document.body.style.overflow = 'hidden'; // Prevent scrolling
            
            // Start countdown
            startPopupCountdown();
        }
    }
    
    // Start countdown timer untuk popup
    function startPopupCountdown() {
        popupCountdownSeconds = 10;
        
        // Clear any existing timer
        if (popupCountdownTimer) {
            clearInterval(popupCountdownTimer);
        }
        
        // Update countdown display
        if (popupCountdown) {
            popupCountdown.textContent = popupCountdownSeconds;
        }
        
        // Start new countdown
        popupCountdownTimer = setInterval(function() {
            popupCountdownSeconds--;
            
            if (popupCountdown) {
                popupCountdown.textContent = popupCountdownSeconds;
            }
            
            if (popupCountdownSeconds <= 0) {
                clearInterval(popupCountdownTimer);
                closePopupAndRedirect();
            }
        }, 1000);
    }
    
    // Close popup and redirect to login
    function closePopupAndRedirect() {
        // Hide popup
        if (successPopup) {
            successPopup.style.display = 'none';
            document.body.style.overflow = 'auto'; // Enable scrolling
        }
        
        // Clear timer
        if (popupCountdownTimer) {
            clearInterval(popupCountdownTimer);
        }
        
        // Redirect to login page
        window.location.href = "<?= site_url('home/signin') ?>";
    }
    
    // Close popup button
    if (popupCloseBtn) {
        popupCloseBtn.addEventListener('click', function() {
            closePopupAndRedirect();
        });
    }
    
    // Login button in popup
    if (popupLoginBtn) {
        popupLoginBtn.addEventListener('click', function(e) {
            e.preventDefault();
            closePopupAndRedirect();
        });
    }
    
    // Helper function to show error alert
    function showErrorAlert(message) {
        if (glassErrorAlert) {
            glassErrorAlert.textContent = message;
            glassErrorAlert.style.display = 'block';
            
            // Auto hide after 5 seconds
            setTimeout(hideErrorAlert, 5000);
        } else {
            alert(message);
        }
    }
    
    // Helper function to hide error alert
    function hideErrorAlert() {
        if (glassErrorAlert) {
            glassErrorAlert.style.display = 'none';
        }
    }
    
    // Remove error class when user starts typing
    const formInputs = document.querySelectorAll('.glass-form-control');
    formInputs.forEach(input => {
        input.addEventListener('input', function() {
            this.classList.remove('glass-error');
            const errorMsg = this.parentElement.querySelector('.glass-error-message');
            if (errorMsg) {
                errorMsg.style.display = 'none';
            }
            hideErrorAlert();
        });
    });
    
    // Add shake animation for errors
    const style = document.createElement('style');
    style.textContent = `
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
    `;
    document.head.appendChild(style);
});

// ========== UNTUK PRODUKSI: JIKA SERVER SUDAH SIAP ==========
// Hapus bagian SIMULASI di atas dan gunakan kode ini:

/*
// Cek jika ada parameter sukses dari server (setelah redirect)
const urlParams = new URLSearchParams(window.location.search);
const namaParam = urlParams.get('nama');
const emailParam = urlParams.get('email');
const phoneParam = urlParams.get('phone');
const successParam = urlParams.get('success');

// Jika server mengirim parameter sukses, tampilkan popup
if (successParam === '1' || emailParam) {
    showSuccessPopup(emailParam || '', phoneParam || '');
}
*/
</script>