<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<div class="auth-wrapper fade-in">
    <div class="auth-card rounded-4 shadow-lg" style="max-width: 500px;">
        <div class="text-center mb-4">
            <h2 class="fw-bold text-primary">Create Account</h2>
            <p class="text-muted">Join WanderLust Travels today</p>
        </div>

        <?php if(isset($validation)): ?>
            <div class="alert alert-danger rounded-3">
                <?= $validation->listErrors() ?>
            </div>
        <?php endif; ?>

        <form action="<?= base_url('auth/processRegister') ?>" method="POST">
            <?= csrf_field() ?>
            <div class="mb-3">
                <label class="form-label fw-semibold">Full Name</label>
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0 text-muted"><i class="fa-solid fa-user"></i></span>
                    <input type="text" name="name" value="<?= set_value('name') ?>" class="form-control border-start-0 ps-0" placeholder="John Doe" required>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold">Email Address</label>
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0 text-muted"><i class="fa-solid fa-envelope"></i></span>
                    <input type="email" name="email" value="<?= set_value('email') ?>" class="form-control border-start-0 ps-0" placeholder="name@example.com" required>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold">I am a...</label>
                <select name="role" class="form-select" required>
                    <option value="customer" <?= set_select('role', 'customer') ?>>Customer</option>
                    <option value="agent" <?= set_select('role', 'agent') ?>>B2B Agent</option>
                </select>
                <small class="text-muted mt-1 d-block"><i class="fa-solid fa-circle-info"></i> Agents require admin approval before booking.</small>
            </div>
            
            <div class="mb-4">
                <label class="form-label fw-semibold">Password</label>
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0 text-muted"><i class="fa-solid fa-lock"></i></span>
                    <input type="password" name="password" class="form-control border-start-0 ps-0" placeholder="••••••••" required>
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-100 py-2 mb-3">Sign Up <i class="fa-solid fa-user-plus ms-2"></i></button>

            <div class="text-center mt-3">
                <span class="text-muted">Already have an account?</span>
                <a href="<?= base_url('auth/login') ?>" class="text-primary fw-semibold text-decoration-none">Sign in here</a>
            </div>
        </form>
    </div>
</div>
<?= $this->endSection() ?>
