@extends('layouts.app')
@section('title', 'إدارة الموارد البشرية')
@section('content')
<div class="relative overflow-hidden rounded-[20px] bg-gradient-to-br from-primary-900 via-secondary-600 to-primary-800 p-7 mb-6 shadow-xl">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-50"></div>
    <div class="relative flex items-start justify-between">
        <div>
            <span class="inline-block px-3 py-1 rounded-full bg-white/15 border border-white/20 text-[0.7rem] font-semibold tracking-wider mb-2">HR</span>
            <h1 class="text-white text-[1.6rem] font-display font-extrabold">إدارة الموارد البشرية</h1>
            <p class="text-white/70 text-sm mt-1">إدارة الموظفين النظاميين والمتعاقدين الخارجيين</p>
        </div>
        <div class="flex gap-2">
            <button onclick="document.getElementById('addInternalModal').classList.remove('hidden')"
                    class="px-4 py-2.5 bg-accent-500 text-white rounded-xl text-sm font-semibold hover:bg-accent-600 transition-all shadow-sm shadow-accent-500/20 flex items-center gap-2 cursor-pointer">
                <span>+</span> إضافة موظف
            </button>
            <button onclick="document.getElementById('addExternalModal').classList.remove('hidden')"
                    class="px-4 py-2.5 bg-secondary-600 text-white rounded-xl text-sm font-semibold hover:bg-secondary-700 transition-all shadow-sm flex items-center gap-2 cursor-pointer">
                <span>+</span> إضافة خارجي
            </button>
        </div>
    </div>
</div>

@if (session('success'))
    <div class="mb-5 p-4 rounded-[14px] bg-success/10 border border-success/20 text-success text-sm font-semibold flex items-center gap-2">✅ {{ session('success') }}</div>
@endif

{{-- Search --}}
<form method="GET" action="{{ route('hr.employees') }}" class="mb-4">
    <input type="hidden" name="tab" value="{{ $tab }}">
    <div class="flex gap-2">
        <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="🔍 بحث بالـ ID أو الاسم..."
               class="flex-1 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
        <button type="submit" class="px-4 py-2.5 bg-accent-500 text-white rounded-xl text-sm font-semibold hover:bg-accent-600 transition-all cursor-pointer">بحث</button>
        @if ($search)
            <a href="{{ route('hr.employees', ['tab' => $tab]) }}" class="px-4 py-2.5 bg-gray-100 text-muted rounded-xl text-sm font-semibold hover:bg-gray-200 transition-all no-underline">مسح</a>
        @endif
    </div>
</form>

{{-- Tabs --}}
<div class="mb-6">
    <div class="flex gap-1 bg-gray-100 rounded-[14px] p-1.5" role="tablist">
        <a href="{{ route('hr.employees', ['tab' => 'internal', 'search' => $search]) }}"
           class="flex-1 px-5 py-2.5 rounded-[11px] text-sm font-bold text-center transition-all no-underline @if($tab === 'internal') bg-white shadow-sm text-primary-900 @else text-muted hover:text-primary-900 hover:bg-white/50 @endif">
            👥 الموظفون النظاميون
            <span class="text-xs px-1.5 py-0.5 rounded-full @if($tab === 'internal') bg-secondary-500/10 text-secondary-600 @else bg-gray-200 text-muted @endif mr-1">{{ $internal->count() }}</span>
        </a>
        <a href="{{ route('hr.employees', ['tab' => 'external', 'search' => $search]) }}"
           class="flex-1 px-5 py-2.5 rounded-[11px] text-sm font-bold text-center transition-all no-underline @if($tab === 'external') bg-white shadow-sm text-primary-900 @else text-muted hover:text-primary-900 hover:bg-white/50 @endif">
            🧑‍🏫 المتعاقدون الخارجيون
            <span class="text-xs px-1.5 py-0.5 rounded-full @if($tab === 'external') bg-secondary-500/10 text-secondary-600 @else bg-gray-200 text-muted @endif mr-1">{{ $external->count() }}</span>
        </a>
    </div>
</div>

{{-- Internal Staff Table --}}
@if($tab === 'internal')
<div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
        <h2 class="font-display font-bold text-primary-900 text-base flex items-center gap-2"><span class="w-6 h-6 rounded-md bg-accent-500/10 flex items-center justify-center text-xs">👥</span> آخر الموظفين النظاميين</h2>
        <span class="text-xs px-2.5 py-1 rounded-full bg-secondary-500/10 text-secondary-600 font-semibold">{{ $internal->count() }} موظف</span>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-right">
            <thead>
                <tr class="border-b border-gray-100">
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">#</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">الاسم</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">البريد</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">الدور</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">نشط</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">إجراءات</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse ($internal as $emp)
                    <tr class="hover:bg-surface/50 transition-colors text-sm">
                        <td class="px-4 py-3.5 text-muted">{{ $emp->id }}</td>
                        <td class="px-4 py-3.5 font-semibold text-primary-900">{{ $emp->name }}</td>
                        <td class="px-4 py-3.5 text-muted">{{ $emp->email }}</td>
                        <td class="px-4 py-3.5">
                            <span class="text-xs px-2 py-0.5 rounded-full bg-secondary-50 text-secondary-600 border border-secondary-200 font-medium">{{ $emp->role }}</span>
                        </td>
                        <td class="px-4 py-3.5">
                            @if ($emp->is_active)
                                <span class="text-xs px-2 py-0.5 rounded-full bg-green-50 text-green-700 font-medium">نشط</span>
                            @else
                                <span class="text-xs px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-medium">غير نشط</span>
                            @endif
                        </td>
                        <td class="px-4 py-3.5 relative">
                            <button onclick="document.getElementById('editModal{{ $emp->id }}').classList.remove('hidden')" class="text-xs px-2.5 py-1.5 rounded-lg bg-secondary-500/10 text-secondary-700 hover:bg-secondary-500/20 transition-all cursor-pointer font-medium">✏️</button>
                            <div class="relative inline-block">
                                <button onclick="toggleDropdown(this)" class="text-xs px-2.5 py-1.5 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition-all cursor-pointer font-medium">🗑️</button>
                                <div class="absolute left-0 top-full mt-1 z-50 hidden min-w-[140px] bg-white rounded-xl shadow-lg border border-gray-200 py-1" onclick="event.stopPropagation()">
                                    <button onclick="event.stopPropagation(); confirmDelete({{ $emp->id }}, '{{ addslashes($emp->name) }}', 'internal'); closeDropdowns()" class="w-full text-right px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors cursor-pointer flex items-center gap-2">🗑️ مسح</button>
                                    @if(auth()->user()->role === 'admin')
                                    <button onclick="event.stopPropagation(); confirmHardDelete({{ $emp->id }}, '{{ addslashes($emp->name) }}'); closeDropdowns()" class="w-full text-right px-4 py-2 text-sm text-red-700 hover:bg-red-50 transition-colors cursor-pointer flex items-center gap-2 border-t border-gray-100">🚨 مسح نهائي</button>
                                    @endif
                                </div>
                            </div>
                        </td>
                    </tr>

                    <div id="editModal{{ $emp->id }}" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
                        <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-md mx-4" onclick="event.stopPropagation()">
                            <div class="flex items-center justify-between mb-6">
                                <h2 class="text-lg font-bold text-primary-900">تعديل: {{ $emp->name }}</h2>
                                <button onclick="this.closest('[id^=editModal]').classList.add('hidden')" class="w-8 h-8 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 cursor-pointer text-lg">&times;</button>
                            </div>
                            <form method="POST" action="{{ route('hr.employees.update', $emp->id) }}">
                                @csrf
                                @method('PUT')
                                <div class="mb-4">
                                    <label class="block text-xs font-semibold text-muted mb-1.5">الاسم</label>
                                    <input type="text" name="name" value="{{ $emp->name }}" required
                                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                                </div>
                                <div class="mb-4">
                                    <label class="block text-xs font-semibold text-muted mb-1.5">البريد الإلكتروني</label>
                                    <input type="email" name="email" value="{{ $emp->email }}" required
                                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                                </div>
                                <div class="mb-4">
                                    <label class="block text-xs font-semibold text-muted mb-1.5">الدور</label>
                                    <select name="role" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm">
                                        <option value="admin" @if($emp->role==='admin') selected @endif>مدير</option>
                                        <option value="sales_manager" @if($emp->role==='sales_manager') selected @endif>مدير مبيعات</option>
                                        <option value="sales" @if($emp->role==='sales') selected @endif>مبيعات</option>
                                        <option value="finance" @if($emp->role==='finance') selected @endif>مالية</option>
                                        <option value="operations_manager" @if($emp->role==='operations_manager') selected @endif>مدير عمليات</option>
                                        <option value="operations" @if($emp->role==='operations') selected @endif>عمليات</option>
                                        <option value="admission" @if($emp->role==='admission') selected @endif>قبول</option>
                                        <option value="hr" @if($emp->role==='hr') selected @endif>موارد بشرية</option>
                                    </select>
                                </div>
                                <div class="mb-4">
                                    <label class="block text-xs font-semibold text-muted mb-1.5">كلمة السر (اتركها فارغة إذا لا تريد التغيير)</label>
                                    <input type="password" name="password" placeholder="كلمة السر (8 أحرف على الأقل)"
                                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                                </div>
                                <div class="mb-4">
                                    <label class="block text-xs font-semibold text-muted mb-1.5">تأكيد كلمة السر</label>
                                    <input type="password" name="password_confirmation" placeholder="أعد كتابة كلمة السر"
                                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                                </div>
                                <button type="submit" class="w-full px-5 py-3 bg-accent-500 text-white rounded-xl text-sm font-bold hover:bg-accent-600 transition-all cursor-pointer">حفظ التعديلات</button>
                            </form>
                        </div>
                    </div>
                    @empty
                        <tr><td colspan="6" class="px-4 py-12 text-center"><div class="text-4xl mb-3">📭</div><p class="text-muted text-sm font-semibold">لا يوجد موظفون نظاميون</p></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- External Staff Table --}}
@if($tab === 'external')
<div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
        <h2 class="font-display font-bold text-primary-900 text-base flex items-center gap-2"><span class="w-6 h-6 rounded-md bg-secondary-600/10 flex items-center justify-center text-xs">🧑‍🏫</span> آخر المتعاقدين الخارجيين</h2>
        <span class="text-xs px-2.5 py-1 rounded-full bg-secondary-500/10 text-secondary-600 font-semibold">{{ $external->count() }} خارجي</span>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-right">
            <thead>
                <tr class="border-b border-gray-100">
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">#</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">الاسم</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">رقم الهاتف</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">التصنيف</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">العمولة</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">يوم الصرف</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">نشط</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted">إجراءات</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse ($external as $emp)
                    <tr class="hover:bg-surface/50 transition-colors text-sm">
                        <td class="px-4 py-3.5 text-muted">{{ $emp->id }}</td>
                        <td class="px-4 py-3.5 font-semibold text-primary-900">{{ $emp->name }}</td>
                        <td class="px-4 py-3.5 text-muted">{{ $emp->phone ?? '—' }}</td>
                        <td class="px-4 py-3.5">
                            <span class="text-xs px-2 py-0.5 rounded-full bg-secondary-50 text-secondary-600 border border-secondary-200 font-medium">{{ $emp->role }}</span>
                        </td>
                        <td class="px-4 py-3.5 font-semibold text-accent-500">{{ $emp->cut_percent ?? '—' }}{{ $emp->cut_percent ? '%' : '' }}</td>
                        <td class="px-4 py-3.5 text-muted">{{ $emp->payout_day ? 'يوم ' . $emp->payout_day : '—' }}</td>
                        <td class="px-4 py-3.5">
                            @if ($emp->is_active)
                                <span class="text-xs px-2 py-0.5 rounded-full bg-green-50 text-green-700 font-medium">نشط</span>
                            @else
                                <span class="text-xs px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-medium">غير نشط</span>
                            @endif
                        </td>
                        <td class="px-4 py-3.5 relative">
                            <button onclick="document.getElementById('editModal{{ $emp->id }}').classList.remove('hidden')" class="text-xs px-2.5 py-1.5 rounded-lg bg-secondary-500/10 text-secondary-700 hover:bg-secondary-500/20 transition-all cursor-pointer font-medium">✏️</button>
                            <div class="relative inline-block">
                                <button onclick="toggleDropdown(this)" class="text-xs px-2.5 py-1.5 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition-all cursor-pointer font-medium">🗑️</button>
                                <div class="absolute left-0 top-full mt-1 z-50 hidden min-w-[140px] bg-white rounded-xl shadow-lg border border-gray-200 py-1" onclick="event.stopPropagation()">
                                    <button onclick="event.stopPropagation(); confirmDelete({{ $emp->id }}, '{{ addslashes($emp->name) }}', 'external'); closeDropdowns()" class="w-full text-right px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors cursor-pointer flex items-center gap-2">🗑️ مسح</button>
                                    @if(auth()->user()->role === 'admin')
                                    <button onclick="event.stopPropagation(); confirmHardDelete({{ $emp->id }}, '{{ addslashes($emp->name) }}'); closeDropdowns()" class="w-full text-right px-4 py-2 text-sm text-red-700 hover:bg-red-50 transition-colors cursor-pointer flex items-center gap-2 border-t border-gray-100">🚨 مسح نهائي</button>
                                    @endif
                                </div>
                            </div>
                        </td>
                    </tr>

                    <div id="editModal{{ $emp->id }}" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
                        <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-md mx-4" onclick="event.stopPropagation()">
                            <div class="flex items-center justify-between mb-6">
                                <h2 class="text-lg font-bold text-primary-900">تعديل: {{ $emp->name }}</h2>
                                <button onclick="this.closest('[id^=editModal]').classList.add('hidden')" class="w-8 h-8 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 cursor-pointer text-lg">&times;</button>
                            </div>
                            <form method="POST" action="{{ route('hr.employees.external.update', $emp->id) }}">
                                @csrf
                                @method('PUT')
                                <div class="mb-4">
                                    <label class="block text-xs font-semibold text-muted mb-1.5">الاسم</label>
                                    <input type="text" name="name" value="{{ $emp->name }}" required
                                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                                </div>
                                <div class="mb-4">
                                    <label class="block text-xs font-semibold text-muted mb-1.5">رقم الهاتف</label>
                                    <input type="text" name="phone" value="{{ $emp->phone ?? '' }}" placeholder="رقم الهاتف للتواصل"
                                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                                </div>
                                <div class="mb-4">
                                    <label class="block text-xs font-semibold text-muted mb-1.5">التصنيف/الوظيفة</label>
                                    <input type="text" value="مدرس خارجي" readonly
                                           class="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-muted">
                                    <input type="hidden" name="role" value="teacher">
                                </div>
                                <div class="grid grid-cols-2 gap-3 mb-4">
                                    <div>
                                        <label class="block text-xs font-semibold text-muted mb-1.5">نسبة العمولة (%)</label>
                                        <input type="number" step="0.01" name="cut_percent" value="{{ $emp->cut_percent ?? 0 }}" min="0" max="100"
                                               class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-semibold text-muted mb-1.5">يوم صرف العمولة</label>
                                        <input type="number" name="payout_day" value="{{ $emp->payout_day ?? '' }}" min="1" max="31" placeholder="مثال: 15"
                                               class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                                    </div>
                                </div>
                                <button type="submit" class="w-full px-5 py-3 bg-accent-500 text-white rounded-xl text-sm font-bold hover:bg-accent-600 transition-all cursor-pointer">حفظ التعديلات</button>
                            </form>
                        </div>
                    </div>
                    @empty
                        <tr><td colspan="6" class="px-4 py-12 text-center"><div class="text-4xl mb-3">📭</div><p class="text-muted text-sm font-semibold">لا يوجد متعاقدون خارجيون</p></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endif

{{-- Add External Modal --}}
<div id="addExternalModal" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-md mx-4" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-secondary-600/10 flex items-center justify-center text-lg">🧑‍🏫</div>
                <h2 class="text-lg font-bold text-primary-900">إضافة متعاقد خارجي</h2>
            </div>
            <button onclick="document.getElementById('addExternalModal').classList.add('hidden')" class="w-8 h-8 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 cursor-pointer text-lg">&times;</button>
        </div>
        <p class="text-xs text-muted mb-5 bg-amber-50 rounded-xl px-4 py-3 border border-amber-200">💡 ليس له صلاحية دخول إلى النظام — للتواصل عبر الهاتف فقط</p>
        <form method="POST" action="{{ route('hr.employees.external.store') }}">
            @csrf
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">الاسم <span class="text-red-500">*</span></label>
                <input type="text" name="name" required placeholder="الاسم الكامل"
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">رقم الهاتف</label>
                <input type="text" name="phone" placeholder="رقم الهاتف للتواصل"
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
                            <div class="mb-4">
                                <label class="block text-xs font-semibold text-muted mb-1.5">التصنيف/الوظيفة</label>
                                <input type="text" value="مدرس خارجي" readonly
                                       class="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-muted">
                                <input type="hidden" name="role" value="teacher">
                            </div>
                            <div class="grid grid-cols-2 gap-3 mb-4">
                                <div>
                                    <label class="block text-xs font-semibold text-muted mb-1.5">نسبة العمولة (%)</label>
                                    <input type="number" step="0.01" name="cut_percent" value="0" min="0" max="100"
                                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-muted mb-1.5">يوم صرف العمولة</label>
                                    <input type="number" name="payout_day" min="1" max="31" placeholder="مثال: 15"
                                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                                </div>
                            </div>
            <button type="submit" class="w-full px-5 py-3 bg-secondary-600 text-white rounded-xl text-sm font-bold hover:bg-secondary-700 transition-all shadow-sm flex items-center justify-center gap-2 cursor-pointer">
                <span>➕</span> إضافة المتعاقد
            </button>
        </form>
    </div>
</div>

{{-- Add Internal Modal --}}
<div id="addInternalModal" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-md mx-4" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-accent-500/10 flex items-center justify-center text-lg">👤</div>
                <h2 class="text-lg font-bold text-primary-900">إضافة موظف نظامي</h2>
            </div>
            <button onclick="document.getElementById('addInternalModal').classList.add('hidden')" class="w-8 h-8 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 cursor-pointer text-lg">&times;</button>
        </div>
        <p class="text-xs text-muted mb-5 bg-surface rounded-xl px-4 py-3 border border-gray-100">💡 له صلاحية دخول للنظام (بريد إلكتروني + كلمة سر)</p>
        <form method="POST" action="{{ route('hr.employees.store') }}">
            @csrf
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">الاسم <span class="text-red-500">*</span></label>
                <input type="text" name="name" required placeholder="الاسم الكامل"
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">البريد الإلكتروني <span class="text-red-500">*</span></label>
                <input type="email" name="email" required placeholder="email@example.com"
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">الدور <span class="text-red-500">*</span></label>
                <select name="role" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm">
                    <option value="sales_manager">مدير مبيعات</option>
                    <option value="sales">مبيعات</option>
                    <option value="finance">مالية</option>
                    <option value="operations_manager">مدير عمليات</option>
                    <option value="operations">عمليات</option>
                    <option value="admission">قبول</option>
                    <option value="hr">موارد بشرية</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">كلمة السر <span class="text-red-500">*</span></label>
                <input type="password" name="password" required placeholder="كلمة السر (8 أحرف على الأقل)"
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">تأكيد كلمة السر <span class="text-red-500">*</span></label>
                <input type="password" name="password_confirmation" required placeholder="أعد كتابة كلمة السر"
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                <p id="passwordError" class="text-red-500 text-xs mt-1 hidden">كلمة السر يجب أن تكون 8 أحرف على الأقل وتطابق التأكيد</p>
            </div>
            <button type="submit" onclick="return validatePasswordForm()"
                    class="w-full px-5 py-3 bg-accent-500 text-white rounded-xl text-sm font-bold hover:bg-accent-600 transition-all shadow-sm flex items-center justify-center gap-2 cursor-pointer">
                <span>➕</span> إضافة الموظف
            </button>
        </form>
    </div>
</div>

{{-- Delete Confirmation Modal --}}
<div id="deleteModal" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-sm mx-4" onclick="event.stopPropagation()">
        <div class="text-center mb-6">
            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-50 flex items-center justify-center text-3xl">⚠️</div>
            <h2 class="text-lg font-bold text-primary-900">تأكيد الحذف</h2>
            <p class="text-muted text-sm mt-2">هل أنت متأكد من حذف الموظف <strong id="deleteEmployeeName"></strong>؟</p>
            <p class="text-xs text-red-500 mt-1">سيتم تعطيل الحساب ولن يتمكن من تسجيل الدخول بعد الآن</p>
        </div>
        <form id="deleteForm" method="POST">
            @csrf
            @method('DELETE')
            <div class="flex gap-2">
                <button type="button" onclick="document.getElementById('deleteModal').classList.add('hidden')" class="flex-1 px-5 py-3 bg-gray-100 text-muted rounded-xl text-sm font-bold hover:bg-gray-200 transition-all cursor-pointer">إلغاء</button>
                <button type="submit" class="flex-1 px-5 py-3 bg-red-600 text-white rounded-xl text-sm font-bold hover:bg-red-700 transition-all cursor-pointer">تأكيد الحذف</button>
            </div>
        </form>
    </div>
</div>

{{-- Hard Delete Confirmation Modal --}}
<div id="hardDeleteModal" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-sm mx-4" onclick="event.stopPropagation()">
        <div class="text-center mb-6">
            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 flex items-center justify-center text-3xl">🚨</div>
            <h2 class="text-lg font-bold text-red-700">⚠️ تحذير: حذف نهائي</h2>
            <p class="text-muted text-sm mt-2">سيتم حذف الموظف <strong id="hardDeleteEmployeeName"></strong> نهائياً ولا يمكن التراجع. هل أنت متأكد؟</p>
        </div>
        <form id="hardDeleteForm" method="POST">
            @csrf
            @method('DELETE')
            <div class="flex gap-2">
                <button type="button" onclick="document.getElementById('hardDeleteModal').classList.add('hidden')" class="flex-1 px-5 py-3 bg-gray-100 text-muted rounded-xl text-sm font-bold hover:bg-gray-200 transition-all cursor-pointer">إلغاء</button>
                <button type="submit" class="flex-1 px-5 py-3 bg-red-700 text-white rounded-xl text-sm font-bold hover:bg-red-800 transition-all cursor-pointer">نعم، حذف نهائي</button>
            </div>
        </form>
    </div>
</div>

<script>
function validatePasswordForm() {
    const pw = document.querySelector('#addInternalModal input[name="password"]').value;
    const cpw = document.querySelector('#addInternalModal input[name="password_confirmation"]').value;
    const err = document.getElementById('passwordError');
    if (pw.length < 8 || pw !== cpw) {
        err.classList.remove('hidden');
        return false;
    }
    err.classList.add('hidden');
    return true;
}

function confirmDelete(id, name, tab) {
    document.getElementById('deleteEmployeeName').textContent = name;
    document.getElementById('deleteForm').action = '/hr/employees/' + id;
    document.getElementById('deleteModal').classList.remove('hidden');
}

function confirmHardDelete(id, name) {
    document.getElementById('hardDeleteEmployeeName').textContent = name;
    document.getElementById('hardDeleteForm').action = '/hr/employees/' + id + '/permanent';
    document.getElementById('hardDeleteModal').classList.remove('hidden');
}

function toggleDropdown(btn) {
    closeDropdowns();
    btn.nextElementSibling.classList.remove('hidden');
}

function closeDropdowns() {
    document.querySelectorAll('.relative.inline-block > div.absolute').forEach(el => el.classList.add('hidden'));
}

document.addEventListener('click', function(e) {
    if (!e.target.closest('.relative.inline-block')) {
        closeDropdowns();
    }
});
</script>
@endsection