<?php
include 'header.php';
include 'db_connect.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    include 'auth.php';
    signup();
}
?>

<main class="container mx-auto px-4 py-8">
    <section id="signupSection" class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
        <div class="text-center mb-6">
            <h2 class="text-2xl font-bold text-secondary">Create Account</h2>
            <p class="text-gray-600 mt-2">Join our secure platform</p>
        </div>
        
        <form id="signupForm" method="POST" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First Name<span class="text-red-500">*</span></label>
                    <input type="text" id="firstName" name="firstName" required pattern="[A-Za-z]{2,}" title="Please enter your real first name (letters only)" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition">
                    <p class="text-xs text-red-500 mt-1 hidden firstNameError">Please enter a valid first name (minimum 2 letters)</p>
                </div>
                
                <div>
                    <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name<span class="text-red-500">*</span></label>
                    <input type="text" id="lastName" name="lastName" required pattern="[A-Za-z]{2,}" title="Please enter your real last name (letters only)" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition">
                    <p class="text-xs text-red-500 mt-1 hidden lastNameError">Please enter a valid last name (minimum 2 letters)</p>
                </div>
            </div>
            
            <div>
                <label for="signupEmail" class="block text-sm font-medium text-gray-700 mb-1">Email<span class="text-red-500">*</span></label>
                <input type="email" id="signupEmail" name="email" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition">
                <p class="text-xs text-red-500 mt-1 hidden emailError">Please enter a valid email address</p>
            </div>
            
            <div>
                <label for="signupPassword" class="block text-sm font-medium text-gray-700 mb-1">Password<span class="text-red-500">*</span></label>
                <div class="relative">
                    <input type="password" id="signupPassword" name="password" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition pr-10" onkeyup="checkPasswordStrength(this.value)">
                    <i class="far fa-eye toggle-password" onclick="togglePassword('signupPassword')"></i>
                </div>
                <div class="h-1 bg-gray-200 rounded-full overflow-hidden mt-2">
                    <div id="passwordStrength" class="password-strength strength-0"></div>
                </div>
                <p id="passwordHint" class="text-xs mt-1 text-gray-500">Password must be at least 8 characters, with uppercase, lowercase, number, and special character.</p>
            </div>
            
            <div>
                <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password<span class="text-red-500">*</span></label>
                <div class="relative">
                    <input type="password" id="confirmPassword" name="confirmPassword" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition pr-10">
                    <i class="far fa-eye toggle-password" onclick="togglePassword('confirmPassword')"></i>
                </div>
                <p class="text-xs text-red-500 mt-1 hidden passwordMatchError">Passwords do not match</p>
            </div>
            
            <div class="flex items-center">
                <input type="checkbox" id="acceptTerms" name="acceptTerms" required class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                <label for="acceptTerms" class="ml-2 block text-sm text-gray-700">I accept the <a href="#" class="text-primary hover:underline">Terms and Conditions</a></label>
            </div>
            
            <button type="submit" class="w-full bg-primary hover:bg-orange-700 text-white py-2 px-4 rounded-lg font-medium transition">Create Account</button>
        </form>
        
        <div class="mt-6 text-center">
            <p class="text-gray-600">Already have an account? <button onclick="window.location.href='login.php'" class="text-primary font-medium hover:underline">Log in</button></p>
        </div>
    </section>
</main>

<?php include 'footer.php'; ?>