@extends('layouts.admin')

@section('title', $job->title)
@section('page-title', 'İlan Detayı')

@push('head')
<style>
    /* ── Tab sistemi ── */
    .tab-btn { transition: all .2s; border-bottom: 2px solid transparent; }
    .tab-btn.active { border-bottom-color: #ff7b00; color: #ff7b00; font-weight: 700; }
    .tab-btn:not(.active) { color: #6b7280; }
    .tab-btn:not(.active):hover { color: #374151; border-bottom-color: #e5e7eb; }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ── Stat kartları ── */
    .stat-card { transition: transform .15s, box-shadow .15s; }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

    /* ── Template seçim kartları ── */
    .tpl-card { cursor: pointer; transition: all .2s; border: 2px solid #e5e7eb; }
    .tpl-card:hover { border-color: #ff7b00; box-shadow: 0 4px 16px rgba(255,123,0,.12); }
    .tpl-card.selected { border-color: #ff7b00; background: #fff8f3; }
    .tpl-card.selected .tpl-check { display: flex; }
    .tpl-check { display: none; }

    /* ── Export kartları (tüm kart tıklanabilir) ── */
    .export-card {
        display: block;
        transition: all .18s;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
    }
    .export-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(0,0,0,.10);
        border-color: #d1d5db;
    }
    .export-card-btn { transition: all .15s; }
    .export-card:hover .export-card-btn { transform: translateY(-1px); }

    /* ── Progress bar ── */
    .progress-bar { transition: width .4s ease; }

    /* ── Modal — her zaman ekran ortasında ── */
    .modal-wrap {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(4px);
        align-items: center;
        justify-content: center;
        padding: 16px;
    }
    .modal-wrap.open { display: flex; }
    .modal-box {
        position: relative;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 24px 64px rgba(0,0,0,.18);
        width: 100%;
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* ── Template kartları (yatay, geniş) ── */
    .tpl-row-card {
        display: flex;
        align-items: stretch;
        border: 2px solid #e5e7eb;
        border-radius: 16px;
        overflow: hidden;
        cursor: pointer;
        transition: all .2s;
        background: #fff;
    }
    .tpl-row-card:hover { border-color: #ff7b00; box-shadow: 0 4px 20px rgba(255,123,0,.12); }
    .tpl-row-card.selected { border-color: #ff7b00; background: #fff8f3; }
    .tpl-row-card .tpl-preview { width: 140px; flex-shrink: 0; }
    .tpl-row-card .tpl-body { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; justify-content: space-between; }
</style>
@endpush

@section('content')

@php
    $statusMap = [
        'published' => ['label' => 'Yayında',  'bg' => '#10b981', 'text' => 'text-emerald-700', 'light' => 'bg-emerald-50 border-emerald-200'],
        'draft'     => ['label' => 'Taslak',   'bg' => '#94a3b8', 'text' => 'text-slate-600',   'light' => 'bg-slate-50 border-slate-200'],
        'closed'    => ['label' => 'Kapalı',   'bg' => '#f43f5e', 'text' => 'text-rose-600',    'light' => 'bg-rose-50 border-rose-200'],
    ];
    $st = $statusMap[$job->status] ?? ['label' => $job->status, 'bg' => '#9ca3af', 'text' => 'text-gray-500', 'light' => 'bg-gray-50 border-gray-200'];
    $isExpired = $job->closes_at && $job->closes_at->isPast() && $job->status === 'published';
    $total = $applicationStats['total'] ?: 1;
@endphp

{{-- ═══════════════════════════════════════════════════════════
     HERO BANNER
═══════════════════════════════════════════════════════════ --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-6 overflow-hidden">
    {{-- Durum şeridi --}}
    <div class="h-1" style="background:{{ $st['bg'] }}"></div>

    <div class="p-6 lg:p-8">
        {{-- Breadcrumb --}}
        <nav class="flex items-center gap-1.5 text-xs text-gray-400 mb-5">
            <a href="{{ route('admin.ilanlar.index') }}" class="hover:text-orange-500 transition-colors">İş İlanları</a>
            <svg class="w-3 h-3" 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-gray-600 font-medium truncate max-w-xs">{{ $job->title }}</span>
        </nav>

        <div class="flex flex-col lg:flex-row lg:items-start gap-6">

            {{-- Sol: İlan bilgileri --}}
            <div class="flex-1 min-w-0">
                {{-- Rozetler --}}
                <div class="flex flex-wrap items-center gap-2 mb-3">
                    <span class="inline-flex items-center gap-1.5 text-xs font-bold px-3 py-1 rounded-full text-white" style="background:{{ $st['bg'] }}">
                        <span class="w-1.5 h-1.5 rounded-full bg-white opacity-80 animate-pulse"></span>
                        {{ $st['label'] }}
                    </span>
                    @if($isExpired)
                    <span class="inline-flex items-center gap-1 text-xs font-semibold bg-amber-100 text-amber-700 px-3 py-1 rounded-full border border-amber-200">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                        Son başvuru tarihi geçti
                    </span>
                    @endif
                </div>

                <h1 class="text-2xl lg:text-3xl font-black text-gray-900 mb-4 leading-tight">{{ $job->title }}</h1>

                {{-- Meta bilgiler --}}
                <div class="flex flex-wrap gap-2 mb-4">
                    @if($job->department)
                    <span class="inline-flex items-center gap-1.5 text-sm text-indigo-700 bg-indigo-50 border border-indigo-100 px-3 py-1.5 rounded-lg font-medium">
                        <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="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>
                        {{ $job->department }}
                    </span>
                    @endif
                    <span class="inline-flex items-center gap-1.5 text-sm text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1.5 rounded-lg font-medium">
                        <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="inline-flex items-center gap-1.5 text-sm text-sky-700 bg-sky-50 border border-sky-100 px-3 py-1.5 rounded-lg font-medium">
                        <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="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>
                        {{ $job->employment_type }}
                    </span>
                    @if($job->salary_range)
                    <span class="inline-flex items-center gap-1.5 text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 px-3 py-1.5 rounded-lg font-medium">
                        <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
                    @if($job->working_hours)
                    <span class="inline-flex items-center gap-1.5 text-sm text-orange-700 bg-orange-50 border border-orange-100 px-3 py-1.5 rounded-lg font-medium">
                        <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->working_hours }}
                    </span>
                    @endif
                </div>

                {{-- Tarih bilgileri --}}
                <div class="flex flex-wrap items-center gap-4 text-xs text-gray-400">
                    <span>Oluşturuldu: <span class="text-gray-600 font-semibold">{{ $job->created_at->format('d.m.Y') }}</span></span>
                    @if($job->published_at)
                    <span>Yayınlandı: <span class="text-gray-600 font-semibold">{{ $job->published_at->format('d.m.Y') }}</span></span>
                    @endif
                    @if($job->closes_at)
                    <span class="{{ $isExpired ? 'text-rose-500 font-semibold' : '' }}">
                        Son başvuru: <span class="font-semibold">{{ $job->closes_at->format('d.m.Y') }}</span>
                        @if(!$isExpired) <span class="text-gray-400">({{ $job->closes_at->diffForHumans() }})</span> @endif
                    </span>
                    @endif
                </div>
            </div>

            {{-- Sağ: İstatistik kartları --}}
            <div class="flex-shrink-0">
                <div class="grid grid-cols-3 gap-3 lg:grid-cols-3">
                    <div class="stat-card bg-gradient-to-br from-orange-50 to-orange-100 border border-orange-200 rounded-xl p-4 text-center min-w-[80px]">
                        <div class="text-2xl font-black text-orange-600">{{ $applicationStats['total'] }}</div>
                        <div class="text-xs text-orange-500 font-medium mt-0.5">Toplam</div>
                    </div>
                    <div class="stat-card bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-xl p-4 text-center min-w-[80px]">
                        <div class="text-2xl font-black text-blue-600">{{ $applicationStats['yeni'] }}</div>
                        <div class="text-xs text-blue-500 font-medium mt-0.5">Yeni</div>
                    </div>
                    <div class="stat-card bg-gradient-to-br from-violet-50 to-violet-100 border border-violet-200 rounded-xl p-4 text-center min-w-[80px]">
                        <div class="text-2xl font-black text-violet-600">{{ $applicationStats['gorusmeye_cagirildi'] }}</div>
                        <div class="text-xs text-violet-500 font-medium mt-0.5">Görüşme</div>
                    </div>
                    <div class="stat-card bg-gradient-to-br from-amber-50 to-amber-100 border border-amber-200 rounded-xl p-4 text-center min-w-[80px]">
                        <div class="text-2xl font-black text-amber-600">{{ $applicationStats['incelendi'] }}</div>
                        <div class="text-xs text-amber-500 font-medium mt-0.5">İncelendi</div>
                    </div>
                    <div class="stat-card bg-gradient-to-br from-emerald-50 to-emerald-100 border border-emerald-200 rounded-xl p-4 text-center min-w-[80px]">
                        <div class="text-2xl font-black text-emerald-600">{{ $applicationStats['ise_alindi'] }}</div>
                        <div class="text-xs text-emerald-500 font-medium mt-0.5">İşe Alındı</div>
                    </div>
                    <div class="stat-card bg-gradient-to-br from-rose-50 to-rose-100 border border-rose-200 rounded-xl p-4 text-center min-w-[80px]">
                        <div class="text-2xl font-black text-rose-600">{{ $applicationStats['reddedildi'] }}</div>
                        <div class="text-xs text-rose-500 font-medium mt-0.5">Reddedildi</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Aksiyon butonları --}}
        <div class="flex flex-wrap items-center gap-2 mt-6 pt-5 border-t border-gray-100">
            @can('edit job postings')
            <a href="{{ route('admin.ilanlar.edit', $job) }}"
               class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-gray-900 text-white text-sm font-semibold hover:bg-gray-800 transition-colors">
                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                Düzenle
            </a>
            @endcan

            @can('view applications')
            <a href="{{ route('admin.basvurular.index', ['job_posting_id' => $job->id]) }}"
               class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-orange-500 text-white text-sm font-semibold hover:bg-orange-600 transition-colors">
                <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                Başvurular ({{ $applicationStats['total'] }})
            </a>
            @endcan

            @if($job->status === 'draft')
            @can('publish job postings')
            <form method="POST" action="{{ route('admin.ilanlar.publish', $job) }}" class="inline">
                @csrf
                <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-emerald-500 text-white text-sm font-semibold hover:bg-emerald-600 transition-colors">
                    <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="M5 13l4 4L19 7"/></svg>
                    Yayınla
                </button>
            </form>
            @endcan
            @elseif($job->status === 'published')
            @can('publish job postings')
            <form method="POST" action="{{ route('admin.ilanlar.close', $job) }}" class="inline">
                @csrf
                <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-500 text-white text-sm font-semibold hover:bg-slate-600 transition-colors">
                    <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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                    Kapat
                </button>
            </form>
            @endcan
            @endif

            @if($job->status === 'published')
            <a href="{{ route('job.show', $job->slug) }}" target="_blank"
               class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-white border border-gray-200 text-gray-700 text-sm font-semibold hover:bg-gray-50 transition-colors">
                <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                Önizle
            </a>
            @endif

            <button onclick="openFormSettings()"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-white border border-gray-200 text-gray-700 text-sm font-semibold hover:bg-violet-50 hover:border-violet-300 hover:text-violet-700 transition-colors">
                <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
                Form Ayarları
            </button>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     TAB NAVİGASYON
═══════════════════════════════════════════════════════════ --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-6">
    <div class="flex items-center gap-0 px-2 overflow-x-auto">
        @php
            $tabs = [
                ['id' => 'detay',    'label' => 'İlan Detayı',    'icon' => 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'],
                ['id' => 'export',   'label' => 'Dışa Aktar',     'icon' => 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'],
                ['id' => 'belgeler', 'label' => 'Belgeler & PDF',  'icon' => 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'],
                ['id' => 'form',     'label' => 'Başvuru Formu',   'icon' => 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'],
                ['id' => 'ayarlar',  'label' => 'Diğer',           'icon' => 'M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z'],
            ];
        @endphp
        @foreach($tabs as $tab)
        <button id="tab-btn-{{ $tab['id'] }}" onclick="switchTab('{{ $tab['id'] }}')"
                class="tab-btn flex items-center gap-2 px-5 py-4 text-sm font-medium whitespace-nowrap transition-all">
            <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="{{ $tab['icon'] }}"/></svg>
            {{ $tab['label'] }}
        </button>
        @endforeach
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     TAB 1: İLAN DETAYI
═══════════════════════════════════════════════════════════ --}}
<div id="tab-detay" class="tab-panel active">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        {{-- Sol: Açıklama & Nitelikler --}}
        <div class="lg:col-span-2 space-y-6">
            {{-- Açıklama --}}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="flex items-center gap-3 px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50">
                    <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    </div>
                    <h2 class="font-bold text-gray-800 text-sm">İş Tanımı</h2>
                </div>
                <div class="p-6 prose prose-sm max-w-none text-gray-700 leading-relaxed">
                    {!! nl2br(e($job->description)) !!}
                </div>
            </div>

            {{-- Nitelikler --}}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="flex items-center gap-3 px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-violet-50 to-purple-50">
                    <div class="w-8 h-8 rounded-lg bg-violet-100 flex items-center justify-center">
                        <svg class="w-4 h-4 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                    </div>
                    <h2 class="font-bold text-gray-800 text-sm">Aranan Nitelikler</h2>
                </div>
                <div class="p-6 prose prose-sm max-w-none text-gray-700 leading-relaxed">
                    {!! nl2br(e($job->requirements)) !!}
                </div>
            </div>
        </div>

        {{-- Sağ: Bilgi kartları --}}
        <div class="space-y-4">

            {{-- Başvuru dağılımı --}}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-5">
                <h3 class="font-bold text-gray-800 text-sm mb-4 flex items-center gap-2">
                    <svg class="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                    Başvuru Dağılımı
                </h3>
                @php
                    $bars = [
                        ['label' => 'Yeni',        'count' => $applicationStats['yeni'],                'color' => 'bg-blue-500',    'pct' => round($applicationStats['yeni'] / $total * 100)],
                        ['label' => 'İncelendi',   'count' => $applicationStats['incelendi'],           'color' => 'bg-amber-500',   'pct' => round($applicationStats['incelendi'] / $total * 100)],
                        ['label' => 'Görüşme',     'count' => $applicationStats['gorusmeye_cagirildi'], 'color' => 'bg-violet-500',  'pct' => round($applicationStats['gorusmeye_cagirildi'] / $total * 100)],
                        ['label' => 'İşe Alındı',  'count' => $applicationStats['ise_alindi'],          'color' => 'bg-emerald-500', 'pct' => round($applicationStats['ise_alindi'] / $total * 100)],
                        ['label' => 'Reddedildi',  'count' => $applicationStats['reddedildi'],          'color' => 'bg-rose-500',    'pct' => round($applicationStats['reddedildi'] / $total * 100)],
                    ];
                @endphp
                <div class="space-y-3">
                    @foreach($bars as $bar)
                    <div>
                        <div class="flex justify-between text-xs mb-1">
                            <span class="text-gray-600 font-medium">{{ $bar['label'] }}</span>
                            <span class="text-gray-500">{{ $bar['count'] }} ({{ $bar['pct'] }}%)</span>
                        </div>
                        <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                            <div class="h-full {{ $bar['color'] }} rounded-full progress-bar" style="width:{{ $bar['pct'] }}%"></div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- İlan bilgileri --}}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-5">
                <h3 class="font-bold text-gray-800 text-sm mb-4 flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    İlan Bilgileri
                </h3>
                <dl class="space-y-3 text-sm">
                    @foreach([
                        ['label' => 'Departman',    'value' => $job->department,      'icon' => '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'],
                        ['label' => 'Konum',        'value' => $job->location,        'icon' => 'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'],
                        ['label' => 'Çalışma Tipi', 'value' => $job->employment_type, 'icon' => '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'],
                        ['label' => 'Maaş',         'value' => $job->salary_range,    'icon' => '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'],
                        ['label' => 'Çalışma Saati','value' => $job->working_hours,   'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ] as $info)
                    @if($info['value'])
                    <div class="flex items-start gap-3">
                        <div class="w-7 h-7 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <svg class="w-3.5 h-3.5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $info['icon'] }}"/></svg>
                        </div>
                        <div>
                            <dt class="text-xs text-gray-400 font-medium">{{ $info['label'] }}</dt>
                            <dd class="text-gray-800 font-semibold">{{ $info['value'] }}</dd>
                        </div>
                    </div>
                    @endif
                    @endforeach
                </dl>
            </div>

            {{-- Gerekli belgeler --}}
            @if($job->required_documents)
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-5">
                <h3 class="font-bold text-gray-800 text-sm mb-3 flex items-center gap-2">
                    <svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                    Gerekli Belgeler
                </h3>
                <ul class="space-y-1.5">
                    @foreach(array_filter(explode("\n", $job->required_documents)) as $doc)
                    <li class="flex items-start gap-2 text-sm text-gray-700">
                        <svg class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        {{ trim($doc) }}
                    </li>
                    @endforeach
                </ul>
            </div>
            @endif

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

{{-- ═══════════════════════════════════════════════════════════
     TAB 2: DIŞA AKTAR (Excel / CSV)
═══════════════════════════════════════════════════════════ --}}
<div id="tab-export" class="tab-panel">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

        @can('export applications')
        {{-- Excel İndir — tüm kart tıklanabilir --}}
        <a href="{{ route('admin.basvurular.export', ['jobPosting' => $job->id, 'format' => 'xlsx']) }}"
           class="export-card bg-white rounded-2xl border border-gray-200 shadow-sm p-6 group">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-12 h-12 rounded-2xl bg-emerald-100 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-200 transition-colors">
                    <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                <div class="flex-1">
                    <div class="font-bold text-gray-900 text-base">Excel İndir</div>
                    <div class="text-xs text-emerald-600 font-semibold mt-0.5">.xlsx formatı</div>
                </div>
                <svg class="w-5 h-5 text-gray-300 group-hover:text-emerald-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            </div>
            <p class="text-sm text-gray-500 leading-relaxed">Renk kodlu, filtreli ve dondurulmuş başlık satırlı Excel dosyası. Durum sütunu otomatik renklenir.</p>
            <div class="mt-4 pt-4 border-t border-gray-100 flex items-center gap-2">
                <span class="inline-flex items-center gap-1 text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-lg font-medium border border-emerald-100">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Otomatik filtre
                </span>
                <span class="inline-flex items-center gap-1 text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-lg font-medium border border-emerald-100">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Renk kodlu
                </span>
            </div>
        </a>

        {{-- CSV İndir — tüm kart tıklanabilir --}}
        <a href="{{ route('admin.basvurular.export', ['jobPosting' => $job->id, 'format' => 'csv']) }}"
           class="export-card bg-white rounded-2xl border border-gray-200 shadow-sm p-6 group">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-12 h-12 rounded-2xl bg-sky-100 flex items-center justify-center flex-shrink-0 group-hover:bg-sky-200 transition-colors">
                    <svg class="w-6 h-6 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                </div>
                <div class="flex-1">
                    <div class="font-bold text-gray-900 text-base">CSV İndir</div>
                    <div class="text-xs text-sky-600 font-semibold mt-0.5">.csv formatı</div>
                </div>
                <svg class="w-5 h-5 text-gray-300 group-hover:text-sky-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            </div>
            <p class="text-sm text-gray-500 leading-relaxed">UTF-8 BOM ile Türkçe karakter desteği. Noktalı virgül ayraç ile Excel'de otomatik sütun ayrımı.</p>
            <div class="mt-4 pt-4 border-t border-gray-100 flex items-center gap-2">
                <span class="inline-flex items-center gap-1 text-xs bg-sky-50 text-sky-700 px-2.5 py-1 rounded-lg font-medium border border-sky-100">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    UTF-8 BOM
                </span>
                <span class="inline-flex items-center gap-1 text-xs bg-sky-50 text-sky-700 px-2.5 py-1 rounded-lg font-medium border border-sky-100">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Türkçe karakter
                </span>
            </div>
        </a>

        {{-- Tablo Birleştir --}}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6 md:col-span-2">
            <div class="flex items-center gap-4 mb-5">
                <div class="w-12 h-12 rounded-2xl bg-violet-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-6 h-6 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
                </div>
                <div>
                    <div class="font-bold text-gray-900 text-base">Tablo Birleştir</div>
                    <div class="text-xs text-gray-500 mt-0.5">Mevcut Excel veya CSV dosyasına yeni başvuruları ekle — mükerrer e-posta kontrolü ile</div>
                </div>
            </div>
            <form method="POST" action="{{ route('admin.basvurular.merge-excel', $job) }}" enctype="multipart/form-data">
                @csrf
                <div class="flex flex-col sm:flex-row gap-3">
                    <label class="flex-1 flex items-center gap-3 px-4 py-3.5 border-2 border-dashed border-gray-300 rounded-xl cursor-pointer hover:border-violet-400 hover:bg-violet-50 transition-colors">
                        <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                        <span class="text-sm text-gray-500 truncate" id="merge-file-label">Excel veya CSV dosyası seçin (.xlsx, .xls, .csv)</span>
                        <input type="file" name="excel_file" accept=".xlsx,.xls,.csv" class="hidden"
                               onchange="document.getElementById('merge-file-label').textContent=this.files[0]?.name||'Dosya seçin'">
                    </label>
                    <button type="submit"
                            class="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl bg-violet-600 text-white text-sm font-bold hover:bg-violet-700 transition-colors whitespace-nowrap">
                        <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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
                        Birleştir & İndir
                    </button>
                </div>
                <p class="text-xs text-gray-400 mt-2.5">Yüklediğiniz dosyadaki e-postalar kontrol edilir, mükerrer kayıtlar atlanır. Sonuç .xlsx olarak indirilir.</p>
            </form>
        </div>
        @endcan

    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     TAB 3: BELGELER & PDF
═══════════════════════════════════════════════════════════ --}}
<div id="tab-belgeler" class="tab-panel">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

        {{-- İlan PDF — tüm kart tıklanabilir --}}
        <button onclick="openJobPdfModal()"
                class="export-card bg-white rounded-2xl border border-gray-200 shadow-sm p-6 group text-left w-full">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-12 h-12 rounded-2xl bg-rose-100 flex items-center justify-center flex-shrink-0 group-hover:bg-rose-200 transition-colors">
                    <svg class="w-6 h-6 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                </div>
                <div class="flex-1">
                    <div class="font-bold text-gray-900 text-base">İlan PDF'i</div>
                    <div class="text-xs text-rose-600 font-semibold mt-0.5">3 farklı template</div>
                </div>
                <svg class="w-5 h-5 text-gray-300 group-hover:text-rose-500 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>
            </div>
            <p class="text-sm text-gray-500 leading-relaxed">İlanı PDF olarak dışa aktar. Klasik A4, yatay banner veya sosyal medya odaklı template seçebilirsiniz.</p>
            <div class="mt-4 pt-4 border-t border-gray-100 flex items-center gap-2">
                <span class="inline-flex items-center gap-1 text-xs bg-rose-50 text-rose-700 px-2.5 py-1 rounded-lg font-medium border border-rose-100">Klasik A4</span>
                <span class="inline-flex items-center gap-1 text-xs bg-rose-50 text-rose-700 px-2.5 py-1 rounded-lg font-medium border border-rose-100">Banner</span>
                <span class="inline-flex items-center gap-1 text-xs bg-rose-50 text-rose-700 px-2.5 py-1 rounded-lg font-medium border border-rose-100">Sosyal Medya</span>
            </div>
        </button>

        {{-- PNG Oluştur — tüm kart tıklanabilir --}}
        <button onclick="openPngModal()"
                class="export-card bg-white rounded-2xl border border-gray-200 shadow-sm p-6 group text-left w-full">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-12 h-12 rounded-2xl bg-amber-100 flex items-center justify-center flex-shrink-0 group-hover:bg-amber-200 transition-colors">
                    <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                </div>
                <div class="flex-1">
                    <div class="font-bold text-gray-900 text-base">PNG Görsel Oluştur</div>
                    <div class="text-xs text-amber-600 font-semibold mt-0.5">Sosyal medya paylaşımı</div>
                </div>
                <svg class="w-5 h-5 text-gray-300 group-hover:text-amber-500 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>
            </div>
            <p class="text-sm text-gray-500 leading-relaxed">İlanı sosyal medya görseli olarak oluştur. Instagram, LinkedIn, Twitter ve diğer platformlar için boyut seçenekleri.</p>
            <div class="mt-4 pt-4 border-t border-gray-100 flex items-center gap-2">
                <span class="inline-flex items-center gap-1 text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-lg font-medium border border-amber-100">Instagram</span>
                <span class="inline-flex items-center gap-1 text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-lg font-medium border border-amber-100">LinkedIn</span>
                <span class="inline-flex items-center gap-1 text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-lg font-medium border border-amber-100">Story</span>
            </div>
        </button>

        {{-- Özel Başvuru Formu --}}
        @if($job->custom_application_form_path)
        <a href="{{ route('admin.ilanlar.download-form', $job) }}" target="_blank"
           class="export-card bg-white rounded-2xl border border-gray-200 shadow-sm p-6 group md:col-span-2">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-2xl bg-teal-100 flex items-center justify-center flex-shrink-0 group-hover:bg-teal-200 transition-colors">
                    <svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                </div>
                <div class="flex-1">
                    <div class="font-bold text-gray-900 text-base">Özel Başvuru Formu</div>
                    <div class="text-xs text-teal-600 font-semibold mt-0.5">{{ $job->custom_application_form_name }}</div>
                </div>
                <svg class="w-5 h-5 text-gray-300 group-hover:text-teal-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            </div>
        </a>
        @endif

        {{-- Şartlar / Koşullar PDF --}}
        @if($job->conditions_pdf_path)
        <a href="{{ Storage::url($job->conditions_pdf_path) }}" target="_blank"
           class="export-card bg-white rounded-2xl border border-gray-200 shadow-sm p-6 group md:col-span-2">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-2xl bg-orange-100 flex items-center justify-center flex-shrink-0 group-hover:bg-orange-200 transition-colors">
                    <svg class="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM8 17v-1h8v1H8zm0-3v-1h8v1H8zm0-3V10h5v1H8z"/></svg>
                </div>
                <div class="flex-1">
                    <div class="font-bold text-gray-900 text-base">Şartlar / Koşullar PDF</div>
                    <div class="text-xs text-orange-600 font-semibold mt-0.5">{{ $job->conditions_pdf_name ?? 'sartlar.pdf' }}</div>
                </div>
                <svg class="w-5 h-5 text-gray-300 group-hover:text-orange-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            </div>
        </a>
        @endif

    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     TAB 4: BAŞVURU FORMU
═══════════════════════════════════════════════════════════ --}}
<div id="tab-form" class="tab-panel">
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6 mb-6">
        <div class="flex items-center gap-3 mb-2">
            <div class="w-10 h-10 rounded-xl bg-indigo-100 flex items-center justify-center">
                <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
            </div>
            <div>
                <h2 class="font-bold text-gray-800">Başvuru Formu Oluştur</h2>
                <p class="text-xs text-gray-500">Bu ilana özel, şirket bilgilerinizle doldurulmuş PDF başvuru formu</p>
            </div>
        </div>
    </div>

    {{-- Template seçimi --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-6">
        @php
            $formTemplates = [
                ['id' => 'classic', 'label' => 'Klasik',  'desc' => 'Geleneksel, kurumsal görünüm. Turuncu başlık bandı, iki sütunlu alan düzeni.', 'color' => 'orange'],
                ['id' => 'modern',  'label' => 'Modern',  'desc' => 'Renkli başlık bandı, chip bilgiler, bölüm başlıkları ile modern görünüm.', 'color' => 'violet'],
                ['id' => 'minimal', 'label' => 'Minimal', 'desc' => 'Sade, temiz tasarım. Siyah çizgiler, gri tonlar, profesyonel görünüm.', 'color' => 'slate'],
            ];
        @endphp
        @foreach($formTemplates as $tpl)
        <div class="tpl-card rounded-2xl p-5 relative" onclick="selectFormTemplate('{{ $tpl['id'] }}')" id="form-tpl-{{ $tpl['id'] }}">
            <div class="tpl-check absolute top-3 right-3 w-6 h-6 rounded-full bg-orange-500 items-center justify-center">
                <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
            </div>
            {{-- Template önizleme --}}
            <div class="h-32 rounded-xl mb-4 overflow-hidden border border-gray-100 bg-gray-50 flex items-center justify-center">
                @if($tpl['id'] === 'classic')
                <div class="w-full h-full flex flex-col">
                    <div class="h-8 bg-orange-500 flex items-center px-3"><div class="w-16 h-2 bg-white opacity-80 rounded"></div></div>
                    <div class="flex-1 p-2 space-y-1.5">
                        <div class="w-full h-1.5 bg-gray-200 rounded"></div>
                        <div class="w-3/4 h-1.5 bg-gray-200 rounded"></div>
                        <div class="grid grid-cols-2 gap-1 mt-2">
                            <div class="h-4 bg-gray-100 rounded border border-gray-200"></div>
                            <div class="h-4 bg-gray-100 rounded border border-gray-200"></div>
                        </div>
                    </div>
                </div>
                @elseif($tpl['id'] === 'modern')
                <div class="w-full h-full flex flex-col">
                    <div class="h-10 bg-violet-600 flex items-end px-3 pb-2"><div class="w-20 h-2 bg-white opacity-70 rounded"></div></div>
                    <div class="flex-1 p-2 space-y-1.5">
                        <div class="flex gap-1"><div class="h-3 w-10 bg-violet-100 rounded-full border border-violet-200"></div><div class="h-3 w-12 bg-violet-100 rounded-full border border-violet-200"></div></div>
                        <div class="w-full h-1.5 bg-gray-200 rounded"></div>
                        <div class="grid grid-cols-2 gap-1 mt-1">
                            <div class="h-4 bg-gray-100 rounded border border-gray-200"></div>
                            <div class="h-4 bg-gray-100 rounded border border-gray-200"></div>
                        </div>
                    </div>
                </div>
                @else
                <div class="w-full h-full flex flex-col p-2">
                    <div class="border-b-2 border-gray-800 pb-1 mb-2 flex justify-between"><div class="w-12 h-2 bg-gray-800 rounded"></div><div class="w-16 h-2 bg-gray-400 rounded"></div></div>
                    <div class="space-y-1.5">
                        <div class="w-full h-1 bg-gray-200 rounded"></div>
                        <div class="w-3/4 h-1 bg-gray-200 rounded"></div>
                        <div class="grid grid-cols-2 gap-1 mt-2">
                            <div class="h-3 bg-gray-50 rounded border border-gray-200"></div>
                            <div class="h-3 bg-gray-50 rounded border border-gray-200"></div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
            <h3 class="font-bold text-gray-800 text-sm mb-1">{{ $tpl['label'] }}</h3>
            <p class="text-xs text-gray-500 leading-relaxed">{{ $tpl['desc'] }}</p>
        </div>
        @endforeach
    </div>

    <div class="flex items-center gap-3">
        <button onclick="downloadFormPdf()"
                class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-indigo-600 text-white text-sm font-bold hover:bg-indigo-700 transition-colors">
            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            Seçili Template'i İndir (PDF)
        </button>
        <button onclick="openFormSettings()"
                class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-white border border-gray-200 text-gray-700 text-sm font-semibold hover:bg-violet-50 hover:border-violet-300 hover:text-violet-700 transition-colors">
            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
            Form Ayarları
        </button>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     TAB 5: DİĞER (Kopyala + Tehlikeli Bölge)
═══════════════════════════════════════════════════════════ --}}
<div id="tab-ayarlar" class="tab-panel">
    <div class="max-w-2xl space-y-5">

        {{-- Kopyala --}}
        @can('create job postings')
        <div class="bg-white border border-gray-200 rounded-2xl p-6">
            <div class="flex items-start gap-3 mb-4">
                <div class="w-9 h-9 rounded-xl bg-gray-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                </div>
                <div>
                    <h3 class="font-bold text-gray-800 text-sm">İlanı Kopyala</h3>
                    <p class="text-xs text-gray-500 mt-0.5">Bu ilanın bir kopyasını taslak olarak oluşturun. Kopyayı düzenleyip yayınlayabilirsiniz.</p>
                </div>
            </div>
            <form method="POST" action="{{ route('admin.ilanlar.duplicate', $job) }}">
                @csrf
                <button type="submit" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gray-800 text-white text-sm font-bold hover:bg-gray-900 transition-colors">
                    <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                    İlanı Kopyala
                </button>
            </form>
        </div>
        @endcan

        {{-- Tehlikeli Bölge --}}
        @can('delete job postings')
        <div class="bg-rose-50 border-2 border-rose-200 rounded-2xl p-6">
            <div class="flex items-start gap-3 mb-4">
                <div class="w-9 h-9 rounded-xl bg-rose-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                </div>
                <div>
                    <h3 class="font-bold text-rose-700 text-sm">Tehlikeli Bölge</h3>
                    <p class="text-xs text-rose-600 mt-0.5">Bu işlem geri alınamaz. İlana ait tüm başvurular da kalıcı olarak silinir.</p>
                </div>
            </div>
            <form method="POST" action="{{ route('admin.ilanlar.destroy', $job) }}"
                  onsubmit="return confirm('Bu ilanı kalıcı olarak silmek istediğinizden emin misiniz?\n\nBu işlem GERİ ALINAMAZ!')">
                @csrf
                @method('DELETE')
                <button type="submit"
                        class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-rose-600 text-white text-sm font-bold hover:bg-rose-700 transition-colors">
                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    İlanı Kalıcı Olarak Sil
                </button>
            </form>
        </div>
        @endcan

    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     FORM AYARLARI MODAL
═══════════════════════════════════════════════════════════ --}}
<div id="form-settings-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;">
    <div style="position:relative;background:#fff;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.18);width:100%;max-width:680px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;">
        <div class="flex items-center justify-between px-6 py-5 border-b border-gray-100 flex-shrink-0">
            <div>
                <h2 class="text-base font-bold text-gray-900">Form & Görsel Ayarları</h2>
                <p class="text-xs text-gray-500 mt-0.5">Başvuru formu ve sosyal medya görsellerinde kullanılacak bilgiler</p>
            </div>
            <button onclick="closeFormSettings()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <div class="flex-1 overflow-y-auto p-6">
            <div id="form-settings-errors" class="hidden mb-4 bg-rose-50 border border-rose-200 rounded-xl p-3 text-xs text-rose-700"></div>
            <form id="form-settings-form" enctype="multipart/form-data" class="space-y-5">
                @csrf

                {{-- Şirket Bilgileri --}}
                <div>
                    <h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3">Şirket Bilgileri</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="col-span-2">
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">Şirket Adı</label>
                            <input type="text" name="company_name" value="{{ $formSettings->company_name ?? '' }}"
                                   placeholder="Markamama Pet A.Ş."
                                   class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">Telefon</label>
                            <input type="text" name="company_phone" value="{{ $formSettings->company_phone ?? '' }}"
                                   placeholder="+90 850 532 11 41"
                                   class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">E-posta</label>
                            <input type="email" name="company_email" value="{{ $formSettings->company_email ?? '' }}"
                                   placeholder="ik@markamama.com.tr"
                                   class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">Web Sitesi</label>
                            <input type="text" name="company_website" value="{{ $formSettings->company_website ?? '' }}"
                                   placeholder="https://markamama.com.tr"
                                   class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">Başvuru Linki</label>
                            <input type="text" name="application_url" value="{{ $formSettings->application_url ?? '' }}"
                                   placeholder="https://kariyer.markamama.com.tr"
                                   class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">Şirket Adresi</label>
                            <textarea name="company_address" rows="2" placeholder="Ovacık Mah. Hacıoğlu Sok. No:13, Başiskele / Kocaeli"
                                      class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400 resize-none">{{ $formSettings->company_address ?? '' }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Sosyal Medya --}}
                <div>
                    <h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3">Sosyal Medya</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">📷 Instagram</label>
                            <input type="text" name="social_instagram" value="{{ $formSettings->social_instagram ?? '' }}"
                                   placeholder="@markamama"
                                   class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">in LinkedIn</label>
                            <input type="text" name="social_linkedin" value="{{ $formSettings->social_linkedin ?? '' }}"
                                   placeholder="markamama"
                                   class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">𝕏 Twitter/X</label>
                            <input type="text" name="social_twitter" value="{{ $formSettings->social_twitter ?? '' }}"
                                   placeholder="@markamama"
                                   class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">f Facebook</label>
                            <input type="text" name="social_facebook" value="{{ $formSettings->social_facebook ?? '' }}"
                                   placeholder="markamama"
                                   class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">▶ YouTube</label>
                            <input type="text" name="social_youtube" value="{{ $formSettings->social_youtube ?? '' }}"
                                   placeholder="@markamama"
                                   class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400">
                        </div>
                    </div>
                </div>

                {{-- Görsel Ayarları --}}
                <div>
                    <h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3">Görsel Ayarları</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">Marka Rengi</label>
                            <div class="flex items-center gap-2">
                                <input type="color" name="primary_color" id="fs_color_picker"
                                       value="{{ $formSettings->primary_color ?? '#ff7b00' }}"
                                       class="w-10 h-10 rounded-lg border border-gray-200 cursor-pointer p-0.5"
                                       oninput="document.getElementById('fs_color_text').value=this.value">
                                <input type="text" id="fs_color_text" value="{{ $formSettings->primary_color ?? '#ff7b00' }}"
                                       class="flex-1 px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300"
                                       oninput="document.getElementById('fs_color_picker').value=this.value">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">Logo</label>
                            <label class="flex items-center gap-2 w-full px-3 py-2.5 border border-dashed border-gray-300 rounded-xl cursor-pointer hover:border-orange-400 hover:bg-orange-50 transition-colors">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                                <span class="text-xs text-gray-500 truncate" id="logo-label">{{ $formSettings->company_logo_path ? 'Logo mevcut' : 'Logo yükle' }}</span>
                                <input type="file" name="company_logo" accept="image/*" class="hidden"
                                       onchange="document.getElementById('logo-label').textContent=this.files[0]?.name||'Logo yükle'">
                            </label>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-xs font-bold text-gray-700 mb-1.5">KVKK / Form Alt Yazısı</label>
                            <textarea name="form_footer_text" rows="3"
                                      placeholder="Kişisel verileriniz KVKK kapsamında işlenecektir..."
                                      class="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 focus:border-orange-400 resize-none">{{ $formSettings->form_footer_text ?? '' }}</textarea>
                        </div>
                    </div>
                </div>

            </form>
        </div>

        <div class="flex items-center gap-3 px-6 py-4 border-t border-gray-100 bg-gray-50 flex-shrink-0 rounded-b-2xl">
            <button type="button" onclick="closeFormSettings()"
                    class="flex-1 px-4 py-2.5 rounded-xl border border-gray-200 text-gray-600 text-sm font-semibold hover:bg-gray-100 transition-colors">
                İptal
            </button>
            <button type="button" onclick="saveFormSettings()" id="save-settings-btn"
                    class="flex-1 px-4 py-2.5 rounded-xl bg-orange-500 text-white text-sm font-bold hover:bg-orange-600 transition-colors flex items-center justify-center gap-2">
                <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="M5 13l4 4L19 7"/></svg>
                Kaydet
            </button>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     İLAN PDF TEMPLATE MODAL
═══════════════════════════════════════════════════════════ --}}
<div id="job-pdf-modal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg">
        <div class="flex items-center justify-between px-6 py-5 border-b border-gray-100">
            <div>
                <h2 class="text-base font-bold text-gray-900">İlan PDF Template Seç</h2>
                <p class="text-xs text-gray-500 mt-0.5">İndirmek istediğiniz template'i seçin</p>
            </div>
            <button onclick="closeJobPdfModal()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center text-gray-400">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="p-6 space-y-3">
            @php
                $jobPdfTemplates = [
                    ['id' => 'classic', 'label' => 'Klasik A4',       'desc' => 'Standart dikey A4 formatı. Tüm ilan detayları, şirket bilgileri.',       'icon' => 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', 'color' => 'rose'],
                    ['id' => 'banner',  'label' => 'Banner (Yatay)',   'desc' => 'Yatay A4 formatı. Büyük başlık, renkli arka plan. Duyuru amaçlı.',        'icon' => 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z', 'color' => 'orange'],
                    ['id' => 'social',  'label' => 'Sosyal Medya',     'desc' => 'Koyu arka plan, büyük başlık, sosyal medya hesapları ve başvuru linki.',   'icon' => 'M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z', 'color' => 'indigo'],
                ];
            @endphp
            @php
                $tplColorMap = [
                    'rose'   => ['border' => '#fca5a5', 'bg' => '#fff1f2', 'iconBg' => '#fee2e2', 'iconBg2' => '#fecaca', 'iconText' => '#e11d48', 'arrow' => '#f43f5e'],
                    'orange' => ['border' => '#fdba74', 'bg' => '#fff7ed', 'iconBg' => '#ffedd5', 'iconBg2' => '#fed7aa', 'iconText' => '#ea580c', 'arrow' => '#f97316'],
                    'indigo' => ['border' => '#a5b4fc', 'bg' => '#eef2ff', 'iconBg' => '#e0e7ff', 'iconBg2' => '#c7d2fe', 'iconText' => '#4338ca', 'arrow' => '#6366f1'],
                ];
            @endphp
            @foreach($jobPdfTemplates as $tpl)
            @php $tc = $tplColorMap[$tpl['color']] ?? $tplColorMap['rose']; @endphp
            <a href="{{ route('admin.ilanlar.export-pdf', ['jobPosting' => $job->id, 'template' => $tpl['id']]) }}"
               class="flex items-center gap-4 p-4 rounded-xl border-2 transition-all group"
               style="border-color: #e5e7eb;"
               onmouseover="this.style.borderColor='{{ $tc['border'] }}';this.style.backgroundColor='{{ $tc['bg'] }}'"
               onmouseout="this.style.borderColor='#e5e7eb';this.style.backgroundColor=''">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-colors"
                     style="background-color: {{ $tc['iconBg'] }};"
                     onmouseover="this.style.backgroundColor='{{ $tc['iconBg2'] }}'"
                     onmouseout="this.style.backgroundColor='{{ $tc['iconBg'] }}'">
                    <svg class="w-5 h-5" style="color: {{ $tc['iconText'] }};" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $tpl['icon'] }}"/></svg>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="font-bold text-gray-800 text-sm">{{ $tpl['label'] }}</div>
                    <div class="text-xs text-gray-500 mt-0.5">{{ $tpl['desc'] }}</div>
                </div>
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            </a>
            @endforeach
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     PNG MODAL — Önizleme + İndirme
═══════════════════════════════════════════════════════════ --}}
<div id="png-modal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;">
    <div style="position:relative;background:#fff;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.3);width:100%;max-width:960px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;">

        {{-- Header --}}
        <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #f3f4f6;flex-shrink:0;">
            <div>
                <h2 style="font-size:.95rem;font-weight:700;color:#111827;margin:0;">Sosyal Medya Görseli</h2>
                <p style="font-size:.72rem;color:#6b7280;margin:2px 0 0;">Boyut seçin, önizleyin, indirin</p>
            </div>
            <button onclick="closePngModal()" style="width:32px;height:32px;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#9ca3af;" onmouseover="this.style.background='#f3f4f6'" onmouseout="this.style.background='none'">
                <svg style="width:18px;height:18px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        {{-- Body: Sol panel + Sağ önizleme --}}
        <div style="display:flex;flex:1;overflow:hidden;min-height:0;">

            {{-- Sol: Boyut seçimi --}}
            <div style="width:240px;flex-shrink:0;border-right:1px solid #f3f4f6;padding:20px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;">
                <p style="font-size:.7rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin:0 0 4px;">Boyut Seç</p>

                @php
                    $pngSizes = [
                        ['id' => 'square',    'label' => 'Kare',    'sub' => '1080×1080',  'platform' => 'Instagram',  'icon' => '⬛', 'ratio' => '1/1'],
                        ['id' => 'portrait',  'label' => 'Dikey',   'sub' => '1080×1350',  'platform' => 'Instagram',  'icon' => '📱', 'ratio' => '4/5'],
                        ['id' => 'landscape', 'label' => 'Yatay',   'sub' => '1200×628',   'platform' => 'LinkedIn/FB','icon' => '🖥',  'ratio' => '1.91/1'],
                        ['id' => 'story',     'label' => 'Story',   'sub' => '1080×1920',  'platform' => 'Story',      'icon' => '📲', 'ratio' => '9/16'],
                    ];
                @endphp

                @foreach($pngSizes as $sz)
                <button onclick="selectPngSize('{{ $sz['id'] }}')"
                        id="png-size-btn-{{ $sz['id'] }}"
                        style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:2px solid #e5e7eb;background:#fff;cursor:pointer;text-align:left;transition:all .15s;width:100%;"
                        onmouseover="if(pngSelectedSize!=='{{ $sz['id'] }}'){this.style.borderColor='#fbbf24';this.style.background='#fffbeb';}"
                        onmouseout="if(pngSelectedSize!=='{{ $sz['id'] }}'){this.style.borderColor='#e5e7eb';this.style.background='#fff';}">
                    <span style="font-size:1.3rem;flex-shrink:0;">{{ $sz['icon'] }}</span>
                    <div>
                        <div style="font-size:.8rem;font-weight:700;color:#1f2937;">{{ $sz['label'] }}</div>
                        <div style="font-size:.68rem;color:#6b7280;">{{ $sz['sub'] }} · {{ $sz['platform'] }}</div>
                    </div>
                </button>
                @endforeach

                <div style="margin-top:auto;padding-top:16px;border-top:1px solid #f3f4f6;">
                    <p style="font-size:.68rem;color:#9ca3af;line-height:1.5;margin:0 0 12px;">PDF olarak indirilir. PNG'ye dönüştürmek için <a href="https://smallpdf.com/pdf-to-jpg" target="_blank" style="color:#f97316;">smallpdf.com</a> kullanabilirsiniz.</p>
                    <button id="png-download-btn"
                       onclick="downloadPng()"
                       style="display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border-radius:12px;background:#f97316;color:#fff;font-size:.8rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:background .15s;"
                       onmouseover="this.style.background='#ea580c'"
                       onmouseout="this.style.background='#f97316'">
                        <svg style="width:14px;height:14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        PNG İndir
                    </button>
                </div>
            </div>

            {{-- Sağ: Önizleme --}}
            <div style="flex:1;background:#1e1e2e;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;overflow:auto;min-height:0;">
                <div id="png-preview-loading" style="color:#6b7280;font-size:.8rem;display:flex;flex-direction:column;align-items:center;gap:8px;">
                    <svg style="width:24px;height:24px;animation:spin 1s linear infinite;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                    Önizleme yükleniyor...
                </div>
                <div id="png-preview-wrap" style="display:none;width:100%;max-height:100%;overflow:auto;">
                    <iframe id="png-preview-frame"
                            style="border:none;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.4);display:block;margin:0 auto;"
                            scrolling="no"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
</style>

{{-- Toast --}}
@if(session('success'))
<div id="toast-s" class="fixed bottom-5 right-5 z-50 bg-emerald-500 text-white px-5 py-3 rounded-2xl shadow-lg text-sm font-semibold flex items-center gap-2">
    <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="M5 13l4 4L19 7"/></svg>
    {{ session('success') }}
</div>
<script nonce="{{ app('csp-nonce') }}">setTimeout(()=>{let t=document.getElementById('toast-s');if(t){t.style.opacity='0';t.style.transition='opacity .3s';setTimeout(()=>t.remove(),300);}},3500);</script>
@endif
@if(session('error'))
<div id="toast-e" class="fixed bottom-5 right-5 z-50 bg-rose-500 text-white px-5 py-3 rounded-2xl shadow-lg text-sm font-semibold flex items-center gap-2">
    <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="M6 18L18 6M6 6l12 12"/></svg>
    {{ session('error') }}
</div>
<script nonce="{{ app('csp-nonce') }}">setTimeout(()=>{let t=document.getElementById('toast-e');if(t){t.style.opacity='0';t.style.transition='opacity .3s';setTimeout(()=>t.remove(),300);}},3500);</script>
@endif
<div id="toast-d" class="fixed bottom-5 right-5 z-50 hidden px-5 py-3 rounded-2xl shadow-lg text-sm font-semibold text-white"></div>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script nonce="{{ app('csp-nonce') }}">
// ─── Tab sistemi ─────────────────────────────────────────────
const TABS = ['detay', 'export', 'belgeler', 'form', 'ayarlar'];
function switchTab(name) {
    TABS.forEach(t => {
        const panel = document.getElementById('tab-' + t);
        const btn   = document.getElementById('tab-btn-' + t);
        if (!panel || !btn) return;
        if (t === name) { panel.classList.add('active'); btn.classList.add('active'); }
        else            { panel.classList.remove('active'); btn.classList.remove('active'); }
    });
    // URL hash güncelle
    history.replaceState(null, '', '#' + name);
}

// Hash'e göre tab aç
(function() {
    const hash = location.hash.replace('#', '');
    if (TABS.includes(hash)) switchTab(hash);
    else switchTab('detay');
})();

// ─── Toast ───────────────────────────────────────────────────
function showToast(msg, type='success') {
    const t = document.getElementById('toast-d');
    t.className = 'fixed bottom-5 right-5 z-50 px-5 py-3 rounded-2xl shadow-lg text-sm font-semibold text-white ' +
        (type==='success' ? 'bg-emerald-500' : 'bg-rose-500');
    t.textContent = msg;
    t.classList.remove('hidden');
    setTimeout(()=>{ t.style.opacity='0'; t.style.transition='opacity .3s'; setTimeout(()=>{t.classList.add('hidden');t.style.opacity='';},300); }, 3500);
}

// ─── Form Ayarları Modal ─────────────────────────────────────
function openFormSettings() {
    const m = document.getElementById('form-settings-modal');
    m.style.display = 'flex';
    document.body.style.overflow = 'hidden';
}
function closeFormSettings() {
    const m = document.getElementById('form-settings-modal');
    m.style.display = 'none';
    document.body.style.overflow = '';
}
function saveFormSettings() {
    const btn = document.getElementById('save-settings-btn');
    const errBox = document.getElementById('form-settings-errors');
    btn.disabled = true;
    btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Kaydediliyor...';
    errBox.classList.add('hidden');

    const formData = new FormData(document.getElementById('form-settings-form'));

    fetch('{{ route("admin.form-ayarlari.update") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
        },
        body: formData,
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast('Form ayarları kaydedildi.', 'success');
            closeFormSettings();
        } else {
            if (data.errors) {
                const msgs = Object.values(data.errors).flat().join('<br>');
                errBox.innerHTML = msgs;
                errBox.classList.remove('hidden');
            } else {
                showToast('Kayıt sırasında hata oluştu.', 'error');
            }
        }
    })
    .catch(err => {
        console.error(err);
        showToast('Bağlantı hatası. Lütfen tekrar deneyin.', 'error');
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '<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="M5 13l4 4L19 7"/></svg> Kaydet';
    });
}

// ─── İlan PDF Modal ──────────────────────────────────────────
function openJobPdfModal() {
    const m = document.getElementById('job-pdf-modal');
    m.style.display = 'flex';
    document.body.style.overflow = 'hidden';
}
function closeJobPdfModal() {
    const m = document.getElementById('job-pdf-modal');
    m.style.display = 'none';
    document.body.style.overflow = '';
}

// ─── PNG Modal ───────────────────────────────────────────────
var pngSelectedSize = 'square';
var pngPreviewUrl   = '{{ route("admin.ilanlar.preview-template", ["jobPosting" => $job->id]) }}?type=job&template=social';
var pngDownloadBase = '{{ route("admin.ilanlar.export-pdf", ["jobPosting" => $job->id]) }}?template=social&size=';

// Boyut → iframe boyutları (önizleme için ölçeklenmiş)
var pngSizeDims = {
    square:    { w: 480, h: 480 },
    portrait:  { w: 480, h: 600 },
    landscape: { w: 600, h: 314 },
    story:     { w: 270, h: 480 },
};

function openPngModal() {
    const m = document.getElementById('png-modal');
    m.style.display = 'flex';
    document.body.style.overflow = 'hidden';
    // İlk açılışta square seç ve önizle
    selectPngSize('square');
}
function closePngModal() {
    const m = document.getElementById('png-modal');
    m.style.display = 'none';
    document.body.style.overflow = '';
}

function selectPngSize(size) {
    pngSelectedSize = size;

    // Buton stillerini güncelle
    ['square','portrait','landscape','story'].forEach(function(s) {
        var btn = document.getElementById('png-size-btn-' + s);
        if (!btn) return;
        if (s === size) {
            btn.style.borderColor = '#f97316';
            btn.style.background  = '#fff7ed';
        } else {
            btn.style.borderColor = '#e5e7eb';
            btn.style.background  = '#fff';
        }
    });

    // İndir butonunu güncelle (button elementi, href değil data-url kullan)
    var dlBtn = document.getElementById('png-download-btn');
    if (dlBtn) dlBtn.dataset.url = pngDownloadBase + size;

    // Önizlemeyi yükle
    loadPngPreview(size);
}

function loadPngPreview(size) {
    var loading = document.getElementById('png-preview-loading');
    var wrap    = document.getElementById('png-preview-wrap');
    var frame   = document.getElementById('png-preview-frame');

    loading.style.display = 'flex';
    loading.innerHTML = '<svg style="width:24px;height:24px;animation:spin 1s linear infinite;" fill="none" stroke="#6b7280" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg><span style="color:#6b7280;font-size:.8rem;margin-top:4px;">Önizleme yükleniyor...</span>';
    wrap.style.display    = 'none';

    var dims = pngSizeDims[size] || { w: 480, h: 480 };
    frame.style.width  = dims.w + 'px';
    frame.style.height = dims.h + 'px';

    fetch(pngPreviewUrl, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(function(r) { return r.text(); })
    .then(function(html) {
        var doc = frame.contentDocument || frame.contentWindow.document;
        doc.open();
        doc.write(html);
        doc.close();

        setTimeout(function() {
            loading.style.display = 'none';
            wrap.style.display    = 'block';
        }, 800);
    })
    .catch(function(err) {
        console.error('Önizleme yüklenemedi:', err);
        loading.innerHTML = '<span style="color:#ef4444;font-size:.75rem;">Önizleme yüklenemedi.</span>';
    });
}

function downloadPng() {
    var dlBtn = document.getElementById('png-download-btn');
    var frame = document.getElementById('png-preview-frame');

    // html2canvas yüklü değilse PDF'e düş
    if (typeof html2canvas === 'undefined') {
        window.location.href = pngDownloadBase + pngSelectedSize;
        return;
    }

    var origText = dlBtn.innerHTML;
    dlBtn.innerHTML = '<svg style="width:14px;height:14px;animation:spin 1s linear infinite;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Oluşturuluyor...';
    dlBtn.style.pointerEvents = 'none';

    try {
        var frameDoc = frame.contentDocument || frame.contentWindow.document;
        var target   = frameDoc.body;

        html2canvas(target, {
            backgroundColor: '#0f172a',
            scale: 2,
            useCORS: true,
            width:  parseInt(frame.style.width),
            height: parseInt(frame.style.height),
            windowWidth:  parseInt(frame.style.width),
            windowHeight: parseInt(frame.style.height),
        }).then(function(canvas) {
            var link = document.createElement('a');
            link.download = 'ilan-sosyal-' + pngSelectedSize + '-{{ now()->format("Y-m-d") }}.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
            dlBtn.innerHTML = origText;
            dlBtn.style.pointerEvents = '';
        }).catch(function(e) {
            console.error(e);
            window.location.href = pngDownloadBase + pngSelectedSize;
            dlBtn.innerHTML = origText;
            dlBtn.style.pointerEvents = '';
        });
    } catch(e) {
        window.location.href = pngDownloadBase + pngSelectedSize;
        dlBtn.innerHTML = origText;
        dlBtn.style.pointerEvents = '';
    }
}

// ─── Başvuru Formu Template Seçimi ───────────────────────────
let selectedFormTemplate = 'classic';
function selectFormTemplate(id) {
    selectedFormTemplate = id;
    ['classic', 'modern', 'minimal'].forEach(t => {
        const el = document.getElementById('form-tpl-' + t);
        if (el) {
            if (t === id) el.classList.add('selected');
            else el.classList.remove('selected');
        }
    });
}
// Varsayılan seçim
selectFormTemplate('classic');

function downloadFormPdf() {
    const url = '{{ route("admin.ilanlar.application-form", ["jobPosting" => $job->id]) }}?template=' + selectedFormTemplate;
    window.location.href = url;
}

// ─── ESC kapatır ─────────────────────────────────────────────
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') {
        closeFormSettings();
        closeJobPdfModal();
        closePngModal();
    }
});

// ─── Modal dışına tıklayınca kapat ───────────────────────────
['form-settings-modal', 'job-pdf-modal', 'png-modal'].forEach(id => {
    const el = document.getElementById(id);
    if (el) {
        el.addEventListener('click', function(e) {
            if (e.target === this) {
                this.style.display = 'none';
                document.body.style.overflow = '';
            }
        });
    }
});
</script>
@endpush

@endsection