<div class="card border-0 shadow-lg p-4 glass-card">
    <div class="card-body">
        <h4 class="fw-bold font-outfit text-dark text-center mb-4">Create Account</h4>

        <form action="<?= APP_URL ?>/register" method="POST" id="registerForm">
            <?= csrf_field() ?>

            <!-- Role Selector Tabs -->
            <div class="mb-4">
                <label class="form-label text-sm fw-medium d-block text-center mb-2">Select Your Role</label>
                <div class="btn-group w-100" role="group" aria-label="Role selection">
                    <input type="radio" class="btn-check" name="role" id="role_student" value="student" <?= ($old['role'] ?? 'student') === 'student' ? 'checked' : '' ?>>
                    <label class="btn btn-outline-primary rounded-start-pill py-2 font-outfit text-sm" for="role_student">
                        <i class="fa-solid fa-user-graduate me-1"></i> Student
                    </label>

                    <input type="radio" class="btn-check" name="role" id="role_mentor" value="mentor" <?= ($old['role'] ?? '') === 'mentor' ? 'checked' : '' ?>>
                    <label class="btn btn-outline-primary py-2 font-outfit text-sm" for="role_mentor">
                        <i class="fa-solid fa-user-tie me-1"></i> Mentor
                    </label>

                    <input type="radio" class="btn-check" name="role" id="role_tutor" value="tutor" <?= ($old['role'] ?? '') === 'tutor' ? 'checked' : '' ?>>
                    <label class="btn btn-outline-primary rounded-end-pill py-2 font-outfit text-sm" for="role_tutor">
                        <i class="fa-solid fa-chalkboard-user me-1"></i> Tutor
                    </label>
                </div>
                <?php if (isset($errors['role'])): ?>
                    <div class="text-danger text-xs mt-1"><?= $errors['role'] ?></div>
                <?php endif; ?>
            </div>

            <!-- Dynamic Role Descriptions -->
            <div id="role-info" class="alert alert-info border-0 text-xs py-2 px-3 mb-4 rounded-3 text-center">
                <span id="role-desc">Gain access to university search, career assessments, and mentor requests.</span>
            </div>

            <div class="row g-3">
                <div class="col-md-6">
                    <label for="first_name" class="form-label text-sm fw-medium">First Name</label>
                    <input type="text" class="form-control bg-light rounded-3 <?= isset($errors['first_name']) ? 'is-invalid' : '' ?>" id="first_name" name="first_name" value="<?= htmlspecialchars($old['first_name'] ?? '') ?>" required>
                    <?php if (isset($errors['first_name'])): ?>
                        <div class="invalid-feedback text-xs"><?= $errors['first_name'] ?></div>
                    <?php endif; ?>
                </div>
                <div class="col-md-6">
                    <label for="last_name" class="form-label text-sm fw-medium">Last Name</label>
                    <input type="text" class="form-control bg-light rounded-3 <?= isset($errors['last_name']) ? 'is-invalid' : '' ?>" id="last_name" name="last_name" value="<?= htmlspecialchars($old['last_name'] ?? '') ?>" required>
                    <?php if (isset($errors['last_name'])): ?>
                        <div class="invalid-feedback text-xs"><?= $errors['last_name'] ?></div>
                    <?php endif; ?>
                </div>

                <div class="col-12">
                    <label for="email" class="form-label text-sm fw-medium">Email Address</label>
                    <input type="email" class="form-control bg-light rounded-3 <?= isset($errors['email']) ? 'is-invalid' : '' ?>" id="email" name="email" value="<?= htmlspecialchars($old['email'] ?? '') ?>" placeholder="name@example.com" required>
                    <?php if (isset($errors['email'])): ?>
                        <div class="invalid-feedback text-xs"><?= $errors['email'] ?></div>
                    <?php endif; ?>
                </div>

                <div class="col-12">
                    <label for="phone" class="form-label text-sm fw-medium">Phone Number</label>
                    <input type="tel" class="form-control bg-light rounded-3 <?= isset($errors['phone']) ? 'is-invalid' : '' ?>" id="phone" name="phone" value="<?= htmlspecialchars($old['phone'] ?? '') ?>" placeholder="e.g. +233501234567" required>
                    <?php if (isset($errors['phone'])): ?>
                        <div class="invalid-feedback text-xs"><?= $errors['phone'] ?></div>
                    <?php endif; ?>
                </div>

                <div class="col-md-6">
                    <label for="password" class="form-label text-sm fw-medium">Password</label>
                    <input type="password" class="form-control bg-light rounded-3 <?= isset($errors['password']) ? 'is-invalid' : '' ?>" id="password" name="password" placeholder="Min. 8 characters" required>
                    <?php if (isset($errors['password'])): ?>
                        <div class="invalid-feedback text-xs"><?= $errors['password'] ?></div>
                    <?php endif; ?>
                </div>
                <div class="col-md-6">
                    <label for="password_confirm" class="form-label text-sm fw-medium">Confirm Password</label>
                    <input type="password" class="form-control bg-light rounded-3 <?= isset($errors['password_confirm']) ? 'is-invalid' : '' ?>" id="password_confirm" name="password_confirm" required>
                    <?php if (isset($errors['password_confirm'])): ?>
                        <div class="invalid-feedback text-xs"><?= $errors['password_confirm'] ?></div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="mt-4 mb-3">
                <button type="submit" class="btn btn-primary w-100 rounded-pill py-2 font-outfit fw-bold shadow-sm">Register</button>
            </div>
        </form>

        <hr class="my-4 text-muted opacity-25">

        <p class="text-center text-sm text-muted mb-0">
            Already have an account? <a href="<?= APP_URL ?>/login" class="fw-semibold text-primary">Sign In</a>
        </p>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const roleStudent = document.getElementById('role_student');
    const roleMentor = document.getElementById('role_mentor');
    const roleTutor = document.getElementById('role_tutor');
    const roleDesc = document.getElementById('role-desc');

    function updateDescription() {
        if (roleStudent.checked) {
            roleDesc.textContent = "Sign up as an SHS Student to search universities/scholarships, predict admission, take career quizzes, and request mentorship.";
        } else if (roleMentor.checked) {
            roleDesc.textContent = "Sign up as a Mentor to guide transition students. Mentors represent specific universities and programs and require admin verification.";
        } else if (roleTutor.checked) {
            roleDesc.textContent = "Sign up as an Academic Prep Tutor to conduct virtual tutoring session modules for first-year subjects (Math, Writing, etc.).";
        }
    }

    roleStudent.addEventListener('change', updateDescription);
    roleMentor.addEventListener('change', updateDescription);
    roleTutor.addEventListener('change', updateDescription);
    
    // Initial run
    updateDescription();
});
</script>
