@extends('layouts.admin')

@section('title', 'Departmanlar')
@section('page-title', 'Departmanlar')
@section('page-subtitle', $departments->count() . ' departman')

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

    <div class="flex justify-end mb-4">
        @can('create departments')
        <a href="{{ route('admin.departmanlar.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-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="M12 4v16m8-8H4"/></svg>
            Yeni Departman
        </a>
        @endcan
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        @if($departments->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="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>
            <p class="text-sm">Henüz departman eklenmemiş.</p>
        </div>
        @else
        <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 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">İlanlar</th>
                    <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Başvurular</th>
                    <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Açık Başvuru</th>
                    <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Durum</th>
                    <th class="text-right px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">İşlemler</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($departments as $dept)
                <tr class="hover:bg-gray-50 transition-colors dept-row"
                    data-name="{{ $dept->name }}"
                    data-show-url="{{ route('admin.departmanlar.show', $dept) }}"
                    data-edit-url="{{ route('admin.departmanlar.edit', $dept) }}"
                    data-delete-url="{{ route('admin.departmanlar.destroy', $dept) }}">
                    <td class="px-5 py-4">
                        <div class="flex items-center gap-3">
                            @if($dept->cover_image)
                            <img src="{{ Storage::url($dept->cover_image) }}" class="w-10 h-10 rounded-lg object-cover">
                            @else
                            <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                                <svg class="w-5 h-5 text-primary" 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 2v16"/></svg>
                            </div>
                            @endif
                            <div>
                                <p class="font-medium text-gray-800">{{ $dept->name }}</p>
                                <p class="text-xs text-gray-400">{{ $dept->slug }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-4 py-4 text-center">
                        <span class="font-medium text-gray-700">{{ $dept->job_postings_count }}</span>
                    </td>
                    <td class="px-4 py-4 text-center">
                        <span class="font-medium text-gray-700">{{ $dept->applications_count }}</span>
                    </td>
                    <td class="px-4 py-4 text-center">
                        @can('edit departments')
                        <form method="POST" action="{{ route('admin.departmanlar.toggle-open-applications', $dept) }}">
                            @csrf
                            <button type="submit" class="text-xs px-2 py-1 rounded-full font-medium transition-colors
                                {{ $dept->accepts_open_applications ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-gray-100 text-gray-500 hover:bg-gray-200' }}">
                                {{ $dept->accepts_open_applications ? 'Açık' : 'Kapalı' }}
                            </button>
                        </form>
                        @else
                        <span class="text-xs px-2 py-1 rounded-full font-medium {{ $dept->accepts_open_applications ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                            {{ $dept->accepts_open_applications ? 'Açık' : 'Kapalı' }}
                        </span>
                        @endcan
                    </td>
                    <td class="px-4 py-4 text-center">
                        @can('edit departments')
                        <form method="POST" action="{{ route('admin.departmanlar.toggle-active', $dept) }}">
                            @csrf
                            <button type="submit" class="text-xs px-2 py-1 rounded-full font-medium transition-colors
                                {{ $dept->is_active ? 'bg-blue-100 text-blue-700 hover:bg-blue-200' : 'bg-red-100 text-red-500 hover:bg-red-200' }}">
                                {{ $dept->is_active ? 'Aktif' : 'Pasif' }}
                            </button>
                        </form>
                        @else
                        <span class="text-xs px-2 py-1 rounded-full font-medium {{ $dept->is_active ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-500' }}">
                            {{ $dept->is_active ? 'Aktif' : 'Pasif' }}
                        </span>
                        @endcan
                    </td>
                    <td class="px-5 py-4 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ route('admin.departmanlar.show', $dept) }}"
                               class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-primary transition-colors px-2 py-1 rounded hover:bg-gray-100">
                                <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="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>
                                Detaylar
                            </a>
                            @can('edit departments')
                            <a href="{{ route('admin.departmanlar.edit', $dept) }}"
                               class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-primary transition-colors px-2 py-1 rounded hover:bg-gray-100">
                                <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="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('delete departments')
                            <form method="POST" action="{{ route('admin.departmanlar.destroy', $dept) }}"
                                  onsubmit="return confirm('Bu departmanı silmek istediğinizden emin misiniz?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="inline-flex items-center gap-1 text-xs text-red-400 hover:text-red-600 transition-colors px-2 py-1 rounded hover:bg-red-50">
                                    <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 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>
                            </form>
                            @endcan
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>

{{-- Sağ Tık Menüsü --}}
<div id="deptContextMenu" 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="ctxDeptDetail" href="#" class="ctx-dept-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>
        Detaylar
    </a>
    @can('edit departments')
    <a id="ctxDeptEdit" href="#" class="ctx-dept-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('delete departments')
    <div style="height:1px;background:#f3f4f6;margin:3px 0;"></div>
    <button id="ctxDeptDelete" class="ctx-dept-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 delete formu --}}
<form id="ctxDeptDeleteForm" method="POST" style="display:none;">
    @csrf
    @method('DELETE')
</form>

<style>
.ctx-dept-item:hover { background: #f9fafb !important; }
</style>

<script nonce="{{ app('csp-nonce') }}">
(function() {
    var menu      = document.getElementById('deptContextMenu');
    if (!menu) return;

    var deleteForm  = document.getElementById('ctxDeptDeleteForm');
    var detailLink  = document.getElementById('ctxDeptDetail');
    var editLink    = document.getElementById('ctxDeptEdit');
    var deleteBtn   = document.getElementById('ctxDeptDelete');

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

            if (detailLink) detailLink.href = row.dataset.showUrl;
            if (editLink)   editLink.href   = row.dataset.editUrl;
            if (deleteForm) deleteForm.action = row.dataset.deleteUrl;

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

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

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

@endsection