@extends('layouts.admin')

@section('title', 'Başvurular')
@section('page-title', 'Başvurular')

@section('content')

{{-- İstatistik Kartları --}}
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mt-2 mb-4">
    <a href="{{ route('admin.basvurular.index') }}"
       class="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-10 h-10 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="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>
        </div>
        <div>
            <p class="text-2xl font-black text-orange-600">{{ $stats['total'] }}</p>
            <p class="text-xs text-orange-500 font-semibold">Toplam</p>
        </div>
    </a>
    
    <a href="{{ route('admin.basvurular.index', ['status' => 'görüşmeye_çağrıldı']) }}"
        class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 flex items-center gap-3 hover:shadow-md transition-all"
        style="{{ request('status') === 'görüşmeye_çağrıldı' ? 'border: 2px solid #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,.15);' : 'border: 2px solid #e9d5ff;' }}">
        <div class="w-10 h-10 rounded-xl bg-purple-200 flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-purple-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
        </div>
        <div>
            <p class="text-2xl font-black text-purple-600">{{ $stats['gorusmeye_cagirildi'] }}</p>
            <p class="text-xs text-purple-500 font-semibold">Görüşmeye Çağrıldı</p>
        </div>
    </a>

    <a href="{{ route('admin.basvurular.gecmis', ['status' => 'işe_alındı']) }}"
       class="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="border: 2px solid #a7f3d0;">
        <div class="w-10 h-10 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['ise_alindi'] }}</p>
            <p class="text-xs text-emerald-500 font-semibold">İşe Alındı</p>
        </div>
    </a>

     <a href="{{ route('admin.basvurular.index', ['status' => 'yeni']) }}"
       class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 flex items-center gap-3 hover:shadow-md transition-all"
       style="{{ request('status') === 'yeni' ? 'border: 2px solid #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15);' : 'border: 2px solid #bfdbfe;' }}">
        <div class="w-10 h-10 rounded-xl bg-blue-200 flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-blue-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        </div>
        <div>
            <p class="text-2xl font-black text-blue-600">{{ $stats['yeni'] }}</p>
            <p class="text-xs text-blue-500 font-semibold">Yeni</p>
        </div>
    </a>

    <a href="{{ route('admin.basvurular.index', ['status' => 'incelendi']) }}"
        class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-xl p-4 flex items-center gap-3 hover:shadow-md transition-all"
        style="{{ request('status') === 'incelendi' ? 'border: 2px solid #eab308; box-shadow: 0 0 0 3px rgba(234,179,8,.15);' : 'border: 2px solid #fef08a;' }}">
        <div class="w-10 h-10 rounded-xl bg-yellow-200 flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-yellow-700" 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>
        </div>
        <div>
            <p class="text-2xl font-black text-yellow-600">{{ $stats['incelendi'] }}</p>
            <p class="text-xs text-yellow-600 font-semibold">İncelendi</p>
        </div>
    </a>

    <a href="{{ route('admin.basvurular.gecmis', ['status' => 'reddedildi']) }}"
        class="bg-gradient-to-br from-red-50 to-red-100 rounded-xl p-4 flex items-center gap-3 hover:shadow-md transition-all"
        style="border: 2px solid #fecaca;">
        <div class="w-10 h-10 rounded-xl bg-red-200 flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-red-700" 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>
        </div>
        <div>
            <p class="text-2xl font-black text-red-600">{{ $stats['reddedildi'] }}</p>
            <p class="text-xs text-red-500 font-semibold">Reddedildi</p>
        </div>
    </a>
</div>

{{-- Filtreler --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-5 mt-2">
    <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 Durumlar</option>
                <option value="yeni" {{ request('status') == 'yeni' ? 'selected' : '' }}>Yeni</option>
                <option value="incelendi" {{ request('status') == 'incelendi' ? 'selected' : '' }}>İncelendi</option>
                <option value="görüşmeye_çağrıldı" {{ request('status') == 'görüşmeye_çağrıldı' ? 'selected' : '' }}>Görüşmeye Çağrıldı</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.index') }}" 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> aktif başvuru
        </p>
        <a href="{{ route('admin.basvurular.gecmis') }}"
           class="text-xs text-gray-500 hover:text-primary transition-colors flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Geçmiş Başvurular →
        </a>
    </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">Durum</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="app-row hover:bg-gray-50 transition-colors cursor-pointer"
                data-app-id="{{ $app->id }}"
                data-app-url="{{ route('admin.basvurular.show', $app) }}"
                data-app-name="{{ $app->full_name }}">
                <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">
                    @php
                        $colors = ['yeni' => 'blue', 'incelendi' => 'yellow', 'görüşmeye_çağrıldı' => 'purple', 'reddedildi' => 'red', 'işe_alındı' => 'green'];
                        $color = $colors[$app->status] ?? 'gray';
                    @endphp
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $color }}-100 text-{{ $color }}-700">
                        {{ $app->status_label }}
                    </span>
                </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">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>

{{-- Context Menü --}}
<div id="appContextMenu"
     class="hidden fixed z-50 bg-white rounded-xl shadow-xl border border-gray-100 py-1.5"
     style="min-width:200px">
    <div id="ctxMenuHeader" class="px-4 py-2 border-b border-gray-100">
        <p class="text-xs font-semibold text-gray-700 truncate" id="ctxMenuName"></p>
    </div>
    <a id="ctxMenuDetail" href="#"
       class="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-orange-50 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 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ı Görüntüle
    </a>
    <div class="border-t border-gray-100 my-1"></div>
    <p class="px-4 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wide">Durum Güncelle</p>
    <button data-quick-status="incelendi"
            class="w-full flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-yellow-50 hover:text-yellow-700 transition-colors">
        <span class="w-2 h-2 rounded-full bg-yellow-400 flex-shrink-0"></span>
        İncelendi
    </button>
    <button data-quick-status="görüşmeye_çağrıldı"
            class="w-full flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-purple-50 hover:text-purple-700 transition-colors">
        <span class="w-2 h-2 rounded-full bg-purple-400 flex-shrink-0"></span>
        Görüşmeye Çağrıldı
    </button>
    <button data-quick-status="reddedildi"
            class="w-full flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-red-50 hover:text-red-700 transition-colors">
        <span class="w-2 h-2 rounded-full bg-red-400 flex-shrink-0"></span>
        Reddedildi
    </button>
    <button data-quick-status="işe_alındı"
            class="w-full flex items-center gap-2.5 px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-green-700 transition-colors">
        <span class="w-2 h-2 rounded-full bg-green-400 flex-shrink-0"></span>
        İşe Alındı
    </button>
</div>

{{-- Gizli hızlı durum formu — data-status-base ile URL şablonu --}}
<form id="quickStatusForm" method="POST" style="display:none"
      data-status-base="{{ url('admin/basvurular/__ID__/status') }}">
    @csrf
    @method('PATCH')
    <input type="hidden" name="status" id="quickStatusValue">
</form>

<script nonce="{{ app('csp-nonce') }}">
(function () {
    var ctxMenu  = document.getElementById('appContextMenu');
    var ctxAppId = null;
    var ctxMenuOpen = false;

    // ── Satır tıklama: detay sayfasına git ───────────────────────────────────
    document.querySelectorAll('.app-row').forEach(function (row) {
        row.addEventListener('click', function (e) {
            // Link veya buton tıklandıysa satır navigasyonunu engelle
            if (e.target.closest('a, button, form')) return;
            // Context menü açıksa navigasyon yapma
            if (ctxMenuOpen) return;
            var appUrl = row.getAttribute('data-app-url');
            if (appUrl) window.location.href = appUrl;
        });
    });

    // ── Sağ tık: her satıra contextmenu listener ekle ────────────────────────
    document.querySelectorAll('.app-row').forEach(function (row) {
        row.addEventListener('contextmenu', function (e) {
            e.preventDefault();
            ctxAppId = row.getAttribute('data-app-id');
            var appUrl  = row.getAttribute('data-app-url');
            var appName = row.getAttribute('data-app-name') || '';

            document.getElementById('ctxMenuName').textContent = appName;
            document.getElementById('ctxMenuDetail').href = appUrl;

            var x = e.clientX;
            var y = e.clientY;
            ctxMenu.style.left = x + 'px';
            ctxMenu.style.top  = y + 'px';
            ctxMenu.classList.remove('hidden');
            ctxMenuOpen = true;

            // Ekran taşmasını önle
            requestAnimationFrame(function () {
                var rect = ctxMenu.getBoundingClientRect();
                if (rect.right  > window.innerWidth)  ctxMenu.style.left = (x - rect.width)  + 'px';
                if (rect.bottom > window.innerHeight)  ctxMenu.style.top  = (y - rect.height) + 'px';
            });
        });
    });

    // ── Durum güncelleme butonları ────────────────────────────────────────────
    document.querySelectorAll('[data-quick-status]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            if (!ctxAppId) return;
            var status    = btn.getAttribute('data-quick-status');
            var form      = document.getElementById('quickStatusForm');
            // URL'yi data-status-base attribute'undan al (hardcoded path yerine)
            var statusBase = document.getElementById('quickStatusForm').getAttribute('data-status-base');
            form.action   = statusBase.replace('__ID__', ctxAppId);
            document.getElementById('quickStatusValue').value = status;
            ctxMenu.classList.add('hidden');
            ctxMenuOpen = false;
            form.submit();
        });
    });

    // ── Menüyü kapat ─────────────────────────────────────────────────────────
    document.addEventListener('click', function (e) {
        if (!ctxMenu.contains(e.target)) {
            ctxMenu.classList.add('hidden');
            ctxMenuOpen = false;
        }
    });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            ctxMenu.classList.add('hidden');
            ctxMenuOpen = false;
        }
    });
})();
</script>

@endsection