@extends('layouts.front.app')
@section('title', 'Careers Details')
@section('content')
<div class="container container-800">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('careers.index') }}">Careers</a></li>
            <li class="breadcrumb-item active" aria-current="page">Career Details</li>
        </ol>
    </nav>
</div>
<!-- Banner Section -->
<section class="bannerSection">
    <div class="container container-800">
        <div class="commonHeading">
            <ul class="badgeList list-inline">
                @if (!empty($careers)) 
                    @foreach ($careers->jobKeyword as $keyword)
                        <li class="list-inline-item">
                            <span class="badge bg-light text-dark">{{ $keyword->name }}</span>
                        </li>
                    @endforeach
                @endif
            </ul>
            <h2>{{!empty($careers->title)? $careers->title : ''}}</h2>
            <p>
                {{!empty($careers->jobCity)? $careers->jobCity->name : ''}},
                {{!empty($careers->jobState)? $careers->jobState->name : ''}},
                {{!empty($careers->jobCountry)? $careers->jobCountry->name : ''}}
            </p>
            <a data-id="{{!empty($careers->id)? $careers->id : ''}}" href="javascript:void(0)" class="applyJobModalBtn btn btn-secondary ripple-effect font-sb mt-0">Apply for this job</a>
        </div>
    </div>
</section>
<!-- jobDetails -->
<section class="jobdetailsInfo">
    <div class="container container-800">
        <div class="commonHeading">
            @if($careers && isset($careers->about_company))
                <h2>About the company</h2>
                {!! $careers->about_company !!}
            @endif
        </div>

        <div class="commonHeading">
            @if($careers && isset($careers->about_role))
                <h2>About the role</h2>
                {!! $careers->about_role !!}
            @endif
        </div>
        <div class="commonHeading">
            @if($careers && isset($careers->job_responsibilities))
                <h2>Job Responsibilities</h2>
                {!! $careers->job_responsibilities !!}
            @endif
        </div>
        <div class="commonHeading">
            @if($careers && isset($careers->job_requirement))
                <h2>Job Requirements</h2>
                {!! $careers->job_requirement !!}
            @endif
        </div>
        <!--  -->
        <div class="btn-Row text-center">
            <a data-id="{{!empty($careers->id)? $careers->id : ''}}" class="applyJobModalBtn btn btn-secondary ripple-effect font-sb" href="javascript:void(0);">Apply for this job</a>
        </div>
        <!-- Social Link -->
        <div class="socialLink text-center pt-0 py-80">
            <h5 class="socialLink_heading font-sb">Share</h5>
            <input type="hidden" value="{{ $url}}" id="shareUrl">
            <ul class="list-inline mb-0">
                <li class="list-inline-item">
                    <a  id="copyToClipboard" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="Copy URL"><em class="icon icon-link"></em></a>
                </li>
                <li class="list-inline-item">
                    <a href="{{ $shareComponent['twitter']}}" target="_blank" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="Twitter"><em class="icon icon-twitter"></em></a>
                </li>
                <li class="list-inline-item">
                    <a href="{{ $shareComponent['facebook']}}" target="_blank" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="Facebook"><em class="icon icon-facebook"></em></a>
                </li>
                <!-- <li class="list-inline-item">
                    <a href="javascript:void(0);"><em class="icon icon-instagram"></em></a>
                </li> -->
                <li class="list-inline-item">
                    <a href="{{ $shareComponent['telegram']}}" target="_blank" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="Telegram"><em class="icon icon-telegram"></em></a>
                </li>
                <li class="list-inline-item"> 
                    <a href="{{ $shareComponent['linkedin']}}" target="_blank" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="Linkedin"><em class=" icon icon-linkedin"></em></a>
                </li>

            </ul>
        </div>
    </div>
</section>
<!-- Similar jobs -->
<section class="similarJobs py-80 bg-white">
    <div class="container">
        <h2 class="similarJobs_heading font-sb text-center">Similar jobs</h2>
        <ul class="similarJobs_list list-unstyled">
            @php 
                $careerData = getFrontEndCareer($careers->sub_category_id);
            @endphp 

            @if ($careerData)
                @foreach ($careerData as $career)
                    <li>
                        <div class="d-flex align-items-center w-100">
                            <div class="info">
                                <a href="{{route('careers.show', $career->id) }}">
                                    <h3>{{!empty($career->title)? $career->title : ''}}</h3>
                                </a>
                                {{!empty($career->job_type)? config('constants.JOB_TYPE.'.$career->job_type) : ''}},
                                {{!empty($career->jobCity)? $career->jobCity->name : ''}},
                                {{!empty($career->jobState)? $career->jobState->name : ''}},
                                {{!empty($career->jobCountry)? $career->jobCountry->name : ''}}
                            </div>
                            <div class="ms-auto">
                                <a href="{{route('careers.show', $career->id) }}" class="btn btn-sm btn-dark ripple-effect font-sb">Apply</a>
                            </div>
                        </div>
                    </li>
                @endforeach
            @endif
           
        </ul>
        <div class="btn-Row text-center">
            <a class="btn btn-primary ripple-effect font-sb" href="{{ route('careers.index') }}">See all
                jobs <em class="icon icon-next"></em></a>
        </div>
    </div>
</section>



@endsection

@push('scripts')
<script type="text/javascript" src="{{asset('assets/js/front/job/job.js')}}"></script>
@endpush
@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/front/toastr.css') }}" type="text/css">
@endpush