<?php include('header.php');

$data = file_get_contents('jobs.json');

$jobs = json_decode($data,true);

?>

<style>
    .single-job-item{
        background: #f3f9ff;
        box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
        
        
    }
    .single-job-item .job-title{
        background: var(--accent-color);
        padding: 10px 20px;
        color: #fff;
        font-size: 1.2rem;
    }
    .single-job-item .job-content{
        padding: 20px;
    }
    .job-content-icons{
        display:flex;
        gap: 20px;
    }
    .job-content-icons i{
        font-size: 1.4rem;
        color: var(--accent-color);
    }
</style>
  
<!-- Page Title -->
<div class="page-title light-background">
  <div class="container">
    <h1>Search for Jobs</h1>
    <nav class="breadcrumbs">
      <ol>
        <li><a href="/">Home</a></li>
        <li class="current">Jobs</li>
      </ol>
    </nav>
  </div>
</div><!-- End Page Title -->

<section>
    <div class="container">
        <form>
            <div class="row search-area">
                <div class="col-lg-8">
                    <input class="form-control" placeholder="Search for Jobs...">
                </div>
                <div class="col-lg-4 hero-buttons">
                    <button class="btn btn-primary px-4">Search</button>
                </div>
            </div>
        </form>
    </div>
</section>

<section class="service-details section">

  <div class="container">

    <div class="row gy-5">

      <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">

        <div class="service-box">
          <h4>Job Categories</h4>
          <div class="services-list">
            <a href="#" class=""><i class="bi bi-arrow-right-circle"></i><span>Web Developer</span></a>
            <a href="#" class=""><i class="bi bi-arrow-right-circle"></i><span>Software Engineer</span></a>
            <a href="#" class=""><i class="bi bi-arrow-right-circle"></i><span>Accountant</span></a>
            <a href="#" class=""><i class="bi bi-arrow-right-circle"></i><span>HR Manager</span></a>
            <a href="#" class=""><i class="bi bi-arrow-right-circle"></i><span>Business Analyst</span></a>
            <a href="#" class=""><i class="bi bi-arrow-right-circle"></i><span>Project Manager</span></a>
            <a href="#" class=""><i class="bi bi-arrow-right-circle"></i><span>Recruitment Specialist</span></a>
            <a href="#" class=""><i class="bi bi-arrow-right-circle"></i><span>Payroll Administrator</span></a>
            <a href="#" class=""><i class="bi bi-arrow-right-circle"></i><span>Customer Support Executive</span></a>
            <a href="#" class=""><i class="bi bi-arrow-right-circle"></i><span>Data Analyst</span></a>

          </div>
        </div><!-- End Services List -->

        

        <div class="help-box d-flex flex-column justify-content-center align-items-center">
          <i class="bi bi-headset help-icon"></i>
          <h4>Have a Question?</h4>
          <p class="d-flex align-items-center mt-2 mb-0"><i class="bi bi-telephone me-2"></i> <span>+1-123-4567-890</span></p>
          <p class="d-flex align-items-center mt-1 mb-0"><i class="bi bi-envelope me-2"></i> <a href="mailto:Info@hiregorithm.com">jobs@hiregorithm.com</a></p>
        </div>

      </div>

      <div class="col-lg-8 ps-lg-5" data-aos="fade-up" data-aos-delay="200">
        
            <div class="job-list">
                <?php foreach($jobs as $job): ?>
                <div class='single-job-item'>
                    <div class="job-title">
                        <span><?=$job['title']?></span>
                    </div>
                    <div class="job-content">
                        <div class="row">
                            <div class="col-lg-10">
                                <p><?=$job['description']?></p>
                                <div  class="job-content-icons">
                                    <div>
                                        <i class="bi bi-geo"></i>
                                        <span><?=$job['location']?></span>
                                    </div>
                                    <div>
                                        <i class="bi bi-calendar-week"></i>
                                        <span><?=$job['date_posted']?></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <a class="btn btn-block btn-primary w-100 mb-2">Details </a>
                                <a class="btn btn-block btn-outline-dark w-100">Apply </a>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach ?>
            </div>
       
      </div>

    </div>

  </div>

</section>


<?php include('footer.php') ?>