@extends('front.layouts.main')

@section('title'){{ @trans('seo.title') }}@endsection

@section('description'){{ @trans('seo.description') }}@endsection

@section('content')
<main class="before-login-page">
    <section class="banner">
        <div class="container banner-slider">
            <div class="owl-carousel owl-theme em-slider">
                <div class="item wow fadeIn">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 my-md-auto text-center text-md-left">
                                <h1 class="bold OwlCarousel_title">{{ @trans('client_welcome.slider_1') }}</h1>
                                <p class="tagline gray mb-3">{{ @trans('client_welcome.slider_1_tag') }}.</p>
                                <a href="{{route('front.job.index')}}" class="btn btn-transparent">{{ @trans('client_welcome.slider_1_link') }}</a>
                            </div>
                            <div class="col-md-6 my-md-auto">
                                <img src="{{asset('img/recruit-banner-img.png')}}" srcset="{{asset('img/recruit-banner-img@2x.png')}} 2x" alt="Empower" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeIn">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 my-md-auto text-center text-md-left">
                                <h1 class="bold OwlCarousel_title">{{ @trans('client_welcome.slider_2') }}</h1>
                                <p class="tagline gray mb-3">{{ @trans('client_welcome.slider_2_tag') }}.</p>
                                <a href="{{route('home.coaching')}}" class="btn btn-transparent">{{ @trans('client_welcome.slider_2_link') }}</a>
                            </div>
                            <div class="col-md-6 my-md-auto">
                                <img src="{{asset('img/mtc-banner-img.png')}}" srcset="{{asset('img/mtc-banner-img@2x.png')}} 2x" alt="Empower" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeIn">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 my-md-auto text-center text-md-left">
                                <h1 class="bold OwlCarousel_title">{{ @trans('client_welcome.slider_3') }}</h1>
                                <p class="tagline gray mb-3">{{ @trans('client_welcome.slider_3_tag') }}.</p>
                                <a href="{{route('home.teamBuilding')}}" class="btn btn-transparent">{{ @trans('client_welcome.slider_3_link') }}</a>
                            </div>
                            <div class="col-md-6 my-md-auto">
                                <img src="{{asset('img/success-banner-img.png')}}" srcset="{{asset('img/success-banner-img@2x.png')}} 2x" alt="Empower" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="recruit-slider section wow fadeInUp">
        @if(count($clients) > 0)
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="text-center mb-4">{{ @trans('client_welcome.our_client') }}</h2>
                </div>
                <div class="col-md-12">
                    <div class="owl-carousel owl-theme" id="recruit">
                        @foreach($clients as $client)
                        <div class="item ml-2 mr-2">
                            <img src="{{asset(config('custom.download.url') .config('custom.upload.client_image.image').'/'.$client->image)}}" alt="{{$client->name}}">
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @endif
    </section>
    @if($jobs->count() > 0)
    <section class="section recent-job-sec dark-bg">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="h2 sec-title mb-0">{{ @trans('client_welcome.recent_jobs') }}</h2>
                    <!-- <p class="tag-line gray mb-0">Browse from 4000+ jobs in accross 40 categories</p> -->
                </div>
                @foreach($jobs as $job)
                <div class="col-md-4">
                    <div class="box white job-list d-flex flex-column">
                        <h3 class="border-0">{{$job->nameformatted}}</h3>
                        <p class="loc gray"><i class="material-icons">room</i> {{$job->city->name}}</p>
                        <div class="tags d-flex align-items-center flex-wrap">
                            @if($job->min_requirements->industry1)<p class="mr-0 flex-basis-100"><i class="material-icons">business</i> {{$job->min_requirements->industry1->name}}@if($job->min_requirements->industry2), {{$job->min_requirements->industry2->name}} @endif </p>@endif
                            @if($job->min_requirements && !$job->min_requirements->industry1 && !$job->min_requirements->industry2 && $job->pref_requirements && 
                                $job->pref_requirements->industry1)<p class="mr-0 flex-basis-100">
                                <i class="material-icons">business</i> 
                                {{$job->pref_requirements->industry1->name}}@if($job->pref_requirements->industry2), {{$job->pref_requirements->industry2->name}} @endif </p>
                                @endif
                            <p><i class="material-icons">business_center</i> {{$job->type->name}}</p>
                            <p><i class="material-icons">bookmark</i> {{$job->level->name}}</p>
                        </div>
                        <div class="chips d-flex align-items-center flex-wrap">
                            @if($job->min_requirements->category1)<span class="em-chip">{{$job->min_requirements->category1->name}}</span>@endif
                            @if($job->min_requirements->category2)<span class="em-chip">{{$job->min_requirements->category2->name}}</span>@endif
                            @if($job->min_requirements && !$job->min_requirements->category1 && !$job->min_requirements->category2 && 
                                $job->pref_requirements && ($job->pref_requirements->category1 || $job->pref_requirements->category2))
                                @if($job->pref_requirements->category1)<span class="em-chip">{{$job->pref_requirements->category1->name}}</span>@endif
                                @if($job->pref_requirements->category2)<span class="em-chip">{{$job->pref_requirements->category2->name}}</span>@endif
                            @endif
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-auto pt-3">
                            <a href="{{route('front.job.detail',['slug' => $job->slug.'-'.$job->unique_id])}}" class="btn btn-transparent">View Detail</a>
                            <p class="gray mb-0"><i class="material-icons">access_time</i> Expiring @if($job->remaining_days == 2) Tomorrow @elseif($job->remaining_days == 1) Today @else in {{$job->remaining_days}} Days @endif</p>
                        </div>
                    </div>
                </div>
                @endforeach
                <div class="col-md-12 text-center">
                    <a href="{{route('front.job.index')}}" class="btn btn-transparent">{{ @trans('client_welcome.browse_all_jobs') }}</a>
                </div>
            </div>
        </div>
    </section>
    @endif


    <section class="section service-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="h2 sec-title mb-5">{{ @trans('client_welcome.our_services') }}</h2>
                </div>
                <div class="col-md-3">
                    <div class="ser-list text-center">
                        <div class="ser-img-wrapper">
                            <img src="{{asset('img/ser-recruitment.png')}}" alt="Empower">
                        </div>
                        <h3>{{ @trans('client_welcome.recruitment_services') }}</h3>
                        <p class="gray">{{ @trans('client_welcome.recruitment_description') }}</p>
                        <a href="{{route('home.recruitmentService')}}" class="btn btn-transparent">{{ @trans('client_welcome.know_more') }}</a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ser-list text-center">
                        <div class="ser-img-wrapper">
                            <img src="{{asset('img/ser-mtc.png')}}" alt="Empower">
                        </div>
                        <h3>{{ @trans('client_welcome.career_coaching') }}</h3>
                        <p class="gray">{{ @trans('client_welcome.career_counselling_description') }}</p>
                        <a href="{{route('home.coaching')}}" class="btn btn-transparent">{{ @trans('client_welcome.know_more') }}</a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ser-list text-center">
                        <div class="ser-img-wrapper">
                            <img src="{{asset('img/img_talent_learning.png')}}" alt="Empower">
                        </div>
                        <h3>{{ @trans('client_welcome.advisory') }}</h3>
                        <p class="gray">{{ @trans('client_welcome.advisory_description') }}</p>
                        <a href="{{route('home.teamBuilding')}}" class="btn btn-transparent">{{ @trans('client_welcome.know_more') }}</a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ser-list text-center">
                        <div class="ser-img-wrapper">
                            <img src="{{asset('img/img_inspire_cover.png')}}" alt="Empower">
                        </div>
                        <h3>{{ @trans('client_welcome.inspire_center_and_cafe') }}</h3>
                        <p class="gray">{{ @trans('client_welcome.inspire_center_and_cafe_description') }}</p>
                        <a href="{{route('home.inspireCentreCafe')}}" class="btn btn-transparent">{{ @trans('client_welcome.know_more') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('front.modules.home.common.blog-news')
</main>
@endsection