<?php
include __DIR__ . '/../layouts/header.php';
?>

<div class="container" style="max-width: 460px; margin: 2.5rem auto;">
    <div class="register-card" style="background: #fff; border-radius: 20px; padding: 2.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04);">
        
        <!-- HEADER -->
        <div style="text-align: center; margin-bottom: 2rem;">
            <div style="font-size: 3rem; margin-bottom: 0.5rem;">📝</div>
            <h2 style="font-size: 1.6rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.3rem;">Daftar Akun</h2>
            <p style="color: var(--gray-500); font-size: 0.95rem;">Mulai petualangan Anda di Danau Toba!</p>
        </div>

        <!-- ALERT ERROR -->
        <?php if(isset($error)): ?>
            <div class="alert alert-danger" style="display:flex; align-items:center; gap:0.5rem; background:#fee2e2; color:#991b1b; padding:0.8rem 1.2rem; border-radius:10px; border-left:4px solid #ef4444; margin-bottom:1.5rem;">
                <span style="font-size:1.2rem;">⚠️</span>
                <span><?= htmlspecialchars($error) ?></span>
            </div>
        <?php endif; ?>

        <!-- ALERT SUCCESS -->
        <?php if(isset($success)): ?>
            <div class="alert alert-success" style="display:flex; align-items:center; gap:0.5rem; background:#d1fae5; color:#065f46; padding:0.8rem 1.2rem; border-radius:10px; border-left:4px solid #10b981; margin-bottom:1.5rem;">
                <span style="font-size:1.2rem;">✅</span>
                <span><?= htmlspecialchars($success) ?></span>
            </div>
        <?php endif; ?>

        <!-- FORM REGISTER -->
        <form method="POST" action="" id="registerForm" onsubmit="return validatePassword()">
            <!-- NAMA LENGKAP -->
            <div style="margin-bottom: 1rem;">
                <label style="display:block; font-weight:600; font-size:0.9rem; color:var(--gray-700); margin-bottom:0.3rem;">Nama Lengkap</label>
                <input type="text" name="nama" placeholder="Masukkan nama lengkap" required value="<?= isset($_POST['nama']) ? htmlspecialchars($_POST['nama']) : '' ?>" style="width:100%; padding:0.8rem 1rem; border:1.5px solid var(--gray-200); border-radius:10px; font-size:1rem; transition:0.2s; background:var(--gray-50);">
            </div>

            <!-- EMAIL -->
            <div style="margin-bottom: 1rem;">
                <label style="display:block; font-weight:600; font-size:0.9rem; color:var(--gray-700); margin-bottom:0.3rem;">Email</label>
                <input type="email" name="email" placeholder="email@domain.com" required value="<?= isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" style="width:100%; padding:0.8rem 1rem; border:1.5px solid var(--gray-200); border-radius:10px; font-size:1rem; transition:0.2s; background:var(--gray-50);">
            </div>

            <!-- NO HP -->
            <div style="margin-bottom: 1rem;">
                <label style="display:block; font-weight:600; font-size:0.9rem; color:var(--gray-700); margin-bottom:0.3rem;">Nomor WhatsApp</label>
                <input type="text" name="no_hp" placeholder="0821xxxxxxx" required value="<?= isset($_POST['no_hp']) ? htmlspecialchars($_POST['no_hp']) : '' ?>" style="width:100%; padding:0.8rem 1rem; border:1.5px solid var(--gray-200); border-radius:10px; font-size:1rem; transition:0.2s; background:var(--gray-50);">
            </div>

            <!-- PASSWORD -->
            <div style="margin-bottom: 1rem;">
                <label style="display:block; font-weight:600; font-size:0.9rem; color:var(--gray-700); margin-bottom:0.3rem;">Password</label>
                <div style="position:relative;">
                    <input type="password" name="password" id="password" placeholder="Minimal 8 karakter" required style="width:100%; padding:0.8rem 1rem; border:1.5px solid var(--gray-200); border-radius:10px; font-size:1rem; transition:0.2s; background:var(--gray-50);">
                    <button type="button" onclick="togglePassword('password', this)" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1rem; opacity:0.5; padding:0;">👁️</button>
                </div>
            </div>

            <!-- KONFIRMASI PASSWORD (BARU) -->
            <div style="margin-bottom: 1rem;">
                <label style="display:block; font-weight:600; font-size:0.9rem; color:var(--gray-700); margin-bottom:0.3rem;">Konfirmasi Password <span style="color:var(--danger);">*</span></label>
                <div style="position:relative;">
                    <input type="password" name="konfirmasi_password" id="konfirmasi_password" placeholder="Ulangi password" required style="width:100%; padding:0.8rem 1rem; border:1.5px solid var(--gray-200); border-radius:10px; font-size:1rem; transition:0.2s; background:var(--gray-50);">
                    <button type="button" onclick="togglePassword('konfirmasi_password', this)" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1rem; opacity:0.5; padding:0;">👁️</button>
                </div>
                <span id="passwordMatchMsg" style="font-size:0.8rem; display:none;"></span>
            </div>

            <!-- ROLE -->
            <div style="margin-bottom: 1.5rem;">
                <label style="display:block; font-weight:600; font-size:0.9rem; color:var(--gray-700); margin-bottom:0.3rem;">Daftar sebagai</label>
                <select name="role" style="width:100%; padding:0.8rem 1rem; border:1.5px solid var(--gray-200); border-radius:10px; font-size:1rem; background:var(--gray-50); appearance:auto;">
                    <option value="wisatawan" <?= (isset($_POST['role']) && $_POST['role'] == 'wisatawan') ? 'selected' : '' ?>>Wisatawan</option>
                    <option value="pemilik_kapal" <?= (isset($_POST['role']) && $_POST['role'] == 'pemilik_kapal') ? 'selected' : '' ?>>Pemilik Kapal / Supir</option>
                </select>
            </div>

            <!-- BUTTON REGISTER -->
            <button type="submit" style="width:100%; padding:0.9rem; background:linear-gradient(135deg, var(--success), #059669); color:#fff; border:none; border-radius:10px; font-size:1rem; font-weight:700; cursor:pointer; transition:0.25s; letter-spacing:0.3px;">
                ✨ Daftar Sekarang
            </button>
        </form>

        <!-- DIVIDER -->
        <div style="display:flex; align-items:center; gap:1rem; margin:1.5rem 0;">
            <div style="flex:1; height:1px; background:var(--gray-200);"></div>
            <span style="color:var(--gray-400); font-size:0.85rem;">atau</span>
            <div style="flex:1; height:1px; background:var(--gray-200);"></div>
        </div>

        <!-- LOGIN LINK -->
        <div style="text-align:center;">
            <p style="color:var(--gray-600); font-size:0.95rem;">
                Sudah punya akun?
                <a href="?page=login" style="font-weight:700; color:var(--primary); text-decoration:none; transition:0.2s;">
                    Login sekarang →
                </a>
            </p>
        </div>

        <!-- BACK TO HOME -->
        <div style="text-align:center; margin-top:1rem;">
            <a href="?page=home" style="color:var(--gray-400); font-size:0.85rem; text-decoration:none; transition:0.2s;">
                ← Kembali ke Beranda
            </a>
        </div>
    </div>
</div>

<script>
    // Fungsi toggle password visibility
    function togglePassword(inputId, btn) {
        const input = document.getElementById(inputId);
        if (input.type === 'password') {
            input.type = 'text';
            btn.textContent = '🙈';
        } else {
            input.type = 'password';
            btn.textContent = '👁️';
        }
    }

    // Validasi konfirmasi password saat form disubmit
    function validatePassword() {
        const password = document.getElementById('password').value;
        const konfirmasi = document.getElementById('konfirmasi_password').value;
        const msg = document.getElementById('passwordMatchMsg');

        if (password !== konfirmasi) {
            msg.style.display = 'block';
            msg.style.color = '#dc2626';
            msg.textContent = '❌ Password dan konfirmasi tidak sama!';
            document.getElementById('konfirmasi_password').style.borderColor = '#dc2626';
            return false;
        } else {
            msg.style.display = 'none';
            document.getElementById('konfirmasi_password').style.borderColor = 'var(--gray-200)';
            return true;
        }
    }

    // Validasi real-time saat mengetik konfirmasi password
    document.addEventListener('DOMContentLoaded', function() {
        const password = document.getElementById('password');
        const konfirmasi = document.getElementById('konfirmasi_password');
        const msg = document.getElementById('passwordMatchMsg');

        konfirmasi.addEventListener('input', function() {
            if (this.value.length === 0) {
                msg.style.display = 'none';
                this.style.borderColor = 'var(--gray-200)';
                return;
            }
            if (password.value === this.value) {
                msg.style.display = 'block';
                msg.style.color = '#16a34a';
                msg.textContent = '✅ Password cocok';
                this.style.borderColor = '#16a34a';
            } else {
                msg.style.display = 'block';
                msg.style.color = '#dc2626';
                msg.textContent = '❌ Password tidak sama';
                this.style.borderColor = '#dc2626';
            }
        });

        password.addEventListener('input', function() {
            if (konfirmasi.value.length > 0) {
                if (this.value === konfirmasi.value) {
                    msg.style.display = 'block';
                    msg.style.color = '#16a34a';
                    msg.textContent = '✅ Password cocok';
                    konfirmasi.style.borderColor = '#16a34a';
                } else {
                    msg.style.display = 'block';
                    msg.style.color = '#dc2626';
                    msg.textContent = '❌ Password tidak sama';
                    konfirmasi.style.borderColor = '#dc2626';
                }
            }
        });
    });
</script>

<style>
    /* style tambahan jika diperlukan */
    .alert-success {
        background: #d1fae5;
        color: #065f46;
        border-left: 4px solid #10b981;
    }
    .alert-danger {
        background: #fee2e2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }
</style>

<?php include __DIR__ . '/../layouts/footer.php'; ?>