@extends('layouts.admin')

@section('title', 'İş İlanları')
@section('page-title', 'İş İlanları')
@section('page-subtitle', 'Tüm iş ilanlarını yönetin')

@section('content')
<div class="mt-4 space-y-4">

    {{-- Üst Bar --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 px-4 py-3 flex items-center justify-between gap-3 flex-wrap">
        <form method="GET" class="flex items-center gap-2 flex-wrap">
            <select name="status" onchange="this.form.submit()"
                    class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 text-gray-600">
                <option value="">Tüm Durumlar</option>
                <option value="published" {{ request('status') == 'published' ? 'selected' : '' }}>Yayında</option>
                <option value="draft"     {{ request('status') == 'draft'     ? 'selected' : '' }}>Taslak</option>
                <option value="closed"    {{ request('status') == 'closed'    ? 'selected' : '' }}>Kapalı</option>
            </select>
            @if($departments->isNotEmpty())
            <select name="department" onchange="this.form.submit()"
                    class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 text-gray-600">
                <option value="">Tüm Departmanlar</option>
                @foreach($departments as $dept)
                <option value="{{ $dept }}" {{ request('department') == $dept ? 'selected' : '' }}>{{ $dept }}</option>
                @endforeach
            </select>
            @endif
            @if(request()->hasAny(['status', 'department']))
            <a href="{{ route('admin.ilanlar.index') }}"
               class="text-xs text-gray-400 hover:text-gray-600 px-1">✕ Temizle</a>
            @endif
        </form>
        @can('create job postings')
        <a href="{{ route('admin.ilanlar.create') }}"
           class="bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-orange-600 transition-colors flex items-center gap-1.5 flex-shrink-0">
            <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="M12 4v16m8-8H4"/></svg>
            Yeni İlan
        </a>
        @endcan
    </div>

    {{-- İstatistik Kartları --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
        <a href="{{ route('admin.ilanlar.index') }}"
           class="stat-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-4 flex items-center gap-3 hover:shadow-md transition-all"
           style="{{ !request('status') ? 'border: 2px solid #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.15);' : 'border: 2px solid #fed7aa;' }}">
            <div class="w-11 h-11 rounded-xl bg-orange-200 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-orange-700" 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>
            <div>
                <p class="text-2xl font-black text-orange-600">{{ $stats['total'] }}</p>
                <p class="text-xs text-orange-500 font-semibold">Toplam İlan</p>
            </div>
        </a>
        <a href="{{ route('admin.ilanlar.index', ['status' => 'published']) }}"
           class="stat-card bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-xl p-4 flex items-center gap-3 hover:shadow-md transition-all"
           style="{{ request('status') === 'published' ? 'border: 2px solid #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15);' : 'border: 2px solid #a7f3d0;' }}">
            <div class="w-11 h-11 rounded-xl bg-emerald-200 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-emerald-700" 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>
            </div>
            <div>
                <p class="text-2xl font-black text-emerald-600">{{ $stats['published'] }}</p>
                <p class="text-xs text-emerald-600 font-semibold">Yayında</p>
            </div>
        </a>
        <a href="{{ route('admin.ilanlar.index', ['status' => 'draft']) }}"
           class="stat-card bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl p-4 flex items-center gap-3 hover:shadow-md transition-all"
           style="{{ request('status') === 'draft' ? 'border: 2px solid #6b7280; box-shadow: 0 0 0 3px rgba(107,114,128,.15);' : 'border: 2px solid #d1d5db;' }}">
            <div class="w-11 h-11 rounded-xl bg-gray-300 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="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>
            </div>
            <div>
                <p class="text-2xl font-black text-gray-600">{{ $stats['draft'] }}</p>
                <p class="text-xs text-gray-500 font-semibold">Taslak</p>
            </div>
        </a>
        <a href="{{ route('admin.ilanlar.index', ['status' => 'closed']) }}"
           class="stat-card bg-gradient-to-br from-rose-50 to-rose-100 rounded-xl p-4 flex items-center gap-3 hover:shadow-md transition-all"
           style="{{ request('status') === 'closed' ? 'border: 2px solid #f43f5e; box-shadow: 0 0 0 3px rgba(244,63,94,.15);' : 'border: 2px solid #fecdd3;' }}">
            <div class="w-11 h-11 rounded-xl bg-rose-200 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-rose-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div>
                <p class="text-2xl font-black text-rose-600">{{ $stats['closed'] }}</p>
                <p class="text-xs text-rose-500 font-semibold">Kapalı</p>
            </div>
        </a>
    </div>

    {{-- Tablo --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        @if($jobs->isEmpty())
        <div class="text-center py-16 text-gray-400">
            <svg class="w-12 h-12 mx-auto mb-3 opacity-30" 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>
            <p class="text-sm">Henüz ilan bulunamadı.</p>
            @can('create job postings')
            <a href="{{ route('admin.ilanlar.create') }}" class="mt-3 inline-block text-primary text-sm hover:underline">İlk ilanı oluştur →</a>
            @endcan
        </div>
        @else
        <table class="w-full text-sm">
            <thead class="bg-gray-50 border-b border-gray-100">
                <tr>
                    <th class="w-1 px-2 py-3"></th>
                    <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">İlan</th>
                    <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Departman</th>
                    <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Durum</th>
                    <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Başvuru</th>
                    <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Son Başvuru</th>
                    <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Oluşturulma</th>
                    <th class="text-center px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide" style="width:140px; min-width:140px;">İşlemler</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($jobs as $job)
                @php
                    $barColor = match($job->status) {
                        'published' => 'bg-green-500',
                        'draft'     => 'bg-gray-300',
                        'closed'    => 'bg-red-400',
                        default     => 'bg-gray-200',
                    };
                    $badgeClass = match($job->status) {
                        'published' => 'bg-green-100 text-green-700',
                        'draft'     => 'bg-gray-100 text-gray-600',
                        'closed'    => 'bg-red-100 text-red-600',
                        default     => 'bg-gray-100 text-gray-500',
                    };
                    $statusLabel = match($job->status) {
                        'published' => 'Yayında',
                        'draft'     => 'Taslak',
                        'closed'    => 'Kapalı',
                        default     => $job->status,
                    };
                    $isExpired  = $job->closes_at && $job->closes_at->isPast() && $job->status === 'published';
                    $closesSoon = $job->closes_at && !$job->closes_at->isPast() && $job->closes_at->diffInDays(now()) <= 3 && $job->status === 'published';

                    if ($isExpired) {
                        $badgeClass  = 'bg-red-100 text-red-600';
                        $statusLabel = 'Kapalı';
                        $barColor    = 'bg-red-400';
                    }
                @endphp
                <tr class="hover:bg-gray-50/60 transition-colors job-row"
                    data-id="{{ $job->id }}"
                    data-status="{{ $job->status }}"
                    data-detail="{{ route('admin.ilanlar.show', $job) }}"
                    data-edit="{{ route('admin.ilanlar.edit', $job) }}"
                    data-publish-url="{{ route('admin.ilanlar.publish', $job) }}"
                    data-draft-url="{{ route('admin.ilanlar.draft', $job) }}"
                    data-close-url="{{ route('admin.ilanlar.close', $job) }}"
                    data-applications-url="{{ route('admin.basvurular.index', ['job_posting_id' => $job->id]) }}"
                    data-applications-count="{{ $job->applications_count }}"
                    data-delete-url="{{ route('admin.ilanlar.destroy', $job) }}"
                    data-title="{{ $job->title }}">
                    {{-- Sol renkli durum çizgisi --}}
                    <td class="pl-2 pr-0 py-0 w-1">
                        <div class="w-1.5 h-14 rounded-full {{ $barColor }}"></div>
                    </td>
                    <td class="px-4 py-4">
                        <p class="font-medium text-gray-800">{{ $job->title }}</p>
                        <p class="text-xs text-gray-400 mt-0.5">📍 {{ $job->location }} · {{ $job->employment_type }}</p>
                    </td>
                    <td class="px-4 py-4 text-gray-600 text-sm">
                        {{ $job->department ?: '—' }}
                    </td>
                    <td class="px-4 py-4 text-center">
                        <span class="text-xs px-2.5 py-1 rounded-full font-medium {{ $badgeClass }}">
                            {{ $statusLabel }}
                        </span>
                    </td>
                    <td class="px-4 py-4 text-center">
                        @can('view applications')
                        <a href="{{ route('admin.basvurular.index', ['job_posting_id' => $job->id]) }}"
                           class="inline-flex items-center justify-center min-w-[2rem] px-2 py-0.5 rounded-full text-xs font-semibold
                                  {{ $job->applications_count > 0 ? 'bg-orange-100 text-orange-700 hover:bg-orange-200' : 'bg-gray-100 text-gray-500' }} transition-colors">
                            {{ $job->applications_count }}
                        </a>
                        @else
                        <span class="text-xs text-gray-500">{{ $job->applications_count }}</span>
                        @endcan
                    </td>
                    <td class="px-4 py-4">
                        @if($job->closes_at)
                            <div class="flex items-center gap-1.5">
                                <span class="text-xs text-gray-600">{{ $job->closes_at->format('d.m.Y') }}</span>
                                @if($isExpired)
                                <span class="text-xs bg-red-50 text-red-500 px-1.5 py-0.5 rounded-full border border-red-100 font-semibold">⚠️ Geçti</span>
                                @elseif($closesSoon)
                                <span class="text-xs bg-amber-50 text-amber-600 px-1.5 py-0.5 rounded-full border border-amber-100 font-semibold">Yakında</span>
                                @endif
                            </div>
                        @else
                            <span class="text-xs text-gray-400">—</span>
                        @endif
                    </td>
                    <td class="px-4 py-4 text-xs text-gray-500">
                        {{ $job->created_at->format('d.m.Y') }}
                    </td>
                    <td class="px-5 py-4">
                        <div class="flex items-center justify-center gap-1">
                            <a href="{{ route('admin.ilanlar.show', $job) }}"
                               title="Detay"
                               class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            </a>
                            @can('edit job postings')
                            <a href="{{ route('admin.ilanlar.edit', $job) }}"
                               title="Düzenle"
                               class="w-8 h-8 flex items-center justify-center rounded-lg bg-orange-50 text-orange-600 hover:bg-orange-100 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>
                            </a>
                            @endcan
                            @can('publish job postings')
                            @if($job->status !== 'published')
                            <form method="POST" action="{{ route('admin.ilanlar.publish', $job) }}" class="inline">
                                @csrf
                                <button type="submit" title="Yayınla"
                                        class="w-8 h-8 flex items-center justify-center rounded-lg bg-green-50 text-green-600 hover:bg-green-100 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                </button>
                            </form>
                            @else
                            <form method="POST" action="{{ route('admin.ilanlar.close', $job) }}" class="inline">
                                @csrf
                                <button type="submit" title="Kapat"
                                        class="w-8 h-8 flex items-center justify-center rounded-lg bg-red-50 text-red-500 hover:bg-red-100 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 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                </button>
                            </form>
                            @endif
                            @endcan
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @if($jobs->hasPages())
        <div class="px-5 py-4 border-t border-gray-100">
            {{ $jobs->withQueryString()->links() }}
        </div>
        @endif
        @endif
    </div>

</div>

{{-- Sağ Tık Menüsü --}}
<div id="jobContextMenu" style="position:fixed;z-index:9999;background:white;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.14);min-width:200px;padding:4px 0;display:none;">
    <a id="ctxDetail" href="#" class="ctx-item" style="display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:.8rem;color:#374151;text-decoration:none;">
        <svg style="width:14px;height:14px;flex-shrink:0;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
        Detay
    </a>
    @can('edit job postings')
    <a id="ctxEdit" href="#" class="ctx-item" style="display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:.8rem;color:#374151;text-decoration:none;">
        <svg style="width:14px;height:14px;flex-shrink:0;" 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 id="ctxApplications" href="#" class="ctx-item" style="display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:.8rem;color:#374151;text-decoration:none;">
        <svg style="width:14px;height:14px;flex-shrink:0;" 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>
        <span id="ctxApplicationsLabel">Başvurular</span>
    </a>
    @endcan
    @can('publish job postings')
    <div style="height:1px;background:#f3f4f6;margin:3px 0;" id="ctxPublishDivider"></div>
    <button id="ctxPublish" class="ctx-item" style="display:none;align-items:center;gap:9px;width:100%;padding:9px 14px;font-size:.8rem;color:#059669;background:none;border:none;cursor:pointer;text-align:left;">
        <svg style="width:14px;height:14px;flex-shrink:0;" 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>
        Yayına Al
    </button>
    <button id="ctxDraft" class="ctx-item" style="display:none;align-items:center;gap:9px;width:100%;padding:9px 14px;font-size:.8rem;color:#6b7280;background:none;border:none;cursor:pointer;text-align:left;">
        <svg style="width:14px;height:14px;flex-shrink:0;" 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>
        Taslağa Al
    </button>
    <button id="ctxClose" class="ctx-item" style="display:none;align-items:center;gap:9px;width:100%;padding:9px 14px;font-size:.8rem;color:#dc2626;background:none;border:none;cursor:pointer;text-align:left;">
        <svg style="width:14px;height:14px;flex-shrink:0;" 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>
    @endcan
    @can('delete job postings')
    <div style="height:1px;background:#f3f4f6;margin:3px 0;"></div>
    <button id="ctxDelete" class="ctx-item" style="display:flex;align-items:center;gap:9px;width:100%;padding:9px 14px;font-size:.8rem;color:#dc2626;background:none;border:none;cursor:pointer;text-align:left;">
        <svg style="width:14px;height:14px;flex-shrink:0;" 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>
        Sil
    </button>
    @endcan
</div>

{{-- Gizli formlar (POST işlemleri için) --}}
<form id="ctxPublishForm" method="POST" style="display:none;"><input type="hidden" name="_token" value="{{ csrf_token() }}"></form>
<form id="ctxDraftForm"   method="POST" style="display:none;"><input type="hidden" name="_token" value="{{ csrf_token() }}"></form>
<form id="ctxCloseForm"   method="POST" style="display:none;"><input type="hidden" name="_token" value="{{ csrf_token() }}"></form>
<form id="ctxDeleteForm"  method="POST" style="display:none;"><input type="hidden" name="_token" value="{{ csrf_token() }}"><input type="hidden" name="_method" value="DELETE"></form>

@if(session('success'))
<div id="toast-success" class="fixed bottom-5 right-5 z-50 bg-green-500 text-white px-5 py-3 rounded-xl shadow-lg text-sm font-medium 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(function(){ var t = document.getElementById('toast-success'); if(t) t.remove(); }, 3500);</script>
@endif

@if(session('error'))
<div id="toast-error" class="fixed bottom-5 right-5 z-50 bg-red-500 text-white px-5 py-3 rounded-xl shadow-lg text-sm font-medium 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(function(){ var t = document.getElementById('toast-error'); if(t) t.remove(); }, 3500);</script>
@endif

<style>
.ctx-item:hover { background: #f9fafb; }
</style>
<script nonce="{{ app('csp-nonce') }}">
(function() {
    var menu = document.getElementById('jobContextMenu');
    var publishForm = document.getElementById('ctxPublishForm');
    var draftForm   = document.getElementById('ctxDraftForm');
    var closeForm   = document.getElementById('ctxCloseForm');
    var deleteForm  = document.getElementById('ctxDeleteForm');

    // Hover efekti
    document.querySelectorAll('.ctx-item').forEach(function(el) {
        el.addEventListener('mouseenter', function() { this.style.background = '#f9fafb'; });
        el.addEventListener('mouseleave', function() { this.style.background = ''; });
    });

    var ctxEdit         = document.getElementById('ctxEdit');
    var ctxApplications = document.getElementById('ctxApplications');
    var ctxAppLabel     = document.getElementById('ctxApplicationsLabel');
    var ctxPublish      = document.getElementById('ctxPublish');
    var ctxDraft        = document.getElementById('ctxDraft');
    var ctxClose        = document.getElementById('ctxClose');
    var ctxDelete       = document.getElementById('ctxDelete');
    var ctxPublishDiv   = document.getElementById('ctxPublishDivider');

    document.querySelectorAll('.job-row').forEach(function(row) {
        row.addEventListener('contextmenu', function(e) {
            e.preventDefault();

            var status   = row.dataset.status;
            var appCount = parseInt(row.dataset.applicationsCount) || 0;

            // Linkleri ayarla
            document.getElementById('ctxDetail').href = row.dataset.detail;
            if (ctxEdit)         ctxEdit.href         = row.dataset.edit;
            if (ctxApplications) ctxApplications.href = row.dataset.applicationsUrl;
            if (ctxAppLabel)     ctxAppLabel.textContent =
                'Başvurular' + (appCount > 0 ? ' (' + appCount + ')' : '');

            // Durum butonlarını göster/gizle (sadece izin varsa)
            if (ctxPublish && ctxDraft && ctxClose) {
                if (status === 'draft' || status === 'closed') {
                    ctxPublish.style.display = 'flex';
                    ctxDraft.style.display   = 'none';
                    ctxClose.style.display   = 'none';
                } else if (status === 'published') {
                    ctxPublish.style.display = 'none';
                    ctxDraft.style.display   = 'flex';
                    ctxClose.style.display   = 'flex';
                }
            }

            // Form action'larını ayarla
            if (publishForm) publishForm.action = row.dataset.publishUrl;
            if (draftForm)   draftForm.action   = row.dataset.draftUrl;
            if (closeForm)   closeForm.action   = row.dataset.closeUrl;
            if (deleteForm)  deleteForm.action  = row.dataset.deleteUrl;

            // Menüyü konumlandır
            var menuW = 210, menuH = 260;
            var x = e.clientX, y = e.clientY;
            if (x + menuW > window.innerWidth)  x = x - menuW;
            if (y + menuH > window.innerHeight) y = y - menuH;
            menu.style.left    = x + 'px';
            menu.style.top     = y + 'px';
            menu.style.display = 'block';
        });
    });

    // Yayına Al
    if (ctxPublish) ctxPublish.addEventListener('click', function() {
        menu.style.display = 'none';
        if (publishForm) publishForm.submit();
    });

    // Taslağa Al
    if (ctxDraft) ctxDraft.addEventListener('click', function() {
        menu.style.display = 'none';
        if (draftForm) draftForm.submit();
    });

    // Kapat
    if (ctxClose) ctxClose.addEventListener('click', function() {
        menu.style.display = 'none';
        if (closeForm) closeForm.submit();
    });

    // Sil
    if (ctxDelete) ctxDelete.addEventListener('click', function() {
        if (confirm('Bu ilanı kalıcı olarak silmek istediğinizden emin misiniz?\n\nBu işlem GERİ ALINAMAZ!')) {
            menu.style.display = 'none';
            if (deleteForm) deleteForm.submit();
        }
    });

    document.addEventListener('click', function(e) {
        if (!menu.contains(e.target)) menu.style.display = 'none';
    });
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') menu.style.display = 'none';
    });
})();
</script>

@endsection