<!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>TempHire • Future of Work</title>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.7.2/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="min-h-screen bg-gradient-to-br from-base-300 via-base-100 to-base-300 text-base-content">
    <?php include 'navbar.php'; ?>

    <div class="hero min-h-[70vh] bg-base-200 relative overflow-hidden">
        <div class="absolute inset-0 bg-grid-slate-900/[0.04] bg-[size:40px_40px]"></div>
        <div class="hero-content text-center">
            <div class="max-w-xl relative z-10">
                <h1
                    class="text-5xl font-bold mb-8 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">
                    The Future of Work
                </h1>
                <p class="py-6 text-lg">Discover opportunities that match your schedule and skills in real-time.</p>

                <form action="search_results.php" method="GET"
                    class="join w-full backdrop-blur-sm bg-base-100/50 rounded-lg p-1">
                    <input name="search" class="input join-item flex-1 !outline-none border-primary/20"
                        placeholder="Search for jobs..."
                        value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>" />
                    <button type="submit" class="btn join-item btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </button>
                    <button type="button" class="btn join-item"
                        onclick="document.getElementById('filter_modal').showModal()">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                        </svg>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="container mx-auto p-8">
        <h2 class="text-3xl font-bold mb-8 text-center">Featured Job Posts</h2>
        <div class="grid grid-cols-1 gap-4">
            <?php
            include 'connect.php';

            // Query to get featured jobs (most recent 3 jobs)
            $sql = "SELECT * FROM job_postings ORDER BY posted_date DESC LIMIT 3";
            $stmt = $conn->prepare($sql);
            $stmt->execute();
            $result = $stmt->get_result();

            if ($result->num_rows > 0) {
                while ($job = $result->fetch_assoc()) {
                    ?>
                    <div class="card bg-base-200 shadow-xl hover:shadow-primary/10 transition-all">
                        <div class="card-body">
                            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                                <div>
                                    <h3 class="card-title"><?= htmlspecialchars($job['job_title']) ?></h3>
                                    <div class="flex flex-wrap gap-2 mt-2">
                                        <span class="badge badge-outline"><?= htmlspecialchars($job['location']) ?></span>
                                        <span class="badge badge-primary"><?= htmlspecialchars($job['salary']) ?></span>
                                    </div>
                                    <p class="mt-2"><?= htmlspecialchars(substr($job['job_description'], 0, 150)) ?>...</p>
                                </div>
                                <a href="job_details.php?id=<?= $job['job_id'] ?>" class="btn btn-primary">View Details</a>
                            </div>
                        </div>
                    </div>
                    <?php
                }
            } else {
                echo "<p class='text-center'>No jobs available.</p>";
            }
            $conn->close();
            ?>
            <div class="text-center mt-4">
                <a href="alljobs.php"><button class="btn btn-outline btn-primary btn-sm">View More</button></a>
            </div>
        </div>
    </div>


    <dialog id="filter_modal" class="modal modal-bottom sm:modal-middle">
    <form action="search_results.php" method="GET" class="modal-box bg-base-200">
        <!-- Preserve search term -->
        <input type="hidden" name="search" value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
        
        <h3 class="font-bold text-lg mb-4">Filter Options</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="form-control w-full">
                <label class="label">
                    <span class="label-text">Job Type</span>
                </label>
                <select name="job_type" class="select select-bordered">
                    <option value="">Select Type</option>
                    <option value="Childcare and Petcare" <?php echo (isset($_GET['job_type']) && $_GET['job_type'] == 'Childcare and Petcare') ? 'selected' : ''; ?>>Childcare and Petcare</option>
                    <option value="Cleaning and Maintenance" <?php echo (isset($_GET['job_type']) && $_GET['job_type'] == '"Cleaning and Maintenance') ? 'selected' : ''; ?>>Cleaning and Maintenance</option>
                    <option value="Delivery and Logistics" <?php echo (isset($_GET['job_type']) && $_GET['job_type'] == 'Delivery and Logistics') ? 'selected' : ''; ?>>Delivery and Logistics</option>
                    <option value="Seasonal" <?php echo (isset($_GET['job_type']) && $_GET['job_type'] == 'Seasonal') ? 'selected' : ''; ?>>Seasonal</option>
                </select>
            </div>

            <div class="form-control w-full">
                <label class="label">
                    <span class="label-text">Salary Type</span>
                </label>
                <select name="salary_type" class="select select-bordered">
                    <option value="">Select Range</option>
                    <option value="Hourly" <?php echo (isset($_GET['salary_type']) && $_GET['salary_type'] == 'Hourly') ? 'selected' : ''; ?>>Hourly</option>
                    <option value="Daily" <?php echo (isset($_GET['salary_type']) && $_GET['salary_type'] == 'Daily') ? 'selected' : ''; ?>>Daily</option>
                </select>
            </div>

            <div class="form-control w-full">
                <label class="label">
                    <span class="label-text">Skills Level</span>
                </label>
                <select name="skill_level" class="select select-bordered">
                    <option value="">Select Level</option>
                    <option value="Entry Level" <?php echo (isset($_GET['skill_level']) && $_GET['skills_level'] == 'entry') ? 'selected' : ''; ?>>Entry Level</option>
                    <option value="Intermediate" <?php echo (isset($_GET['skill_level']) && $_GET['skills_level'] == 'intermediate') ? 'selected' : ''; ?>>Intermediate</option>
                    <option value="Experienced" <?php echo (isset($_GET['skill_level']) && $_GET['skills_level'] == 'experienced') ? 'selected' : ''; ?>>Experienced</option>
                </select>
            </div>
        </div>

        <div class="modal-action">
            <button type="button" class="btn btn-ghost" onclick="resetFilters(this.form)">Reset</button>
            <button type="submit" class="btn btn-primary">Apply Filters</button>
        </div>
    </form>

    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>

<script>
function resetFilters(form) {
    // Preserve the search term while resetting other fields
    const searchValue = form.querySelector('input[name="search"]').value;
    form.reset();
    form.querySelector('input[name="search"]').value = searchValue;
}
</script>

    <div class="container mx-auto p-8">
        <h2 class="text-3xl font-bold mb-8 text-center">How It Works</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="card bg-base-200 shadow-xl">
                <div class="card-body items-center text-center">
                    <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center mb-4">
                        <span class="text-2xl font-bold text-primary">1</span>
                    </div>
                    <h3 class="card-title">Create Profile</h3>
                    <p>Sign up and create your professional profile with skills and experience</p>
                </div>
            </div>

            <div class="card bg-base-200 shadow-xl">
                <div class="card-body items-center text-center">
                    <div class="w-16 h-16 rounded-full bg-secondary/20 flex items-center justify-center mb-4">
                        <span class="text-2xl font-bold text-secondary">2</span>
                    </div>
                    <h3 class="card-title">Find Jobs</h3>
                    <p>Search and filter jobs that match your skills and schedule</p>
                </div>
            </div>

            <div class="card bg-base-200 shadow-xl">
                <div class="card-body items-center text-center">
                    <div class="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center mb-4">
                        <span class="text-2xl font-bold text-accent">3</span>
                    </div>
                    <h3 class="card-title">Start Working</h3>
                    <p>Apply, get hired, and start earning on your terms</p>
                </div>
            </div>
        </div>
    </div>



    <div class="container mx-auto p-8">
        <h2 class="text-3xl font-bold mb-8 text-center">Why to choose the temphire</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="card bg-base-200 shadow-xl">
                <div class="card-body">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="avatar placeholder">
                            <div class="bg-neutral-focus text-neutral-content rounded-full w-16">
                                <span class="text-xl"></span>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold">FOR JOB SEEKERS</h3>

                        </div>
                    </div>
                    <p>Flexible job options</p>
                    <p>User-friendly platform</p>
                    <p>Diverse job Listings</p>
                </div>
            </div>

            <div class="card bg-base-200 shadow-xl">
                <div class="card-body">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="avatar placeholder">
                            <div class="bg-neutral-focus text-neutral-content rounded-full w-16">
                                <span class="text-xl"></span>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold">FOR EMPLOYERS</h3>
                        </div>
                    </div>
                    <p>Access to a Wide Talent Pool</p>
                    <p>Efficient Hiring Process</p>
                    <p>Verified Job Seekers</p>
                </div>
            </div>
        </div>
    </div>
    <?php include 'footer.php'; ?>



</body>

</html>