@extends('layouts.front')

@push('style')
<style>
    .job-card {
        transition: box-shadow 0.25s ease, transform 0.25s ease;
        border-radius: 8px;
        overflow: hidden;
    }
    .job-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        transform: translateY(-3px);
    }
    .job-opening-card {
        text-decoration: none !important;
        color: inherit !important;
    }
    .job-type-badge {
        font-size: 11px;
        font-weight: 500;
        padding: 4px 10px;
        border-radius: 20px;
        letter-spacing: 0.3px;
    }
    .py-80 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .mb-5 { margin-bottom: 5px !important; }
    .mb-10 { margin-bottom: 10px !important; }
    .mb-20 { margin-bottom: 20px !important; }
    .mt-10 { margin-top: 10px !important; }
    #jobList .card-block {
        padding: 20px 25px;
    }
</style>
@endpush

@section('header-text')
    <h1 class="hidden-sm-down text-white fs-50 mb-30">@if(!is_null($frontTheme->welcome_title)) {{ $frontTheme->welcome_title }} @else @lang('modules.front.homeHeader')@endif </h1>
    <h4 class="hidden-sm-up text-white mb-30"> @if(!is_null($frontTheme->welcome_title)) {{ $frontTheme->welcome_title }} @else @lang('modules.front.homeHeader')@endif </h4>
    <p class="text-white mb-40">@if(!is_null($frontTheme->welcome_sub_title)) {!! $frontTheme->welcome_sub_title !!}  @else @lang('modules.front.jobOpeningText') @endif</p>
    <div class="location-search d-flex rounded-pill bg-white ">

        <div class="align-items-center d-flex rounded-pill location height-50">
            <select class="myselect" name="loaction" id ="location_id">
                <option value="all">@lang('modules.front.allLocation')</option>
                @foreach($locations as $location)
                    <option value="{{ $location->id }}">{{ ucfirst($location->location) }}</option>
                    @endforeach
            </select>
        </div>

        <span class="space position-relative hidden-sm-down "></span>

        <div class="align-items-center d-flex rounded-pill designation height-50">
            <select class="myselect" name="category" id ="category">
                <option value="all">@lang('modules.front.allCategory')</option>
                @foreach($categories as $category)
                     <option value="{{ $category->id }}">{{ ucfirst($category->name) }}</option>
                @endforeach
            </select>
        </div>

        <input type="hidden" name="company_name" id="company" value="2">

        <div class="align-items-center d-flex rounded-pill location height-50">
            <select class="myselect" name="name" id ="skill">
                <option value="all">@lang('modules.front.allSkill')</option>
                @foreach($skills as $skill)
                    <option value="{{ $skill->id }}">{{ ucfirst($skill->name) }}</option>
                    @endforeach
            </select>
        </div>

        <div class="search-btn w-25 rounded-pill align-items-center ">
            <button type="button" name="search" class="btn btn-lg btn-dark height-48 mr-4 my-1 align-items-center d-flex rounded-pill justify-content-center"  id="search">SEARCH</button>

            {{-- <a class="btn btn-lg btn-dark height-48 mr-4 my-1 align-items-center d-flex rounded-pill justify-content-center" href="#">SEARCH</a> --}}
        </div>
    </div>
@endsection

@section('content')



    <!--
    |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
    | Working at TheThemeio
    |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
    !-->
    <!-- <section class="section bg-gray py-60 aaaaa">
        <div class="container">

            <div class="row gap-y align-items-center">

                <div class="col-12">
                    <h3>@if(!is_null($frontTheme->welcome_title)) {{ $frontTheme->welcome_title }} @else @lang('modules.front.jobOpeningHeading') @endif</h3>
                    <p>@if(!is_null($frontTheme->welcome_sub_title)) {!! $frontTheme->welcome_sub_title !!}  @else @lang('modules.front.jobOpeningText') @endif</p>

                </div>

            </div>

        </div>
    </section> -->





    <!--
    |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
    | Open positions
    |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
    !-->
    <section class="section">
        <div class="container">
            <header class="section-header">
                <h2>@lang('modules.front.jobOpenings')</h2>
                <hr>
            </header>

            <div data-provide="shuffle" id="applicant-notes">

                <div class="row gap-y" id="jobList">

                    @forelse($jobLocations as $location)
                        <div class="col-12 col-md-6 col-lg-4 portfolio-2 job-list" data-shuffle="item" data-groups="{{ $location->location.','.$location->job->category->name }}">
                            <a href="{{ route('jobs.jobDetail', [$location->job->slug, $location->location->id]) }}" class="job-opening-card">
                            <div class="card card-bordered job-card">
                                <div class="card-block">
                                    <h5 class="card-title mb-5">{{ ucwords($location->job->title) }}</h5>
                                    @if($location->job->company->show_in_frontend == 'true')
                                        @if($location->job->job_company_id != null && $location->job->job_company_id != '' && !is_null($location->job->jobCompany))
                                             <small class="company-title mb-10">@lang('app.by') {{ ucwords($location->job->jobCompany->company_name) }}</small>
                                        @else
                                            <small class="company-title mb-10">@lang('app.by') {{ ucwords($location->job->company->company_name) }}</small>
                                        @endif
                                    @endif
                                    @if($location->job->jobType)
                                        <div class="mb-10">
                                            <span class="badge badge-info job-type-badge">{{ $location->job->jobType->job_type }}</span>
                                        </div>
                                    @endif
                                    <div class="d-flex flex-wrap justify-content-between card-location">
                                        <span class="fw-400 fs-14"><i class="mr-5 fa fa-map-marker"></i>{{ ucwords($location->location->location) }}</span>
                                        <span class="fw-400 fs-14">{{ ucwords($location->job->category->name) }}<i class="ml-5 fa fa-graduation-cap"></i></span>
                                    </div>
                                    @if($location->job->end_date)
                                        <div class="mt-10">
                                            <small class="text-muted"><i class="fa fa-clock-o mr-5"></i>Closing: {{ \Carbon\Carbon::parse($location->job->end_date)->format('d M Y') }}</small>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            </a>
                        </div>
                    @empty
                        <div class="col-12" id="no-data">
                            <div class="text-center py-80">
                                <i class="fa fa-briefcase fa-3x text-muted mb-20" style="opacity:0.3;"></i>
                                <h4 class="text-muted fw-400">There are currently no open positions</h4>
                                <p class="text-muted fs-14">Please check back later for new opportunities.</p>
                            </div>
                        </div>
                    @endforelse

                </div>

                @if(count($jobLocations) > 0)
                    <div class="row gap-y">
                        <button type="button" name="load_more_button" class="btn btn-lg btn-white mx-auto mt-50 mb-40" id="load_more_button" style="display:none;">@lang('modules.front.loadMore')</button>
                    </div>
                @endif
            </div>

        </div>
    </section>

@endsection
@push('footer-script')
<script>
    $(document).ready(function(){
        var perPage = '{{ $perPage }}';

        totalCurrentData = perPage;
        var jobCount = {{ $jobCount }};
        if(jobCount > perPage) {
            $('#load_more_button').show();
        } else {
            $('#load_more_button').hide();
        }
        var totalCurrentCount = $(".job-list").length;

        //load more
        $('body').on('click', '#load_more_button', function () {
            var location_id = $('#location_id').val();
            var category = $('#category').val();
            var skill = $('#skill').val();
            var company = $('#company').val();
            console.log("hello");

            var token = '{{ csrf_token() }}';
            $('#load_more_button').html('<b>'+"@lang('app.loading')"+'...</b>');
            $.easyAjax({
                url:"{{ route('jobs.more-data') }}",
                type:'POST',
                data: {'_token':token, 'totalCurrentData':totalCurrentData,'location_id':location_id, 'category':category, 'skill':skill, 'company':company},
                success:function(response) {
                    $('#jobList').append(response.view);
                    totalCurrentData = response.data.job_current_count;
                    $('#load_more_button').blur();
                    $('#load_more_button').html('@lang('modules.front.loadMore')');
                    if (response.data.hideButton !== 'undefined' && response.data.hideButton === 'yes'){
                        $('#load_more_button').hide();
                    }
                    if (response.data.hideButton !== 'undefined' && response.data.hideButton === 'no') {
                        $('#load_more_button').show();
                    }
                }
            });
        });

        //search
        $('body').on('click', '#search', function () {
            var location_id = $('#location_id').val();
            var category = $('#category').val();
            var skill = $('#skill').val();
            var company = $('#company').val();
            var token = '{{ csrf_token() }}';
            $.easyAjax({
                url:"{{ route('jobs.search-job') }}",
                type:'POST',
                data: {'_token':token, location_id:location_id, category:category, skill:skill, company:company},
                success:function(response){
                    if(response.view.trim() === '') {
                        $('#jobList').html('<div class="col-12" id="no-data"><div class="text-center py-80"><i class="fa fa-search fa-3x text-muted mb-20" style="opacity:0.3;"></i><h4 class="text-muted fw-400">No positions match your search</h4><p class="text-muted fs-14">Try adjusting your filters or check back later.</p></div></div>');
                        $('#load_more_button').hide();
                    } else {
                        $('#jobList').html(response.view);
                        totalCurrentData = response.data.job_current_count;
                        if (response.data.hideButton != 'undefined' && response.data.hideButton == 'yes'){
                            $('#load_more_button').hide();
                        }
                        if (response.data.hideButton != 'undefined' && response.data.hideButton == 'no') {
                            $('#load_more_button').show();
                        }
                    }
                    $([document.documentElement, document.body]).animate({
                        scrollTop: $("#applicant-notes").offset().top
                    }, 1000);
                }
            });
        });
    });

    </script>
    @endpush