@php
    $administrateOptions = collect($administrates)->pluck('name', 'id')->toArray();
    $departmentOptions = collect($this->departments)->pluck('name', 'id')->toArray();
    $positionOptions = collect($this->positions)->pluck('name', 'id')->toArray();
    $filterDepartmentOptions = collect($departments)->pluck('name', 'id')->toArray();
    $filterPositionOptions = collect($positions)->pluck('name', 'id')->toArray();
    $hasActiveFilters = filled($filterName) || filled($filterCivilId) || filled($filterJobNumber) || filled($filterAdministrateId) || filled($filterDepartmentId) || filled($filterPositionId) || filled($filterStartDateFrom) || filled($filterStartDateTo) || (filled($filterEmploymentStatus) && $filterEmploymentStatus !== 'active');
@endphp

<div x-data="{ showModal: @entangle('showModal'), showDetails: false, selected: {}, showFilters: @js($hasActiveFilters)  }">

    <!-- العنوان والأزرار -->
    <div class="mb-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 flex-wrap">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center gap-2">
            <i class="fas fa-users"></i> {{ __('Employees') }}
        </h1>

        <div class="flex flex-wrap gap-2">
            <!-- زر الفلاتر -->
            <button @click="showFilters = !showFilters"
                    class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 flex items-center gap-2">
                <i class="fas fa-search"></i>
                <span>{{ __('Search') }}</span>
            </button>

            <!-- زر التصدير -->
            <button wire:click="exportData"
                    wire:loading.attr="disabled"
                    class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 flex items-center gap-2">
                <i class="fas fa-file-excel"></i>
                <span>{{ __('Export Employees') }}</span>
                <i wire:loading wire:target="exportData" class="fas fa-spinner fa-spin text-white"></i>
            </button>

            <!-- زر الإضافة -->
            @can("employees create")
                <button wire:click="openModalForCreate"
                        wire:loading.attr="disabled"
                        wire:target="openModalForCreate"
                        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 flex items-center gap-2">
                    <i class="fas fa-user-plus"></i>
                    <span>{{ __('Add Employee') }}</span>
                    <i wire:loading wire:target="openModalForCreate" class="fas fa-spinner fa-spin text-white"></i>
                </button>
            @endcan
        </div>
    </div>

    <!-- تنبيه الرسائل -->
    @if (session()->has('message'))
        <div class="mb-4 bg-green-100 dark:bg-green-800 text-green-800 dark:text-white px-4 py-2 rounded">
            {{ session('message') }}
        </div>
    @endif

    <!-- Modal Form for Add/Edit -->
    <div x-show="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
         style="display:none;">
        <div
            class="bg-white dark:bg-gray-800 dark:text-white w-full max-w-[95vw] lg:max-w-[1000px] p-6 rounded shadow-lg">
            <div class="flex justify-between mb-4 border-b pb-3 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold">
                    <i class="fas fa-user-edit me-2"></i>
                    {{ $isEditMode ? __('Edit Employee') : __('Add Employee') }}
                </h2>
                <button @click="showModal = false"
                        class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
                    <i class="fas fa-times-circle fa-lg"></i>
                </button>
            </div>


            @if ($errors->any())
                <div class="bg-red-100 border border-red-400 text-red-700 p-4 rounded mb-4">
                    <ul class="list-disc pl-5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif


            <div x-data="{
            tab: 1,
            errorMessage: '',
            validationsPassed: { 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 7: false, 8: false },
            async validateCurrentTab(tab) {
                this.errorMessage = '';
                const response = await $wire.validateTab(tab);
                if (response.original.success) {
                    this.validationsPassed[tab] = true;
                    if (tab < 8) this.tab++;
                } else {
                    this.errorMessage = response.original.message || '{{ __('Please fix errors before proceeding.') }}';
                }
            },
            init() {
                window.addEventListener('validation-error', event => {
                    this.tab = event.detail[0].tab;
                    this.errorMessage = '{{ __('Please fix errors in this tab before saving.') }}';
                });
            }
        }">

                <!-- Tab Navigation -->
                <div class="flex mb-4">
                    <template x-for="i in 8" :key="i">
                        <button
                            :class="{ 'bg-blue-600 text-white': tab === i, 'text-blue-600 dark:text-blue-400': tab !== i }"
                            class="px-4 py-2 focus:outline-none border dark:border-gray-600"
                            :class="{ 'rounded-l-md': i === 1, 'rounded-r-md': i === 8 }"
                            @click="tab = i;">
                            <span
                                x-text="(i == 1 ? '{{__('Personal')}}' :(i == 2 ? '{{__('Administrative')}}' : (i == 3 ? '{{__('Contact')}}' : (i == 4 ? '{{__('Additional')}}' : (i == 5 ? '{{__('Salary')}}' : (i == 6 ? '{{__('Photo')}}' : (i ==7 ? '{{__('Contract')}}' : (i == 8 ? '{{__('Options')}}' : i)))))))) "></span>
                        </button>
                    </template>
                </div>


                <template x-if="errorMessage">
                    <div class="bg-red-100 dark:bg-red-800 text-red-700 dark:text-white p-3 rounded mt-2"
                         x-text="errorMessage"></div>
                </template>

                @if ($errors->any())
                    <template>
                        @foreach ($errors->all() as $error)
                            <div class="bg-red-100 dark:bg-red-800 text-red-700 dark:text-white p-3 rounded mt-2"
                                 x-text="{{ $error }}"></div>
                        @endforeach
                    </template>
                @endif

                <!-- Tab Content -->
                <form wire:submit.prevent="{{ $isEditMode ? 'update' : 'store' }}">

                    <!-- Personal Information Tab -->
                    <div x-show="tab === 1" x-transition>
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                            <div>
                                <label class="block font-medium mb-1">
                                    <i class="fas fa-user"></i> {{ __('Full Name') }} ({{__("In Arabic")}})
                                </label>
                                <input type="text" wire:model.defer="name.ar"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"
                                       placeholder="{{ __('Enter full name') }}"/>
                                @error('name') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>


                            <div>
                                <label class="block font-medium mb-1">
                                    <i class="fas fa-user"></i> {{ __('Full Name') }} ({{__("In English")}})
                                </label>
                                <input type="text" wire:model.defer="name.en"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"
                                       placeholder="{{ __('Enter full name') }}"/>
                                @error('name') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1">
                                    <i class="fas fa-id-card"></i> {{ __('Civil ID') }}
                                </label>
                                <input type="text" wire:model.defer="civil_id"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"
                                       placeholder="{{ __('Enter civil ID') }}"/>
                                @error('civil_id') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div
                                x-data="{ open: false, searchQuery: '', selectedNationality: @entangle('nationality') , countries: @js($countries) }">
                                <label class="block font-medium text-gray-700 dark:text-gray-100 mb-2">
                                    <i class="fas fa-flag mr-2"></i> {{ __('Nationality') }}
                                </label>
                                <div class="relative w-full">
                                    <div @click="open = !open"
                                         class="w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm px-4 py-2 cursor-pointer flex justify-between items-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<span x-text="selectedNationality ? countries[selectedNationality] : '{{ __('Select nationality') }}'"
      class="text-gray-700 dark:text-gray-100"></span>
                                        <i class="fas fa-chevron-down text-gray-600 dark:text-gray-300"></i>
                                    </div>

                                    <div x-show="open" x-transition
                                         class="absolute w-full bg-white dark:bg-gray-800 shadow-lg border border-gray-300 dark:border-gray-600 mt-1 z-10 rounded-md max-h-60 overflow-auto">
                                        <input type="text" x-model="searchQuery"
                                               placeholder="{{ __('Search nationality') }}"
                                               class="w-full border-b border-gray-300 dark:border-gray-600 px-3 py-2 text-sm text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-700 rounded-t-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 mb-2"/>

                                        <div class="w-full max-h-48 overflow-auto">
                                            @foreach ($countries as $code => $label)
                                                <template
                                                    x-if="!searchQuery || '{{ $label }}'.toLowerCase().includes(searchQuery.toLowerCase())">
                                                    <option @click="selectedNationality = '{{ $code }}'; open = false"
                                                            value="{{ $code }}"
                                                            class="text-gray-700 dark:text-gray-100 px-3 py-2 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer">
                                                        {{ $label }}
                                                    </option>
                                                </template>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                @error('nationality')
                                <span class="text-red-600 dark:text-red-400 text-sm mt-2 block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1">
                                    <i class="fas fa-venus-mars"></i> {{ __('Gender') }}
                                </label>
                                <x-searchable-select
                                    wire:model.defer="gender"
                                    :options="['male' => __('Male'), 'female' => __('Female')]"
                                    :placeholder="__('Select gender')"
                                />
                                @error('gender') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1">
                                    <i class="fas fa-birthday-cake"></i> {{ __('Birth date') }}
                                </label>
                                <x-date-picker wire:model.defer="birth_date" />
                                @error('birth_date') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Administrative Details Tab -->
                    <div x-show="tab === 2" x-transition>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-sitemap"></i> {{ __('Role') }}
                                </label>
                                <x-searchable-select
                                    wire:model="role_id"
                                    :options="$roles->mapWithKeys(fn ($role) => [$role->id => __($role->name)])->toArray()"
                                    :placeholder="__('Select Role')"
                                />
                                @error('role_id') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div class="relative"
                                 x-data="{
        open: false,
        searchQuery: '',
        selectedLeader: @entangle('leader_id'),
        leaders: @js(collect($leaders)->pluck('name','id'))
     }">

                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-sitemap"></i> {{ __('Team Leader') }}
                                </label>

                                <!-- زر العرض -->
                                <div @click="open = !open"
                                     class="w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm px-3 py-2 cursor-pointer flex justify-between items-center">
        <span x-text="selectedLeader ? leaders[selectedLeader] : '{{ __('Select Leader') }}'"
              class="text-gray-700 dark:text-gray-100"></span>
                                    <i class="fas fa-chevron-down text-gray-600 dark:text-gray-300"></i>
                                </div>

                                <!-- القائمة المنسدلة -->
                                <div x-show="open" x-transition
                                     @click.outside="open = false"
                                     class="absolute w-full bg-white dark:bg-gray-800 shadow-lg border border-gray-300 dark:border-gray-600 mt-1 z-10 rounded-md">

                                    <!-- البحث -->
                                    <input type="text" x-model="searchQuery"
                                           placeholder="{{ __('Search leader') }}"
                                           class="w-full border-b border-gray-300 dark:border-gray-600 px-3 py-2 text-sm text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-700 rounded-t-md focus:outline-none"/>

                                    <!-- الخيارات -->
                                    <div class="max-h-56 overflow-auto">
                                        <div @click="selectedLeader = ''; open = false"
                                             class="px-3 py-2 text-gray-700 dark:text-gray-100 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer">
                                            {{ __('Select Leader') }}
                                        </div>

                                        <template x-for="(name, id) in leaders" :key="id">
                                            <div
                                                x-show="!searchQuery || name.toLowerCase().includes(searchQuery.toLowerCase())"
                                                @click="selectedLeader = id; open = false"
                                                class="px-3 py-2 text-gray-700 dark:text-gray-100 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer"
                                                x-text="name"></div>
                                        </template>
                                    </div>
                                </div>

                                @error('leader_id')
                                <span class="text-red-600 dark:text-red-400 text-sm mt-1 block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-sitemap"></i> {{ __('Administrate') }}
                                </label>
                                <x-searchable-select
                                    wire:model.live="administrate_id"
                                    :options="$administrateOptions"
                                    :placeholder="__('Select administrate')"
                                    wire:change="changeAdministrate"
                                />
                                @error('administrate_id') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-list"></i> {{ __('Department') }}
                                </label>
                                <x-searchable-select
                                    wire:model.live="department_id"
                                    :options="$departmentOptions"
                                    :placeholder="__('Select department')"
                                    wire:change="changeDepartment"
                                />
                                @error('department_id') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-briefcase"></i> {{ __('Position') }}
                                </label>
                                <x-searchable-select
                                    wire:model.live="position_id"
                                    :options="$positionOptions"
                                    :placeholder="__('Select position')"
                                />
                                @error('position_id') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Contact Information Tab -->
                    <div x-show="tab === 3" x-transition>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-envelope"></i> {{ __('Email') }}
                                </label>
                                <input type="text" wire:model.defer="email"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"
                                       placeholder="{{ __('Enter email number') }}"/>
                                @error('email') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror

                                <label class="inline-flex items-center">
                                    <input type="checkbox" wire:model.defer="allow_emails"
                                           class="form-checkbox h-5 w-5 text-blue-600"
                                           checked>
                                    <span class="ml-2 text-gray-800 dark:text-gray-100">
                                        {{ __('Allow receiving emails') }}
                                    </span>
                                </label>

                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-phone"></i> {{ __('Mobile') }}
                                </label>
                                <input type="text" wire:model.defer="mobile"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"
                                       placeholder="{{ __('Enter mobile number') }}"/>
                                @error('mobile') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-map-marker-alt"></i> {{ __('Location') }}
                                </label>
                                <input type="text" wire:model.defer="location"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"
                                       placeholder="{{ __('Enter location') }}"/>
                                @error('location') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-phone-volume"></i> {{ __('Phone Extension') }}
                                </label>
                                <input type="text" wire:model.defer="phone_extension"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"
                                       placeholder="{{ __('Enter phone extension') }}"/>
                                @error('phone_extension') <span class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Additional Details Tab -->
                    <div x-show="tab === 4" x-transition>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-cogs"></i> {{ __('Work Type') }}
                                </label>
                                <x-searchable-select
                                    wire:model.defer="work_type"
                                    :options="[
                                        'onsite' => __('On-site'),
                                        'remote' => __('Remote'),
                                        'hybrid' => __('Hybrid'),
                                    ]"
                                    :placeholder="__('Select Work Type')"
                                />
                                @error('work_type') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-clock"></i> {{ __('Work Schedule') }}
                                </label>
                                <x-searchable-select
                                    wire:model.defer="work_schedule"
                                    :options="[
                                        'full_time' => __('Full time'),
                                        'part_time' => __('Part time'),
                                    ]"
                                    :placeholder="__('Select Work Type')"
                                />
                                @error('work_schedule') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-calendar-week"></i> {{ __('Weekly Work Days') }}
                                </label>
                                <input type="number" wire:model.defer="weekly_work_days"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"
                                       placeholder="{{ __('Enter weekly work days') }}"/>
                                @error('weekly_work_days') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-business-time"></i> {{ __('Work Shift') }}
                                </label>
                                <x-searchable-select
                                    wire:model.defer="work_shift_id"
                                    :options="$workShifts->pluck('name', 'id')->toArray()"
                                    :placeholder="__('Select Work Shift')"
                                />
                                @error('work_shift_id') <span class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">{{ __('Shift effective from') }}</label>
                                <x-date-picker wire:model.defer="shift_effective_from" />
                                @error('shift_effective_from') <span class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-calendar"></i> {{ __('Annual Leave Days') }}
                                </label>
                                <input type="number" wire:model.defer="annual_leave_days"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"
                                       placeholder="{{ __('Enter annual leave days') }}"/>
                                @error('annual_leave_days') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>


                            <div class="col-span-2"
                                 x-data="{
        days: [
            { value: 'saturday',  label: '{{ __('Saturday') }}'  },
            { value: 'sunday',    label: '{{ __('Sunday') }}'    },
            { value: 'monday',    label: '{{ __('Monday') }}'    },
            { value: 'tuesday',   label: '{{ __('Tuesday') }}'   },
            { value: 'wednesday', label: '{{ __('Wednesday') }}' },
            { value: 'thursday',  label: '{{ __('Thursday') }}'  },
            { value: 'friday',    label: '{{ __('Friday') }}'    },
        ],
        count: @entangle('weekly_off_days').live,
        selected: @entangle('weekly_off_days_selected').live,
        init() {
            // تأكيد التهيئة
            if (!Array.isArray(this.selected)) this.selected = [];
            if (this.count == null) this.count = 0;

            // لو العدد قلّ، قصّ الاختيارات عشان متعدّيش الحد
            this.$watch('count', (v) => {
                const limit = Number(v || 0);
                if (this.selected.length > limit) {
                    this.selected = this.selected.slice(0, limit);
                }
            });
        }
     }"
                            >

                                <div>
                                    <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                        <i class="fas fa-calendar-day"></i> {{ __('Weekly Off Days') }}
                                    </label>
                                    <input type="number" wire:model.defer="weekly_off_days"
                                           class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"
                                           placeholder="{{ __('Enter weekly off days') }}"/>
                                    @error('weekly_off_days') <span
                                        class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                                </div>

                                <label class="block font-medium mb-2 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-check-square"></i> {{ __('Choose weekly off days') }}
                                    <span class="text-sm text-gray-500 dark:text-gray-400">
            ({{ __('You can choose up to') }} <span x-text="Number(count || 0)"></span> {{ __('day(s)') }})
        </span>
                                </label>

                                <div class="flex flex-wrap gap-2">
                                    <template x-for="d in days" :key="d.value">
                                        <button type="button"
                                                class="px-3 py-1 rounded border transition"
                                                :class="(Array.isArray(selected) && selected.includes(d.value))
                            ? 'bg-blue-600 text-white border-blue-600'
                            : (
                                (Number(count || 0) === 0 || (Array.isArray(selected) && selected.length >= Number(count || 0) && !selected.includes(d.value)))
                                ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 cursor-not-allowed border-gray-300 dark:border-gray-600'
                                : 'bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 border-gray-300 dark:border-gray-600'
                              )"
                                                @click="
                        const limit = Number(count || 0);
                        if (limit === 0) return;
                        if (!Array.isArray(selected)) selected = [];
                        const i = selected.indexOf(d.value);
                        if (i > -1) {
                            selected.splice(i, 1);
                        } else if (selected.length < limit) {
                            selected.push(d.value);
                        }
                    ">
                                            <span x-text="d.label"></span>
                                        </button>
                                    </template>
                                </div>

                                @error('weekly_off_days_selected')
                                <div class="text-red-600 dark:text-red-400 text-sm mt-2">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>
                    </div>

                    <!-- Salary Details Tab -->
                    <div x-show="tab === 5" x-transition>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block font-medium mb-1"><i
                                        class="fas fa-dollar-sign"></i> {{ __('Basic Salary') }}</label>
                                <input type="number" step="0.01" wire:model.live="basic_salary"
                                       class="w-full border rounded px-3 py-2"
                                       placeholder="{{ __('Enter basic salary') }}"/>
                                @error('basic_salary') <span
                                    class="text-red-600 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1"><i
                                        class="fas fa-home"></i> {{ __('Housing Allowance') }}</label>
                                <input type="number" step="0.01" wire:model.live="housing_allowance"
                                       class="w-full border rounded px-3 py-2"
                                       placeholder="{{ __('Enter housing allowance') }}"/>
                                @error('housing_allowance') <span
                                    class="text-red-600 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1"><i
                                        class="fas fa-car"></i> {{ __('Transport Allowance') }}</label>
                                <input type="number" step="0.01" wire:model.live="transport_allowance"
                                       class="w-full border rounded px-3 py-2"
                                       placeholder="{{ __('Enter transport allowance') }}"/>
                                @error('transport_allowance') <span
                                    class="text-red-600 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1"><i
                                        class="fas fa-plus-circle"></i> {{ __('Other Allowance') }}</label>
                                <input type="number" step="0.01" wire:model.live="other_allowance"
                                       class="w-full border rounded px-3 py-2"
                                       placeholder="{{ __('Enter other allowance') }}"/>
                                @error('other_allowance') <span
                                    class="text-red-600 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1"><i
                                        class="fas fa-calculator"></i> {{ __('Total Salary') }}</label>
                                <input type="number" step="0.01" wire:model.live="total_salary" readonly
                                       class="w-full border rounded px-3 py-2 bg-gray-100 dark:bg-gray-700 font-bold text-gray-800 dark:text-gray-200"
                                       placeholder="{{ __('Total Salary') }}"/>
                                @error('total_salary') <span
                                    class="text-red-600 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1"><i
                                        class="fas fa-percent"></i> {{ __('Social Insurance Rate') }}</label>
                                <input type="number" step="0.01" min="0" max="100" wire:model.defer="social_insurance_rate"
                                       class="w-full border rounded px-3 py-2"
                                       placeholder="{{ __('Enter social insurance rate') }}"/>
                                @error('social_insurance_rate') <span
                                    class="text-red-600 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1">
                                    <i class="fas fa-university"></i> {{ __('Bank Name') }}
                                </label>
                                <input type="text" wire:model.defer="bank_name"
                                       class="w-full border rounded px-3 py-2"
                                       placeholder="{{ __('Enter bank name') }}"/>
                                @error('bank_name')
                                <span class="text-red-600 text-sm">{{ $message }}</span>
                                @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1">
                                    <i class="fas fa-credit-card"></i> {{ __('Bank Account Number') }}
                                </label>
                                <input type="text" wire:model.defer="bank_account"
                                       class="w-full border rounded px-3 py-2"
                                       placeholder="{{ __('Enter bank account number') }}"/>
                                @error('bank_account')
                                <span class="text-red-600 text-sm">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Employee Photo Tab -->
                    <div x-show="tab === 6" x-transition>
                        <div>
                            <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                <i class="fas fa-image"></i> {{ __('Photo') }}
                            </label>

                            <!-- Input File -->
                            <input type="file" wire:model="photo" accept="image/*"
                                   class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"/>

                            <!-- Loading Indicator -->
                            <div wire:loading wire:target="photo"
                                 class="mt-2 text-gray-600 dark:text-gray-300 flex items-center gap-1">
                                <i class="fas fa-spinner fa-spin"></i> <span>{{ __('Uploading...') }}</span>
                            </div>

                            <!-- Preview Image -->
                            @if ($photo)
                                <div class="mt-3">
                                    <img src="{{ $photo->temporaryUrl() }}" class="max-w-xs rounded shadow"/>
                                </div>
                            @endif

                            <!-- Error Message -->
                            @error('photo')
                            <span class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>


                    <!-- Contract Details Tab -->
                    <div x-show="tab === 7" x-transition>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-file-contract"></i> {{ __('Contract Type') }}
                                </label>
                                <x-searchable-select
                                    wire:model.defer="contract_type"
                                    :options="[
                                        'electronic' => __('Electronic Contract'),
                                        'paper' => __('Paper Contract'),
                                    ]"
                                    :placeholder="__('Select contract type')"
                                />
                                @error('contract_type') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-calendar"></i> {{ __('Hire Date') }}
                                </label>
                                <x-date-picker wire:model.defer="hire_date" />
                                @error('hire_date') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-calendar-check"></i> {{ __('Contract Signed Date') }}
                                </label>
                                <x-date-picker wire:model.defer="contract_signed_date" max-model="contract_end_date" />
                                @error('contract_signed_date') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-calendar-check"></i> {{ __('contract end date') }}
                                </label>
                                <x-date-picker wire:model.defer="contract_end_date" min-model="contract_signed_date" />
                                @error('contract_end_date') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-calendar-alt"></i> {{ __('Start Date') }}
                                </label>
                                <x-date-picker wire:model.defer="start_date" />
                                @error('start_date') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-calendar-alt"></i> {{ __('Status') }}
                                </label>
                                <x-searchable-select
                                    wire:model.defer="status"
                                    :options="[
                                        'active' => __('Active'),
                                        'inactive' => __('Inactive'),
                                        'on_leave' => __('On Leave'),
                                        'terminated' => __('Terminated'),
                                    ]"
                                    :placeholder="__('All')"
                                />
                                @error('status')
                                <span class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span>
                                @enderror
                            </div>

                        </div>
                    </div>

                    <!-- Additional Options Tab -->
                    <div x-data="{is_on_probation: @entangle('is_on_probation')}" x-show="tab === 8" x-transition>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-calendar-day"></i> {{ __('Notification Period (Days)') }}
                                </label>
                                <input type="number" wire:model.defer="notification_period"
                                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100"/>
                                @error('notification_period') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-repeat"></i> {{ __('Contract Renewal') }}
                                </label>
                                <x-searchable-select
                                    wire:model.defer="contract_renewal"
                                    :options="['yes' => __('Yes'), 'no' => __('No')]"
                                    :placeholder="__('Select renewal option')"
                                />
                                @error('contract_renewal') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-clock"></i> {{ __('Is On Probation?') }}
                                </label>
                                <x-searchable-select
                                    wire:model.defer="is_on_probation"
                                    :options="['yes' => __('Yes'), 'no' => __('No')]"
                                    :placeholder="__('Select probation status')"
                                />
                                @error('is_on_probation') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div x-show="is_on_probation === 'yes'">
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-calendar-check"></i> {{ __('Probation End Date') }}
                                </label>
                                <x-date-picker wire:model.defer="probation_end_date" max-model="probation_extension_date" />
                                @error('probation_end_date') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>

                            <div x-show="is_on_probation === 'yes'">
                                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                                    <i class="fas fa-calendar-check"></i> {{ __('Probation Extension Date') }}
                                </label>
                                <x-date-picker wire:model.defer="probation_extension_date" min-model="probation_end_date" />
                                @error('probation_extension_date') <span
                                    class="text-red-600 dark:text-red-400 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-between w-full mt-4">

                        <!-- زر السابق يظهر فقط إذا التاب أكبر من 1 -->
                        <button type="button"
                                x-show="tab > 1"
                                @click="tab--"
                                class="bg-green-600 hover:bg-green-700 text-white dark:text-white px-4 py-2 rounded flex items-center gap-2 cursor-pointer transition"
                                style="display: none;">
                            <i class="fas fa-arrow-right"></i> {{ __('Back') }}
                        </button>

                        <!-- زر التالي يظهر فقط إذا التاب أقل من 8 -->
                        <button type="button"
                                x-show="tab < 8"
                                @click="validateCurrentTab(tab)"
                                class="bg-green-600 hover:bg-green-700 text-white dark:text-white px-4 py-2 rounded flex items-center gap-2 cursor-pointer transition"
                                style="display: none;">
                            {{ __('Next') }} <i class="fas fa-arrow-left"></i>
                            <i class="fas fa-spinner fa-spin" wire:loading></i>
                        </button>

                        <!-- زر الحفظ يظهر فقط في التاب 8 -->
                        <button type="submit"
                                x-show="tab === 8"
                                class="bg-green-600 hover:bg-green-700 text-white dark:text-white px-4 py-2 rounded flex items-center gap-2 cursor-pointer transition"
                                style="display: none;">
                            <i class="fas fa-save"></i> {{ __('Save') }}
                            <i class="fas fa-spinner fa-spin" wire:loading></i>
                        </button>

                    </div>

                </form>
            </div>
        </div>
    </div>


    <div x-show="showFilters" x-transition>
        <!-- Filters Section -->
        <form wire:submit="applyFilters"
              class="mb-6 bg-white dark:bg-gray-800 border dark:border-gray-700 p-4 rounded shadow grid grid-cols-1 md:grid-cols-4 gap-4 items-end">

            <div>
                <label class="block font-medium mb-1 text-gray-800 dark:text-white"><i
                        class="fas fa-user"></i> {{ __('Name') }}</label>
                <input type="text" wire:model.defer="filterName"
                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                       placeholder="{{ __('Search by name') }}">
            </div>

            <div>
                <label class="block font-medium mb-1 text-gray-800 dark:text-white"><i
                        class="fas fa-id-card"></i> {{ __('Civil ID') }}</label>
                <input type="text" wire:model.defer="filterCivilId"
                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                       placeholder="{{ __('Search by ID') }}">
            </div>

            <div>
                <label class="block font-medium mb-1 text-gray-800 dark:text-white"><i
                        class="fas fa-briefcase"></i> {{ __('Job Number') }}</label>
                <input type="text" wire:model.defer="filterJobNumber"
                       class="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                       placeholder="{{ __('Search by Job#') }}">
            </div>

            <div>
                <label class="block font-medium mb-1 text-gray-800 dark:text-white"><i
                        class="fas fa-sitemap"></i> {{ __('Administrate') }}</label>
                <x-searchable-select wire:model.live="filterAdministrateId" :options="$administrateOptions" :placeholder="__('All')" />
            </div>

            <div>
                <label class="block font-medium mb-1 text-gray-800 dark:text-white"><i
                        class="fas fa-building"></i> {{ __('Department') }}</label>
                <x-searchable-select wire:model.live="filterDepartmentId" :options="$filterDepartmentOptions" :placeholder="__('All')" />
            </div>

            <div>
                <label class="block font-medium mb-1 text-gray-800 dark:text-white"><i
                        class="fas fa-user-tag"></i> {{ __('Position') }}</label>
                <x-searchable-select wire:model.live="filterPositionId" :options="$filterPositionOptions" :placeholder="__('All')" />
            </div>


            <div>
                <label class="block font-medium mb-1 text-gray-800 dark:text-white"><i
                        class="fas fa-calendar-alt"></i> {{ __('Hire Date From') }}</label>
                <x-date-picker wire:model.live="filterStartDateFrom" max-model="filterStartDateTo" />
            </div>

            <div>
                <label class="block font-medium mb-1 text-gray-800 dark:text-white"><i
                        class="fas fa-calendar-alt"></i> {{ __('Hire Date To') }}</label>
                <x-date-picker wire:model.live="filterStartDateTo" min-model="filterStartDateFrom" />
            </div>

            <div>
                <label class="block font-medium mb-1 text-gray-800 dark:text-white">
                    <i class="fas fa-calendar-alt"></i> {{ __('Status') }}
                </label>
                <x-searchable-select
                    wire:model.defer="filterEmploymentStatus"
                    :options="[
                        'active' => __('Active'),
                        'inactive' => __('Inactive'),
                        'on_leave' => __('On Leave'),
                        'terminated' => __('Terminated'),
                    ]"
                    :placeholder="__('All')"
                />
            </div>

            <div>
                <div class="flex gap-2 col-span-full sm:col-span-2">
                    <button type="submit"
                            wire:loading.attr="disabled"
                            wire:target="applyFilters"
                            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded flex items-center gap-2 w-full justify-center transition">
                        <i class="fas fa-search"></i> {{ __('Apply Filters') }}
                        <i class="fas fa-spinner fa-spin" wire:loading wire:target="applyFilters"></i>
                    </button>

                    <button type="button" wire:click="resetFilters"
                            wire:loading.attr="disabled"
                            wire:target="resetFilters"
                            class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded hover:bg-gray-400 dark:hover:bg-gray-500 flex items-center gap-2 w-full justify-center transition">
                        <i class="fas fa-times"></i> {{ __('Reset') }}
                        <i class="fas fa-spinner fa-spin" wire:loading wire:target="resetFilters"></i>
                    </button>
                </div>
            </div>

        </form>
    </div>


    <!-- جدول الموظفين -->
    <div x-data="{ showModalStatus: false }" @open-status-modal.window="showModalStatus = true"
         x-on:close-modal.window="showModalStatus = false"
         class="overflow-x-auto md:shadow md:border border-gray-200 dark:border-gray-600">
        <table class="min-w-full  divide-y text-sm divide-gray-200 dark:divide-gray-600">
            <thead class="bg-gray-100  text-gray-700 dark:text-gray-100 dark:bg-gray-700">
            <tr class="border border-gray-200 dark:border-gray-600 text-center">
                <th class="px-3 py-2 whitespace-nowrap">{{ __('#') }}</th>
                <th class="px-3 py-2 whitespace-nowrap">{{ __('Photo') }}</th>
                <th class="px-3 py-2 whitespace-nowrap">{{ __('Name') }}</th>
                <th class="px-3 py-2 whitespace-nowrap">{{ __('ID') }}</th>
                <th class="px-3 py-2 whitespace-nowrap">{{ __('Job#') }}</th>
                <th class="px-3 py-2 whitespace-nowrap">{{ __('Mobile') }}</th>
                <th class="px-3 py-2 whitespace-nowrap">{{ __('Administrate') }}</th>
                <th class="px-3 py-2 whitespace-nowrap">{{ __('Dept') }}</th>
                <th class="px-3 py-2 whitespace-nowrap">{{ __('Title') }}</th>
                @if($expiringContracts)
                    <th class="px-3 py-2 whitespace-nowrap">{{ __('Contract End Date') }}</th>
                    <th class="px-3 py-2 whitespace-nowrap">{{ __('Days Remaining') }}</th>
                @endif
                <th class="px-3 py-2 whitespace-nowrap w-24">{{ __('Status') }}</th>
                <th class="px-3 py-2 whitespace-nowrap text-center">{{ __('Actions') }}</th>
            </tr>
            </thead>

            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
            @foreach($employees as $e)
                @php
                    $contractEndDate = $e->contract_end_date ? \Carbon\Carbon::parse($e->contract_end_date) : null;
                    $daysRemaining = $contractEndDate ? today()->diffInDays($contractEndDate, false) : null;
                    $expiryRowClass = $daysRemaining !== null && $daysRemaining <= 7
                        ? 'bg-red-50 dark:bg-red-900/20'
                        : ($daysRemaining !== null && $daysRemaining <= 30 ? 'bg-amber-50 dark:bg-amber-900/20' : '');
                @endphp
                <tr class="border border-gray-200 dark:border-gray-600 text-center {{ $expiryRowClass }}">
                    <td class="px-3 py-2 text-center" data-label="{{ __('#') }}">
                        {{ $loop->iteration + ($employees->currentPage() - 1) * $employees->perPage() }}
                    </td>

                    <td class="px-3 py-2 text-center relative" data-label="{{ __('Photo') }}">

                        <div class="relative inline-block">

                            <!-- نقطة الحالة -->
                            <span class="absolute top-0 right-0 translate-x-1 -translate-y-1 block w-3 h-3 rounded-full border-2 border-white
                                {{ $e->is_online ? 'bg-green-500' : 'bg-red-500' }}" style="border: 1px solid #fff;">
                            </span>

                            <!-- صورة المستخدم -->
                            @if($e->photo_url)
                                <img src="{{ $e->photo_url }}"
                                     class="h-10 w-10 object-cover rounded-full"/>
                            @else
                                <i class="fas fa-user-circle fa-2x text-gray-400 dark:text-gray-500"></i>
                            @endif

                        </div>

                    </td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Name') }}">{{ $e->name }}

                        @php
                            $roleColors = [
                                'Admin'             => 'bg-red-500 text-white',
                                'General Manager'   => 'bg-orange-500 text-white',
                                'HR Manager'        => 'bg-purple-500 text-white',
                                'Finance Officer'   => 'bg-teal-500 text-white',
                                'Head of Department'=> 'bg-blue-500 text-white',
                                'Unit Supervisor'   => 'bg-green-500 text-white',
                                'Team Leader'       => 'bg-yellow-500 text-white',
                                'Employee'          => 'bg-gray-600 text-white',
                                'External Client'   => 'bg-gray-400 text-black',
                                'Access Suspended'  => 'bg-red-700 text-white',
                            ];
                        @endphp

                        @if($e->roles->isNotEmpty())
                            @foreach($e->roles as $role)
                                <span
                                    class="inline-block px-2 py-1 text-xs font-semibold rounded mr-1 {{ $roleColors[$role->name] ?? 'bg-gray-200 text-black' }}">
                                {{ __($role->name) }}
                            </span>
                            @endforeach
                        @else
                            <span
                                class="inline-block px-2 py-1 text-xs font-semibold rounded bg-gray-300 text-black">
                                {{__("Undefined")}}
                            </span>
                        @endif
                    </td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('ID') }}">{{ $e->civil_id }}</td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Job#') }}">{{ $e->job_number }}</td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Mobile') }}">{{ $e->mobile }}</td>
                    <td class="px-3 py-2 text-center"
                        data-label="{{ __('Administrate') }}">{{ optional($e->administrate)->name }}</td>
                    <td class="px-3 py-2 text-center"
                        data-label="{{ __('Dept') }}">{{ optional($e->department)->name }}</td>
                    <td class="px-3 py-2 text-center"
                        data-label="{{ __('Title') }}">{{ optional($e->position)->name }}</td>
                    @if($expiringContracts)
                        <td class="px-3 py-2 text-center whitespace-nowrap" data-label="{{ __('Contract End Date') }}">
                            @if($contractEndDate)
                                <span class="font-semibold {{ $daysRemaining <= 7 ? 'text-red-700 dark:text-red-300' : ($daysRemaining <= 30 ? 'text-amber-700 dark:text-amber-300' : 'text-gray-800 dark:text-gray-100') }}">
                                    {{ $contractEndDate->format('Y-m-d') }}
                                </span>
                            @else
                                <span class="text-gray-400">—</span>
                            @endif
                        </td>
                        <td class="px-3 py-2 text-center whitespace-nowrap" data-label="{{ __('Days Remaining') }}">
                            @if($daysRemaining !== null)
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold {{ $daysRemaining <= 7 ? 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200' : ($daysRemaining <= 30 ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-200' : 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200') }}">
                                    {{ trans_choice(':count day remaining|:count days remaining', $daysRemaining, ['count' => $daysRemaining]) }}
                                </span>
                            @else
                                <span class="text-gray-400">—</span>
                            @endif
                        </td>
                    @endif
                    <td class="px-3 py-2 text-center" data-label="{{ __('Status') }}">
                        @can('employees edit')
                            <span
                                class="px-2 py-1 rounded-full text-white text-xs cursor-pointer
                                       {{ $e->status === 'active' ? 'bg-green-500' : 'bg-gray-500' }}"
                                @click="$wire.loadEmployee({{ $e->id }}); showModalStatus = true">
                                {{ __($e->status) }}
                                <i wire:loading wire:target="loadEmployee"
                                   class="fas fa-spinner fa-spin text-white"></i>

                            </span>
                        @else
                            <span class="px-2 py-1 rounded-full text-white text-xs
                                {{ $e->status === 'active' ? 'bg-green-500' : 'bg-gray-500' }}">
                                {{ __($e->status) }}
                            </span>
                        @endcan

                    </td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Actions') }}">
                        <div class="flex flex-wrap justify-center gap-2">
                            @can("employees edit")
                                <button wire:click="openModalForEdit({{ $e->id }})"
                                        class="text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1">
                                    <i class="fas fa-edit"></i> <span>{{ __('Edit') }}</span>
                                </button>
                            @endcan
                            @can("employees delete")
                                <button wire:click="confirmDelete({{ $e->id }})"
                                        class="text-red-600 dark:text-red-400 hover:underline flex items-center gap-1">
                                    <i class="fas fa-trash"></i> <span>{{ __('Delete') }}</span>
                                </button>
                            @endcan
                            <a href="{{ route('employee', $e->id) }}"
                               class="text-gray-600 dark:text-gray-300 hover:underline hover:text-black dark:hover:text-white flex items-center gap-1">
                                <i class="fas fa-eye"></i> <span>{{ __('View') }}</span>
                            </a>
                        </div>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>

        {{-- المودال --}}
        <div x-show="showModalStatus" x-transition
             x-on:employee-status-updated.window="showModalStatus = false"
             class="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
            <div @click.away="showModalStatus = false" class="bg-white dark:bg-gray-800 p-6 rounded shadow-lg text-center">
                <i wire:loading class="fas fa-spinner fa-spin"></i>

                <div wire:loading.remove>
                    <h2 class="text-lg font-semibold mb-4">{{ __('Change Employee Status') }}: {{$EmployeeName}}</h2>

                    <x-searchable-select
                        wire:model="status"
                        :options="[
                            'active' => __('Active'),
                            'inactive' => __('Inactive'),
                            'on_leave' => __('On Leave'),
                            'terminated' => __('Terminated'),
                        ]"
                        :placeholder="__('Select')"
                    />

                    <div class="flex justify-end space-x-2">
                        <button @click="showModalStatus = false" class="px-3 py-1 bg-gray-300 rounded">
                            {{ __('Cancel') }}
                        </button>
                        <button wire:click="updateStatus" wire:loading.attr="disabled" wire:target="updateStatus"
                                class="px-3 py-1 bg-blue-500 text-white rounded">
                            {{ __('Confirm') }}
                            <i wire:loading wire:target="updateStatus" class="fas fa-spinner fa-spin ms-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{ $employees->links() }}



    <!-- نافذة تأكيد الحذف -->
    @if($confirmingDeletionId)
        <div class="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
            <div class="bg-white dark:bg-gray-800 p-6 rounded shadow-lg text-center">
                <h3 class="text-lg font-bold mb-4 text-red-600">{{ __('Are you sure you want to delete?') }}</h3>
                <div class="flex justify-center gap-4">
                    <button wire:click="deleteConfirmed" wire:loading.attr="disabled"
                            class="bg-red-600 text-white px-4 py-2 rounded flex items-center gap-2">
                        <i class="fas fa-trash-alt"></i> {{ __('Yes, Delete') }}
                        <svg wire:loading wire:target="deleteConfirmed" class="animate-spin h-4 w-4 text-white">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
                        </svg>
                    </button>
                    <button wire:click="$set('confirmingDeletionId', null)"
                            class="bg-gray-300 dark:bg-gray-600 dark:text-white px-4 py-2 rounded">
                        {{ __('Cancel') }}
                    </button>
                </div>
            </div>
        </div>
    @endif

</div>