<?php require APPROOT . '/app/Views/layouts/header.php'; ?>

<div class="max-w-2xl mx-auto mt-10 mb-10">
    <div class="bg-white dark:bg-gray-800 p-8 md:p-10 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-blue-500"></div>
        <div class="text-center mb-8">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Create Account</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Please fill out this form to register.</p>
        </div>
        
        <form action="<?php echo URLROOT; ?>/users/register" method="POST" class="space-y-8">
            <?php echo csrfField(); ?>
            
            <!-- Core Details -->
            <div>
                <h3 class="text-sm font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700/50 pb-2 mb-4">Account Details</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div class="md:col-span-2">
                        <label for="name" class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Full Name</label>
                        <input type="text" name="name" class="w-full px-4 py-2.5 rounded-lg border <?php echo (!empty($data['name_err'])) ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'; ?> bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:outline-none transition-colors" value="<?php echo htmlspecialchars($data['name']); ?>" autofocus>
                        <span class="text-xs text-red-500 mt-1 block"><?php echo $data['name_err']; ?></span>
                    </div>
                    <div class="md:col-span-2">
                        <label for="email" class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Email Address</label>
                        <input type="email" name="email" class="w-full px-4 py-2.5 rounded-lg border <?php echo (!empty($data['email_err'])) ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'; ?> bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:outline-none transition-colors" value="<?php echo htmlspecialchars($data['email']); ?>">
                        <span class="text-xs text-red-500 mt-1 block"><?php echo $data['email_err']; ?></span>
                    </div>
                    <div>
                        <label for="password" class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Password</label>
                        <input type="password" name="password" class="w-full px-4 py-2.5 rounded-lg border <?php echo (!empty($data['password_err'])) ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'; ?> bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:outline-none transition-colors" value="<?php echo htmlspecialchars($data['password']); ?>">
                        <span class="text-xs text-red-500 mt-1 block"><?php echo $data['password_err']; ?></span>
                    </div>
                    <div>
                        <label for="confirm_password" class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Confirm Password</label>
                        <input type="password" name="confirm_password" class="w-full px-4 py-2.5 rounded-lg border <?php echo (!empty($data['confirm_password_err'])) ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'; ?> bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:outline-none transition-colors" value="<?php echo htmlspecialchars($data['confirm_password']); ?>">
                        <span class="text-xs text-red-500 mt-1 block"><?php echo $data['confirm_password_err']; ?></span>
                    </div>
                </div>
            </div>

            <!-- Contact & Address Information -->
            <div>
                <h3 class="text-sm font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700/50 pb-2 mb-4">Contact & Address Details</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div class="md:col-span-2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Contact Number</label>
                        <input type="text" name="contact_number" value="<?php echo htmlspecialchars($data['contact_number'] ?? ''); ?>" placeholder="+27 82 123 4567" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Street Address</label>
                        <input type="text" name="address_street" value="<?php echo htmlspecialchars($data['address_street'] ?? ''); ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Suburb</label>
                        <input type="text" name="address_suburb" value="<?php echo htmlspecialchars($data['address_suburb'] ?? ''); ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">City</label>
                        <input type="text" name="address_city" value="<?php echo htmlspecialchars($data['address_city'] ?? ''); ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">State / Province</label>
                        <input type="text" name="address_state" value="<?php echo htmlspecialchars($data['address_state'] ?? ''); ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Postal / Zip Code</label>
                        <input type="text" name="address_zip" value="<?php echo htmlspecialchars($data['address_zip'] ?? ''); ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Country</label>
                        <input type="text" name="address_country" value="<?php echo htmlspecialchars($data['address_country'] ?? ''); ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                </div>
            </div>

            <!-- SPAM Protection -->
            <div class="p-5 bg-gray-50 dark:bg-gray-900/30 rounded-xl border <?php echo (!empty($data['captcha_err'])) ? 'border-red-500' : 'border-gray-200 dark:border-gray-700/50'; ?>">
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-3">Spam Protection Verification</label>
                <div class="flex items-center space-x-4">
                    <div class="px-4 py-2.5 bg-white dark:bg-gray-800 rounded-lg shadow-sm font-mono text-lg font-bold text-primary tracking-widest whitespace-nowrap border border-gray-200 dark:border-gray-700">
                        <?php echo $data['captcha_num1'] . ' + ' . $data['captcha_num2'] . ' = ?'; ?>
                    </div>
                    <input type="number" name="captcha" placeholder="Answer" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none font-mono transition-colors">
                </div>
                <span class="text-xs text-red-500 mt-2 block"><?php echo $data['captcha_err'] ?? ''; ?></span>
            </div>

            <div class="pt-4 flex flex-col space-y-4">
                <button type="submit" class="w-full bg-primary hover:opacity-90 text-white font-bold py-3 px-6 rounded-lg transition-all focus:ring-4 focus:ring-primary/50 shadow-sm">
                    Register Account
                </button>
                <div class="text-center">
                    <a href="<?php echo URLROOT; ?>/users/login" class="text-sm text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary font-medium transition-colors">
                        Already have an account? <span class="font-bold">Login</span>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<?php require APPROOT . '/app/Views/layouts/footer.php'; ?>