@extends('site.layouts.master')

@section('seoTags')
  @seoTags()
@endsection
@section('title')
<title>@lang('site.Careers')</title>
@endsection
    @php
        $seo = SEO\Models\Page::where('path',URL::full())->first();
    @endphp
@section('metatags')
 @if(!empty($seo))
    <meta name="title" content="{{ $seo->meta_title ?? $seo->title }}">
    <meta name="keywords" content="{{ $seo->meta_keywords }}">
 <meta name="description" content="{{ $seo->description }}">
 @endif
 <link rel="canonical" href="{{str_replace('public/','',url()->current())}}">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
href="@if(app()->getLocale() == 'en' && str_contains(url()->current(),'/en/')){{str_replace('/en/','/ar/',str_replace('public/','',url()->current()))}}@else{{str_replace('/ar/','/en/',str_replace('public/','',url()->current()))}}@endif">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif" href="{{str_replace('public/','',url()->current())}}">
@endsection
@section('content')
    <div class="d-none">
        {{ Breadcrumbs::render('Careers') }}
    </div>
    {!! $breadcrumbSchema !!}
    <div class="px-3 mb-lg-0 mx-auto text-center">
        <h1 class="property_page_title SF78_93Bold-lg text-white">@lang('site.Your Career Advancement Here')</h1>
        <p class="text-white SF16_24Light SF18_24Light-lg">@lang('site.WE HIRE INTELLIGENCE. WE HIRE CURIOSITY. WE HIRE EXPERIENCE. WE HIRE DIVERSITY. WE HIRE CHALLENGE.')</p>
        <a href="{{ route('site.privileges') }}"
            class="SF16_19BoldImportant SF23_28MediumImportant-lg text-3b3b3b bg-white btn px-3 py-2">@lang('site.LEARN ABOUT PRIVILEGES')<i
                class="mx-3">
                @if (app()->getLocale() == 'ar')
                    &#x2196;
                @else
                    &#x2197;
                @endif
            </i>
        </a>
    </div>
@endsection
@section('careers_content')
    <div class="py-3 bg-f9f9f9">
        <div class="customWidth">
            <p class="SF24_29Black SFBlack40_48-lg text-3b3b3b">@lang('site.JOB LISTINGS')</p>
            <p class="SF14_16Light SF18_21Regular-lg text-3b3b3b">{{ count($careers) }} @lang('site.AVAILABLE VACANCIES')</p>
            @include('site.template.careerCard', ['careers' => $careers])
            <div id="post-data"></div>
            <div class="text-center">
                <a href="" id="load_more" class="btn button_see_more_transparent border px-5 py-3">@lang('site.load_more') <i
                        class="mx-3">
                        @if (app()->getLocale() == 'ar')
                            &#x2196;
                        @else
                            &#x2197;
                        @endif
                    </i>
                </a>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function loadMore(page) {
            var url = window.location.href;
            if (url.includes('?')) url = url + '&page=' + page;
            else url = url + '?page=' + page;
            $.ajax({
                    url: url,
                    type: 'get',
                    beforeSend: function() {
                        $('.ajax-load').show();
                    }
                })
                .done(function(data) {
                    if (data.html == "") {
                        $('.ajax-load').html('@lang('site.no_more_records')');
                        return
                    } else {
                        console.log(data.html);
                        $('.ajax-load').hide();
                        $('#post-data').append(data.html);
                        $(".price-commas").each(function() {
                            var num = $(this).text();
                            var num_parts = num.toString().split(".");
                            num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            $(this).html(num_parts.join("."));
                        });
                    }
                })
                .fail(function(jqXHR, ajaxOptions, thrownError) {
                    alert('@lang('site.something_went_wrong')');
                })
        }
        var page = 1;
        $('#load_more').click(function(e) {
            e.preventDefault();
            page++;
            loadMore(page);
        })
    </script>
@endsection