@extends('layouts.app')

@section('content')

    @include('layouts.inc.breadcrumb',['title' => $job->name])

    <section class="space-ptb">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="job-list border">
                                <div class="job-list-logo">
                                    <img class="img-fluid" src="{{ asset("storage/company/{$job->company->logo}") }}" alt="{{$job->company->name}}">
                                </div>
                                <div class="job-list-details">
                                    <div class="job-list-info">
                                        <div class="job-list-title">
                                            <h5 class="mb-0">{{ $job->name }}</h5>
                                        </div>
                                        <div class="job-list-option">
                                            <ul class="list-unstyled">
                                                <li><span>via</span> <a href="{{ route('recruiter.show',['slug' => $job->company->slug ]) }}">{{ $job->company->name }}</a></li>
                                                <li><span class="flag-icon flag-icon-{{ Str::slug($job->country) }} mr-1"></span>{{ $job->country }}</li>
                                                <li>
                                                    <span class="freelance"><i class="fas fa-suitcase pr-1"></i>{{ $job->type }}</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 mt-3">
                            <a id="fb_share" class="btn btn-sm btn-sm-social btn-sm-facebook btn-caption " target="_blank" href="https://twitter.com/expomedics">
                                <i class="fab fa-facebook-square"></i> Facebook
                            </a>

                            <a id="in_share" class="btn btn-sm btn-sm-social btn-sm-linkedin btn-caption" target="_blank" href="https://www.linkedin.com/company/expomedics/">
                                <i class="fab fa-linkedin "></i> Linkedin
                            </a>

                            <a id="tw_share" class="btn btn-sm btn-sm-social btn-sm-dark btn-dark btn-caption " target="_blank" href="https://twitter.com/intent/tweet?text={{ rawurlencode($job->title) }}&url={{ urlencode(url()->full()) }}">
                                <i class="fa-brands fa-x-twitter"></i> Post
                            </a>
                        </div>
                    </div>

                    <div class="my-4 my-lg-4 d-block d-lg-none">
                        <a class="btn btn-primary btn-block" href="#apply-for-job" data-toggle="modal">
                            <i class="fas fa-pen mx-1"></i>Apply for job
                        </a>
                    </div>

                    <div class="my-4 my-lg-4">
                        <h5 class="mb-3 mb-md-4">Job Description</h5>
                        {!! $job->content !!}
                    </div>
                    <hr>
                </div>
                <!-- sidebar -->
                <div class="col-lg-4">
                    <div class="sidebar-job mb-0">

                        <div class="widget">
                            <div class="widget-box">
                                <div class="row">
                                    <div class="col-7 mx-auto text-center">
                                        <img class="img-fluid" src="{{ asset("storage/company/{$job->company->logo}") }}" alt="{{$job->company->name}}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="widget">
                            <div class="jobber-company-view">
                                <ul class="list-unstyled">
                                    @if ($job->salary_min)
                                        <li>
                                            <div class="widget-box">
                                                <div class="d-flex">
                                                    <i class="font-xll text-primary align-self-center flaticon-debit-card"></i>
                                                    <span class="pl-3">{{ $job->salary() }}</span>
                                                </div>
                                            </div>
                                        </li>
                                    @endif
                                    @if ($job->count_applyers)
                                        <li>
                                            <div class="widget-box">
                                                <div class="d-flex">
                                                    <i class="flaticon-personal-profile fa-2x fa-fw text-primary me-3"></i>
                                                    <span class="pl-3">{{ intval($job->count_applyers) }} {{ $job->count_applyers == 1 ? 'applicant' : 'applicants' }} </span>
                                                </div>
                                            </div>
                                        </li>
                                    @endif
                                    @if ($job->views)
                                        <li>
                                            <div class="widget-box">
                                                <div class="d-flex">
                                                    <i class="flaticon-loupe fa-2x fa-fw text-primary"></i>
                                                    <span class="pl-3">{{ $job->views }} views</span>
                                                </div>
                                            </div>
                                        </li>
                                    @endif
                                    <li>
                                        <div class="widget-box">
                                            <div class="d-flex">
                                                <i class="flaticon-clock fa-2x fa-fw text-primary"></i>
                                                <span class="pl-3">{{ \Carbon\Carbon::parse($job->created_at)->diffForHumans() }}</span>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </div>

                        <div class="widget">
                            <a class="btn btn-primary btn-block" href="#apply-for-job" data-toggle="modal">
                                <i class="fas fa-pen mx-1"></i>Apply for job
                            </a>
                        </div>

                        @if ($similar_jobs->count())
                            <div class="widget">
                                <div class="widget-title">
                                    <h5>Similar Jobs</h5>
                                </div>
                                <div class="similar-jobs-item widget-box">

                                    @foreach($similar_jobs as $similar_job)

                                        <div class="job-list">
                                            <div class="job-list-logo">
                                                <img class="img-fluid" src="{{ asset("storage/company/{$similar_job->company->logo}") }}" alt="{{$similar_job->company->name}}">
                                            </div>
                                            <div class="job-list-details">
                                                <div class="job-list-info">
                                                    <div class="job-list-title">
                                                        <h6 class="job-list-title-xs mb-0"><a href="{{ route('job.show',['slug' => $similar_job->slug]) }}">{{ $similar_job->name }}</a></h6>
                                                    </div>
                                                    <div class="job-list-option">
                                                        <ul class="list-unstyled">
                                                            <li>
                                                                <span class="flag-icon flag-icon-{{ Str::slug($similar_job->country) }} mr-1"></span>{{ $similar_job->country }}
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    @endforeach

                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <!-- sidebar -->
            </div>
        </div>
    </section>
    <!-- job list -->


    @include('page.job.inc.apply-job-modal',['job' => $job])


    <x-block.featured-register-cards/>
@endsection

@push('inline-scripts')
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ro_RO/sdk.js#xfbml=1&version=v23.0&appId=1747876822206475"></script>
@endpush