@extends('layouts.app')

@section('content')
<article class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
    <nav aria-label="Breadcrumb" class="mb-6 text-sm text-gray-500">
        <a href="{{ route('home') }}" class="hover:text-brand-purple">{{ __('Home') }}</a>
        <span class="mx-2">/</span>
        <a href="{{ route('jobs.index') }}" class="hover:text-brand-purple">{{ __('Jobs') }}</a>
        <span class="mx-2">/</span>
        <span class="text-gray-900">{{ $job->title }}</span>
    </nav>

    <header class="card">
        <div class="flex flex-col gap-6 sm:flex-row sm:items-start">
            @if($job->company?->logo)
                <img src="{{ asset('storage/'.$job->company->logo) }}" alt="{{ $job->company->name }}" class="h-20 w-20 rounded-2xl object-cover" width="80" height="80">
            @endif
            <div class="flex-1">
                <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">{{ $job->title }}</h1>
                <p class="mt-1 text-lg text-gray-600">
                    <a href="{{ route('companies.show', $job->company->slug) }}" class="hover:text-brand-purple">{{ $job->company->name }}</a>
                </p>
                <div class="mt-4 flex flex-wrap gap-2">
                    <span class="badge bg-blue-50 text-blue-700">📍 {{ $job->location_display }}</span>
                    <span class="badge bg-purple-50 text-purple-700">{{ $job->job_type->label() }}</span>
                    <span class="badge bg-gray-100 text-gray-600">{{ $job->experience_level->label() }}</span>
                    @if($job->show_salary)
                        <span class="badge bg-green-50 text-green-700">💰 {{ $job->salary_display }}</span>
                    @endif
                </div>
                <p class="mt-3 text-sm text-gray-400">{{ __('Posted') }} {{ $job->published_at?->format('M d, Y') }} @if($job->expires_at) · {{ __('Expires') }} {{ $job->expires_at->format('M d, Y') }}@endif</p>
            </div>
            <div class="flex gap-2">
                @auth
                    @if(auth()->user()->isJobSeeker())
                        @if($isSaved)
                            <form action="{{ route('seeker.saved-jobs.destroy', $job) }}" method="POST">@csrf @method('DELETE')
                                <button type="submit" class="btn-secondary !py-2 !px-4 text-sm">★ {{ __('Saved') }}</button>
                            </form>
                        @else
                            <form action="{{ route('seeker.saved-jobs.store', $job) }}" method="POST">@csrf
                                <button type="submit" class="btn-secondary !py-2 !px-4 text-sm">☆ {{ __('Save') }}</button>
                            </form>
                        @endif
                    @endif
                @endauth
            </div>
        </div>
    </header>

    <div class="mt-8 grid gap-8 lg:grid-cols-3">
        <div class="lg:col-span-2 space-y-8">
            @if($job->description)
                <section class="card prose job-desc-content max-w-none">
                    <h2 class="!mt-0 text-lg font-semibold">{{ __('Job Description') }}</h2>
                    {!! app(\App\Support\HtmlSanitizer::class)->cleanJobDescription($job->description) !!}
                </section>
            @endif
            @if($job->responsibilities)
                <section class="card prose max-w-none">
                    <h2 class="!mt-0 text-lg font-semibold">{{ __('Responsibilities') }}</h2>
                    {!! nl2br(e($job->responsibilities)) !!}
                </section>
            @endif
            @if($job->requirements)
                <section class="card prose max-w-none">
                    <h2 class="!mt-0 text-lg font-semibold">{{ __('Requirements') }}</h2>
                    {!! nl2br(e($job->requirements)) !!}
                </section>
            @endif
            @if($job->benefits)
                <section class="card prose max-w-none">
                    <h2 class="!mt-0 text-lg font-semibold">{{ __('Benefits') }}</h2>
                    {!! nl2br(e($job->benefits)) !!}
                </section>
            @endif
        </div>

        <aside id="apply" class="space-y-6">
            <div class="card sticky top-24">
                <h2 class="text-lg font-semibold text-gray-900">{{ __('Apply for this Job') }}</h2>
                @if($hasApplied ?? false)
                    <div class="mt-4 rounded-lg bg-green-50 p-4 text-sm text-green-800">
                        {{ __('You have already applied for this job.') }}
                        @auth
                            <a href="{{ route('seeker.applications.index') }}" class="mt-2 block font-semibold text-green-700 hover:underline">{{ __('View my applications') }}</a>
                        @endauth
                    </div>
                @else
                @auth
                    <p class="mt-2 text-sm text-gray-500">{{ __('Applying as') }} <strong>{{ auth()->user()->name }}</strong> ({{ auth()->user()->email }})</p>
                @endauth
                @error('apply')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
                <form action="{{ route('jobs.apply', $job) }}" method="POST" enctype="multipart/form-data" class="mt-4 space-y-4">
                    @csrf
                    @guest
                        <div>
                            <label class="label" for="full_name">{{ __('Full Name') }}</label>
                            <input type="text" id="full_name" name="full_name" required class="input-field" value="{{ old('full_name') }}">
                        </div>
                        <div>
                            <label class="label" for="email">{{ __('Email') }}</label>
                            <input type="email" id="email" name="email" required class="input-field" value="{{ old('email') }}">
                        </div>
                        <div>
                            <label class="label" for="phone">{{ __('Phone') }}</label>
                            <input type="tel" id="phone" name="phone" class="input-field" value="{{ old('phone') }}">
                        </div>
                    @endguest
                    <div>
                        <label class="label" for="cover_letter">{{ __('Cover Letter') }}</label>
                        <textarea id="cover_letter" name="cover_letter" rows="4" class="input-field">{{ old('cover_letter') }}</textarea>
                    </div>
                    @if(!auth()->user()?->cv_path)
                        <div>
                            <label class="label" for="cv">{{ __('Upload CV') }} (PDF, DOC, DOCX)</label>
                            <input type="file" id="cv" name="cv" accept=".pdf,.doc,.docx" required class="input-field">
                            @error('cv')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                    @else
                        <p class="text-sm text-gray-500">{{ __('Your profile CV will be attached to this application.') }}</p>
                    @endif
                    <button type="submit" class="btn-primary w-full">{{ __('Submit Application') }}</button>
                </form>
                @endif
            </div>
        </aside>
    </div>

    @if($relatedJobs->count())
        <section class="mt-16">
            <h2 class="section-title">{{ __('Related Jobs') }}</h2>
            <div class="mt-8 grid gap-6 md:grid-cols-2">
                @foreach($relatedJobs as $related)
                    @include('public.jobs.partials.card', ['job' => $related])
                @endforeach
            </div>
        </section>
    @endif
</article>
@endsection