@extends( 'layout.main' )

@section( 'content' )
    <!-- Intro Banner
================================================== -->
    <!-- add class "disable-gradient" to enable consistent background overlay -->
    <div class="intro-banner" data-background-image="{{ asset('images/home-background.jpg') }}">
        <div class="container">

            <!-- Intro Headline -->
            <div class="row">
                <div class="col-md-12">
                    <div class="banner-headline">
                        <h3>
                            <strong>Hire experts or be hired for any job, any time.</strong>
                            <br>
                            <span>Thousands of businesses trust <strong class="color">{{ env( 'APP_NAME' ) }}</strong> to address their high-turnover issues.</span>
                        </h3>
                    </div>
                </div>
            </div>

            <!-- Search Bar -->
            <div class="row">
                <div id="main-app" class="col-12 col-md-7">

                    <form class="intro-banner-search-form margin-top-95" action="{{ route('search') }}" method="get">
                        <input type="hidden" id="lat" name="location[lat]" value="">
                        <input type="hidden" id="lng" name="location[lng]" value="">
                        <input type="hidden" id="lng" name="location[radius]" value="50">

                        <!-- Search Field -->
                        <div class="intro-search-field with-autocomplete">
                            <label for="autocomplete-input" class="field-title ripple-effect">Where?</label>
                            <div class="input-with-icon">
                                <input id="autocomplete-input" name="address" type="text" placeholder="Enter your address">
                                <i class="icon-material-outline-location-on"></i>
                            </div>
                        </div>

                        <!-- Search Field -->
                        {{--<div class="intro-search-field">--}}
                            {{--<label for="intro-keywords" class="field-title ripple-effect">What job you want?</label>--}}
                            {{--<input id="intro-keywords" name="job_title" type="text" placeholder="Job Title or Keywords">--}}
                        {{--</div>--}}

                        <!-- Button -->
                        <div class="intro-search-button">
                            <button class="button ripple-effect" onclick="window.location.href='jobs-list-layout-full-page-map.html'">Search</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Stats -->
            <div class="row"></div>

        </div>
    </div>


    <!-- Content
    ================================================== -->
    <!-- Category Boxes --><!-- Category Boxes / End -->


    <!-- Features Jobs -->
    <div class="section gray margin-top-45 padding-top-65 padding-bottom-75">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">

                    <!-- Section Headline -->
                    <div class="section-headline margin-top-0 margin-bottom-35">
                        <h3>Featured Jobs</h3>
                        <a href="job-list.html" class="headline-link">View All Jobs</a>
                    </div>

                    <!-- Jobs Container -->
                    <div class="listings-container compact-list-layout margin-top-35">

                    @foreach( \App\Helpers\featured_jobs( 10, false ) as $job )
                        <!-- Job Listing -->
                            <a href="{{ $job->url }}" class="job-listing with-apply-button">

                                <!-- Job Listing Details -->
                                <div class="job-listing-details">

                                    <!-- Logo -->
                                    <div class="job-listing-company-logo">
                                        <img src="{{ $job->company->image }}" alt="">
                                    </div>

                                    <!-- Details -->
                                    <div class="job-listing-description">
                                        <h3 class="job-listing-title">{{ $job->title }}</h3>

                                        <!-- Job Listing Footer -->
                                        <div class="job-listing-footer">
                                            <ul>
                                                <li>
                                                    <i class="icon-material-outline-business"></i> {{ $job->company->title }}
                                                </li>
                                                @if ( $job->address )
                                                <li>
                                                    <i class="icon-material-outline-location-on"></i> {{ $job->address['address'] }}
                                                </li>
                                                @endif

                                                @if( $job->type )
                                                    <li>
                                                        <i class="icon-material-outline-business-center"></i> {{ $job->type }}
                                                    </li>
                                                @endif

                                                <li>
                                                    <i class="icon-material-outline-access-time"></i> {{ \Carbon\Carbon::parse( $job->created_at )->diffForHumans() }}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <!-- Apply Button -->
                                    <span class="list-apply-button ripple-effect">Apply Now</span>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    <!-- Jobs Container / End -->

                </div>
            </div>
        </div>
    </div>
    <div class="section padding-bottom-65"></div>

    <!-- Photo Section -->
    <div class="photo-section" data-background-image="images/section-background.jpg">

        <!-- Infobox -->
        <div class="text-content white-font">
            <div class="container">

                <div class="row">
                    <div class="col-lg-6 col-md-8 col-sm-12">
                        <h2>Hire experts or be hired. <br> For any job, any time.</h2>
                        <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation is on the runway towards.</p>
                        <a href="pricing.html" class="button button-sliding-icon ripple-effect big margin-top-20">Get Started
                            <i class="icon-material-outline-arrow-right-alt"></i></a>
                    </div>
                </div>

            </div>
        </div>

        <!-- Infobox / End -->
    </div>

    <!-- Photo Section / End -->
    <!-- Icon Boxes -->
    <div class="section padding-top-65 padding-bottom-65">
        <div class="container">
            <div class="row">

                <div class="col-xl-12">
                    <!-- Section Headline -->
                    <div class="section-headline centered margin-top-0 margin-bottom-5">
                        <h3>How It Works?</h3>
                    </div>
                </div>

                <div class="col-xl-4 col-md-4">
                    <!-- Icon Box -->
                    <div class="icon-box with-line">
                        <!-- Icon -->
                        <div class="icon-box-circle">
                            <div class="icon-box-circle-inner">
                                <i class="icon-line-awesome-user"></i>
                                <div class="icon-box-check"><i class="icon-material-outline-check"></i></div>
                            </div>
                        </div>
                        <h3>Create an Account.</h3>
                        <p>Bring to the table win-win survival strategies to ensure proactive domination going forward.</p>
                    </div>
                </div>

                <div class="col-xl-4 col-md-4">
                    <!-- Icon Box -->
                    <div class="icon-box with-line">
                        <!-- Icon -->
                        <div class="icon-box-circle">
                            <div class="icon-box-circle-inner">
                                <i class="icon-line-awesome-search"></i>
                                <div class="icon-box-check"><i class="icon-material-outline-check"></i></div>
                            </div>
                        </div>
                        <h3>Find work.</h3>
                        <p>Efficiently unleash cross-media information without. Quickly maximize return on investment.</p>
                    </div>
                </div>

                <div class="col-xl-4 col-md-4">
                    <!-- Icon Box -->
                    <div class="icon-box">
                        <!-- Icon -->
                        <div class="icon-box-circle">
                            <div class="icon-box-circle-inner">
                                <i class="icon-line-awesome-money"></i>
                                <div class="icon-box-check"><i class="icon-material-outline-check"></i></div>
                            </div>
                        </div>
                        <h3>Get paid.</h3>
                        <p>Nanotechnology immersion along the information highway will close the loop on focusing solely.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section padding-bottom-65"></div>
    <!-- Icon Boxes / End -->

    <!-- Featured Jobs / End -->

    <!-- Features Cities --><!-- Features Cities / End -->

    <!-- Membership Plans --><!-- Membership Plans / End-->

@endsection