@php
    $employeeOptions = $employees->pluck('name', 'id')->toArray();
    $hasActiveFilters = filled($filterEmployee) || filled($filterStatus) || filled($filterType) || filled($filterFrom) || filled($filterTo);
@endphp

<div x-data="{showModal:false, showFilters:@js($hasActiveFilters), isEditMode:false}"
     x-on:close-modal.window="showModal=false"
     x-on:absence-updated.window="setTimeout(() => window.location.reload(), 250)">



    @if($status != 'need_action')
        <div class="flex justify-between items-center mb-4">
            <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
                <i class="fas fa-user-times mr-2"></i> {{ __('Absences') }}
            </h1>

            <div class="flex items-center gap-2">

                <button @click="showFilters=!showFilters"
                        class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700">
                    <i class="fas fa-filter"></i> {{ __('Filter') }}
                </button>

                @can('absences create')
                    <button @click="isEditMode=false; showModal=true; $wire.setCreate()"
                            class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                        <i class="fas fa-plus-circle"></i> {{ __('Add') }}
                    </button>
                @endcan
            </div>
        </div>
    @endif

    {{-- Filters --}}
    <div x-show="showFilters" x-transition class="mb-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 text-gray-800 dark:text-gray-100">

        @if($showEmployeeList)
            <div>
                <label class="block font-medium mb-1 text-gray-800 dark:text-gray-100">
                    {{ __('Employee') }}
                </label>
                <x-searchable-select wire:model.live="filterEmployee" :options="$employeeOptions" :placeholder="__('All')" />
            </div>
        @endif

        <div>
            <label class="text-sm">{{ __('Type') }}</label>
            <x-searchable-select
                wire:model.defer="filterType"
                :options="[
                    'full_day' => __('Full Day'),
                    'half_day' => __('Half Day'),
                    'hours' => __('Hours'),
                ]"
                :placeholder="__('All')"
            />
        </div>

        @if($showEmployeeList)
            <div>
                <label class="text-sm">{{ __('Status') }}</label>
                <x-searchable-select
                    wire:model.defer="filterStatus"
                    :options="[
                        'pending' => __('Pending'),
                        'approved' => __('Approved'),
                        'rejected' => __('Rejected'),
                        'excused' => __('Excused'),
                        'unexcused' => __('Unexcused'),
                    ]"
                    :placeholder="__('All')"
                />
            </div>
        @endif

        <div>
            <label class="text-sm">{{ __('From Date') }}</label>
            <x-date-picker wire:model.live="filterFrom" max-model="filterTo" />
        </div>

        <div>
            <label class="text-sm">{{ __('To Date') }}</label>
            <x-date-picker wire:model.live="filterTo" min-model="filterFrom" />
        </div>

        <div class="pt-3">
            <label class="text-sm">{{ __('Search') }}</label>
            <div>
                <button wire:click="$refresh" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                    <i class="fas fa-search"></i> {{ __('Search') }}
                </button>
                <button
                    wire:click="resetFilters"
                    class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
                    <i class="fas fa-undo"></i> {{ __('Reset') }}
                </button>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div 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="text-center">
                @php
                    $cols = [
                      ['key'=>'id',        'label'=>'#'],
                      ['key'=>'employee',  'label'=>__('Employee')],
                      ['key'=>'date',      'label'=>__('Date')],
                      ['key'=>'type',      'label'=>__('Type')],
                      ['key'=>'hours',     'label'=>__('Hours')],
                      ['key'=>'reason',    'label'=>__('Reason')],
                      ['key'=>'status',    'label'=>__('Status')],
                      ['key'=>null,        'label'=>__('File')],
                      ['key'=>null,        'label'=>__('Actions')],
                    ];
                @endphp
                @foreach($cols as $c)
                    <th class="px-3 py-2 whitespace-nowrap">
                        {{--                        @if($c['key'])--}}
                        {{--                            <button wire:click="sortBy('{{ $c['key'] }}')"--}}
                        {{--                                    class="inline-flex items-center gap-1 hover:underline">--}}
                        {{--                                <span>{{ $c['label'] }}</span>--}}
                        {{--                                @if(($sortField ?? '') === $c['key'])--}}
                        {{--                                    @if(($sortDirection ?? 'asc') === 'asc')--}}
                        {{--                                        <i class="fas fa-sort-up"></i>--}}
                        {{--                                    @else--}}
                        {{--                                        <i class="fas fa-sort-down"></i>--}}
                        {{--                                    @endif--}}
                        {{--                                @else--}}
                        {{--                                    <i class="fas fa-sort text-gray-400"></i>--}}
                        {{--                                @endif--}}
                        {{--                            </button>--}}
                        {{--                        @else--}}
                        {{--                            <span>{{ $c['label'] }}</span>--}}
                        {{--                        @endif--}}

                        <span>{{ $c['label'] }}</span>

                    </th>
                @endforeach
            </tr>
            </thead>

            <tbody class="text-gray-700 dark:text-gray-300">

            @forelse($absences as $a)
                <tr class=" border border-gray-200 dark:border-gray-700 text-center ">
                    <td class="px-3 py-2 text-center" data-label="#">{{ $loop->iteration + ($absences->currentPage() - 1) * $absences->perPage() }}</td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Employee') }}">{{ $a->employee->name ?? '—' }}</td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Date') }}">{{ optional($a->date)->format('Y-m-d') }}</td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Type') }}">{{ __(ucfirst(str_replace('_',' ',$a->type))) }}</td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Hours') }}">{{ $a->hours ?? '—' }}</td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Reason') }}">{{ $a->reason ?? '—' }}</td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Status') }}">
              <span class="inline-block text-white px-2 py-1 rounded text-xs {{
                match($a->status) {
                  'pending'   => 'bg-yellow-500',
                  'approved'  => 'bg-green-600',
                  'rejected'  => 'bg-red-600',
                  'excused'   => 'bg-blue-600',
                  'unexcused' => 'bg-gray-500',
                  default     => 'bg-gray-500'
                }
              }}">
                {{ __(ucfirst($a->status)) }}
              </span>
                    </td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('File') }}">
                        @if($a->file_url)
                            <a href="{{ $a->file_url }}" target="_blank"
                               class="text-blue-600 dark:text-blue-400 underline">{{ __('View') }}</a>
                        @else
                            <span class="text-gray-400"> — </span>
                        @endif
                    </td>
                    <td class="px-3 py-2 text-center" data-label="{{ __('Actions') }}">
                        <div class="flex justify-center gap-3">
                            @can('absences edit')
                                @if($a->status === 'pending')
                                    <button @click="isEditMode=true; showModal=true; $wire.setEdit({{ $a->id }})"
                                            class="text-blue-600 dark:text-blue-400 hover:underline">
                                        <i class="fas fa-edit"></i> {{ __('Edit') }}
                                    </button>
                                @endif
                            @endcan

                            @can('absences delete')
                                <button wire:click="confirmDelete({{ $a->id }})" class="text-red-600 hover:underline">
                                    <i class="fas fa-trash"></i><span class="sr-only">{{ __('Delete') }}</span>
                                </button>
                            @endcan

                            @can('absences approve')
                                @if($a->status === 'pending')
                                    <button wire:click="markApproved({{ $a->id }})"
                                            class="text-emerald-600 hover:underline">
                                        <i class="fas fa-check-circle"></i><span
                                            class="sr-only">{{ __('Approve') }}</span>
                                    </button>
                                    <button wire:click="markRejected({{ $a->id }})"
                                            class="text-gray-600 hover:underline">
                                        <i class="fas fa-times-circle"></i><span
                                            class="sr-only">{{ __('Reject') }}</span>
                                    </button>
                                @endif
                            @endcan

                            <a href="{{ route('absences.show', $a->id) }}"
                               class="text-indigo-600 hover:underline">
                                <i class="fas fa-eye"></i> {{__("View")}}
                            </a>

                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="9" class="text-center text-gray-500 py-4">{{ __('No records found.') }}</td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">{{ $absences->links() }}</div>

    {{-- Modal --}}
    <div x-show="showModal" x-transition class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
        <div class="bg-white dark:bg-gray-800 p-6 rounded w-full max-w-2xl shadow-xl">
            <form wire:submit.prevent="{{ $isEditMode ? 'update' : 'store' }}" class="space-y-4">
                <div class="flex items-center justify-between mb-2 border-b pb-1 border-gray-200 dark:border-gray-700">
                    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">
                        <i class="fas fa-user-times mr-2"></i>
                        {{ $isEditMode ? __('Edit Absence') : __('Add Absence') }}
                    </h2>
                    <button @click="showModal=false" class="text-gray-600 dark:text-gray-300">
                        <i class="fas fa-times fa-lg"></i>
                    </button>
                </div>

                @if ($errors->any())
                    <div
                        class="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded text-sm dark:bg-red-900/30 dark:border-red-700 dark:text-red-200">
                        <ul class="list-disc pl-5">@foreach ($errors->all() as $e)
                                <li>{{ $e }}</li>
                            @endforeach</ul>
                    </div>
                @endif

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                    @if($showEmployeeList)

                        <div>
                            <label class="block text-sm mb-1">{{ __('Employee') }}</label>
                            <x-searchable-select wire:model.defer="employee_id" :options="$employeeOptions" :placeholder="__('Choose employee')" />

                            @error('employee_id')
                            <span class="text-red-600 text-sm">{{ $message }}</span>
                            @enderror
                        </div>

                    @endif
                    <div>
                        <label class="block text-sm mb-1">{{ __('Date') }}</label>
                        <x-date-picker wire:model.defer="date" />
                    </div>

                    <div>
                        <label class="block text-sm mb-1">{{ __('Type') }}</label>
                        <x-searchable-select
                            wire:model.defer="type"
                            :options="[
                                'full_day' => __('Full Day'),
                                'half_day' => __('Half Day'),
                                'hours' => __('Hours'),
                            ]"
                            :placeholder="__('Select')"
                        />
                    </div>

                    <div>
                        <label class="block text-sm mb-1">{{ __('Hours (if hours)') }}</label>
                        <input type="number" step="0.5" min="0.5" max="12" wire:model.defer="hours"
                               class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-700"
                               placeholder="{{ __('e.g. 3.5') }}">
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm mb-1">{{ __('Reason') }}</label>
                        <input type="text" wire:model.defer="reason"
                               class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-700">
                    </div>

                    @if($showEmployeeList)

                        <div>
                            <label class="block text-sm mb-1">{{ __('Status') }}</label>
                            <x-searchable-select
                                wire:model.defer="status"
                                :options="[
                                    'pending' => __('Pending'),
                                    'approved' => __('Approved'),
                                    'rejected' => __('Rejected'),
                                    'excused' => __('Excused'),
                                    'unexcused' => __('Unexcused'),
                                ]"
                                :placeholder="__('Select')"
                            />
                        </div>

                    @endif

                    <div>
                        <label class="block text-sm mb-1">{{ __('File (optional)') }}</label>
                        <input type="file" wire:model="file"
                               class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-700">
                        @if($existingFile)
                            <a href="{{ $existingFile }}" target="_blank"
                               class="text-blue-600 dark:text-blue-400 underline mt-1 inline-block">
                                {{ __('View Existing File') }}
                            </a>
                        @endif
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm mb-1">{{ __('Note') }}</label>
                        <textarea wire:model.defer="note" rows="3"
                                  class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-700"></textarea>
                    </div>
                </div>

                <div class="flex justify-end gap-2 mt-4">
                    <button type="button" @click="$dispatch('close-modal') || (showModal=false)"
                            class="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">
                        {{ __('Cancel') }}
                    </button>
                    <button type="submit"
                            class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 flex items-center gap-2">
                        <i class="fas fa-save"></i>
                        <span>{{ $isEditMode ? __('Update') : __('Save') }}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>