@extends('layouts.admin')

@section('title', 'Kullanıcılar')
@section('page-title', 'Kullanıcı Yönetimi')

@section('content')

<div class="flex justify-end mb-5 mt-2">
    @can('create users')
    <a href="{{ route('admin.kullanicilar.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 Kullanıcı
    </a>
    @endcan
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <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">Kullanıcı</th>
                <th class="text-left px-4 py-3 font-semibold text-gray-600">Rol</th>
                <th class="text-left px-4 py-3 font-semibold text-gray-600">Kayıt Tarihi</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($users as $user)
            <tr class="hover:bg-gray-50 transition-colors user-row"
                data-id="{{ $user->id }}"
                data-edit-url="{{ route('admin.kullanicilar.edit', $user) }}"
                data-delete-url="{{ route('admin.kullanicilar.destroy', $user) }}"
                data-name="{{ $user->name }}"
                data-is-self="{{ $user->id === auth()->id() ? '1' : '0' }}">
                <td class="px-5 py-3">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
                            {{ strtoupper(substr($user->name, 0, 1)) }}
                        </div>
                        <div>
                            <p class="font-medium text-gray-800">{{ $user->name }}</p>
                            <p class="text-xs text-gray-400">{{ $user->email }}</p>
                        </div>
                    </div>
                </td>
                <td class="px-4 py-3">
                    @foreach($user->roles as $role)
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-700">
                        {{ $role->name }}
                    </span>
                    @endforeach
                </td>
                <td class="px-4 py-3 text-gray-500 text-xs">{{ $user->created_at->format('d.m.Y') }}</td>
                <td class="px-4 py-3">
                    <div class="flex items-center gap-2 justify-end">
                        @can('edit users')
                        <a href="{{ route('admin.kullanicilar.edit', $user) }}"
                           class="text-gray-400 hover:text-blue-500 transition-colors" title="Düzenle">
                            <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('delete users')
                        @if($user->id !== auth()->id())
                        <form method="POST" action="{{ route('admin.kullanicilar.destroy', $user) }}"
                              onsubmit="return confirm('Bu kullanıcıyı silmek istediğinizden emin misiniz?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-gray-400 hover:text-red-500 transition-colors" title="Sil">
                                <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>
                            </button>
                        </form>
                        @endif
                        @endcan
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="px-5 py-10 text-center text-gray-400">Kullanıcı bulunamadı.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
    @if($users->hasPages())
    <div class="px-5 py-4 border-t border-gray-100">
        {{ $users->links() }}
    </div>
    @endif
</div>

{{-- Sağ Tık Menüsü --}}
<div id="userContextMenu" 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;">
    @can('edit users')
    <a id="ctxUserEdit" 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('delete users')
    <div style="height:1px;background:#f3f4f6;margin:3px 0;" id="ctxUserDivider"></div>
    <button id="ctxUserDelete" 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 delete formu --}}
<form id="ctxUserDeleteForm" method="POST" style="display:none;">
    @csrf
    @method('DELETE')
</form>

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

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

    var deleteForm = document.getElementById('ctxUserDeleteForm');
    var editLink   = document.getElementById('ctxUserEdit');
    var deleteBtn  = document.getElementById('ctxUserDelete');
    var divider    = document.getElementById('ctxUserDivider');

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

            var isSelf    = row.dataset.isSelf === '1';
            var editUrl   = row.dataset.editUrl;
            var deleteUrl = row.dataset.deleteUrl;
            var name      = row.dataset.name;

            if (editLink) editLink.href = editUrl;

            if (deleteBtn) {
                if (isSelf) {
                    deleteBtn.style.display = 'none';
                    if (divider) divider.style.display = 'none';
                } else {
                    deleteBtn.style.display = 'flex';
                    if (divider) divider.style.display = 'block';
                    deleteForm.action = deleteUrl;
                }
            }

            var menuW = 190, menuH = 120;
            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 kullanıcıyı 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