@extends('layouts.app')

@section('content')
<div class="flex justify-between items-center mb-6" style="margin-top: 15px;">
    <h2 class="text-2xl font-bold text-gold">إدارة المسميات الوظيفية</h2>
    <div class="flex gap-4">
        <a href="{{ route('admin.employees.index') }}" class="px-6 py-2 bg-gray-800 text-white rounded-lg text-sm font-bold hover:bg-gray-700 transition-all">إدارة الموظفين</a>
        @can('create_employees')
        <a href="{{ route('admin.job-titles.create') }}" class="bg-[#d4af37] text-black px-6 py-2 rounded-lg text-sm font-bold shadow-lg shadow-[#d4af37]/20 hover:bg-[#b08d2a] transition-all">إضافة مسمى وظيفي</a>
        @endcan
    </div>
</div>

@if(session('success'))
    <div class="bg-green-500/10 border border-green-500/20 text-green-400 p-4 rounded-xl mb-6">
        {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="bg-red-500/10 border border-red-500/20 text-red-400 p-4 rounded-xl mb-6">
        {{ session('error') }}
    </div>
@endif

<div class="bg-black/20 border border-gray-800 rounded-2xl overflow-hidden shadow-2xl">
    <table class="w-full text-right">
        <thead>
            <tr class="bg-black/40 border-b border-gray-800">
                <th class="px-6 py-4 text-gray-400 text-xs uppercase tracking-widest">اسم الوظيفة</th>
                <th class="px-6 py-4 text-gray-400 text-xs uppercase tracking-widest">الوصف</th>
                <th class="px-6 py-4 text-gray-400 text-xs uppercase tracking-widest">الحالة</th>
                <th class="px-6 py-4 text-gray-400 text-xs uppercase tracking-widest text-center">العمليات</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-800">
            @forelse($jobTitles as $title)
            <tr class="hover:bg-white/5 transition-colors group">
                <td class="px-6 py-4 font-bold text-white group-hover:text-gold transition-colors">{{ $title->name }}</td>
                <td class="px-6 py-4 text-gray-400 text-sm">{{ $title->description ?: '---' }}</td>
                <td class="px-6 py-4">
                    <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase {{ $title->active ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-red-500/10 text-red-400 border border-red-500/20' }}">
                        {{ $title->active ? 'نشط' : 'غير نشط' }}
                    </span>
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center justify-center gap-3">
                        @can('edit_employees')
                        <a href="{{ route('admin.job-titles.edit', $title->id) }}" class="p-2 bg-blue-500/10 text-blue-400 rounded-lg hover:bg-blue-500 hover:text-white transition-all">
                            <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"></path></svg>
                        </a>
                        @endcan
                        
                        @can('delete_employees')
                        <form action="{{ route('admin.job-titles.destroy', $title->id) }}" method="POST" onsubmit="return confirm('هل أنت متأكد من الحذف؟')">
                            @csrf @method('DELETE')
                            <button type="submit" class="p-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500 hover:text-white transition-all">
                                <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"></path></svg>
                            </button>
                        </form>
                        @endcan
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="px-6 py-20 text-center text-gray-600 italic">لا توجد مسميات وظيفية مسجلة.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-6">
    {{ $jobTitles->links() }}
</div>
@endsection