@php
    $projectOptions = $projects->mapWithKeys(fn ($project) => [$project->id => $project->name])->toArray();
    $clientOptions = $clients->mapWithKeys(fn ($client) => [$client->id => $client->name])->toArray();
    $categoryOptions = $categories->mapWithKeys(fn ($category) => [$category->id => $category->name])->toArray();
    $hasAdvancedFilters = filled($searchFilter) || filled($filter_project_id) || filled($filter_client_id) || filled($filter_employee_id) || filled($filter_category_id) || filled($filter_priority) || filled($filter_start_date) || filled($filter_due_date);
@endphp

<div x-data="{ showModal: false, showCategoryModal: false, isEditMode: false, isShowFilter: @js($hasAdvancedFilters) }"
     x-on:close-modal.window="showModal = false"
     x-on:task-status-updated.window="setTimeout(() => window.location.reload(), 250)"
     x-on:task-saved.window="setTimeout(() => window.location.reload(), 250)">

    @if($status != 'need_action')
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">
                <i class="fas fa-tasks mr-2"></i> {{ __('Tasks') }}
            </h1>

            <div class="flex gap-2 flex-wrap">
                <button @click="isShowFilter = !isShowFilter"
                        class="bg-gray-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md flex items-center gap-2 dark:bg-gray-700 dark:hover:bg-yellow-600">
                    <i class="fas fa-search"></i> {{ __('Filter') }}
                </button>

                <button @click="showModal = true; isEditMode = false"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center gap-2 dark:bg-blue-700 dark:hover:bg-blue-800">
                    <i class="fas fa-plus-circle"></i> {{ __('Add Task') }}
                </button>

                @can('task categories create')
                    <button @click="showCategoryModal = true"
                            class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md flex items-center gap-2 dark:bg-yellow-500 dark:hover:bg-yellow-600">
                        <i class="fas fa-layer-group"></i> {{ __('Manage Categories') }}
                    </button>
                @endcan

                @can('export excel')
                    <button wire:click="exportExcel"
                            wire:loading.attr="disabled"
                            wire:target="exportExcel"
                            class="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white font-medium px-4 py-2 rounded-md transition dark:bg-green-700 dark:hover:bg-green-800">
                        <i class="fas fa-file-excel"></i>
                        <span>{{ __('Export to Excel') }}</span>
                        <svg wire:loading wire:target="exportExcel" class="animate-spin h-4 w-4 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-8v4a4 4 0 00-4 4H4z"></path>
                        </svg>
                    </button>
                @endcan

                @can('export pdf')
                    <button wire:click="exportPDF"
                            wire:loading.attr="disabled"
                            wire:target="exportPDF"
                            class="flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white font-medium px-4 py-2 rounded-md transition dark:bg-red-700 dark:hover:bg-red-800">
                        <i class="fas fa-file-pdf"></i>
                        <span>{{ __('Export to PDF') }}</span>
                        <svg wire:loading wire:target="exportPDF" class="animate-spin h-4 w-4 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-8v4a4 4 0 00-4 4H4z"></path>
                        </svg>
                    </button>
                @endcan

                <a href="{{ route('tasks.board',['project_id' => $project_id , 'employee_id' => $employee_id]) }}"
                   class="flex items-center gap-2 bg-gray-600 hover:bg-gray-800 text-white font-medium px-4 py-2 rounded-md transition dark:bg-gray-700 dark:hover:bg-gray-900">
                    <i class="fas fa-columns"></i>
                    <span>{{ __('Tasks board') }}</span>
                </a>
            </div>
        </div>
    @endif
    @if (session()->has('message'))
        <div class="bg-green-100 text-green-800 px-4 py-2 rounded mb-4 dark:bg-green-200 dark:text-green-900">
            {{ session('message') }}
        </div>
    @endif

    <!-- أزرار الفلتر السريع -->
    <div class="flex flex-wrap items-center justify-between gap-2 mb-4">
        {{-- أزرار النطاق (مهامي / جميع المهام) --}}
        <div class="flex gap-2">
            <button
                wire:click="setFilterScopeMine"
                wire:loading.attr="disabled"
                class="relative px-3 py-1.5 rounded-md text-sm font-medium transition-all
{{ ($filter_scope === 'mine') ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">

                {{ __('My Tasks') }}

                <i wire:loading wire:target="setFilterScopeMine" class="fas fa-spinner fa-spin ms-2 {{ ($filter_scope === 'mine') ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>

            <button
                wire:click="setFilterScopeAll"
                wire:loading.attr="disabled"
                class="relative px-3 py-1.5 rounded-md text-sm font-medium transition-all
{{ ($filter_scope === 'all') ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">

                {{ __('All Tasks') }}

                <i wire:loading wire:target="setFilterScopeAll" class="fas fa-spinner fa-spin ms-2 {{ ($filter_scope === 'all') ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>
        </div>

        {{-- نطاق زمني: اليوم / الأسبوع / الشهر --}}
        <div class="flex flex-wrap items-center gap-2">

            {{-- زر لمسح المدى الزمني (رجوع للوضع العادي) --}}
            <button
                wire:click="setFilterRangeNull"
                wire:loading.attr="disabled"
                class="px-3 py-1.5 rounded-md text-sm font-medium
        {{ is_null($filter_range) ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">
                {{ __('All') }} <i wire:loading wire:target="setFilterRangeNull" class="fas fa-spinner fa-spin ms-2 {{ is_null($filter_range) ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>

            </button>

            {{-- Today --}}
            <button
                wire:click="setFilterRangeToday"
                wire:loading.attr="disabled"
                class="px-3 py-1.5 rounded-md text-sm font-medium
        {{ ($filter_range === 'today') ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">
                {{ __('Today') }} <i wire:loading wire:target="setFilterRangeToday" class="fas fa-spinner fa-spin ms-2 {{ ($filter_range === 'today') ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>

            {{-- This Week --}}
            <button
                wire:click="setFilterRangeWeek"
                wire:loading.attr="disabled"
                class="px-3 py-1.5 rounded-md text-sm font-medium
        {{ ($filter_range === 'week') ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">
                {{ __('This Week') }} <i wire:loading wire:target="setFilterRangeWeek" class="fas fa-spinner fa-spin ms-2 {{ ($filter_range === 'week') ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>

            {{-- This Month --}}
            <button
                wire:click="setFilterRangeMonth"
                wire:loading.attr="disabled"
                class="px-3 py-1.5 rounded-md text-sm font-medium
        {{ ($filter_range === 'month') ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">
                {{ __('This Month') }} <i wire:loading wire:target="setFilterRangeMonth" class="fas fa-spinner fa-spin ms-2 {{ ($filter_range === 'month') ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>

        </div>


        {{-- أزرار سريعة للحالات --}}
        <div class="flex flex-wrap items-center gap-2">

            {{-- All الكل --}}
            <button
                wire:click="setFilterStatusAll"
                wire:loading.attr="disabled"
                class="px-3 py-1.5 rounded-md text-sm font-medium
                           {{ $filter_status == 'all' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">
                {{ __('All') }} <i wire:loading wire:target="setFilterStatusAll" class="fas fa-spinner fa-spin ms-2 {{ $filter_status == 'all' ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>

            {{-- غير مكتملة (الافتراضي) --}}
            <button
                wire:click="setFilterStatusIncomplete"
                wire:loading.attr="disabled"
                class="px-3 py-1.5 rounded-md text-sm font-medium
           {{ ( $filter_status == "incomplete" && !$filter_overdue) ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">
                {{ __('Incomplete') }} <i wire:loading wire:target="setFilterStatusIncomplete" class="fas fa-spinner fa-spin ms-2 {{ ( $filter_status == "incomplete" && !$filter_overdue) ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>

            {{-- To Do --}}
            <button
                wire:click="setFilterStatusToDo"
                wire:loading.attr="disabled"
                class="px-3 py-1.5 rounded-md text-sm font-medium
           {{ ($filter_status === 'to_do') ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">
                {{ __('To Do') }} <i wire:loading wire:target="setFilterStatusToDo" class="fas fa-spinner fa-spin ms-2 {{ ($filter_status === 'to_do') ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>

            {{-- In Progress --}}
            <button
                wire:click="setFilterStatusInProgress"
                wire:loading.attr="disabled"
                class="px-3 py-1.5 rounded-md text-sm font-medium
           {{ ($filter_status === 'in_progress') ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">
                {{ __('In Progress') }} <i wire:loading wire:target="setFilterStatusInProgress" class="fas fa-spinner fa-spin ms-2 {{ ($filter_status === 'in_progress') ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>

            {{-- Completed --}}
            <button
                wire:click="setFilterStatusDone"
                wire:loading.attr="disabled"
                class="px-3 py-1.5 rounded-md text-sm font-medium
           {{ ($filter_status === 'done') ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">
                {{ __('Done') }} <i wire:loading wire:target="setFilterStatusDone" class="fas fa-spinner fa-spin ms-2 {{ ($filter_status === 'done') ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>

            {{-- Overdue (متأخرة) --}}
            <button
                wire:click="setFilterStatusOverdue"
                wire:loading.attr="disabled"
                class="px-3 py-1.5 rounded-md text-sm font-medium
               {{ $filter_status == "overdue" ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100' }}">
                {{ __('Overdue') }} <i wire:loading wire:target="setFilterStatusOverdue" class="fas fa-spinner fa-spin ms-2 {{ $filter_status == "overdue" ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}"></i>
            </button>


            {{--                @dump([$filter_status,$filter_overdue,$filter_incomplete])--}}

        </div>
    </div>

    <!-- نموذج الفلترة المتقدم -->
    <form wire:submit.prevent="filter" x-show="isShowFilter"
          class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">

        <div>
            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Search') }}</label>
            <input type="text" wire:model="searchFilter"
                   class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600">
        </div>

        @if($showEmployeeList)
            <div class="relative"
                 x-data="{
        open:false,
        q:'',
        hi:-1,
        selected: @entangle('filter_employee_id'),
        employees: @js($employees->pluck('name','id')),
        get filtered(){
          const t=this.q.trim().toLowerCase();
          return Object.entries(this.employees).filter(([id,name]) => !t || name.toLowerCase().includes(t));
        }
     }"
                 @keydown.escape="open=false">

                <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Employee') }}</label>

                <!-- الزر/الحقل -->
                <div @click="open=!open"
                     class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600 cursor-pointer flex items-center justify-between">
                    <span x-text="selected ? employees[selected] : '{{ __('All Employees') }}'"></span>
                    <i class="fas fa-chevron-down text-gray-500 dark:text-gray-300"></i>
                </div>

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

                    <!-- البحث -->
                    <input type="text" x-model="q"
                           placeholder="{{ __('Search employee') }}"
                           class="w-full border-b px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none"
                           @keydown.arrow-down.prevent="hi = Math.min(hi+1, filtered.length-1)"
                           @keydown.arrow-up.prevent="hi = Math.max(hi-1, 0)"
                           @keydown.enter.prevent="
              if (filtered.length && hi>=0) { selected = filtered[hi][0]; open=false }">

                    <!-- الخيارات -->
                    <div class="max-h-56 overflow-auto">
                        <!-- كل الموظفين -->
                        <div @click="selected=''; open=false"
                             class="px-3 py-2 cursor-pointer hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100">
                            {{ __('All Employees') }}
                        </div>

                        <template
                            x-init="$watch('q', () => hi=-1)"
                            x-for="([id, name], idx) in filtered" :key="id">
                            <div
                                @mouseenter="hi=idx" @mouseleave="hi=-1"
                                @click="selected=id; open=false"
                                class="px-3 py-2 cursor-pointer text-gray-700 dark:text-gray-100"
                                :class="{'bg-blue-100 dark:bg-gray-700': hi===idx}"
                                x-text="name">
                            </div>
                        </template>

                        <div x-show="filtered.length===0" class="px-3 py-2 text-gray-500 dark:text-gray-400">
                            {{ __('No results') }}
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div>
            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Project') }}</label>
            <x-searchable-select wire:model.live="filter_project_id" :options="$projectOptions" :placeholder="__('All Projects')" />
        </div>

        <div>
            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Client') }}</label>
            <x-searchable-select wire:model.live="filter_client_id" :options="$clientOptions" :placeholder="__('All Clients')" />
        </div>

        <div>
            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Category') }}</label>
            <x-searchable-select wire:model.live="filter_category_id" :options="$categoryOptions" :placeholder="__('All Categories')" />
        </div>

        <div>
            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Status') }}</label>
            <x-searchable-select
                wire:model="filter_status"
                :options="[
                    'to_do' => __('To Do'),
                    'in_progress' => __('In Progress'),
                    'done' => __('Done'),
                ]"
                :placeholder="__('All')"
            />
        </div>

        <div>
            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Priority') }}</label>
            <x-searchable-select
                wire:model="filter_priority"
                :options="[
                    'low' => __('Low'),
                    'medium' => __('Medium'),
                    'high' => __('High'),
                    'urgent' => __('Urgent'),
                ]"
                :placeholder="__('All')"
            />
        </div>

        <div>
            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Start Date From') }}</label>
            <x-date-picker wire:model="filter_start_date" max-model="filter_due_date" />
        </div>

        <div>
            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Due Date To') }}</label>
            <x-date-picker wire:model="filter_due_date" min-model="filter_start_date" />
        </div>

        <div class="flex items-end gap-2">
            <button type="submit"
                    wire:loading.attr="disabled"
                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded flex items-center gap-2 dark:bg-blue-700 dark:hover:bg-blue-800">
                <i class="fas fa-search"></i>
                {{ __('Search') }}
                <i class="fas fa-spinner fa-spin" wire:loading wire:target="filter"></i>
            </button>
            <button type="button" wire:click="resetFilters"
                    class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-100 px-4 py-2 rounded flex items-center gap-2">
                <i class="fas fa-times-circle"></i>
                {{ __('Reset') }}
            </button>
        </div>
    </form>

    <!-- جدول المهام -->
    <div class="overflow-x-auto md:shadow md:border border-gray-200 dark:border-gray-600">
    </div>

    <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">#</th>
            <th class="px-3 py-2">{{ __('Project') }}</th>
            <th class="px-3 py-2">{{ __('Title') }}</th>
            <th class="px-3 py-2">{{ __('Due Date') }}</th>
            <th class="px-3 py-2">{{ __('Status') }}</th>
            <th class="px-3 py-2">{{ __('Priority') }}</th>
            <th class="px-3 py-2">{{ __('Employees') }}</th>
            <th class="px-3 py-2">{{ __('Comments') }}</th>
            <th class="px-3 py-2">{{ __('Last Comment By') }}</th>
            <th class="px-3 py-2">{{ __('Last Comment Time') }}</th>
            <th class="px-3 py-2">{{ __('Actions') }}</th>
        </tr>
        </thead>
        <tbody class="text-gray-800 dark:text-gray-100">
        @forelse($tasks as $task)
            <tr class=" border border-gray-200 dark:border-gray-700 text-center ">
                <td class="px-3 py-2"
                    data-label="#">{{ $loop->iteration + ($tasks->currentPage() - 1) * $tasks->perPage() }}</td>
                <td class="px-3 py-2" data-label="{{ __('Project') }}">{{ optional($task->project)->name }}</td>
                <td class="px-3 py-2" data-label="{{ __('Title') }}"><a href="{{route('tasks.show',$task->id)}}">{{ $task->title }}</a></td>
                <td class="px-3 py-2" data-label="{{ __('Due Date') }}">{{ $task->due_date ? \Carbon\Carbon::parse($task->due_date)->format('Y-m-d') : '-' }}</td>
                <td class="px-3 py-2" data-label="{{ __('Status') }}">
                        <div class="
                            px-2 py-1 rounded-full text-xs font-semibold ml-2
                            @switch($task->status)
                                @case('to_do') bg-gray-200 text-gray-700 @break
                                @case('in_progress') bg-blue-200 text-blue-800 @break
                                @case('done') bg-green-200 text-green-800 @break
                                @case('leader_review') bg-purple-200 text-purple-800 @break
                                @case('department_review') bg-yellow-200 text-yellow-800 @break
                                @case('administrate_review') bg-orange-200 text-orange-800 @break
                                @case('completed') bg-emerald-200 text-emerald-800 @break
                                @default bg-gray-200 text-gray-700
                            @endswitch
                        ">
                            {{ __($task->status) }}
                        </div>

                    <div>
                        @if($task->status === 'done')
                            <span class="w-3 h-3 rounded-full bg-green-500" title="{{ __('Done') }}"></span>
                        @else
                            <button
                                wire:click="setWorkState({{ $task->id }}, 'active')"
                                class="w-3 h-3 rounded-full cursor-pointer {{ $task->work_state === 'active' ? 'bg-purple-600' : 'bg-gray-300' }}"
                                title="{{ __('Working now') }}">
                            </button>

                            <button
                                wire:click="setWorkState({{ $task->id }}, 'near_completion')"
                                class="w-3 h-3 rounded-full cursor-pointer {{ $task->work_state === 'near_completion' ? 'bg-yellow-500' : 'bg-gray-300' }}"
                                title="{{ __('Almost done') }}">
                            </button>

                            <button
                                wire:click="setWorkState({{ $task->id }}, 'paused')"
                                class="w-3 h-3 rounded-full cursor-pointer {{ $task->work_state === 'paused' ? 'bg-red-500' : 'bg-gray-300' }}"
                                title="{{ __('Paused') }}">
                            </button>

                            @if(in_array($task->work_state,['active','near_completion','paused']))
                                <button
                                    wire:click="setWorkState({{ $task->id }}, 'none')"
                                    class="text-xs text-gray-500 hover:underline cursor-pointer"
                                    title="{{ __('Clear') }}">
                                    <i wire:loading wire:target="setWorkState"
                                       class="fas fa-spinner fa-spin text-blue-500 mt-2"></i>
                                    <i class="fa fa-times"></i>
                                </button>
                            @endif
                        @endif
                    </div>
                </td>
                <td class="px-3 py-2" data-label="{{ __('Priority') }}">
                        <span class="
                            px-2 py-1 rounded-full text-xs font-semibold
                            @switch($task->priority)
                                @case('low') bg-green-100 text-green-800 @break
                                @case('medium') bg-yellow-100 text-yellow-800 @break
                                @case('high') bg-red-100 text-red-800 @break
                                @case('urgent') bg-red-600 text-white @break
                                @default bg-gray-100 text-gray-800
                            @endswitch
                        ">
                            {{ __(ucwords(str_replace('_', ' ', $task->priority))) }}
                        </span>
                </td>
                <td class="px-3 py-2"
                    data-label="{{ __('Employees') }}">{{ $task->employees->pluck('name')->join(', ') }}</td>
                <td class="px-3 py-2" data-label="{{ __('Comments') }}">{{ $task->comments->count() }}</td>
                <td class="px-3 py-2"
                    data-label="{{ __('Last Comment') }}">{{ (($comment = $task->comments()->latest()->first()) and $comment->user) ? $comment->user->name : "-" }}</td>
                <td class="px-3 py-2"
                    data-label="{{ __('Last Comment Time') }}">{{ (($comment = $task->comments()->latest()->first())) ? $comment->created_at : $task->created_at }}</td>
                <td class="px-3 py-2" data-label="{{ __('Actions') }}">
                    @can('tasks edit')
                        @if(!in_array($task->status, ['done', 'completed']))
                            <a href="#"
                               @click.prevent="isEditMode = true; showModal = true; $wire.loadTaskData({{ $task->id }})"
                               class="text-blue-600 dark:text-blue-400 hover:underline mr-2">
                                <i class="fas fa-edit"></i> {{ __('Edit') }}
                            </a>
                        @endif
                    @endcan
                    @can('tasks delete')
                        <a href="#" wire:click="confirmDelete({{ $task->id }})"
                           class="text-red-600 dark:text-red-400 hover:underline">
                           <i class="fas fa-trash"></i> {{ __('Delete') }}
                        </a>
                    @endcan
                    <a href="{{route('tasks.show',$task->id)}}"
                       class="text-green-600 dark:text-green-400 hover:underline ml-3">
                        <i class="fa fa-eye"></i> {{ __('Task Details') }}
                    </a>

                    @if(!in_array($task->status, ['done', 'completed']))
                        <div class="w-40">
                            <x-action-searchable-select
                                method="changeStatus"
                                :params="[$task->id]"
                                :options="[
                                    'to_do' => __('To Do'),
                                    'in_progress' => __('In Progress'),
                                    'done' => __('Done'),
                                ]"
                                :placeholder="__('Change Status')"
                            />
                        </div>
                    @endif
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="11"
                    class="text-center py-4 text-gray-500 dark:text-gray-400">
                    {{ __('No tasks found.') }}
                </td>
            </tr>
        @endforelse
        </tbody>
    </table>

    <div class="mt-4 dark:text-gray-100">
        {{ $tasks->links() }}
    </div>


    <!-- Modal -->
    <div x-show="showModal" x-transition x-cloak @click.self="showModal = false"
         class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-black/50 dark:bg-black/70">
        <div
            class="bg-white dark:bg-gray-900 dark:text-white rounded-lg shadow-lg w-full max-w-3xl p-6 relative max-h-[90vh]">
            <div class="flex items-center justify-between mb-4 border-b border-gray-200 dark:border-gray-700 pb-3">
                <h2 class="text-xl font-semibold mb-4"
                    x-text="isEditMode ? '{{ __('Edit Task') }}' : '{{ __('Add Task') }}'"></h2>
                <button @click="showModal = false"
                        class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white cursor-pointer"
                        title="{{ __('Close') }}">
                    <i class="fas fa-times fa-lg"></i>
                </button>
            </div>


            <div class="overflow-y-auto mt-4 pr-2 pl-4" style="max-height: 65vh;">
                <form wire:submit.prevent="{{ $isEditMode ? 'update' : 'store' }}" class="">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 ">
                        <div>
                            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Title') }}</label>
                            <input type="text" wire:model.defer="title"
                                   class="w-full border rounded px-3 py-2 dark:bg-gray-800 dark:border-gray-600 dark:text-white">
                            @error('title') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                        </div>

                        <div>
                            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Category') }}</label>
                            <x-searchable-select wire:model.defer="category_id" :options="$categoryOptions" :placeholder="__('Choose')" />
                            @error('category_id') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                        </div>

                        @if($showProjectsList)
                            <div>
                                <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Project') }}</label>
                                <x-searchable-select wire:model.defer="project_id" :options="$projectOptions" :placeholder="__('Choose')" />
                                @error('project_id') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                            </div>
                        @endif

                        @if($showClientsList)
                            <div>
                                <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Client') }}</label>
                                <x-searchable-select wire:model.defer="client_id" :options="$clientOptions" :placeholder="__('Choose')" />
                                @error('client_id') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                            </div>
                        @endif

                        <div>
                            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Priority') }}</label>
                            <x-searchable-select
                                wire:model.defer="priority"
                                :options="[
                                    'low' => __('Low'),
                                    'medium' => __('Medium'),
                                    'high' => __('High'),
                                    'urgent' => __('Urgent'),
                                ]"
                                :placeholder="__('Select')"
                            />
                        </div>

                        @if(!auth()->user()->hasRole('Employee') and $showEmployeeList)
                            <div>
                                <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Status') }}</label>
                                <x-searchable-select
                                    wire:model.defer="status"
                                    :options="[
                                        'to_do' => __('To Do'),
                                        'in_progress' => __('In Progress'),
                                        'done' => __('Done'),
                                    ]"
                                    :placeholder="__('Select')"
                                />
                            </div>
                        @endif

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 ">
                            <div>
                                <label class="text-sm text-gray-600 dark:text-gray-300">{{__("Start Date")}}</label>
                                <x-date-picker wire:model.defer="start_date" max-model="due_date" />
                            </div>

                            <div>
                                <label class="text-sm text-gray-600 dark:text-gray-300">{{__("Start Time")}}</label>
                                <x-date-picker wire:model.defer="start_time" :options="['enableTime'=>true, 'noCalendar'=>true, 'dateFormat'=>'H:i']" />
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 ">
                            <div>
                                <label class="text-sm text-gray-600 dark:text-gray-300">{{__("Due Date")}}</label>
                                <x-date-picker wire:model.defer="due_date" min-model="start_date" />
                            </div>

                            <div>
                                <label class="text-sm text-gray-600 dark:text-gray-300">{{__("Due Time")}}</label>
                                <x-date-picker wire:model.defer="due_time" :options="['enableTime'=>true, 'noCalendar'=>true, 'dateFormat'=>'H:i']" />
                            </div>
                        </div>

                        @if(!auth()->user()->hasRole('Employee'))
                            <div class="md:col-span-2 relative"
                                 x-data="{
        open:false,
        q:'',
        hi:-1,
        // لا يوجد selected وحيد لأننا متعدد
        assigned: @entangle('assigned_users'),
        // نفس بنية الكود اللي عطيتني: object => {id: name}
        employees: @js($employees->pluck('name','id')),
        get filtered(){
            const term = this.q.trim().toLowerCase();
            return Object.entries(this.employees)
              .filter(([id, name]) => !this.assigned.includes(parseInt(id)))
              .filter(([id, name]) => !term || name.toLowerCase().includes(term));
        },
        add(idx){
            if (!this.filtered.length || idx < 0) return;
            const id = parseInt(this.filtered[idx][0]);
            if (!this.assigned.includes(id)) {
                this.assigned.push(id);
            }
            this.q='';
            this.hi=-1;
            this.open=false;
        },
        remove(id){
            this.assigned = this.assigned.filter(x => x !== id);
        }
     }"
                                 @keydown.escape="open=false">

                                <label
                                    class="text-sm text-gray-600 dark:text-gray-300">{{ __('Assigned Employees') }}</label>

                                <!-- الحقل/الزر (نضغطه لفتح القائمة) -->
                                <div @click="open = !open"
                                     class="w-full border rounded px-3 py-2 dark:bg-gray-800 dark:border-gray-600 dark:text-white cursor-pointer flex items-center justify-between">
                                    <div class="flex flex-wrap gap-2">
                                        <template x-for="id in assigned" :key="id">
        <span
            class="bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-white px-2 py-0.5 rounded-full text-xs flex items-center gap-1">
          <span x-text="employees[id] ?? @js(__('Unknown'))"></span>
          <button type="button" class="leading-none"
                  @click.stop="remove(id)">
            <i class="fas fa-times text-[10px]"></i>
          </button>
        </span>
                                        </template>
                                        <span x-show="assigned.length===0"
                                              class="text-gray-500 dark:text-gray-400 text-sm">
                                        {{ __('Choose Employee') }}
                                    </span>
                                    </div>
                                    <i class="fas fa-chevron-down text-gray-500 dark:text-gray-300"></i>
                                </div>

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

                                    <!-- البحث -->
                                    <input type="text" x-model="q" autofocus
                                           placeholder="{{ __('Search Employee') }}"
                                           class="w-full border-b px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none"
                                           @keydown.arrow-down.prevent="hi = Math.min(hi+1, filtered.length-1)"
                                           @keydown.arrow-up.prevent="hi = Math.max(hi-1, 0)"
                                           @keydown.enter.prevent="add(hi)">

                                    <!-- الخيارات -->
                                    <div class="max-h-56 overflow-auto">
                                        <!-- خيار إظهار الجميع (لا يضيف أحد، فقط يمسح البحث) -->
                                        {{--                                    <div @click="q=''; hi=-1"--}}
                                        {{--                                         class="px-3 py-2 cursor-pointer hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 text-sm">--}}
                                        {{--                                        {{ __('Clear search') }}--}}
                                        {{--                                    </div>--}}

                                        <template x-init="$watch('q', () => hi=-1)"
                                                  x-for="([id, name], idx) in filtered" :key="id">
                                            <div
                                                @mouseenter="hi=idx" @mouseleave="hi=-1"
                                                @click="add(idx)"
                                                class="px-3 py-2 cursor-pointer text-gray-700 dark:text-gray-100 flex items-center justify-between"
                                                :class="{'bg-blue-100 dark:bg-gray-700': hi===idx}">
                                                <span x-text="name"></span>
                                                <span class="text-xs text-gray-500">#<span
                                                        x-text="id"></span></span>
                                            </div>
                                        </template>

                                        <div x-show="filtered.length===0"
                                             class="px-3 py-2 text-gray-500 dark:text-gray-400">
                                            {{ __('No results') }}
                                        </div>
                                    </div>
                                </div>

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

                        <div class="md:col-span-2">
                            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Notes') }}</label>
                            <textarea wire:model.defer="description" rows="3"
                                      class="w-full border rounded px-3 py-2 dark:bg-gray-800 dark:border-gray-600 dark:text-white"></textarea>
                        </div>

                        <div class="md:col-span-2">
                            <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Attachments') }}</label>
                            <input type="file" wire:model="attachments" multiple
                                   class="w-full border rounded px-3 py-2 dark:bg-gray-800 dark:border-gray-600 dark:text-white">
                            @error('attachments.*') <span
                                class="text-red-600 text-sm">{{ $message }}</span> @enderror

                            <div wire:loading wire:target="attachments">
                                <i class="fas fa-spinner fa-spin text-blue-500 mt-2"></i>
                            </div>

                            <div class="mt-2">
                                @foreach($existing_attachments as $file)
                                    <div
                                        class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-2 rounded mb-1">
                                        <a href="{{ Storage::url($file['file_path']) }}" target="_blank"
                                           class="text-blue-600 dark:text-blue-300 underline text-sm">{{ $file['file_name'] }}</a>
                                        <button type="button" wire:click="deleteAttachment({{ $file['id'] }})"
                                                class="text-red-600 dark:text-red-400 text-sm hover:underline">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>


                    {{-- تكرار المهمة --}}
                    <div class="md:col-span-2 border-t pt-4 mt-2">
                        <div x-data="{
        isRecurring: @entangle('is_recurring'),
        type: @entangle('recurrence_type'),
        weekly: @entangle('weekly_days'),
        every: @entangle('repeat_every'),
        monthDay: @entangle('monthly_day'),
        startAt: @entangle('repeat_starts_at'),
        endAt: @entangle('repeat_ends_at'),
    }">
                            <div class="flex items-center gap-3">
                                <label
                                    class="text-sm text-gray-600 dark:text-gray-300">{{ __('Recurring?') }}</label>
                                <input type="checkbox" x-model="isRecurring" class="h-4 w-4">
                            </div>

                            <div x-show="isRecurring" class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">


                                <div>
                                    <label
                                        class="text-sm text-gray-600 dark:text-gray-300">{{ __('Repeat Type') }}</label>
                                    <x-searchable-select
                                        wire:model.live="recurrence_type"
                                        :options="[
                                            'daily' => __('Daily'),
                                            'weekly' => __('Weekly (pick days)'),
                                            'monthly' => __('Monthly (day number)'),
                                            'dates' => __('Specific dates'),
                                            'range' => __('Between two dates'),
                                        ]"
                                        :placeholder="__('Select')"
                                    />
                                </div>


                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2" x-show="type!='dates'">
                                    <div>
                                        <label
                                            class="text-sm text-gray-600 dark:text-gray-300">{{ __('Starts At') }}</label>
                                        <x-date-picker wire:model.defer="repeat_starts_at" max-model="repeat_ends_at" />
                                    </div>
                                    <div>
                                        <label
                                            class="text-sm text-gray-600 dark:text-gray-300">{{ __('Ends At (optional)') }}</label>
                                        <x-date-picker wire:model.defer="repeat_ends_at" min-model="repeat_starts_at" />
                                    </div>
                                </div>

                                <div x-show="type==='range'">
                                    <label
                                        class="text-sm text-gray-600 dark:text-gray-300">{{ __('Repeat Every') }}</label>
                                    <input type="number" min="1" x-model.number="every"
                                           wire:model.defer="repeat_every"
                                           class="w-full border rounded px-3 py-2 dark:bg-gray-800 dark:border-gray-600 dark:text-white">
                                    <p class="text-xs text-gray-500 mt-1"
                                       x-show="type==='daily'">{{ __('days') }}</p>
                                    <p class="text-xs text-gray-500 mt-1"
                                       x-show="type==='weekly'">{{ __('weeks') }}</p>
                                    <p class="text-xs text-gray-500 mt-1"
                                       x-show="type==='monthly'">{{ __('months') }}</p>
                                </div>

                                {{-- weekly --}}
                                <div class="md:col-span-3" x-show="type==='weekly'">
                                    <label
                                        class="text-sm text-gray-600 dark:text-gray-300 block mb-2">{{ __('Week Days') }}</label>
                                    <div class="flex flex-wrap gap-2">
                                        @php
                                            $days = [
                                                1 => __('Mon'),
                                                2 => __('Tue'),
                                                3 => __('Wed'),
                                                4 => __('Thu'),
                                                5 => __('Fri'),
                                                6 => __('Sat'),
                                                7 => __('Sun'),
                                            ];
                                        @endphp
                                        @foreach($days as $num => $name)
                                            <label
                                                class="inline-flex items-center gap-2 px-3 py-1 rounded border dark:border-gray-600 cursor-pointer">
                                                <input type="checkbox" value="{{ $num }}"
                                                       @change="
                                     if ($event.target.checked) { weekly.push({{ $num }}) }
                                     else { weekly = weekly.filter(x => x !== {{ $num }}) }
                                   "
                                                       :checked="weekly.includes({{ $num }})">
                                                <span>{{ $name }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    @error('weekly_days') <span
                                        class="text-red-600 text-sm">{{ $message }}</span> @enderror
                                </div>

                                {{-- monthly --}}
                                <div x-show="type==='monthly'">
                                    <label
                                        class="text-sm text-gray-600 dark:text-gray-300">{{ __('Day of month (1..31)') }}</label>
                                    <input type="number" min="1" max="31" x-model.number="monthDay"
                                           wire:model.defer="monthly_day"
                                           class="w-full border rounded px-3 py-2 dark:bg-gray-800 dark:border-gray-600 dark:text-white">
                                    @error('monthly_day') <span
                                        class="text-red-600 text-sm">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 mt-1">{{ __('Example: 25 => every month on 25th') }}</p>
                                </div>

                                {{-- specific dates (اختياري) --}}
                                <div class="md:col-span-3" x-show="type==='dates'">
                                    <label
                                        class="text-sm text-gray-600 dark:text-gray-300 block mb-2">{{ __('Specific Dates') }}</label>
                                    <div class="space-y-2">
                                        @foreach(($specific_dates ?? []) as $idx => $d)
                                            <div class="flex items-center gap-2">
                                                <x-date-picker wire:model.defer="specific_dates.{{ $idx }}" />
                                                <button type="button" class="text-red-600"
                                                        wire:click="removeSpecificDate({{ $idx }})">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        @endforeach

                                        <button type="button" class="px-3 py-1 bg-gray-100 rounded dark:bg-gray-700"
                                                wire:click="addSpecificDate">
                                            + {{ __('Add date') }}
                                        </button>
                                    </div>
                                </div>


                                <div class="md:col-span-2">
                                    <label
                                        class="text-sm text-gray-600 dark:text-gray-300">{{ __('Recurrence Behavior') }}</label>
                                    <x-searchable-select
                                        wire:model.defer="recurrence_mode"
                                        :options="[
                                            'create_new' => __('Create new task each occurrence'),
                                            'shift_due_date' => __('Keep same task: shift due date + notify'),
                                        ]"
                                        :placeholder="__('Select')"
                                    />
                                    <p class="text-xs text-gray-500 mt-1">
                                        {{ __('Choose how the task behaves when it repeats') }}
                                    </p>
                                </div>


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


                    <div class="flex justify-end mt-6 gap-2">
                        <button type="button" @click="showModal = false"
                                class="px-4 py-2 rounded bg-gray-500 dark:bg-gray-600 text-white hover:bg-gray-600 dark:hover:bg-gray-700">
                            <i class="fas fa-times"></i> {{ __('Cancel') }}
                        </button>
                        <button type="submit" wire:loading.attr="disabled"
                                class="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white flex items-center gap-2">
                            <i class="fas fa-save"></i>
                            <span>{{ __('Save') }}</span>
                            <i class="fas fa-spinner fa-spin" wire:loading
                               wire:target="store,update,storeOrUpdate"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Category Modal -->
    <div x-show="showCategoryModal" x-transition.opacity
         class="fixed inset-0 z-50 bg-black/60 flex items-center justify-center" style="display: none;">
        <div
            class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full max-w-md p-6 rounded-lg shadow-xl">

            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold">{{ __('Manage Categories') }}</h2>
                <button @click="showCategoryModal = false"
                        class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-lg">
                    &times;
                </button>
            </div>

            <form wire:submit.prevent="addCategory" class="flex gap-2 mb-4">
                <input wire:model.defer="new_category" type="text" placeholder="{{ __('New Category') }}"
                       class="w-full border border-gray-300 dark:border-gray-600 px-3 py-2 rounded bg-white dark:bg-gray-700
                          text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"/>

                <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
                    {{ __('Save') }}
                </button>
            </form>

            <ul class="space-y-2 max-h-64 overflow-y-auto">
                @foreach($categories as $cat)
                    <li class="flex justify-between items-center border-b border-gray-300 dark:border-gray-700 pb-1">
                        <span>{{ $cat->name }}</span>
                        <div class="flex gap-2">
                            <button wire:click="editCategory({{ $cat->id }})"
                                    class="text-blue-600 dark:text-blue-400 hover:underline text-sm">
                                {{ __('Edit') }}
                            </button>
                            <button wire:click="deleteCategory({{ $cat->id }})"
                                    class="text-red-600 dark:text-red-500 hover:underline text-sm">
                                {{ __('Delete') }}
                            </button>
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>

</div>