@extends('layouts.public')

@section('title', $job->seoTitle())
@section('meta_description', $job->seoDescription())

@push('structured-data')
    <script type="application/ld+json">
        {!! ld_json([
            '@context' => 'https://schema.org',
            '@type' => 'JobPosting',
            'title' => $job->title,
            'description' => $job->seoDescription(),
            'datePosted' => $job->published_at?->toDateString(),
            'validThrough' => $job->deadline?->toDateString(),
            'employmentType' => Str::upper(str_replace('-', '_', $job->employment_type)),
            'hiringOrganization' => ['@type' => 'Organization', 'name' => setting('site_name', config('app.name'))],
            'jobLocation' => $job->location ? [
                '@type' => 'Place',
                'address' => ['@type' => 'PostalAddress', 'addressLocality' => $job->location],
            ] : null,
        ]) !!}
    </script>
@endpush

@section('content')
    <x-page-hero :eyebrow="__('Vacancy')"
                 :title="$job->title"
                 :subtitle="$job->short_description"
                 :breadcrumbs="[__('Careers') => route('careers.index'), $job->title => null]"
                 :meta="[
                     __('Department') => $job->department,
                     __('Location') => $job->location,
                     __('Type') => $job->typeLabel(),
                     __('Deadline') => $job->deadline?->format('d M Y'),
                 ]" />

    <section class="section">
        <div class="container-page grid gap-14 lg:grid-cols-12">
            <div class="min-w-0 lg:col-span-8">
                @if (session('success'))
                    <x-alert type="success" class="mb-10" :title="__('Application received')">
                        {{ session('success') }}
                    </x-alert>
                @endif

                @php
                    $chapters = collect([
                        __('Role overview') => $job->description,
                        __('Key responsibilities') => $job->responsibilities,
                        __('Requirements') => $job->requirements,
                    ])->filter(fn ($body) => filled($body));
                @endphp

                @foreach ($chapters as $heading => $body)
                    <section class="mb-12" data-reveal>
                        <h2 class="mb-5 font-display text-title font-bold text-text">{{ $heading }}</h2>
                        <div class="prose-content">{!! $body !!}</div>
                    </section>
                @endforeach

                @if ($job->attachment)
                    <x-button variant="outline" :href="asset_path($job->attachment)" target="_blank" rel="noopener" class="mb-12">
                        <x-icon name="download" class="size-4" /> {{ __('Download the full vacancy notice') }}
                    </x-button>
                @endif

                @if ($job->isOpen())
                    <div id="apply" class="panel scroll-mt-28" data-reveal>
                        <h2 class="font-display text-title font-bold text-text">{{ __('Apply for this position') }}</h2>
                        <p class="mt-2 text-sm text-text-secondary">
                            {{ __('Fields marked with an asterisk are required. Attach your CV as a PDF or Word document, up to 5 MB.') }}
                        </p>

                        @if ($errors->any())
                            <x-alert type="error" class="mt-6" :title="__('Please correct the following')">
                                <ul class="mt-1 list-inside list-disc space-y-0.5">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </x-alert>
                        @endif

                        <form action="{{ route('careers.apply', $job) }}" method="POST" enctype="multipart/form-data"
                              class="mt-8 grid gap-6 sm:grid-cols-2" x-data="submitGuard" @submit="submit()">
                            @csrf

                            <x-form.input name="name" :label="__('Full name')" required autocomplete="name" />
                            <x-form.input name="email" type="email" :label="__('Email address')" required autocomplete="email" />
                            <x-form.input name="phone" :label="__('Phone')" autocomplete="tel" />
                            <x-form.input name="current_position" :label="__('Current position')" />
                            <x-form.input name="address" :label="__('Address')" class="sm:col-span-2" />
                            <x-form.input name="experience_years" type="number" :label="__('Years of experience')" min="0" max="70" />

                            <x-form.file name="cv" :label="__('Upload CV')" accept=".pdf,.doc,.docx" required
                                         :preview="false" :hint="__('PDF or Word document, up to 5 MB.')" />

                            <x-form.textarea name="cover_letter" :label="__('Cover letter')" rows="6" class="sm:col-span-2"
                                             :hint="__('Tell us why you are a strong fit for this role.')" />

                            @include('public.partials.honeypot', ['formId' => 'apply'])
                            @include('public.partials.captcha')

                            <div class="sm:col-span-2">
                                <button type="submit" class="btn-primary w-full sm:w-auto" :disabled="submitting">
                                    <span x-show="!submitting">{{ __('Submit application') }}</span>
                                    <span x-show="submitting" x-cloak>{{ __('Submitting…') }}</span>
                                </button>
                            </div>
                        </form>
                    </div>
                @else
                    <x-alert type="info" :title="__('This vacancy has closed')">
                        {{ __('Browse other opportunities on the careers page.') }}
                    </x-alert>
                @endif
            </div>

            <aside class="lg:col-span-4">
                <div class="space-y-5 lg:sticky lg:top-28">
                    <div class="panel">
                        <p class="meta-label mb-4">{{ __('Position details') }}</p>

                        <dl class="space-y-3.5 text-sm">
                            @foreach ([
                                __('Department') => $job->department,
                                __('Location') => $job->location,
                                __('Type') => $job->typeLabel(),
                                __('Sector') => $job->sector?->name,
                                __('Vacancies') => $job->vacancies,
                                __('Experience') => $job->experience_required,
                                __('Salary') => $job->salary_range,
                                __('Deadline') => $job->deadline?->format('d M Y'),
                            ] as $label => $value)
                                @if (filled($value))
                                    <div class="border-b border-border pb-3.5 last:border-0 last:pb-0">
                                        <dt class="meta-label">{{ $label }}</dt>
                                        <dd class="mt-1 font-medium text-text">{{ $value }}</dd>
                                    </div>
                                @endif
                            @endforeach
                        </dl>

                        @if ($job->isOpen())
                            <x-button href="#apply" class="mt-6 w-full" arrow>{{ __('Apply now') }}</x-button>
                        @endif
                    </div>

                    @if ($otherJobs->isNotEmpty())
                        <div class="panel">
                            <p class="meta-label mb-4">{{ __('Other openings') }}</p>

                            <ul class="space-y-4">
                                @foreach ($otherJobs as $other)
                                    <li>
                                        <a href="{{ route('careers.show', $other) }}" class="group block">
                                            <p class="text-sm font-medium text-text transition group-hover:text-text-brand">{{ $other->title }}</p>
                                            <p class="meta-label mt-1">
                                                {{ $other->typeLabel() }}{{ $other->location ? ' · '.$other->location : '' }}
                                            </p>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </aside>
        </div>
    </section>
@endsection