@extends('web.layouts.container')
@section('content')
    <section class="jobs-pg section">
        <div class="container">
            <div class="inner mb-5">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="text-box wow left_to_right_apperance">
                                                        <h1 class="title color-secondary mb-4">{{$jobTitle1}}<br>{{$jobTitle2}}</h1>
                            <p class="det">{!! $jobPage->description !!}</p>
{{--                            <a onclick="return false" href="#" class="butn secondary_butn">--}}
{{--                                {{__('jobs.upload_cv')}}--}}
{{--                            </a>--}}
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <img src="{{asset($jobPage->image)}}" alt="" class="sec-img"/>
                    </div>
                </div>
            </div>
            <div class="job-categ">
                <div class="head_content col-lg-5 mb-5 wow left_to_right_apperance">
                    <h1 class="title_br color-secondary text-capitalize mb-4"> {{$pages[0]->title}} </h1>
                    <p class="det">
                        <small>{!! $pages[0]->description !!}</small>
                    </p>
                </div>
                <div class="row">
                    @if(count($categories))
                        @foreach($categories as $category)
                            <div class="col-lg-3 col-md-6">
                                <div class="categ_card wow left_to_right_apperance">
                                    <img src="{{asset($category->image)}}" alt="" class="icon"/>
                                    <h5 class="title mb-2 color-secondary">{{$category->name}}</h5>
                                    <p class="num mb-0">({{$category->jobs()->count()}})</p>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
            <div class="job-demand mt-5">
                <div class="head_content col-lg-5 mb-5 wow left_to_right_apperance">
                    <h1 class="title_br color-secondary text-capitalize mb-4">{{$pages[1]->title}}</h1>
                    <p class="det">
                        <small>{!! $pages[1]->description !!}</small>
                    </p>
                </div>
                <div class="row jobs_container">
                    @if(count($jobs))
                        @foreach($jobs as $job)
                            @if($loop->iteration == 5) @break @endif
                            <div class="col-md-6">
                                <div class="job_card wow left_to_right_apperance">
                                    <div class="head in-flex">
                                        <div class="content">
                                            <h4 class="title color-secondary">{{$job->name}}</h4>
                                            <p class="categ mb-0">{{$job->catName}}</p>
                                        </div>
                                        <a href="{{route('job.show', $job->id)}}" class="butn secondary_butn">{{__('main.read_more')}}</a>
                                    </div>
                                    <p class="det mb-0 mt-3">
                                        <small>{{wordLimit(stripText($job->description), 33)}}</small>
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                @if(count($jobs) > 4)
                    <a href="#" class="butn light_butn fw-bold m-auto mt-5 load_more_link">
                        <img src="{{asset('assets/web/images/icons/down_arrow.png')}}" alt="" class="icon-15 filterPrimary me-2 ms-0"/> {{__('main.load_more')}}
                    </a>
                @endif
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

    <script>
        let loadMoreRoute = "{{route('job.loadMore')}}",
            confSkip = 0;
        $('.load_more_link').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);

            confSkip = confSkip + 4;
            let data = {skip: confSkip};

            let url = loadMoreRoute,
                method = 'get';

            const response=await ajax({
                url,
                data,
                dataType: 'html',
                method
            });


            if (response){
                if (response.search('show_done') > -1){
                    $(this).remove();
                }
                $('.jobs_container').append(response);
            }

        });
    </script>
@endsection