@extends('layouts.admin')

@section('title', 'Geçmiş Başvurular')
@section('page-title', 'Geçmiş Başvurular')
@section('page-subtitle', 'Reddedilen ve işe alınan başvurular')

@section('content')

{{-- Üst Bar --}}
<div class="mb-4 mt-2 flex items-center justify-between">
    <a href="{{ route('admin.basvurular.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-primary 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 19l-7-7 7-7"/></svg>
        Aktif Başvurulara Dön
    </a>
</div>

{{-- Filtreler --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-5">
    <form method="GET" class="flex flex-wrap gap-3 items-end">
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">İlan</label>
            <select name="job_posting_id" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                <option value="">Tüm İlanlar</option>
                @foreach($jobPostings as $jp)
                <option value="{{ $jp->id }}" {{ request('job_posting_id') == $jp->id ? 'selected' : '' }}>{{ $jp->title }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">Durum</label>
            <select name="status" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                <option value="">Tümü</option>
                <option value="reddedildi" {{ request('status') == 'reddedildi' ? 'selected' : '' }}>Reddedildi</option>
                <option value="işe_alındı" {{ request('status') == 'işe_alındı' ? 'selected' : '' }}>İşe Alındı</option>
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">Arama</label>
            <input type="text" name="search" value="{{ request('search') }}"
                   class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                   placeholder="Ad, e-posta...">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">Başlangıç</label>
            <input type="date" name="date_from" value="{{ request('date_from') }}"
                   class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">Bitiş</label>
            <input type="date" name="date_to" value="{{ request('date_to') }}"
                   class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
        </div>
        <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-orange-600 transition-colors">
            Filtrele
        </button>
        @if(request()->hasAny(['job_posting_id', 'status', 'search', 'date_from', 'date_to']))
        <a href="{{ route('admin.basvurular.gecmis') }}" class="text-gray-500 hover:text-gray-700 text-sm py-2">Temizle</a>
        @endif
    </form>
</div>

{{-- Tablo --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
        <p class="text-sm text-gray-500">
            <strong class="text-gray-700">{{ $applications->total() }}</strong> geçmiş başvuru
        </p>
    </div>
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-100">
            <tr>
                <th class="text-left px-5 py-3 font-semibold text-gray-600">Başvuran</th>
                <th class="text-left px-4 py-3 font-semibold text-gray-600">Pozisyon</th>
                <th class="text-left px-4 py-3 font-semibold text-gray-600">Sonuç</th>
                <th class="text-left px-4 py-3 font-semibold text-gray-600">Tarih</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($applications as $app)
            <tr class="hover:bg-gray-50 transition-colors gecmis-row cursor-pointer"
                data-detail="{{ route('admin.basvurular.show', $app) }}">
                <td class="px-5 py-3">
                    <div>
                        <p class="font-medium text-gray-800">{{ $app->full_name }}</p>
                        <p class="text-xs text-gray-400">{{ $app->email }}</p>
                    </div>
                </td>
                <td class="px-4 py-3 text-gray-600 text-sm">{{ $app->jobPosting->title ?? '—' }}</td>
                <td class="px-4 py-3">
                    @if($app->status === 'işe_alındı')
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
                            İşe Alındı
                        </span>
                    @else
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
                            Reddedildi
                        </span>
                    @endif
                </td>
                <td class="px-4 py-3 text-gray-500 text-xs">{{ $app->created_at->format('d.m.Y H:i') }}</td>
                <td class="px-4 py-3">
                    <a href="{{ route('admin.basvurular.show', $app) }}"
                       class="text-primary hover:underline text-xs font-medium">
                        İncele →
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="px-5 py-10 text-center text-gray-400">Geçmiş başvuru bulunamadı.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
    @if($applications->hasPages())
    <div class="px-5 py-4 border-t border-gray-100">
        {{ $applications->appends(request()->query())->links() }}
    </div>
    @endif
</div>

{{-- Sağ Tık Menüsü --}}
<div id="gecmisContextMenu" 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:180px;padding:4px 0;display:none;">
    <a id="gecmisCtxDetail" href="#" 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>
        İncele
    </a>
</div>

<style>
#gecmisContextMenu a:hover { background: #f9fafb; }
</style>
<script nonce="{{ app('csp-nonce') }}">
(function () {
    var menu = document.getElementById('gecmisContextMenu');
    var ctxDetail = document.getElementById('gecmisCtxDetail');

    document.querySelectorAll('.gecmis-row').forEach(function (row) {
        row.addEventListener('contextmenu', function (e) {
            e.preventDefault();
            ctxDetail.href = row.dataset.detail;

            var menuW = 190, menuH = 60;
            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';
        });
    });

    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
