@extends('layouts.start')
@section('css')
    <style>
        form.search-box{
            box-shadow: none !important;
        }
    </style>
@endsection
@section('title','Home')
@section('content')
    <!-- slider Area Start-->
{{--    <div class="slider-area ">--}}
{{--        <!-- Mobile Menu -->--}}
{{--        <div class="slider-active">--}}
{{--            <div class="single-slider slider-height d-flex align-items-center" data-background="{{ asset('assets/img/hero/hero_banner_1.jpg') }}">--}}
{{--                <div class="container">--}}
{{--                    <div class="row">--}}
{{--                        <div class="col-xl-6 col-lg-9 col-md-10">--}}
{{--                            <div class="hero__caption">--}}
{{--                                <h1>Exciting Tech Jobs for African Engineers</h1>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <!-- Search Box -->--}}
{{--                    <div class="row">--}}
{{--                        <div class="col-xl-8">--}}
{{--                            <!-- form -->--}}
{{--                            <form method="get" action="{{ route('jobs.search')}}" class="search-box">--}}
{{--                                --}}{{--                                <div class="input-form">--}}
{{--                                --}}{{--                                    <input type="text" name="title" placeholder="Job Tittle or keyword">--}}
{{--                                --}}{{--                                </div>--}}
{{--                                --}}{{--                                <div class="select-form">--}}
{{--                                --}}{{--                                    <div class="select-itms">--}}
{{--                                --}}{{--                                        <select name="location" id="select1">--}}
{{--                                --}}{{--                                            <option value="Lagos">Location Lagos</option>--}}
{{--                                --}}{{--                                            <option value="us">Location US</option>--}}
{{--                                --}}{{--                                            <option value="Uk">Location UK</option>--}}
{{--                                --}}{{--                                        </select>--}}
{{--                                --}}{{--                                    </div>--}}
{{--                                --}}{{--                                </div>--}}
{{--                                <div class="search-form">--}}
{{--                                    <a href="{{ route('jobs') }}">Find jobs</a>--}}
{{--                                </div>--}}
{{--                            </form>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
    <!-- slider Area End-->

    <!-- Support Company Start-->
    <div id="about-us" class="support-company-area fix">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-xl-6 col-lg-6">
            <div class="right-caption">
              <!-- Section Tittle -->
              <div class="section-tittle section-tittle2">
                <span>What We Do</span>
                <h2>We Pair Talented African Engineers with Remote Jobs</h2>
              </div>
              <div class="support-caption">
                <p class="pera-top">
                  We help introduce companies with open engineering roles to the abundant developers resource in the African continent
                </p>
                <p>
                  We present profiles of tech talents who have gone through are thorough vetting process and are available to start as soon as possible
                </p>
                {{--                            <a href="#" class="btn post-btn">Post a job</a>--}}
              </div>
            </div>
          </div>
          <div class="col-xl-6 col-lg-6">
            <div class="support-location-img">
              <img src="{{ asset('assets/img/service/What_we_are_doing_2.jpg') }}" alt="">
              <div class="support-img-cap text-center">
                <p>Since</p>
                <span>1994</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Support Company End-->

    <!-- Our Services Start -->
    @isset($categories)
        <div class="our-services pt-100 pb-50">
            <div class="container">
                <!-- Section Tittle -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="section-tittle text-center">
                            <h2>Browse Job Categories </h2>
                        </div>
                    </div>
                </div>
                <div class="row d-flex justify-contnet-center">
                    @foreach($categories as $category)
                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
                            <div class="single-services text-center mb-30">
                              <a href="{{ route('jobs') .'?category='. $category->slug }}">
                                <div class="services-ion">
                                    <span class="{{ $category->icon }}"></span>
                                </div>
                              </a>
                                <div class="services-cap">
                                    <h5>
                                        <a href="{{ route('jobs') .'?category='. $category->slug }}">
                                            {{ $category->title }}
                                        </a>
                                    </h5>
                                    <a href="{{ route('jobs') .'?category='. $category->slug }}"><span>({{ $category->jobs->count() }})</span></a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- More Btn -->
                <!-- Section Button -->
                @if($categories->count() > 8)
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="browse-btn2 text-center mt-50">
                                <a href="{{ route('jobs') }}" class="border-btn2">Browse All Sectors</a>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    @endisset
    <!-- Our Services End -->

    <!-- Featured_job_start -->
    @isset($jobs)
        <section class="featured-job-area pt-50 pb-50">
            <div class="container">
                <!-- Section Tittle -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="section-tittle text-center">
                            <h2>Featured Jobs</h2>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-xl-10">
                        @foreach($jobs as $job)
                            <!-- single-job-content -->
                            <div class="single-job-items mb-30">
                                <div class="job-items">
                                    @if(!empty($job->logo))
                                        <div class="company-img">
                                            <a href="{{ route('job.single', ['slug' => $job->slug]) }}">
                                                <img src="{{ asset('images/job/thumbnail/' . $job->logo) }}" alt="{{ $job->title }}">
                                            </a>
                                        </div>
                                    @endisset
                                    <div class="job-tittle">
                                        <a href="{{ route('job.single', ['slug' => $job->slug]) }}"><h4>{{ $job->title }}</h4></a>
                                        <ul>
                                            <li>{{ $job->category->name }}</li>
                                            <li><i class="fas fa-map-marker-alt"></i>{{ $job->city . ', '. $job->country }}</li>
                                            <li>${{ $job->salary_range }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="items-link f-right">
                                    <a href="{{ route('job.single', ['slug' => $job->slug]) }}">{{ $job->employment_type }}</a>
                                    {{--                            <span>{{ $job->created_at->diffForHumans() }}</span>--}}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endisset
    <!-- Featured_job_end -->

    <!-- How  Apply Process Start-->
    <div class="apply-process-area apply-bg pt-150 pb-150" data-background="assets/img/gallery/how-applybg.png">
        <div class="container">
            <!-- Section Tittle -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-tittle white-text text-center">
                        <h2> How it works</h2>
                    </div>
                </div>
            </div>
            <!-- Apply Process Caption -->
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="single-process text-center mb-30">
                        <div class="process-ion">
                            <span class="flaticon-search"></span>
                        </div>
                        <div class="process-cap">
                            <h5>1. Search a job</h5>
                            <p>Sorem spsum dolor sit amsectetur adipisclit, seddo eiusmod tempor incididunt ut laborea.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-process text-center mb-30">
                        <div class="process-ion">
                            <span class="flaticon-curriculum-vitae"></span>
                        </div>
                        <div class="process-cap">
                            <h5>2. Apply for job</h5>
                            <p>Sorem spsum dolor sit amsectetur adipisclit, seddo eiusmod tempor incididunt ut laborea.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-process text-center mb-30">
                        <div class="process-ion">
                            <span class="flaticon-tour"></span>
                        </div>
                        <div class="process-cap">
                            <h5>3. Get your job</h5>
                            <p>Sorem spsum dolor sit amsectetur adipisclit, seddo eiusmod tempor incididunt ut laborea.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- How  Apply Process End-->

    <!-- Testimonial Start -->
    <div class="testimonial-area testimonial-padding">
        <div class="container">
            <!-- Testimonial contents -->
            <div class="row d-flex justify-content-center">
                <div class="col-xl-8 col-lg-8 col-md-10">
                    <div class="h1-testimonial-active dot-style">
                      @isset($reviews)
                        @foreach ($reviews as $review)
                          <!-- Single Testimonial -->
                          <div class="single-testimonial text-center">
                            <!-- Testimonial Content -->
                            <div class="testimonial-caption ">
                                <!-- founder -->
                                <div class="testimonial-founder  ">
                                    <div class="founder-img mb-30">
                                        <img style="height: 132px; width: 130px;"
                                         src="{{ asset('images/reviews/' . $review->image) }}" alt="">
                                        <span>{{ ucwords($review->client) }}</span>
                                        <p>{{ $review->job_position }}</p>
                                    </div>
                                </div>
                                <div class="testimonial-top-cap">
                                    <p>“{{ $review->review }}”</p>
                                </div>
                            </div>
                          </div>
                        @endforeach
                      @endisset
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Testimonial End -->

    <!-- Blog Area Start -->
    @isset($blogs)
    <div class="home-blog-area">
        <div class="container">
            <!-- Section Tittle -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-tittle text-center">
                        <h2>Our Recent News</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach($blogs as $blog)
                    <div class="col-xl-6 col-lg-6 col-md-6">
                        <div class="home-blog-single mb-30">
                            <div class="blog-img-cap">
                                <div class="blog-img">
                                    <img style="max-height: 324px; max-width: 570px" src="{{ asset('/images/blogs/' . $blog->featured_image) }}" alt="{{ $blog->name }}">
                                    <!-- Blog date -->
                                    <div class="blog-date text-center">
                                        <span>{{ $blog->updated_at->format('d') }}</span>
                                        <p>{{ $blog->updated_at->format('M, Y') }}</p>
                                    </div>
                                </div>
                                <div class="blog-cap">
                                    <p>| {{ $blog->category->name }}</p>
                                    <h3><a href="{{ route('blog.single', ['url_key' => $blog->url_key]) }}">{{ $blog->name }}</a></h3>
                                    <a href="{{ route('blog.single', ['url_key' => $blog->url_key]) }}" class="more-btn">Read more »</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endisset
    <!-- Blog Area End -->
@endsection