@extends('layouts.front')

@section('header-text')
    <h1 class="hidden-sm-down"><i class="icon-ribbon"></i> @lang('modules.front.homeHeader') </h1>
    <h4 class="hidden-sm-up"><i class="icon-ribbon"></i> @lang('modules.front.homeHeader') </h4>
@endsection
@push('header-css')
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/select2.min.css') }}">
@endpush

@section('content')



    <!--
    |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
    | Working at TheThemeio
    |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
    !-->
    <section class="section bg-gray py-60 d-none">
        <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-lg">
            <!--<header class="section-header">
                <h2>@lang('modules.front.jobOpenings')</h2>
                <hr>
            </header>-->


            <!--<div data-provide="shuffle">
                <div class="text-center gap-multiline-items-2 job-filters" data-shuffle="filter">
                    <button class="btn btn-w-md btn-outline btn-round btn-primary active" data-shuffle="button">All
                    </button>
                    @foreach($locations as $location)
                        <button class="btn  btn-outline btn-round btn-primary" data-shuffle="button"
                                data-group="{{ $location->location }}">{{ ucwords($location->location) }}</button>
                    @endforeach
                    <p>&nbsp;</p>
                    @foreach($categories as $category)
                        <button class="btn btn-xs btn-outline btn-round btn-dark" data-shuffle="button"
                                data-group="{{ $category->name }}">{{ ucwords($category->name) }}</button>
                    @endforeach
                </div>

                <br><br>

                <div class="row gap-y" data-shuffle="list">

                    @foreach($jobs as $job)
                        <div class="col-12 col-md-6 col-lg-4 portfolio-2" data-shuffle="item" data-groups="{{ $job->location->location.','.$job->category->name }}">
                            <a href="{{ route('jobs.jobDetail', [$job->slug]) }}" class="job-opening-card">
                            <div class="card card-bordered">
                                <div class="card-block">
                                    <h5 class="card-title">{{ ucwords($job->title) }}</h5>
                                    @if($job->company->show_in_frontend == 'true')
                                        <small class="company-title">@lang('app.by') {{ ucwords($job->company->company_name) }}</small>
                                    @endif
                                    <div class="d-flex flex-wrap justify-content-between">
                                        <span class="fw-600 fs-12 text-info">{{ ucwords($job->location->location).', '.ucwords($job->location->country->country_name) }}</span>
                                        <span class="fw-600 fs-12 text-info">{{ ucwords($job->category->name) }}</span>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
                    @endforeach

                </div>

            </div>-->
            <div class='row pt-5 pb-4'>
                <div class='col-sm-3'>
                    <input type='text' class='form-control'  name='search' placeholder="Job title/keyword"/>
                </div>
                <div class='col-sm-3'>
                    <div class="form-group">
                        <select class="select2 locations" name="locations" id="location">
                            <option value="0">Select Locations</option>
                            @foreach ($locations as $location)
                                <option value='{{$location->id}}'>{{$location->location}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class='col-sm-3'>
                    <div class="form-group">
                        <select class="select2 expertise" name="expertise" id="expertise">
                            <option value="0">Select Expertise</option>
                            @foreach ($categories as $category)
                                <option value='{{$category->id}}'>{{$category->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class='col-sm-3 text-right'>
                    <button class='btn btn-outline-primary pr-4 pl-4 btn-search'><i class='fas fa-search'></i> Search</button>
                </div>
            </div>

            <div class='row mt-3 headings'>
                <div class='col-sm-3 col-md-5'>
                    Your search has found <span class='badge badge-primary mycount'>0</span> Jobs
                </div>
                <div class='col-sm-3 col-md-3'><i class='fas fa-briefcase'></i> Expertise</div>
                <div class='col-sm-3 col-md-2'><i class='fas fa-map-marker-alt'></i> Location</div>
                <div class='col-sm-3 col-md-2'><i class='fas fa-clock'></i> Duration</div>
            </div>
            <div class='row jobs'>
            </div>
            <div class='row feedback'>
                <div class='col-sm-12 alert text-muted text-center mt-2'>
                    <i class='fas fa-spinner fa-pulse'></i> Loading... Please wait
                </div>
            </div>
            <div class='row justify-content-center my-pagination mt-3'>
            </div>
        </div>
    </section>
@endsection
@push('js')
<script src="{{ asset('assets/plugins/select2/select2.full.min.js') }}"></script>
<script>
    $(document).ready(function(){
        var url = "{{url('get/jobs')}}?page=1";
        $('.select2').select2({
            width: '100%'
        });
        $('.form-group span.select2.select2-container').addClass('form-control');
        var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        $('.btn-search').click(function(){
            $('.jobs').html("");
            $('.feedback').html("<div class='col-sm-12 alert text-muted text-center mt-2'>"+
                    "<i class='fas fa-spinner fa-pulse'></i> Loading... Please wait"+
                "</div>");
            getJobs();
        });
        getJobs();
        function getJobs(){
            var search = $('input[name=search]').val();
            var location = $('#location').val();
            var expertise = $('#expertise').val();
            $('.feedback').show();
            $.ajax({
                url: url+"&search="+search+"&expertise="+expertise+"&location="+location,
                type: "GET",
            }).done(function(data){
                var jobs = data.jobs.data;
                var pagination = data.pagination;
                var count = data.count;
                $('.mycount').text(count);
                $.each(jobs, function(index, item){
                    var sdate = new Date(item.start_date);
                    var edate = new Date(item.end_date);
                    var created_at = new Date(item.created_at);

                    var startDate = sdate.getDay()+" "+months[sdate.getMonth()]+", "+sdate.getFullYear();
                    var endDate = sdate.getDay()+" "+months[edate.getMonth()]+", "+edate.getFullYear();
                    var publish_date = created_at.getDay()+" "+months[created_at.getMonth()]+", "+created_at.getFullYear();
                    $('.jobs').append("<div class='col-sm-12 mt-2 myjob'>"+
                            "<div class='row d-flex align-items-center'>"+
                                "<div class='col-md-5'>"+
                                    "<a href='{{url('/')}}/job/"+item.slug+"'>"+
                                        "<h5 class='text-primary'><i class='fas fa-briefcase'></i> | "+item.title+"</h5>"+
                                    "</a>"+
                                    "<p class='small'>Published Date:"+publish_date+" </p>"+
                                "</div>"+
                                "<div class='col-md-3'>"+
                                    "<p class='text-muted'>"+item.category.name+"</p>"+
                                "</div>"+
                                "<div class='col-md-2'>"+
                                    "<p class='text-muted' style='font-weight: bold;'>"+item.location.location+(item.location.zone != null?" | "+item.location.zone:"")+"</p>"+
                                "</div>"+
                                "<div class='col-md-2'>"+
                                    "<p class='text-muted small'>"+startDate+" - "+endDate+"</p>"+
                                "</div>"+
                            "</div>"+
                        "</div>");
                });
                $('.my-pagination').html(pagination);
                $('.pagination').addClass('justify-content-center');
                $('.feedback').hide();
                activateLinks();
            }).fail(function(){
                alert("FAILED");
            });
        }

        function activateLinks(){
            $('.my-pagination a').click(function(e){
                e.preventDefault();
                url = $(this).attr('href');
                getJobs(); 
            });
        }

    });
</script>
@endpush