@extends('layouts.public')

@section('title', $department->name . ' — Kariyer')
@section('description', $department->description ? Str::limit($department->description, 160) : $department->name . ' departmanındaki açık pozisyonlar ve kariyer fırsatları.')
@section('canonical', route('department.show', $department->slug))
@section('og_title', $department->name . ' — Markamama Kariyer')
@section('og_description', $department->description ? Str::limit($department->description, 160) : $department->name . ' departmanındaki açık pozisyonlar.')

@section('content')

{{-- Breadcrumb + Hero --}}
<section class="relative text-white overflow-hidden"
    style="background: linear-gradient(135deg, #ff7b00 0%, #e06000 60%, #c45200 100%); min-height: 200px;">

    {{-- Banner arka plan görseli --}}
    @if($department->cover_image_banner)
    <div class="absolute inset-0">
        <img src="{{ Storage::url($department->cover_image_banner) }}" alt="{{ $department->name }}"
             class="w-full h-full object-cover" style="opacity:0.25;">
        <div class="absolute inset-0" style="background: linear-gradient(135deg, rgba(255,123,0,0.85) 0%, rgba(196,82,0,0.9) 100%);"></div>
    </div>
    @endif

    <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
        <nav class="text-sm text-orange-200 mb-4 flex items-center gap-2">
            <a href="{{ route('home') }}" class="hover:text-white transition-colors">Açık Pozisyonlar</a>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            <span class="text-white font-medium">{{ $department->name }}</span>
        </nav>
        <div class="flex items-center gap-4">
            @if($department->cover_image)
            <img src="{{ Storage::url($department->cover_image) }}" alt="{{ $department->name }}"
                 class="w-14 h-14 rounded-xl object-cover border-2 border-white/30 flex-shrink-0">
            @else
            <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            </div>
            @endif
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold">{{ $department->name }}</h1>
                <p class="text-orange-100 text-sm mt-1">
                    {{ $jobs->count() > 0 ? $jobs->count() . ' açık pozisyon' : 'Şu an açık pozisyon yok' }}
                </p>
            </div>
        </div>
        @if($department->description)
        <p class="text-orange-100 mt-4 max-w-2xl text-sm sm:text-base leading-relaxed">{{ $department->description }}</p>
        @endif
    </div>
</section>

<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-10">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        {{-- SOL: İlanlar --}}
        <div class="lg:col-span-2">

            @if($jobs->isEmpty())
            <div class="bg-white rounded-xl border border-gray-100 p-10 text-center">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-600 mb-2">Şu an açık pozisyon bulunmuyor</h3>
                <p class="text-gray-400 text-sm mb-6">
                    Yeni pozisyonlar için takipte kalın.
                </p>
                <a href="{{ route('home') }}" class="inline-block text-primary text-sm font-medium hover:underline">
                    ← Tüm pozisyonlara dön
                </a>
            </div>
            @else
            <div class="space-y-4">
                @foreach($jobs as $job)
                <article class="bg-white rounded-xl border border-gray-100 hover:border-orange-200 hover:shadow-md transition-all duration-200">
                    <div class="p-5 sm:p-6">
                        <div class="flex items-start justify-between gap-3 mb-3">
                            <div class="flex items-center gap-2 flex-wrap">
                                @if($job->is_featured)
                                <span class="inline-flex items-center gap-1 bg-yellow-50 text-yellow-700 text-xs font-semibold px-2 py-1 rounded-full">
                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    Öne Çıkan
                                </span>
                                @endif
                            </div>
                            @if($job->closes_at)
                            <span class="text-xs text-gray-400 flex-shrink-0 whitespace-nowrap">
                                {{ $job->closes_at->format('d.m.Y') }}'e kadar
                            </span>
                            @endif
                        </div>
                        <h2 class="text-lg font-bold text-gray-800 mb-2 leading-tight">{{ $job->title }}</h2>
                        <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-500 mb-3">
                            <span class="flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" 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"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                {{ $job->location }}
                            </span>
                            <span class="flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                {{ $job->employment_type }}
                            </span>
                            @if($job->salary_range)
                            <span class="flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                {{ $job->salary_range }}
                            </span>
                            @endif
                        </div>
                        <p class="text-sm text-gray-600 line-clamp-2 mb-4">
                            {{ Str::limit(strip_tags($job->description), 150) }}
                        </p>
                        <a href="{{ route('job.show', $job->slug) }}"
                           class="inline-flex items-center gap-2 bg-primary text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-orange-600 transition-colors">
                            Detaylar & Başvur
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </a>
                    </div>
                </article>
                @endforeach
            </div>
            @endif

        </div>

        {{-- SAĞ: Sidebar --}}
        <div class="space-y-5">

            {{-- Diğer Departmanlar --}}
            @if($otherDepartments->isNotEmpty())
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <h3 class="font-bold text-gray-800 mb-4 text-sm uppercase tracking-wide">Diğer Departmanlar</h3>
                <div class="space-y-2">
                    @foreach($otherDepartments as $other)
                    <a href="{{ route('department.show', $other->slug) }}"
                       class="flex items-center justify-between p-2.5 rounded-lg hover:bg-orange-50 transition-colors group">
                        <span class="text-sm text-gray-700 group-hover:text-primary transition-colors font-medium">{{ $other->name }}</span>
                        <svg class="w-4 h-4 text-gray-400 group-hover:text-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </a>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Tüm Pozisyonlar --}}
            <div class="bg-white rounded-xl border border-gray-100 p-5">
                <h3 class="font-bold text-gray-800 mb-3 text-sm uppercase tracking-wide">Tüm Pozisyonlar</h3>
                <p class="text-xs text-gray-500 mb-4">Tüm departmanlardaki açık pozisyonları görüntüleyin.</p>
                <a href="{{ route('home') }}"
                   class="block w-full text-center bg-gray-100 text-gray-700 py-2.5 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors">
                    Tüm Pozisyonlara Dön
                </a>
            </div>

        </div>
    </div>
</div>

@endsection