<?php
require_once __DIR__ . '/config/bootstrap.php';
Auth::requireGuest('/dashboard');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register — DroidTester</title>
    <meta name="description" content="Create your DroidTester publisher account and start beta testing your apps with real users.">
    <link rel="canonical" href="<?= e(APP_URL) ?>/register">
    <meta name="theme-color" content="#1B7A43">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/landing.css">
    <link rel="stylesheet" href="/assets/css/auth.css">
    <link rel="stylesheet" href="/assets/css/responsive.css">
</head>
<body class="auth-page">

    <nav class="navbar navbar-expand-lg public-navbar">
        <div class="container">
            <a class="navbar-brand-custom" href="/">
                <div class="navbar-logo-icon"><i class="bi bi-gear-fill"></i></div>
                DroidTester
            </a>
            <div class="d-flex gap-2 ms-auto auth-nav-btns">
                <a href="/login" class="btn-outline-green" style="padding:8px 20px;font-size:13px;">Login</a>
                <a href="/register" class="btn-dark-custom" style="padding:8px 20px;font-size:13px;">Register <i class="bi bi-arrow-right"></i></a>
            </div>
        </div>
    </nav>

    <div class="auth-content">
        <div class="auth-container">
            <div class="auth-badge text-center">
                <span class="badge-green"><i class="bi bi-star-fill" style="color:#FFD700"></i> Best Tester Services</span>
            </div>
            <h1 class="auth-title text-center">Register With your Details</h1>
            <p class="auth-subtitle text-center mx-auto">A powerful platform where testers and developers connect to ensure quality and the best app experience.</p>

            <div class="auth-grid">
                <div class="auth-form-col">
                    <form id="registerForm" autocomplete="on">
                        <div class="auth-input-pill">
                            <div class="input-icon-circle"><i class="bi bi-person-fill"></i></div>
                            <input type="text" id="regName" name="name" placeholder="Full Name" required minlength="2" maxlength="120" autocomplete="name">
                        </div>
                        <div class="auth-input-pill">
                            <div class="input-icon-circle"><i class="bi bi-envelope-fill"></i></div>
                            <input type="email" id="regEmail" name="email" placeholder="Email Address" required autocomplete="email">
                        </div>
                        <div class="auth-input-pill">
                            <div class="input-icon-circle"><i class="bi bi-telephone-fill"></i></div>
                            <input type="tel" id="regPhone" name="phone" placeholder="Phone (optional)" autocomplete="tel">
                        </div>
                        <div class="auth-input-pill">
                            <div class="input-icon-circle"><i class="bi bi-lock-fill"></i></div>
                            <input type="password" id="regPassword" name="password" placeholder="Password (8+ chars, letters & numbers)" required minlength="8" autocomplete="new-password">
                        </div>
                        <div class="auth-input-pill">
                            <div class="input-icon-circle"><i class="bi bi-shield-lock-fill"></i></div>
                            <input type="password" id="regConfirm" name="confirm_password" placeholder="Confirm Password" required autocomplete="new-password">
                        </div>
                        <div class="d-flex align-items-start gap-2 mb-3" style="font-size:13px">
                            <input type="checkbox" id="termsAgree" required style="margin-top:3px;flex-shrink:0">
                            <label for="termsAgree">I agree to DroidTester's <a href="/terms-condition" target="_blank">Terms</a> and <a href="/privacy-policy" target="_blank">Privacy Policy</a>.</label>
                        </div>
                        <button type="submit" class="auth-btn-main">Register Account <i class="bi bi-arrow-right"></i></button>
                    </form>
                </div>

                <div class="auth-divider"><span></span></div>

                <div class="auth-social-col">
                    <button class="social-btn" onclick="showSocialAlert('Google')">
                        <div class="social-icon-circle social-icon-google">G</div>
                        Continue with Google
                    </button>
                    <button class="social-btn" onclick="showSocialAlert('Facebook')">
                        <div class="social-icon-circle social-icon-facebook"><i class="bi bi-facebook"></i></div>
                        Continue with Facebook
                    </button>
                    <a href="/login" class="social-secondary-btn">
                        <i class="bi bi-person-fill"></i> Login To Your Account
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="auth-mini-footer">
        <div>
            <a href="/privacy-policy">Privacy Policy</a>
            <span class="separator">|</span>
            <a href="/terms-condition">Terms &amp; Condition</a>
        </div>
        <span class="copyright">© <?= date('Y') ?> DroidTester | Zodroid Media</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="/assets/js/main.js"></script>
    <script>
    const Toast = Swal.mixin({
        toast: true, position: 'top-end', showConfirmButton: false,
        timer: 3500, timerProgressBar: true,
        didOpen: t => { t.onmouseenter = Swal.stopTimer; t.onmouseleave = Swal.resumeTimer; }
    });
    function showSocialAlert(p) {
        Swal.fire({ title: 'Coming Soon!', text: p + ' login is under development.', icon: 'info', confirmButtonColor: '#1B7A43' });
    }

    document.getElementById('registerForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        if (!document.getElementById('termsAgree').checked) {
            Toast.fire({ icon: 'warning', title: 'Please agree to the terms.' });
            return;
        }
        const pwd = document.getElementById('regPassword').value;
        const conf = document.getElementById('regConfirm').value;
        if (pwd !== conf) {
            Toast.fire({ icon: 'error', title: 'Passwords do not match.' });
            return;
        }

        const btn = this.querySelector('button[type="submit"]');
        const orig = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> Creating Account...';

        try {
            const fd = new FormData(this);
            const res = await fetch('/api/auth/register', { method: 'POST', body: fd });
            const data = await res.json();

            if (data.status === 'success') {
                Toast.fire({ icon: 'success', title: data.message });
                setTimeout(() => { window.location.href = (data.data && data.data.redirect) || '/dashboard'; }, 800);
            } else {
                Toast.fire({ icon: 'error', title: data.message });
                btn.disabled = false;
                btn.innerHTML = orig;
            }
        } catch (err) {
            Toast.fire({ icon: 'error', title: 'Network error. Please try again.' });
            btn.disabled = false;
            btn.innerHTML = orig;
        }
    });
    </script>
</body>
</html>
