@extends('layouts.app')

@section('title', $job->title . ' - ' . $job->company)

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    {{-- Breadcrumb --}}
    <nav class="mb-6 text-sm text-gray-500 animate-fade-in">
        <a href="{{ route('home') }}" class="hover:text-indigo-600">Lowongan</a>
        <span class="mx-2">/</span>
        <span class="text-gray-700">{{ $job->title }}</span>
    </nav>

    {{-- Mobile Banner Top --}}
    @if($mobileBanner)
    <div class="ad-container ad-mobile mb-4">
        <div class="ad-label">Iklan</div>
        <div class="ad-content">{!! $mobileBanner->code !!}</div>
    </div>
    @endif

    <div class="flex flex-col lg:flex-row gap-6">
        {{-- Main Content --}}
        <div class="flex-1 min-w-0">
            <div class="bg-white rounded-xl border border-gray-100 p-8 animate-fade-in-up">
                {{-- Job Image --}}
                @if($job->image)
                <div class="mb-6 rounded-xl overflow-hidden img-hover-zoom">
                    <img src="{{ asset('storage/' . $job->image) }}" alt="{{ $job->title }}" class="w-full h-56 object-cover">
                </div>
                @endif

                {{-- Header --}}
                <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-6 gap-4">
                    <div class="flex items-start space-x-4">
                        @if($job->company_logo)
                        <img src="{{ asset('storage/' . $job->company_logo) }}" alt="{{ $job->company }}" class="w-16 h-16 object-contain rounded-lg border border-gray-100 flex-shrink-0">
                        @endif
                        <div>
                            <span class="inline-block px-3 py-1 text-xs font-medium rounded-full mb-3
                                {{ $job->type === 'Full-time' ? 'bg-green-100 text-green-700' :
                                   ($job->type === 'Part-time' ? 'bg-blue-100 text-blue-700' :
                                   ($job->type === 'Freelance' ? 'bg-purple-100 text-purple-700' : 'bg-orange-100 text-orange-700')) }}">
                                {{ $job->type }}
                            </span>
                            <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">{{ $job->title }}</h1>
                            <p class="text-indigo-600 font-semibold text-lg mt-1">{{ $job->company }}</p>
                            <p class="text-gray-500 mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                </svg>
                                {{ $job->location }}
                            </p>
                        </div>
                    </div>
                    <div class="sm:text-right">
                        <div class="text-green-600 font-bold text-sm sm:text-base">{{ $job->formatted_salary }}</div>
                    </div>
                </div>

                <hr class="my-6 border-gray-100">

                {{-- Description --}}
                <div class="mb-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-3">Deskripsi Pekerjaan</h2>
                    <div class="text-gray-600 leading-relaxed prose max-w-none">{!! nl2br(e($job->description)) !!}</div>
                </div>

                {{-- In-Article Ad --}}
                @if($inArticleAd)
                <div class="ad-container my-6">
                    <div class="ad-label">Iklan</div>
                    <div class="ad-content">{!! $inArticleAd->code !!}</div>
                </div>
                @endif

                {{-- Requirements --}}
                <div class="mb-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-3">Persyaratan</h2>
                    <div class="text-gray-600 leading-relaxed prose max-w-none">{!! nl2br(e($job->requirements)) !!}</div>
                </div>

                {{-- Benefits --}}
                @if($job->benefits)
                <div class="mb-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-3">Benefit</h2>
                    <div class="text-gray-600 leading-relaxed prose max-w-none">{!! nl2br(e($job->benefits)) !!}</div>
                </div>
                @endif

                {{-- Native Ad --}}
                @if($nativeAd)
                <div class="ad-container my-6">
                    <div class="ad-label">Iklan</div>
                    <div class="ad-content">{!! $nativeAd->code !!}</div>
                </div>
                @endif

                {{-- Recruitment Warning --}}
                <div class="bg-yellow-50 border border-yellow-300 rounded-xl p-5 my-6">
                    <div class="flex items-start space-x-3">
                        <svg class="w-6 h-6 text-yellow-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                        <p class="text-sm text-yellow-800 leading-relaxed">
                            <strong>Peringatan:</strong> Proses rekrutmen dilakukan secara transparan dan tidak dipungut biaya apapun. Kami menghimbau pelamar untuk waspada terhadap penipuan yang mengatasnamakan perusahaan atau platform ini.
                        </p>
                    </div>
                </div>

                <hr class="my-6 border-gray-100">

                {{-- Apply Button --}}
                <div class="text-center">
                    <a href="{{ route('ads.countdown', $job) }}"
                        class="inline-block bg-indigo-600 text-white px-10 py-4 rounded-xl text-lg font-semibold hover:outline hover:outline-2 hover:outline-indigo-800 pulse-cta">
                        Lamar Sekarang
                    </a>
                    <p class="text-sm text-gray-400 mt-3">Klik untuk melanjutkan proses melamar</p>
                </div>
            </div>

            {{-- Banner Ad Bottom --}}
            @if($bannerBottom)
            <div class="ad-container mt-6 ad-desktop">
                <div class="ad-label">Iklan</div>
                <div class="ad-content">{!! $bannerBottom->code !!}</div>
            </div>
            @endif

            {{-- Mobile Banner Bottom (using banner_top to avoid duplicate script) --}}
            @if($bannerTop ?? false)
            <div class="ad-container mt-6 ad-mobile">
                <div class="ad-label">Iklan</div>
                <div class="ad-content">{!! $bannerTop->code !!}</div>
            </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="w-full lg:w-72 flex-shrink-0 space-y-4">
            {{-- Quick Apply Card --}}
            <div class="bg-white rounded-xl border border-gray-100 p-6 sticky top-20 animate-fade-in-up" style="animation-delay: 0.15s">
                <h3 class="font-semibold text-gray-800 mb-2">{{ $job->title }}</h3>
                <p class="text-sm text-gray-500 mb-4">{{ $job->company }}</p>
                <a href="{{ route('ads.countdown', $job) }}"
                    class="block text-center bg-indigo-600 text-white py-3 rounded-lg font-medium hover:outline hover:outline-2 hover:outline-indigo-800 pulse-cta">
                    Lamar Sekarang
                </a>
            </div>

            {{-- Sidebar Ads --}}
            @if($sidebarAds->count() > 0)
                @foreach($sidebarAds as $sidebarAd)
                <div class="ad-container">
                    <div class="ad-label">Iklan</div>
                    <div class="ad-content">{!! $sidebarAd->code !!}</div>
                </div>
                @endforeach
            @endif
        </div>
    </div>
</div>
@endsection