@php
    $employeeOptions = $employees->pluck('name', 'id')->toArray();
    $departmentOptions = $departments->pluck('name', 'id')->toArray();
    $hasActiveFilters = filled($filterEmployee) || filled($filterDepartment) || filled($filterLabel) || filled($filterStatus) || filled($filterStartDate) || filled($filterEndDate) || filled($filterCreatedDate);
@endphp

<div x-data="{ showModal: false, showFilters: @js($hasActiveFilters), isEditMode: false }"
     x-on:close-modal.window="showModal = false"
     x-on:document-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-file-alt mr-2"></i> {{ __('Documents') }}
            </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 dark:hover:bg-gray-500 flex items-center gap-2">
                    <i class="fas fa-search"></i> {{ __('Filter') }}
                </button>

                @can('documents excel')
                    <button wire:click="export"
                        class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 dark:hover:bg-green-500 flex items-center gap-2">
                        <i class="fas fa-file-excel"></i> {{ __('Export') }}
                    </button>
                @endcan

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

        @if (session()->has('message'))
            <div class="mb-4 rounded border border-green-300 bg-green-100 px-4 py-3 text-sm text-green-800 dark:border-green-500/40 dark:bg-green-200/10 dark:text-green-300">
                <i class="fas fa-check-circle mr-2"></i>{{ session('message') }}
            </div>
        @endif

        <div x-show="showFilters" x-transition class="mb-4 grid grid-cols-6 md:grid-cols-6 lg:grid-cols-6 gap-4">

            @if(auth()->user()->hasRole('HR Manager'))
                <div>
                    <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('Employee') }}</label>
                    <x-searchable-select wire:model.live="filterEmployee" :options="$employeeOptions" :placeholder="__('All')" />
                </div>
                <div>
                    <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('Department') }}</label>
                    <x-searchable-select wire:model.live="filterDepartment" :options="$departmentOptions" :placeholder="__('All')" />
                </div>
            @endif

            <div>
                <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('Label') }}</label>
                <input type="text" wire:model.defer="filterLabel"
                    class="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded px-3 py-2">
            </div>
            <div>
                <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('Status') }}</label>
                <x-searchable-select
                    wire:model.defer="filterStatus"
                    :options="[
                        'active' => __('Active'),
                        'approaching_expiry' => __('Approaching Expiry'),
                        'finished' => __('Finished'),
                        'cancelled' => __('Cancelled'),
                        'archived' => __('Archived'),
                    ]"
                    :placeholder="__('All')"
                />
            </div>
            <div>
                <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('Start Date') }}</label>
                <x-date-picker wire:model.live="filterStartDate" max-model="filterEndDate" />
            </div>
            <div>
                <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('End Date') }}</label>
                <x-date-picker wire:model.live="filterEndDate" min-model="filterStartDate" />
            </div>

            <div>
                <div class="col-span-full flex gap-2 pt-6">
                    <button wire:click="search" wire:loading.attr="disabled"
                        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 dark:hover:bg-blue-500">
                        <i class="fas fa-search"></i> {{ __('Search') }}
                        <i class="fas fa-spinner fa-spin" wire:loading wire:target="search"></i>
                    </button>
                    <button wire:click="resetFilters"
                        class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 dark:hover:bg-gray-400">
                        <i class="fas fa-undo"></i> {{ __('Reset') }}
                    </button>
                </div>
            </div>
        </div>
    @endif
    <div class="overflow-x-auto md:shadow md:border border-gray-200 dark:border-gray-600">
        {{-- <table class="w-full text-sm text-left"> --}}
            <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-4 py-2">#</th>
                        <th class="px-4 py-2">{{ __('Employee') }}/{{ __('Client') }}</th>
                        <th class="px-4 py-2">{{ __('Department') }}</th>
                        <th class="px-4 py-2">{{ __('Label') }}</th>
                        <th class="px-4 py-2">{{ __('Start Date') }}</th>
                        <th class="px-4 py-2">{{ __('End Date') }}</th>
                        <th class="px-4 py-2">{{ __('Status') }}</th>
                        <th class="px-4 py-2">{{ __('Received') }}</th>
                        <th class="px-4 py-2">{{ __('File') }}</th>
                        <th class="px-4 py-2 text-center">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody class="text-gray-800 dark:text-gray-100">
                    @foreach($documents as $doc)
                                        <tr class="border border-gray-200 dark:border-gray-700 text-center">
                                            <td class="px-4 py-2" data-label="#">
                                                {{ $loop->iteration + ($documents->currentPage() - 1) * $documents->perPage() }}</td>
                                            <td class="px-4 py-2" data-label="{{ __('Employee') }}">
                                                {{ $doc->employee->name ?? ($doc->client->name ?? '—') }}</td>
                                            <td class="px-4 py-2" data-label="{{ __('Department') }}">{{ $doc->department->name ?? '—' }}
                                            </td>
                                            <td class="px-4 py-2" data-label="{{ __('Label') }}">{{ $doc->label }}</td>
                                            <td class="px-4 py-2" data-label="{{ __('Start Date') }}">{{ $doc->start_date }}</td>
                                            <td class="px-4 py-2" data-label="{{ __('End Date') }}">{{ $doc->end_date }}</td>
                                            <td class="px-4 py-2" data-label="{{ __('Status') }}">
                                                <span class="inline-block text-white px-2 py-1 rounded text-xs {{  match ($doc->display_status) {
                            'active' => 'bg-green-600',
                            'finished' => 'bg-red-600',
                            'approaching_expiry' => 'bg-yellow-500',
                            'cancelled' => 'bg-gray-400',
                            'archived' => 'bg-purple-500',
                            default => 'bg-blue-400'
                        }  }}">
                                                    {{ __($doc->display_status) }}
                                                </span>
                                            </td>
                                            <td class="px-4 py-2" data-label="{{ __('Received') }}">
                                                @if(!$doc->received_at)
                                                    <button wire:click="markAsReceived({{ $doc->id }})"
                                                        class="bg-green-500 text-white text-xs px-3 py-1 rounded">
                                                        {{ __('Mark') }}
                                                    </button>
                                                @else
                                                    <span class="text-green-600 text-sm">{{ __('Yes') }}</span>
                                                @endif
                                            </td>
                                            <td class="px-4 py-2" data-label="{{ __('File') }}">
                                                @if($doc->path)
                                                    <a href="{{ $doc->view_url }}" class="text-blue-600 dark:text-blue-400 underline text-sm"
                                                        target="_blank">
                                                        {{ __('View') }}
                                                    </a>
                                                @else
                                                    <span class="text-gray-400 dark:text-gray-500">{{ __('No File') }}</span>
                                                @endif
                                            </td>
                                            <td class="px-4 py-2 text-center flex justify-center gap-2">
                                                @can('documents edit')
                                                    <button @click="isEditMode = true; showModal = true; $wire.setEdit({{ $doc->id }})"
                                                        class="text-blue-600 dark:text-blue-400 hover:underline">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                @endcan
                                                @can('documents delete')
                                                    <button wire:click="confirmDelete({{ $doc->id }})" class="text-red-600 hover:underline">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                @endcan
                                            </td>
                                        </tr>
                    @endforeach

                    @if($documents->isEmpty())
                        <tr>
                            <td colspan="12" class="border px-3 py-4 text-gray-500 dark:text-gray-300 text-center">
                                {{ __('No records found.') }}
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
    </div>
    <div class="mt-4">
        {{ $documents->links() }}
    </div>

    <!-- Modal Inline Form -->
    <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" x-cloak>
                @if (session()->has('message'))
                    <div
                        class="bg-green-100 dark:bg-green-200/10 border border-green-400 text-green-700 dark:text-green-300 px-4 py-2 rounded text-sm">
                        <i class="fas fa-check-circle mr-2"></i> {{ session('message') }}
                    </div>
                @endif
                <div class="flex items-center justify-between mb-4 border-b pb-1 border-gray-200 dark:border-gray-600">
                    <h2 class="text-xl font-bold text-gray-700 dark:text-gray-100 mb-4">
                        <i class="fas fa-file-alt mr-2"></i>
                        {{ $isEditMode ? __('Edit Document') : __('Add Document') }}
                    </h2>
                    <button @click="showModal = false"
                        class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white cursor-pointer ">
                        <i class="fas fa-times fa-lg"></i>
                    </button>
                </div>

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

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-800 dark:text-gray-100">
                    @if($ShowEmployeeInForm)
                                        <div>

                                            <label class="block text-sm font-medium mb-1 dark:text-gray-300">{{ __('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>


                                        <div>
                                            <label class="block text-sm font-medium mb-1 dark:text-gray-300">{{ __('Department') }}</label>
                                            <x-searchable-select wire:model.defer="department_id" :options="$departmentOptions" :placeholder="__('Choose department')" />
                                            @error('department_id') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                                        </div>
                    @endif

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

                    <div>
                        <label class="block text-sm font-medium mb-1 dark:text-gray-300">{{ __('File') }}</label>
                        <input type="file" wire:model="file"
                            class="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded px-3 py-2">
                        @error('file')
                            <div class="mt-2 rounded border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-500/40 dark:bg-red-200/10 dark:text-red-300">
                                <i class="fas fa-circle-exclamation mr-1"></i>{{ $message }}
                            </div>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                            {{ __('Maximum allowed file size is 1 GB. If upload fails, check the file size and your connection.') }}
                        </p>

                        <div wire:loading wire:target="file" class="mt-2 flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400">
                            <svg class="h-5 w-5 animate-spin"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                                </circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                            </svg>
                            <span>{{ __('uploading') }}...</span>
                        </div>

                        @if($existingFile)
                            <a href="{{ $existingFile }}" target="_blank"
                                class="text-blue-600 dark:text-blue-400 text-sm underline mt-1 inline-block">{{ __('View Existing File') }}</a>
                        @endif
                    </div>

                    <div>
                        <label class="block text-sm font-medium mb-1 dark:text-gray-300">{{ __('Start Date') }}</label>
                        <x-date-picker wire:model.defer="start_date" max-model="end_date" />
                    </div>

                    <div>
                        <label class="block text-sm font-medium mb-1 dark:text-gray-300">{{ __('End Date') }}</label>
                        <x-date-picker wire:model.defer="end_date" min-model="start_date" />
                    </div>

                    <div>
                        <label class="block text-sm font-medium mb-1 dark:text-gray-300">{{ __('Status') }}</label>
                        <x-searchable-select
                            wire:model.defer="status"
                            :options="[
                                'active' => __('Active'),
                                'approaching_expiry' => __('Approaching Expiry'),
                                'finished' => __('Finished'),
                                'cancelled' => __('Cancelled'),
                                'archived' => __('Archived'),
                            ]"
                            :placeholder="__('Select')"
                        />
                    </div>

                    <div class="col-span-full">
                        <label class="block text-sm font-medium mb-1 dark:text-gray-300">{{ __('Comment') }}</label>
                        <textarea wire:model.defer="comment"
                            class="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded px-3 py-2"
                            rows="3"></textarea>
                        @error('comment') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                    </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 dark:hover:bg-gray-300 dark:text-black">
                        <i class="fas fa-times mr-1"></i> {{ __('Cancel') }}
                    </button>

                    <button type="submit" wire:loading.attr="disabled"
                        wire:target="{{ $isEditMode ? 'update' : 'store' }}"
                        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 dark:hover:bg-blue-500 flex items-center gap-2">
                        <i class="fas fa-save"></i>
                        <span>{{ $isEditMode ? __('Update') : __('Save') }}</span>
                        <svg wire:loading wire:target="{{ $isEditMode ? 'update' : 'store' }},file"
                            class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                            </circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                        </svg>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>