@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    @php
        $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    @endphp

    @include('frontend.layouts.breadcrumb', ['title' => Str::limit($vacancy->title, 68)])

    <section class="blog-details-section space bg-light">
        <div class="container">
            <div class="row gy-30 flex-column-reverse flex-lg-row">
                <div class="col-xl-8 col-lg-8">
                    <div class="blog-details-left">
                        <div class="blog-list-card style-2">
                            <div class="card-content">
                                <span class="category">{{ strtoupper($vacancy->employment_type ?? 'OPEN ROLE') }}</span>
                                <h3 class="title">{{ $vacancy->title }}</h3>
                                <div class="author-info flex-wrap">
                                    @if($vacancy->department)
                                        <div class="author"><span class="name"><i class="fa-solid fa-building"></i> {{ $vacancy->department->name }}</span></div>
                                    @endif
                                    @if($vacancy->location)
                                        <span class="date"><i class="fa-solid fa-location-dot"></i> {{ $vacancy->location }}</span>
                                    @endif
                                    @if($vacancy->is_featured)
                                        <span class="date text-theme fw-semibold"><i class="fa-solid fa-star"></i> Featured</span>
                                    @endif
                                    <span class="date"><i class="fa-solid fa-circle text-success small"></i> Open</span>
                                </div>
                                <div class="pt-20 pb-25"><div class="border dark"></div></div>

                                @if($vacancy->description)
                                    <div class="mb-30 cms-page-rich">{!! $vacancy->description !!}</div>
                                @endif
                                @if($vacancy->requirements)
                                    <h4 class="title mb-15">Requirements</h4>
                                    <div class="mb-30 cms-page-rich">{!! $vacancy->requirements !!}</div>
                                @endif
                                @if($vacancy->responsibilities)
                                    <h4 class="title mb-15">Responsibilities</h4>
                                    <div class="mb-30 cms-page-rich">{!! $vacancy->responsibilities !!}</div>
                                @endif

                                @if($relatedVacancies->count())
                                    <div class="mt-40 pt-30 border-top">
                                        <h4 class="title mb-25">Related openings</h4>
                                        <div class="row gy-20">
                                            @foreach($relatedVacancies as $relatedVacancy)
                                                <div class="col-md-6">
                                                    <div class="p-20 bg-light2 br-20">
                                                        <h5 class="title mb-10"><a href="{{ route('frontend.vacancies.show', $relatedVacancy->slug) }}">{{ $relatedVacancy->title }}</a></h5>
                                                        <p class="small text-muted mb-10">{{ $relatedVacancy->location ?? ucfirst($relatedVacancy->employment_type ?? '') }}</p>
                                                        <a href="{{ route('frontend.vacancies.show', $relatedVacancy->slug) }}" class="continue-reading">View role</a>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-4">
                    <div class="sidebar-widget blog-sidebar pl-15 lg-pl-0">
                        <div class="sidebar-category-list">
                            <h4 class="sidebar-title">Apply</h4>
                            <div class="widget-box">
                                <div class="d-grid gap-3">
                                    <a href="{{ route('frontend.vacancies.apply', $vacancy->slug) }}" class="theme-btn w-100 br-30">
                                        <span class="link-effect"><span class="effect-1"><i class="fa-solid fa-paper-plane"></i> Apply online</span><span class="effect-1"><i class="fa-solid fa-paper-plane"></i> Apply online</span></span>
                                    </a>
                                    @if($vacancy->external_link)
                                        <a href="{{ $vacancy->external_link }}" target="_blank" rel="noopener" class="theme-btn style2 w-100 br-30 bg-white text-dark">
                                            <span class="link-effect"><span class="effect-1">External application</span><span class="effect-1">External application</span></span>
                                        </a>
                                    @endif
                                </div>
                                @if($vacancy->application_email)
                                    <p class="small mt-20 mb-0"><i class="fa-solid fa-envelope text-theme"></i>
                                        <a href="mailto:{{ $vacancy->application_email }}">{{ $vacancy->application_email }}</a>
                                    </p>
                                @endif
                                @if($vacancy->application_deadline)
                                    <p class="small mt-15 mb-0 text-muted">Apply by {{ $vacancy->application_deadline->format('F j, Y') }}</p>
                                @endif
                            </div>
                        </div>

                        <div class="sidebar-category-list">
                            <h4 class="sidebar-title">Role snapshot</h4>
                            <div class="widget-box">
                                <ul class="categories">
                                    @if($vacancy->salary_range)
                                        <li><span class="text-muted">Compensation</span><br><strong>{{ $vacancy->salary_range }}</strong></li>
                                    @endif
                                    @if($vacancy->postedBy)
                                        <li><span class="text-muted">Posted by</span><br><strong>{{ $vacancy->postedBy->name }}</strong></li>
                                    @endif
                                    <li><span class="text-muted">Posted</span><br><strong>{{ $vacancy->created_at->format('M d, Y') }}</strong></li>
                                </ul>
                            </div>
                        </div>

                        <div class="sidebar-category-list">
                            <h4 class="sidebar-title">Share</h4>
                            <div class="widget-box">
                                <div class="d-flex flex-wrap gap-2">
                                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->url()) }}" target="_blank" rel="noopener" class="theme-btn style2 br-30 bg-white text-dark">
                                        <span class="link-effect"><span class="effect-1">LinkedIn</span><span class="effect-1">LinkedIn</span></span>
                                    </a>
                                    <a href="https://twitter.com/intent/tweet?text={{ urlencode('Role: '.$vacancy->title) }}&url={{ urlencode(request()->url()) }}" target="_blank" rel="noopener" class="theme-btn style2 br-30 bg-white text-dark">
                                        <span class="link-effect"><span class="effect-1">X</span><span class="effect-1">X</span></span>
                                    </a>
                                </div>
                            </div>
                        </div>

                        @if($departments->count())
                            <div class="sidebar-category-list">
                                <h4 class="sidebar-title">Browse departments</h4>
                                <div class="widget-box">
                                    <ul class="categories">
                                        @foreach($departments as $department)
                                            <li>
                                                <a href="{{ route('frontend.vacancies.index', ['department' => $department->slug]) }}">
                                                    {{ $department->name }} <span>({{ $department->vacancies_count }})</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif

                        <div class="sidebar-category-list">
                            <a href="{{ route('frontend.vacancies.index') }}" class="theme-btn style2 w-100 br-30 bg-white text-dark">
                                <span class="link-effect"><span class="effect-1"><i class="fa-solid fa-arrow-left-long"></i> All openings</span><span class="effect-1"><i class="fa-solid fa-arrow-left-long"></i> All openings</span></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('frontend.partials.newsletter')
@endsection