@extends('layouts.app')
@section('title', $job->title)

@section('content')
<div class="max-w-5xl mx-auto px-4 py-8">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

        {{-- Main content --}}
        <div class="md:col-span-2 space-y-6">

            {{-- Header --}}
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-start gap-4">
                    <img src="{{ $job->company?->logo_url ?? 'https://ui-avatars.com/api/?name='.urlencode($job->title) }}"
                         class="w-20 h-20 rounded object-cover">

                    <div class="flex-1">
                        <h1 class="text-2xl font-bold text-gray-800">{{ $job->title }}</h1>
                        <p class="text-gray-600 mt-1">
                            {{ $job->company?->name ?? 'Anonymous' }}
                            @if($job->company?->is_verified)
                                <span class="text-blue-500 text-sm">✓ Verified</span>
                            @endif
                        </p>
                        <p class="text-sm text-gray-500 mt-1">📍 {{ $job->location }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-6">
                    <div class="bg-gray-50 rounded p-3">
                        <p class="text-xs text-gray-500">Job Type</p>
                        <p class="font-semibold">{{ $job->job_type_label }}</p>
                    </div>
                    <div class="bg-gray-50 rounded p-3">
                        <p class="text-xs text-gray-500">Experience</p>
                        <p class="font-semibold">{{ $job->experience_range }}</p>
                    </div>
                    <div class="bg-gray-50 rounded p-3">
                        <p class="text-xs text-gray-500">Salary</p>
                        <p class="font-semibold">{{ $job->salary_range }}</p>
                    </div>
                    <div class="bg-gray-50 rounded p-3">
                        <p class="text-xs text-gray-500">Deadline</p>
                        <p class="font-semibold">
                            {{ $job->deadline ? $job->deadline->format('d M, Y') : 'Open' }}
                        </p>
                    </div>
                </div>
            </div>

            {{-- Description --}}
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-lg font-bold mb-3">Job Description</h2>
                <div class="prose max-w-none text-gray-700">
                    {!! nl2br(e($job->description)) !!}
                </div>
            </div>

            @if($job->requirements)
                <div class="bg-white rounded-lg shadow p-6">
                    <h2 class="text-lg font-bold mb-3">Requirements</h2>
                    <div class="prose max-w-none text-gray-700">
                        {!! nl2br(e($job->requirements)) !!}
                    </div>
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <aside class="md:col-span-1 space-y-4">

            {{-- Apply Button --}}
            <div class="bg-white rounded-lg shadow p-6">
                @auth
                    @if(auth()->user()->isSeeker())
                        @if($hasApplied)
                            <div class="bg-green-100 text-green-800 px-4 py-3 rounded text-center">
                                ✓ আপনি ইতিমধ্যে apply করেছেন
                            </div>
                        @elseif($job->can_apply)
                            <button onclick="document.getElementById('applyForm').classList.toggle('hidden')"
                                    class="w-full bg-blue-600 text-white py-3 rounded font-semibold hover:bg-blue-700">
                                Apply Now
                            </button>
                        @else
                            <div class="bg-red-100 text-red-800 px-4 py-3 rounded text-center">
                                এই জবটি বন্ধ
                            </div>
                        @endif
                    @else
                        <p class="text-sm text-gray-500 text-center">
                            Employer হিসেবে লগইন করা অবস্থায় apply করা যাবে না।
                        </p>
                    @endif
                @else
                    <a href="{{ route('login') }}"
                       class="block w-full bg-blue-600 text-white py-3 rounded font-semibold text-center hover:bg-blue-700">
                        Login to Apply
                    </a>
                @endauth
            </div>

            {{-- Apply Form --}}
            @auth
                @if(auth()->user()->isSeeker() && !$hasApplied && $job->can_apply)
                    <form id="applyForm" method="POST" action="{{ route('seeker.jobs.apply', $job) }}"
                          enctype="multipart/form-data"
                          class="hidden bg-white rounded-lg shadow p-6 space-y-3">
                        @csrf
                        <h3 class="font-bold">Apply for this Job</h3>

                        <div>
                            <label class="text-sm">Cover Letter (Optional)</label>
                            <textarea name="cover_letter" rows="4"
                                      class="w-full border rounded px-3 py-2 mt-1"></textarea>
                        </div>

                        <div>
                            <label class="text-sm">Resume (PDF/DOC, max 5MB)</label>
                            <input type="file" name="resume" accept=".pdf,.doc,.docx"
                                   class="w-full border rounded px-3 py-2 mt-1">
                        </div>

                        <button class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">
                            Submit Application
                        </button>
                    </form>
                @endif
            @endauth

            {{-- Company Info --}}
            @if($job->company)
                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="font-bold mb-3">About Company</h3>
                    <p class="text-sm text-gray-700 mb-3">{{ $job->company->name }}</p>

                    @if($job->company->full_location)
                        <p class="text-sm text-gray-500">📍 {{ $job->company->full_location }}</p>
                    @endif

                    @if($job->company->website_url)
                        <a href="{{ $job->company->website_url }}" target="_blank"
                           class="text-blue-600 text-sm hover:underline mt-2 block">
                            🌐 Visit Website
                        </a>
                    @endif

                    <a href="{{ route('jobs.by-company', $job->company->slug) }}"
                       class="text-blue-600 text-sm hover:underline mt-2 block">
                        View all jobs →
                    </a>
                </div>
            @endif

            {{-- Related Jobs --}}
            @if($relatedJobs->count())
                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="font-bold mb-3">Related Jobs</h3>
                    <div class="space-y-3">
                        @foreach($relatedJobs as $rjob)
                            <a href="{{ route('jobs.show', $rjob->slug) }}"
                               class="block border-b pb-3 last:border-0 hover:text-blue-600">
                                <p class="font-semibold text-sm">{{ $rjob->title }}</p>
                                <p class="text-xs text-gray-500">{{ $rjob->company?->name }}</p>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </aside>
    </div>
</div>
@endsection