<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Account - Temphire</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/2.6.0/full.css" rel="stylesheet">
    <script>
        function validateForm() {
            const password = document.getElementById('password').value;
            const contact = document.getElementById('contact').value;
            const passwordError = document.getElementById('password-error');
            const contactError = document.getElementById('contact-error');

            let isValid = true;

            // Password validation
            const passwordCriteria = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
            if (!passwordCriteria.test(password)) {
                passwordError.textContent = "Password must be at least 8 characters long, include at least one uppercase letter, one lowercase letter, one number, and one special character.";
                isValid = false;
            } else {
                passwordError.textContent = "";
            }

            // Contact validation
            const contactCriteria = /^\d{10}$/;
            if (!contactCriteria.test(contact)) {
                contactError.textContent = "Contact number must be exactly 10 digits.";
                isValid = false;
            } else {
                contactError.textContent = "";
            }

            return isValid;
        }
    </script>
</head>
<body class="min-h-screen bg-base-200">
    <?php include 'navbar.php'; ?>

    <div class="hero min-h-screen bg-base-200">
        <div class="hero-content flex-col lg:flex-row-reverse">
            <div class="card flex-shrink-0 w-full max-w-lg shadow-2xl bg-base-100">
                <div class="card-body">
                    <h2 class="card-title text-2xl font-bold text-center mb-6">Create Account</h2>
                    
                    <form method="post" action="register.php" class="space-y-4" onsubmit="return validateForm();">
                        <!-- Name Fields -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="form-control">
                                <label class="label">
                                    <span class="label-text">First name</span>
                                </label>
                                <input type="text" id="fname" name="fname" class="input input-bordered w-full" required />
                            </div>
                            <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Last name</span>
                                </label>
                                <input type="text" id="lname" name="lname" class="input input-bordered w-full" required />
                            </div>
                        </div>

                        <!-- User Type -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">User Type</span>
                            </label>
                            <select name="user_type" id="user_type" class="select select-bordered w-full" required>
                                <option value="Job seeker">Job seeker</option>
                                <option value="Employer">Employer</option>
                            </select>
                        </div>

                        <!-- Contact -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Contact</span>
                            </label>
                            <input type="text" name="contact" id="contact" class="input input-bordered w-full" inputmode="numeric" pattern="\d*" required />
                            <small id="contact-error" class="text-error"></small>
                        </div>

                        <!-- Email -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Email address</span>
                            </label>
                            <input type="email" id="email" name="email" class="input input-bordered w-full" required />
                        </div>

                        <!-- Username -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Username</span>
                            </label>
                            <input type="text" name="username" id="username" class="input input-bordered w-full" />
                        </div>

                        <!-- Password -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Password</span>
                            </label>
                            <input type="password" name="password" id="password" class="input input-bordered w-full" required />
                            <small id="password-error" class="text-error"></small>
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" name="signup" class="btn btn-primary btn-sm w-full">Sign up</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <?php include 'footer.php'; ?>
</body>
</html>
