#I LOVE YOU EVERDAY#

<?php
require_once 'includes/db.php';
require_once 'includes/functions.php';

if (is_customer_logged_in()) {
    redirect('dashboard.php');
}
require_once 'includes/header.php';
?>

<section class="py-5 mt-5">
    <div class="container py-5">
        <div class="row justify-content-center fade-up">
            <div class="col-md-6">
                <div class="text-center mb-4">
                    <h2 class="fw-bold">Create an <span class="text-re-red">Account</span></h2>
                    <p class="text-muted">Join ReOwn to easily track your selling and inspection requests.</p>
                </div>
                
                <div class="glass-card p-4 p-md-5">
                    <?php if (isset($_GET['error'])): ?>
                        <div class="alert alert-danger py-2"><?php echo htmlspecialchars($_GET['error']); ?></div>
                    <?php endif; ?>
                    
                    <form action="api/register_customer.php" method="POST">
                        <input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label text-muted">Full Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control bg-dark text-white border-secondary" required autofocus pattern="[A-Za-z\s]+" title="Only characters are allowed" oninput="this.value = this.value.replace(/[^A-Za-z\s]/g, '')">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted">Phone Number <span class="text-danger">*</span></label>
                                <input type="tel" name="phone" class="form-control bg-dark text-white border-secondary" required pattern="[0-9]+" title="Only numbers are allowed" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted">City</label>
                                <input type="text" name="city" class="form-control bg-dark text-white border-secondary" pattern="[A-Za-z\s]+" title="Only characters are allowed" oninput="this.value = this.value.replace(/[^A-Za-z\s]/g, '')">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label text-muted">Email Address (Optional)</label>
                                <input type="email" name="email" class="form-control bg-dark text-white border-secondary">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted">Password <span class="text-danger">*</span></label>
                                <input type="password" name="password" class="form-control bg-dark text-white border-secondary" required minlength="6" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{6,}" title="Password must contain at least 6 characters, 1 uppercase letter, 1 lowercase letter, 1 number, and 1 special character">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted">Confirm Password <span class="text-danger">*</span></label>
                                <input type="password" name="confirm_password" class="form-control bg-dark text-white border-secondary" required minlength="6">
                            </div>
                            <div class="col-12 mt-4">
                                <button type="submit" class="btn btn-primary w-100 py-2 mb-3">Register</button>
                                <p class="text-center text-muted mb-0">Already have an account? <a href="login.php" class="text-re-red text-decoration-none">Login here</a></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<?php require_once 'includes/footer.php'; ?>