@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>
    @can('create_employees')
    <a href="{{ route('admin.employees.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 class="bg-black/20 border border-gray-800 rounded-2xl overflow-hidden">
    <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">الاسم</th>
                <th class="px-6 py-4 text-gray-400">المسمى الوظيفي</th>
                <th class="px-6 py-4 text-gray-400">الفرع</th>
                <th class="px-6 py-4 text-gray-400">الراتب الأساسي</th>
                <th class="px-6 py-4 text-gray-400">الحالة</th>
                <th class="px-6 py-4 text-gray-400">العمليات</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-800">
            @foreach($employees as $employee)
            <tr class="hover:bg-white/5 transition-colors">
                <td class="px-6 py-4 font-bold">{{ $employee->name }}</td>
                <td class="px-6 py-4 text-gray-400">{{ $employee->jobTitle ? $employee->jobTitle->name : '---' }}</td>
                <td class="px-6 py-4">
                    <div class="flex flex-wrap gap-1">
                        @if($employee->branches->count() > 0)
                            @foreach($employee->branches as $branch)
                                <span class="bg-gray-800 text-gray-300 px-2 py-0.5 rounded text-[10px]">{{ $branch->name }}</span>
                            @endforeach
                        @else
                            <span class="text-gray-600">---</span>
                        @endif
                    </div>
                </td>
                <td class="px-6 py-4 font-bold text-gold">{{ number_format($employee->basic_salary, 2) }} ر.س</td>
                <td class="px-6 py-4">
                    @php
                        $statusClasses = [
                            'active' => 'bg-green-500/20 text-green-400',
                            'inactive' => 'bg-red-500/20 text-red-400',
                            'on_leave' => 'bg-yellow-500/20 text-yellow-400',
                        ];
                        $statusLabels = [
                            'active' => 'نشط',
                            'inactive' => 'غير نشط',
                            'on_leave' => 'في إجازة',
                        ];
                    @endphp
                    <span class="px-3 py-1 rounded-full text-xs font-bold {{ $statusClasses[$employee->status] }}">
                        {{ $statusLabels[$employee->status] }}
                    </span>
                </td>
                <td class="px-6 py-4">
                    <div class="flex items-center gap-3">
                        @can('edit_employees')
                        <a href="{{ route('admin.employees.edit', $employee->id) }}" class="text-blue-400 hover:text-blue-300">تعديل</a>
                        @endcan
                        @can('delete_employees')
                        <form action="{{ route('admin.employees.destroy', $employee->id) }}" method="POST" onsubmit="return confirm('هل أنت متأكد من الحذف؟')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-400">حذف</button>
                        </form>
                        @endcan
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

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