@extends('layouts.app')

@section('title', $project->name . ' - ' . config('app.name'))

@section('header-left')
    <h1 class="text-lg font-semibold text-gray-900">{{ $project->name }}</h1>
@endsection

@section('content')
    @if (session('success'))
        <div class="mb-4 rounded-lg bg-green-50 p-4 text-sm text-green-800" x-data x-init="setTimeout(() => $el.remove(), 3000)">
            {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-800" x-data x-init="setTimeout(() => $el.remove(), 3000)">
            {{ session('error') }}
        </div>
    @endif

    @php
        $canEdit = $project->created_by === auth()->id() || $project->members->contains(fn ($m) => $m->id === auth()->id() && $m->pivot->role === 'admin');
    @endphp

    {{-- Project header --}}
    <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div class="flex min-w-0 items-center gap-3">
                <span class="block h-4 w-4 shrink-0 rounded-full" style="background-color: {{ $project->color ?? '#9ca3af' }}"></span>
                <div>
                    <h2 class="text-xl font-semibold text-gray-900">{{ $project->name }}</h2>
                    <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $project->visibility === 'shared' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800' }}">
                        {{ $project->visibility }}
                    </span>
                    @if ($project->archived_at)
                        <span class="ml-1 inline-flex rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">Archived</span>
                    @endif
                </div>
            </div>
            @if ($canEdit)
                <div class="flex flex-wrap gap-2">
                    <button type="button" @click="$dispatch('open-edit-project-modal')" class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50">Edit</button>
                    @if ($project->archived_at)
                        <form method="post" action="{{ route('projects.restore', $project) }}" class="inline">
                            @csrf
                            <button type="submit" class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50">Restore</button>
                        </form>
                    @elseif (!$project->isDefaultProject())
                        <form method="post" action="{{ route('projects.archive', $project) }}" class="inline" onsubmit="return confirm('Archive this project?');">
                            @csrf
                            <button type="submit" class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50">Archive</button>
                        </form>
                    @endif
                    @if (!$project->isDefaultProject())
                        <form method="post" action="{{ route('projects.destroy', $project) }}" class="inline" onsubmit="return confirm('Delete this project? This cannot be undone.');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="rounded-md border border-red-300 bg-white px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50">Delete</button>
                        </form>
                    @endif
                </div>
            @endif
        </div>
        @if ($project->description)
            <p class="mt-2 text-sm text-gray-600">{{ $project->description }}</p>
        @endif
    </div>

    {{-- Members (shared only) --}}
    @if ($project->visibility === 'shared')
        <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
            <h3 class="mb-3 text-sm font-semibold text-gray-900">Members</h3>
            <ul class="space-y-2">
                @foreach ($project->members as $member)
                    <li class="flex items-center justify-between gap-2 rounded-md bg-gray-50 px-3 py-2">
                        <div class="flex items-center gap-2">
                            <span class="font-medium text-gray-900">{{ $member->name }}</span>
                            <span class="rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-700">{{ $member->pivot->role }}</span>
                        </div>
                        @if ($canEdit && $member->id !== auth()->id())
                            <form method="post" action="{{ route('projects.members.destroy', [$project, $member->id]) }}" class="inline" onsubmit="return confirm('Remove this member?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-sm text-red-600 hover:text-red-800">Remove</button>
                            </form>
                        @endif
                    </li>
                @endforeach
            </ul>
            @if ($canEdit)
                <form method="post" action="{{ route('projects.members.store', $project) }}" class="mt-3 flex gap-2">
                    @csrf
                    <select name="user_id" required class="rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Add member…</option>
                        @foreach ($workspaceUsers->whereNotIn('id', $project->members->pluck('id')) as $u)
                            <option value="{{ $u->id }}">{{ $u->name }} ({{ $u->email }})</option>
                        @endforeach
                    </select>
                    <select name="role" class="rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="member">member</option>
                        <option value="admin">admin</option>
                        <option value="viewer">viewer</option>
                    </select>
                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700">Add</button>
                </form>
                @error('user_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            @endif
        </div>
    @endif

    <x-task-filter-bar
        :base-url="route('projects.show', $project)"
        :show-assignee="true"
        :workspace-users="$workspaceUsers"
        :workspace-tags="$workspaceTags"
        :filter-params="$filterParams ?? []"
    />

    <div class="mb-3 flex flex-wrap items-center gap-2">
        <x-save-filter-button :route="'projects/' . $project->id" :filters="request()->query()" />
    </div>
    {{-- View toggle: List | Board | Calendar --}}
    <div class="mb-3 flex gap-1 rounded-lg border border-gray-200 bg-gray-100 p-1">
        <a href="{{ route('projects.show', [$project] + array_merge(request()->query(), ['view' => 'list'])) }}" class="rounded-md px-3 py-1.5 text-sm font-medium {{ ($currentView ?? 'list') === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900' }}">List</a>
        <a href="{{ route('projects.show', [$project] + array_merge(request()->query(), ['view' => 'board'])) }}" class="rounded-md px-3 py-1.5 text-sm font-medium {{ ($currentView ?? 'list') === 'board' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900' }}">Board</a>
        <a href="{{ route('projects.show', [$project] + array_merge(request()->query(), ['view' => 'calendar'])) }}" class="rounded-md px-3 py-1.5 text-sm font-medium {{ ($currentView ?? 'list') === 'calendar' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900' }}">Calendar</a>
    </div>

    <div class="mb-4 rounded-lg border border-gray-200 bg-white p-3 shadow-sm" x-data="projectTimeSummary({{ Js::from(['apiBase' => url('/api/v1'), 'projectId' => $project->id]) }})" x-init="fetchSummary()" @running-timer-updated.window="fetchSummary()">
        <button type="button" @click="open = !open" class="flex w-full items-center justify-between text-left text-sm font-medium text-gray-700">
            <span>Time logged (this project)</span>
            <span x-show="!open" x-text="summary.length ? formatTotal(summary.reduce((a, r) => a + r.total_minutes, 0)) : (loading ? '…' : '0m')"></span>
            <svg class="h-4 w-4 shrink-0 text-gray-500" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div x-show="open" x-cloak class="mt-2">
            <table class="min-w-full text-sm">
                <thead><tr class="border-b border-gray-200"><th class="py-1.5 text-left font-medium text-gray-600">Task</th><th class="py-1.5 text-right font-medium text-gray-600">Time</th></tr></thead>
                <tbody>
                    <template x-for="row in summary" :key="row.task_id">
                        <tr class="border-b border-gray-100">
                            <td class="py-1.5 truncate max-w-[200px]" x-text="row.task_title"></td>
                            <td class="py-1.5 text-right" x-text="formatTotal(row.total_minutes)"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
            <p x-show="!loading && summary.length === 0" class="py-2 text-gray-500 text-sm">No time logged yet.</p>
        </div>
    </div>

    @if (($currentView ?? 'list') === 'list')
    {{-- Task lists (vertical sections) --}}
    <div
        class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
        x-data="taskListsManager({{ Js::from([
            'lists' => $project->taskLists->map(fn ($l) => [
                'id' => $l->id,
                'name' => $l->name,
                'position' => $l->position,
                'is_default' => $l->is_default,
                'tasks_count' => $l->tasks_count,
                'collapsed' => false,
                'editing' => false,
                'tasks' => $l->tasks->map(fn ($t) => [
                    'id' => $t->id,
                    'title' => $t->title,
                    'status' => $t->status,
                    'priority' => $t->priority,
                    'due_date' => $t->due_date?->format('Y-m-d'),
                    'due_time' => $t->due_time,
                    'completed_at' => $t->completed_at?->toIso8601String(),
                    'recurrence_rule' => $t->recurrence_rule,
                    'recurrence_parent_id' => $t->recurrence_parent_id,
                    'blocked_by' => $t->blockedByDependencies->map(fn ($d) => ['task_id' => $d->depends_on_task_id, 'title' => $d->dependsOnTask?->title, 'status' => $d->dependsOnTask?->status])->values()->all(),
                    'is_blocked' => $t->blockedByDependencies->where(fn ($d) => $d->dependsOnTask && $d->dependsOnTask->status !== 'done')->isNotEmpty(),
                    'assignees' => $t->assignees->map(fn ($a) => [
                        'id' => $a->user?->id,
                        'name' => $a->user?->name,
                        'avatar_url' => $a->user?->avatar_url,
                    ])->all(),
                ])->values()->all(),
            ])->values()->all(),
            'projectId' => $project->id,
            'adding' => false,
            'newName' => '',
            'canEdit' => $canEdit,
            'selectMode' => false,
            'selectedIds' => [],
            'workspaceUsers' => $workspaceUsers->map(fn ($u) => ['id' => $u->id, 'name' => $u->name])->all(),
            'projectsForMove' => ($projectsForMove ?? collect())->map(fn ($p) => ['id' => $p->id, 'name' => $p->name])->all(),
            'apiBase' => url('/api/v1'),
            'csrf' => csrf_token(),
            'bulkDeleteConfirm' => false,
            'createFromTemplateOpen' => false,
            'createFromTemplateTemplates' => [],
            'createFromTemplateLoading' => false,
            'createFromTemplateSelected' => '',
            'createFromTemplateListId' => $project->taskLists->first()?->id ?? '',
            'createFromTemplateStartDate' => now()->format('Y-m-d'),
            'createFromTemplateAssigneeId' => '',
            'createFromTemplateApplying' => false,
            'createFromTemplateError' => null,
        ]) }})"
        x-init="initSortable(); $nextTick(() => initTaskSortables())"
    >
        <div class="mb-3 flex items-center justify-between gap-2">
            <h3 class="text-sm font-semibold text-gray-900">Task lists</h3>
            @if ($canEdit)
            <div class="flex items-center gap-2">
                <button type="button" @click="openCreateFromTemplateModal()" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Create from Template</button>
                <button type="button" @click="selectMode = !selectMode; selectedIds = []" class="text-sm font-medium text-indigo-600 hover:text-indigo-800" :class="selectMode ? 'ring-1 ring-indigo-600 rounded px-2 py-0.5' : ''" x-text="selectMode ? 'Cancel' : 'Select'"></button>
            </div>
            @endif
        </div>
        <div id="task-lists-sortable" class="space-y-2">
            <template x-for="(list, index) in lists" :key="list.id">
                <div class="rounded-md border border-gray-200 bg-gray-50" :data-list-id="list.id">
                    <div class="flex items-center gap-2 px-3 py-2">
                    @if ($canEdit)
                        <span class="list-drag-handle cursor-grab text-gray-400 hover:text-gray-600" title="Drag to reorder lists">
                            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M7 2a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2h2zm6 0a2 2 0 012 2v12a2 2 0 01-2 2h-2a2 2 0 01-2-2V4a2 2 0 012-2h2z"/></svg>
                        </span>
                    @endif
                    <button type="button" @click="list.collapsed = !list.collapsed" class="flex flex-1 items-center gap-2 text-left">
                        <svg class="h-4 w-4 shrink-0 text-gray-500 transition-transform" :class="list.collapsed ? '' : 'rotate-90'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        <span class="flex-1 font-medium text-gray-900" x-show="!list.editing" x-text="list.name"></span>
                        <input
                            x-show="list.editing"
                            type="text"
                            x-model="list.name"
                            @keydown.enter="saveRename(list)"
                            @blur="saveRename(list)"
                            @click.stop
                            class="flex-1 rounded border border-gray-300 px-2 py-0.5 text-sm"
                        />
                        <span class="text-xs text-gray-500" x-text="(list.tasks?.length || 0) + ' tasks'"></span>
                    </button>
                    @if ($canEdit)
                    <template x-if="selectMode && (list.tasks || []).length">
                        <label class="flex items-center gap-1 text-xs text-gray-600 shrink-0">
                            <input type="checkbox" :checked="(list.tasks || []).every(t => selectedIds.includes(t.id))" :indeterminate="(list.tasks || []).some(t => selectedIds.includes(t.id)) && !(list.tasks || []).every(t => selectedIds.includes(t.id))" @change="toggleSelectAllList(list)" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                            <span>All</span>
                        </label>
                    </template>
                    @endif
                    @if ($canEdit)
                        <div class="relative" x-data="{ menuOpen: false }">
                            <button type="button" @click="menuOpen = !menuOpen" @click.outside="menuOpen = false" class="rounded p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-600">
                                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/></svg>
                            </button>
                            <div x-show="menuOpen" x-cloak class="absolute right-0 top-full z-10 mt-1 w-40 rounded-md border border-gray-200 bg-white py-1 shadow-lg">
                                <button type="button" @click="list.editing = true; menuOpen = false; $nextTick(() => $el.closest('[data-list-id]')?.querySelector('input')?.focus())" class="block w-full px-3 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100">Rename</button>
                                <button
                                    type="button"
                                    @click="menuOpen = false; deleteList(list)"
                                    :disabled="list.is_default || (list.tasks?.length > 0)"
                                    :title="list.is_default ? 'Default lists cannot be deleted' : ((list.tasks?.length > 0) ? 'Remove tasks first' : '')"
                                    class="block w-full px-3 py-1.5 text-left text-sm text-red-600 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
                                >Delete</button>
                            </div>
                        </div>
                    @endif
                    </div>
                    <div x-show="!list.collapsed" class="border-t border-gray-200 px-3 py-2 space-y-1 list-tasks" :data-list-id="list.id">
                        <template x-for="task in (list.tasks || [])" :key="task.id">
                            <div class="task-row flex items-center gap-2 rounded py-1.5 px-2 hover:bg-gray-100/80 group" :data-task-id="task.id">
                                @if ($canEdit)
                                    <template x-if="selectMode">
                                        <label class="shrink-0 cursor-pointer">
                                            <input type="checkbox" :checked="selectedIds.includes(task.id)" @change="toggleSelect(task.id)" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                                        </label>
                                    </template>
                                    <template x-if="!selectMode">
                                        <span class="drag-handle task-drag-handle cursor-grab text-gray-400 hover:text-gray-600 shrink-0" title="Drag to reorder"><svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M7 2a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2h2zm6 0a2 2 0 012 2v12a2 2 0 01-2 2h-2a2 2 0 01-2-2V4a2 2 0 012-2h2z"/></svg></span>
                                    </template>
                                    <button type="button" x-show="!selectMode" @click="toggleTaskComplete(task)" class="shrink-0 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 transition-opacity" :title="task.status === 'done' ? 'Mark incomplete' : 'Mark complete'">
                                        <svg class="h-4 w-4" x-show="task.status === 'done'" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                                        <svg class="h-4 w-4" x-show="task.status !== 'done'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5v14"/></svg>
                                    </button>
                                @else
                                    <span class="w-4 shrink-0" x-show="task.status === 'done'"><svg class="h-4 w-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg></span>
                                @endif
                                <span class="shrink-0 h-2 w-2 rounded-full" :class="{ 'bg-gray-400': task.priority === 'low', 'bg-yellow-500': task.priority === 'medium', 'bg-orange-500': task.priority === 'high', 'bg-red-500': task.priority === 'urgent' }"></span>
                                <span x-show="task.recurrence_rule || task.recurrence_parent_id" class="shrink-0 text-gray-400" title="Recurring">🔄</span>
                                <span x-show="task.is_blocked" class="shrink-0 text-amber-600" :title="(task.blocked_by || []).filter(b => b.status !== 'done').map(b => b.title).join(', ') ? 'Blocked by: ' + (task.blocked_by || []).filter(b => b.status !== 'done').map(b => b.title).join(', ') : 'Blocked'">🔒</span>
                                <button type="button" @click="!selectMode && window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: task.id, projectId: projectId } }))" class="flex-1 min-w-0 text-left text-sm truncate" :class="task.status === 'done' ? 'text-gray-500 line-through' : 'text-gray-900'">
                                    <span x-text="task.title"></span>
                                </button>
                                <div class="flex shrink-0 items-center gap-1">
                                    <template x-for="a in (task.assignees || [])" :key="a.id">
                                        <img x-show="a.avatar_url" :src="a.avatar_url" :alt="a.name" class="h-6 w-6 rounded-full object-cover" />
                                        <span x-show="!a.avatar_url" class="h-6 w-6 rounded-full bg-gray-600 flex items-center justify-center text-white text-xs shrink-0" :title="a.name" x-text="(a.name || '').charAt(0).toUpperCase()"></span>
                                    </template>
                                    <span class="text-xs rounded px-1.5 py-0.5" x-show="task.due_date" :class="dueBadgeClass(task)"
                                        x-text="task.due_date ? new Date(task.due_date).toLocaleDateString() : ''"></span>
                                    <span class="text-xs rounded bg-gray-100 text-gray-600 px-1.5 py-0.5" x-show="!selectMode" x-text="(task.status || '').replace('_',' ')"></span>
                                    <button type="button" x-show="!selectMode" @click="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: task.id, projectId: projectId } }))" class="shrink-0 text-xs font-medium text-indigo-600 hover:text-indigo-800 hover:underline" title="View task details">View</button>
                                </div>
                            </div>
                        </template>
                        <div x-show="!list.collapsed && (list.tasks || []).length === 0" class="py-6 text-center text-sm text-gray-500">No tasks yet. Add one below.</div>
                        @if ($canEdit)
                            <div class="pt-1">
                                <input type="text" placeholder="Add a task..." class="w-full rounded border border-gray-300 px-2 py-1.5 text-sm placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500"
                                    @keydown.enter="quickAddTask(list, $event.target.value); $event.target.value = ''" />
                            </div>
                        @endif
                    </div>
                </div>
            </template>
        </div>
        @if ($canEdit)
            <div class="mt-3">
                <div x-show="!adding">
                    <button type="button" @click="adding = true" class="text-sm text-indigo-600 hover:text-indigo-800">+ Add List</button>
                </div>
                <div x-show="adding" x-cloak class="flex gap-2">
                    <input type="text" x-model="newName" @keydown.enter="addList(newName); newName = ''; adding = false" placeholder="List name" class="rounded border border-gray-300 px-3 py-1.5 text-sm" />
                    <button type="button" @click="addList(newName); newName = ''; adding = false" class="rounded bg-indigo-600 px-3 py-1.5 text-sm text-white hover:bg-indigo-700">Add</button>
                    <button type="button" @click="adding = false; newName = ''" class="text-sm text-gray-500 hover:text-gray-700">Cancel</button>
                </div>
            </div>
        @endif

        {{-- Bulk actions floating bar --}}
        <div x-show="selectedIds.length > 0" x-cloak x-transition class="fixed bottom-6 left-1/2 z-40 flex -translate-x-1/2 items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-3 shadow-lg">
            <span class="text-sm font-medium text-gray-700" x-text="selectedIds.length + ' selected'"></span>
            <div class="flex items-center gap-1 border-l border-gray-200 pl-2">
                <div class="relative" x-data="{ open: false }">
                    <button type="button" @click="open = !open" class="rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-100">Status</button>
                    <div x-show="open" @click.outside="open = false" class="absolute bottom-full left-0 mb-1 w-36 rounded border bg-white py-1 shadow">
                        <button type="button" @click="bulkAction('status','todo'); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50">To Do</button>
                        <button type="button" @click="bulkAction('status','in_progress'); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50">In Progress</button>
                        <button type="button" @click="bulkAction('status','review'); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50">Review</button>
                        <button type="button" @click="bulkAction('status','done'); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50">Done</button>
                    </div>
                </div>
                <div class="relative" x-data="{ open: false }">
                    <button type="button" @click="open = !open" class="rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-100">Priority</button>
                    <div x-show="open" @click.outside="open = false" class="absolute bottom-full left-0 mb-1 w-32 rounded border bg-white py-1 shadow">
                        <button type="button" @click="bulkAction('priority','low'); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50">Low</button>
                        <button type="button" @click="bulkAction('priority','medium'); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50">Medium</button>
                        <button type="button" @click="bulkAction('priority','high'); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50">High</button>
                        <button type="button" @click="bulkAction('priority','urgent'); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50">Urgent</button>
                    </div>
                </div>
                <div class="relative" x-data="{ open: false }">
                    <button type="button" @click="open = !open" class="rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-100">Assign</button>
                    <div x-show="open" @click.outside="open = false" class="absolute bottom-full left-0 mb-1 max-h-48 w-44 overflow-auto rounded border bg-white py-1 shadow">
                        <template x-for="u in workspaceUsers" :key="u.id">
                            <button type="button" @click="bulkAction('assignee', u.id); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50" x-text="u.name"></button>
                        </template>
                    </div>
                </div>
                <div class="relative" x-data="{ open: false }">
                    <button type="button" @click="open = !open" class="rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-100">Move to list</button>
                    <div x-show="open" @click.outside="open = false" class="absolute bottom-full left-0 mb-1 max-h-48 w-48 overflow-auto rounded border bg-white py-1 shadow">
                        <template x-for="l in lists" :key="l.id">
                            <button type="button" @click="bulkAction('task_list_id', l.id); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50" x-text="l.name"></button>
                        </template>
                    </div>
                </div>
                <div class="relative" x-data="{ open: false }">
                    <button type="button" @click="open = !open" class="rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-100">Move to project</button>
                    <div x-show="open" @click.outside="open = false" class="absolute bottom-full left-0 mb-1 max-h-48 w-48 overflow-auto rounded border bg-white py-1 shadow">
                        <template x-for="p in projectsForMove" :key="p.id">
                            <button type="button" @click="bulkAction('project_id', p.id); open = false" class="block w-full px-3 py-1 text-left text-sm hover:bg-gray-50" x-text="p.name"></button>
                        </template>
                    </div>
                </div>
                <button type="button" @click="bulkDeleteConfirm = true" class="rounded px-2 py-1 text-sm text-red-600 hover:bg-red-50">Delete</button>
            </div>
        </div>
        <div x-show="bulkDeleteConfirm" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @click.self="bulkDeleteConfirm = false">
            <div class="rounded-lg bg-white p-4 shadow-xl">
                <p class="text-sm text-gray-700">Delete <span x-text="selectedIds.length"></span> task(s)? This cannot be undone.</p>
                <div class="mt-3 flex justify-end gap-2">
                    <button type="button" @click="bulkDeleteConfirm = false" class="rounded px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100">Cancel</button>
                    <button type="button" @click="bulkAction('delete'); bulkDeleteConfirm = false" class="rounded px-3 py-1.5 text-sm bg-red-600 text-white hover:bg-red-700">Delete</button>
                </div>
            </div>
        </div>

        {{-- Create from Template modal --}}
        <div x-show="createFromTemplateOpen" x-cloak class="fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
            <div class="flex min-h-screen items-center justify-center p-4">
                <div x-show="createFromTemplateOpen" x-transition class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="createFromTemplateOpen = false"></div>
                <div x-show="createFromTemplateOpen" x-transition class="relative w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
                    <h3 class="text-lg font-semibold text-gray-900">Create from Template</h3>
                    <p class="mt-1 text-sm text-gray-500">Creates a task (and subtasks) from a template. Subtask due dates = start date + relative days.</p>
                    <div class="mt-4 space-y-4">
                        <div>
                            <label for="template_select" class="block text-sm font-medium text-gray-700">Template</label>
                            <select id="template_select" x-model="createFromTemplateSelected" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">— Select template —</option>
                                <template x-for="t in createFromTemplateTemplates" :key="t.id">
                                    <option :value="t.id" x-text="t.name"></option>
                                </template>
                            </select>
                            <p x-show="createFromTemplateLoading" class="mt-1 text-sm text-gray-500">Loading templates…</p>
                        </div>
                        <div>
                            <label for="template_list" class="block text-sm font-medium text-gray-700">List</label>
                            <select id="template_list" x-model="createFromTemplateListId" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <template x-for="l in lists" :key="l.id">
                                    <option :value="l.id" x-text="l.name"></option>
                                </template>
                            </select>
                        </div>
                        <div>
                            <label for="template_start_date" class="block text-sm font-medium text-gray-700">Start date (for relative due dates)</label>
                            <input id="template_start_date" type="date" x-model="createFromTemplateStartDate" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                        </div>
                        <div>
                            <label for="template_assignee" class="block text-sm font-medium text-gray-700">Assignee (optional)</label>
                            <select id="template_assignee" x-model="createFromTemplateAssigneeId" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">— None —</option>
                                <template x-for="u in workspaceUsers" :key="u.id">
                                    <option :value="u.id" x-text="u.name"></option>
                                </template>
                            </select>
                        </div>
                        <p x-show="createFromTemplateError" class="text-sm text-red-600" x-text="createFromTemplateError"></p>
                    </div>
                    <div class="mt-6 flex justify-end gap-2">
                        <button type="button" @click="createFromTemplateOpen = false" class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                        <button type="button" @click="applyTemplate()" :disabled="!createFromTemplateSelected || !createFromTemplateListId || createFromTemplateApplying" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
                            <span x-text="createFromTemplateApplying ? 'Creating…' : 'Create task'"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @elseif (($currentView ?? 'list') === 'board')
    {{-- Board view --}}
    @php
        $boardLists = $project->taskLists->map(fn ($l) => [
            'id' => $l->id,
            'name' => $l->name,
            'position' => $l->position,
            'is_default' => $l->is_default,
            'tasks_count' => $l->tasks->count(),
            'collapsed' => false,
            'tasks' => $l->tasks->map(fn ($t) => [
                'id' => $t->id,
                'title' => $t->title,
                'status' => $t->status,
                'priority' => $t->priority,
                'due_date' => $t->due_date?->format('Y-m-d'),
                'due_time' => $t->due_time,
                'completed_at' => $t->completed_at?->toIso8601String(),
                'recurrence_rule' => $t->recurrence_rule,
                'recurrence_parent_id' => $t->recurrence_parent_id,
                'blocked_by' => $t->blockedByDependencies->map(fn ($d) => ['task_id' => $d->depends_on_task_id, 'title' => $d->dependsOnTask?->title, 'status' => $d->dependsOnTask?->status])->values()->all(),
                'is_blocked' => $t->blockedByDependencies->where(fn ($d) => $d->dependsOnTask && $d->dependsOnTask->status !== 'done')->isNotEmpty(),
                'assignees' => $t->assignees->map(fn ($a) => [
                    'id' => $a->user?->id,
                    'name' => $a->user?->name,
                    'avatar_url' => $a->user?->avatar_url,
                ])->all(),
            ])->values()->all(),
        ])->values()->all();
    @endphp
    <div
        class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
        x-data="projectBoard({{ Js::from([
            'lists' => $boardLists,
            'projectId' => $project->id,
            'canEdit' => $canEdit,
            'apiBase' => url('/api/v1'),
            'csrf' => csrf_token(),
        ]) }})"
        x-init="initSortable()"
    >
        <div class="flex gap-4 overflow-x-auto pb-2" id="board-columns">
            <template x-for="(list, listIndex) in lists" :key="list.id">
                <div class="board-column flex h-[420px] w-72 shrink-0 flex-col rounded-lg border border-gray-200 bg-gray-50" :data-list-id="list.id">
                    <div class="flex shrink-0 items-center justify-between gap-2 rounded-t-lg border-b border-gray-200 bg-white px-3 py-2">
                        <button type="button" @click="list.collapsed = !list.collapsed" class="flex flex-1 items-center gap-2 text-left">
                            <svg class="h-4 w-4 shrink-0 text-gray-500 transition-transform" :class="list.collapsed ? '' : 'rotate-90'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            <span class="font-medium text-gray-900" x-text="list.name"></span>
                            <span class="rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-700" x-text="(list.tasks?.length || 0)"></span>
                        </button>
                    </div>
                    <div x-show="!list.collapsed" class="flex min-h-0 flex-1 flex-col overflow-hidden">
                        <div class="board-cards min-h-[80px] max-h-[280px] flex-1 space-y-2 overflow-y-auto p-2" :data-list-id="list.id">
                            <template x-for="(task, taskIndex) in (list.tasks || [])" :key="task.id">
                                <div class="board-card cursor-grab rounded-md border border-gray-200 bg-white p-2 shadow-sm hover:border-gray-300" :class="task.is_blocked ? 'opacity-70' : ''" :data-task-id="task.id" @click="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: task.id, projectId: projectId } }))">
                                    <div class="flex gap-2">
                                        <span class="shrink-0 w-1 rounded-full self-stretch
                                            " :class="{ 'bg-gray-400': task.priority === 'low', 'bg-blue-500': task.priority === 'medium', 'bg-orange-500': task.priority === 'high', 'bg-red-500': task.priority === 'urgent' }"></span>
                                        <div class="min-w-0 flex-1">
                                            <p class="text-sm font-medium truncate flex items-center gap-1" :class="task.is_blocked ? 'text-gray-400' : 'text-gray-900'"><span x-text="task.title"></span><span x-show="task.recurrence_rule || task.recurrence_parent_id" class="shrink-0 text-gray-400">🔄</span><span x-show="task.is_blocked" class="shrink-0 text-amber-600" :title="'Blocked by: ' + ((task.blocked_by || []).filter(b => b.status !== 'done').map(b => b.title).join(', ') || '')">🔒</span></p>
                                            <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
                                                <template x-for="a in (task.assignees || [])" :key="a.id">
                                                    <img x-show="a.avatar_url" :src="a.avatar_url" :alt="a.name" class="h-5 w-5 rounded-full object-cover" />
                                                    <span x-show="!a.avatar_url" class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-gray-600 text-xs text-white" x-text="(a.name || '').charAt(0).toUpperCase()"></span>
                                                </template>
                                                <span x-show="task.due_date" class="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600" x-text="task.due_date ? new Date(task.due_date).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : ''"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                        @if ($canEdit)
                        <div class="border-t border-gray-200 p-2">
                            <input type="text" placeholder="Add task..." class="w-full rounded border border-gray-300 px-2 py-1.5 text-sm placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500"
                                @keydown.enter="quickAddTask(list, $event.target.value); $event.target.value = ''" />
                        </div>
                        @endif
                    </div>
                </div>
            </template>
        </div>
    </div>
    @else
    {{-- Calendar view --}}
    <x-task-calendar
        :api-base="url('/api/v1')"
        :csrf="csrf_token()"
        :project-id="$project->id"
        :filter-params="$filterParams ?? []"
    />
    @endif

    {{-- Edit Project Modal --}}
    <div
        x-data="{ open: false }"
        x-on:open-edit-project-modal.window="open = true"
        x-on:close-edit-project-modal.window="open = false"
        x-show="open"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        role="dialog"
        aria-modal="true"
    >
        <div class="flex min-h-screen items-center justify-center p-4">
            <div x-show="open" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="open = false"></div>
            <div x-show="open" x-transition class="relative w-full max-w-lg rounded-lg bg-white p-6 shadow-xl">
                <h3 class="text-lg font-semibold text-gray-900">Edit Project</h3>
                <form method="post" action="{{ route('projects.update', $project) }}" class="mt-4 space-y-4">
                    @csrf
                    @method('PATCH')
                    <div>
                        <label for="edit_name" class="block text-sm font-medium text-gray-700">Name</label>
                        <input id="edit_name" type="text" name="name" value="{{ old('name', $project->name) }}" {{ $project->isDefaultProject() ? 'readonly' : '' }} class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 {{ $project->isDefaultProject() ? 'bg-gray-100' : '' }}" />
                        @error('name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="edit_description" class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea id="edit_description" name="description" rows="3" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('description', $project->description) }}</textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Color</label>
                        <div class="flex flex-wrap gap-2">
                            @foreach (\App\Models\Project::predefinedColors() as $hex => $label)
                                <label class="cursor-pointer">
                                    <input type="radio" name="color" value="{{ $hex }}" {{ old('color', $project->color ?? '#3b82f6') === $hex ? 'checked' : '' }} class="sr-only peer" />
                                    <span class="block h-8 w-8 rounded-full border-2 border-transparent peer-checked:border-gray-900 peer-checked:ring-2 peer-checked:ring-offset-2" style="background-color: {{ $hex }}"></span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    @if (!$project->isDefaultProject())
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Visibility</label>
                            <div class="mt-1 flex gap-4">
                                <label class="flex items-center gap-2">
                                    <input type="radio" name="visibility" value="private" {{ old('visibility', $project->visibility) === 'private' ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                                    <span class="text-sm text-gray-700">Private</span>
                                </label>
                                <label class="flex items-center gap-2">
                                    <input type="radio" name="visibility" value="shared" {{ old('visibility', $project->visibility) === 'shared' ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                                    <span class="text-sm text-gray-700">Shared</span>
                                </label>
                            </div>
                        </div>
                    @endif
                    <div>
                        <div class="flex items-center gap-2">
                            <input type="hidden" name="inbound_email_enabled" value="0" />
                            <input id="edit_inbound_email_enabled" type="checkbox" name="inbound_email_enabled" value="1" {{ old('inbound_email_enabled', $project->inbound_email_address) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                            <label for="edit_inbound_email_enabled" class="text-sm font-medium text-gray-700">Enable email-to-task</label>
                        </div>
                        @if ($project->inbound_email_address)
                            <div class="mt-2 flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2">
                                <code class="flex-1 truncate text-sm text-gray-700" id="project-inbound-email-address">{{ $project->inbound_email_address }}</code>
                                <button type="button" data-copy-target="project-inbound-email-address" class="rounded border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-100">Copy</button>
                            </div>
                        @endif
                    </div>
                    <div class="flex justify-end gap-2 pt-2">
                        <button type="button" @click="$dispatch('close-edit-project-modal')" class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                        <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        @include('partials.task-panel-script')
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
        <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('projectBoard', (config) => ({
                lists: config.lists,
                projectId: config.projectId,
                canEdit: config.canEdit,
                apiBase: config.apiBase,
                csrf: config.csrf,
                sortables: [],
                initSortable() {
                    if (!this.canEdit || typeof Sortable === 'undefined') return;
                    this.destroySortable();
                    this.$nextTick(() => {
                        document.querySelectorAll('.board-cards').forEach((el) => {
                            const sortable = new Sortable(el, {
                                group: 'board',
                                animation: 150,
                                draggable: '.board-card',
                                onEnd: (evt) => this.handleDrop(evt),
                            });
                            this.sortables.push(sortable);
                        });
                    });
                },
                destroySortable() {
                    this.sortables.forEach((s) => s.destroy && s.destroy());
                    this.sortables = [];
                },
                handleDrop(evt) {
                    const taskId = evt.item.dataset.taskId;
                    const fromListId = evt.from.dataset.listId;
                    const toListId = evt.to.dataset.listId;
                    const oldIndex = evt.oldIndex;
                    const newIndex = evt.newIndex;
                    const fromList = this.lists.find((l) => l.id === fromListId);
                    const toList = this.lists.find((l) => l.id === toListId);
                    if (!fromList || !toList) return;
                    const snapshot = JSON.stringify(this.lists);
                    const task = fromList.tasks.splice(oldIndex, 1)[0];
                    if (!task) return;
                    toList.tasks.splice(newIndex, 0, task);
                    this.lists = JSON.parse(JSON.stringify(this.lists));
                    fetch(`${this.apiBase}/tasks/${taskId}`, {
                        method: 'PATCH',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                        body: JSON.stringify({ task_list_id: toListId, position: newIndex }),
                        credentials: 'same-origin',
                    }).then((res) => {
                        if (!res.ok) {
                            this.lists = JSON.parse(snapshot);
                        }
                        this.$nextTick(() => this.initSortable());
                    });
                },
                async quickAddTask(list, title) {
                    title = (title || '').trim();
                    if (!title) return;
                    const res = await fetch(`${this.apiBase}/tasks`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                        body: JSON.stringify({
                            task_list_id: list.id,
                            title,
                            status: 'todo',
                            priority: 'medium',
                        }),
                        credentials: 'same-origin',
                    });
                    if (res.ok) {
                        const json = await res.json();
                        const task = json.data || json;
                        if (!list.tasks) list.tasks = [];
                        list.tasks.push({
                            id: task.id,
                            title: task.title,
                            status: task.status,
                            priority: task.priority,
                            due_date: task.due_date,
                            due_time: task.due_time,
                            completed_at: task.completed_at,
                            assignees: task.assignees || [],
                        });
                    }
                },
            }));
        });
        </script>
        <script>
        document.addEventListener('click', (e) => {
            const btn = e.target.closest('[data-copy-target]');
            if (!btn) return;
            const id = btn.getAttribute('data-copy-target');
            const el = id ? document.getElementById(id) : null;
            if (!el) return;
            navigator.clipboard.writeText(el.textContent.trim()).then(() => {
                const label = btn.textContent;
                btn.textContent = 'Copied!';
                setTimeout(() => { btn.textContent = label; }, 1500);
            });
        });
        </script>
        <script>
document.addEventListener('alpine:init', () => {
            Alpine.data('projectTimeSummary', (config) => ({
                apiBase: config.apiBase,
                projectId: config.projectId,
                summary: [],
                loading: false,
                open: false,
                async fetchSummary() {
                    this.loading = true;
                    try {
                        const r = await fetch(this.apiBase + '/projects/' + this.projectId + '/time-summary', { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' });
                        if (r.ok) { const d = await r.json(); this.summary = d.data ?? []; }
                    } finally {
                        this.loading = false;
                    }
                },
                formatTotal(mins) {
                    if (mins == null || mins === 0) return '0m';
                    const h = Math.floor(mins / 60);
                    const m = mins % 60;
                    return h ? (h + 'h ' + (m ? m + 'm' : '')) : (m + 'm');
                },
            }));
            Alpine.data('taskListsManager', (config) => ({
                    lists: config.lists,
                    projectId: config.projectId,
                    canEdit: config.canEdit,
                    apiBase: config.apiBase,
                    csrf: config.csrf,
                    adding: config.adding ?? false,
                    newName: config.newName ?? '',
                    sortable: null,
                    selectMode: config.selectMode ?? false,
                    selectedIds: config.selectedIds ?? [],
                    bulkDeleteConfirm: config.bulkDeleteConfirm ?? false,
                    workspaceUsers: config.workspaceUsers ?? [],
                    projectsForMove: config.projectsForMove ?? [],
                    createFromTemplateOpen: config.createFromTemplateOpen ?? false,
                    createFromTemplateTemplates: config.createFromTemplateTemplates ?? [],
                    createFromTemplateLoading: config.createFromTemplateLoading ?? false,
                    createFromTemplateSelected: config.createFromTemplateSelected ?? '',
                    createFromTemplateListId: config.createFromTemplateListId ?? (config.lists?.[0]?.id ?? ''),
                    createFromTemplateStartDate: config.createFromTemplateStartDate ?? new Date().toISOString().slice(0, 10),
                    createFromTemplateAssigneeId: config.createFromTemplateAssigneeId ?? '',
                    createFromTemplateApplying: config.createFromTemplateApplying ?? false,
                    createFromTemplateError: config.createFromTemplateError ?? null,

                    toggleSelect(id) {
                        if (this.selectedIds.includes(id)) {
                            this.selectedIds = this.selectedIds.filter((i) => i !== id);
                        } else {
                            this.selectedIds = [...this.selectedIds, id];
                        }
                    },

                    toggleSelectAllList(list) {
                        const taskIds = (list.tasks || []).map((t) => t.id);
                        const allSelected = taskIds.every((id) => this.selectedIds.includes(id));
                        if (allSelected) {
                            this.selectedIds = this.selectedIds.filter((id) => !taskIds.includes(id));
                        } else {
                            const merged = new Set([...this.selectedIds, ...taskIds]);
                            this.selectedIds = Array.from(merged);
                        }
                    },

                    async bulkAction(action, value) {
                        if (!this.selectedIds.length) return;
                        const body = { task_ids: this.selectedIds, action };
                        if (action !== 'delete') body.value = value;
                        const res = await fetch(`${this.apiBase}/tasks/bulk`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                            body: JSON.stringify(body),
                            credentials: 'same-origin',
                        });
                        if (res.ok) {
                            this.selectedIds = [];
                            window.location.reload();
                        }
                    },

                    dueBadgeClass(task) {
                        if (!task.due_date) return '';
                        const d = new Date(task.due_date);
                        const today = new Date();
                        today.setHours(0, 0, 0, 0);
                        const tomorrow = new Date();
                        tomorrow.setDate(tomorrow.getDate() + 1);
                        tomorrow.setHours(0, 0, 0, 0);
                        if (task.status === 'done') return 'bg-gray-100 text-gray-600';
                        if (d < today) return 'bg-red-100 text-red-800';
                        if (d.toDateString() === today.toDateString()) return 'bg-yellow-100 text-yellow-800';
                        if (d.toDateString() === tomorrow.toDateString()) return 'bg-blue-100 text-blue-800';
                        return 'bg-gray-100 text-gray-600';
                    },

                    sortableTasks: [],

                    initSortable() {
                        if (!this.canEdit || typeof Sortable === 'undefined') return;
                        const el = document.getElementById('task-lists-sortable');
                        if (!el) return;
                        this.sortable = new Sortable(el, {
                            handle: '.list-drag-handle',
                            animation: 150,
                            onEnd: () => this.sendReorder(),
                        });
                    },

                    initTaskSortables() {
                        if (!this.canEdit || typeof Sortable === 'undefined') return;
                        document.querySelectorAll('.list-tasks').forEach((listEl) => {
                            const sortable = new Sortable(listEl, {
                                group: 'tasks',
                                handle: '.task-drag-handle',
                                draggable: '.task-row',
                                animation: 150,
                                onEnd: () => this.sendTaskReorder(),
                            });
                            this.sortableTasks.push(sortable);
                        });
                    },

                    async sendReorder() {
                        const el = document.getElementById('task-lists-sortable');
                        const nodes = el.querySelectorAll('[data-list-id]');
                        const lists = Array.from(nodes).map((node, index) => ({
                            id: node.getAttribute('data-list-id'),
                            position: index,
                        }));
                        const res = await fetch(`${this.apiBase}/projects/${this.projectId}/lists/reorder`, {
                            method: 'PATCH',
                            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                            body: JSON.stringify({ lists }),
                            credentials: 'same-origin',
                        });
                        if (res.ok) {
                            const data = await res.json();
                            this.lists = data.data || data;
                        }
                    },

                    async sendTaskReorder() {
                        const tasks = [];
                        document.querySelectorAll('.list-tasks').forEach((listEl) => {
                            const listId = listEl.getAttribute('data-list-id');
                            listEl.querySelectorAll('.task-row').forEach((row, index) => {
                                const id = row.getAttribute('data-task-id');
                                if (id) tasks.push({ id, task_list_id: listId, position: index });
                            });
                        });
                        if (tasks.length === 0) return;
                        const res = await fetch(`${this.apiBase}/tasks/reorder`, {
                            method: 'PATCH',
                            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                            body: JSON.stringify({ tasks }),
                            credentials: 'same-origin',
                        });
                        if (res.ok) window.location.reload();
                    },

                    async addList(name) {
                        name = (name || '').trim();
                        if (!name) return;
                        const res = await fetch(`${this.apiBase}/projects/${this.projectId}/lists`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                            body: JSON.stringify({ name }),
                            credentials: 'same-origin',
                        });
                        if (res.ok) {
                            const json = await res.json();
                            const newList = json.data || json;
                            this.lists.push({ ...newList, collapsed: false, editing: false, tasks: [] });
                            this.adding = false;
                            this.newName = '';
                        }
                    },

                    async quickAddTask(list, title) {
                        title = (title || '').trim();
                        if (!title) return;
                        const res = await fetch(`${this.apiBase}/tasks`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                            body: JSON.stringify({
                                task_list_id: list.id,
                                title,
                                status: 'todo',
                                priority: 'medium',
                            }),
                            credentials: 'same-origin',
                        });
                        if (res.ok) {
                            const json = await res.json();
                            const task = json.data || json;
                            if (!list.tasks) list.tasks = [];
                            list.tasks.push({
                                id: task.id,
                                title: task.title,
                                status: task.status,
                                priority: task.priority,
                                due_date: task.due_date,
                                due_time: task.due_time,
                                completed_at: task.completed_at,
                                assignees: task.assignees || [],
                            });
                        }
                    },

                    async toggleTaskComplete(task) {
                        const newStatus = task.status === 'done' ? 'todo' : 'done';
                        const res = await fetch(`${this.apiBase}/tasks/${task.id}/status`, {
                            method: 'PATCH',
                            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                            body: JSON.stringify({ status: newStatus }),
                            credentials: 'same-origin',
                        });
                        if (res.ok) {
                            task.status = newStatus;
                            task.completed_at = newStatus === 'done' ? new Date().toISOString() : null;
                        }
                    },

                    async saveRename(list) {
                        list.editing = false;
                        await fetch(`${this.apiBase}/lists/${list.id}`, {
                            method: 'PATCH',
                            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                            body: JSON.stringify({ name: list.name }),
                            credentials: 'same-origin',
                        });
                    },

                    async deleteList(list) {
                        if (list.is_default) { alert('Default lists cannot be deleted.'); return; }
                        if (list.tasks_count > 0) { alert('Remove all tasks from this list first.'); return; }
                        const res = await fetch(`${this.apiBase}/lists/${list.id}`, {
                            method: 'DELETE',
                            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                            credentials: 'same-origin',
                        });
                        if (res.ok) this.lists = this.lists.filter(l => l.id !== list.id);
                    },

                    async openCreateFromTemplateModal() {
                        this.createFromTemplateOpen = true;
                        this.createFromTemplateError = null;
                        this.createFromTemplateSelected = '';
                        this.createFromTemplateListId = this.lists?.[0]?.id ?? '';
                        this.createFromTemplateStartDate = new Date().toISOString().slice(0, 10);
                        this.createFromTemplateAssigneeId = '';
                        this.createFromTemplateLoading = true;
                        try {
                            const res = await fetch(`${this.apiBase}/templates`, {
                                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                                credentials: 'same-origin',
                            });
                            if (res.ok) {
                                const json = await res.json();
                                this.createFromTemplateTemplates = json.data ?? json ?? [];
                            }
                        } finally {
                            this.createFromTemplateLoading = false;
                        }
                    },

                    async applyTemplate() {
                        if (!this.createFromTemplateSelected || !this.createFromTemplateListId) return;
                        this.createFromTemplateApplying = true;
                        this.createFromTemplateError = null;
                        try {
                            const body = {
                                project_id: this.projectId,
                                list_id: this.createFromTemplateListId,
                                start_date: this.createFromTemplateStartDate || undefined,
                            };
                            if (this.createFromTemplateAssigneeId) body.assignee_id = this.createFromTemplateAssigneeId;
                            const res = await fetch(`${this.apiBase}/templates/${this.createFromTemplateSelected}/apply`, {
                                method: 'POST',
                                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                                body: JSON.stringify(body),
                                credentials: 'same-origin',
                            });
                            const data = await res.json().catch(() => ({}));
                            if (res.ok) {
                                this.createFromTemplateOpen = false;
                                window.location.reload();
                            } else {
                                this.createFromTemplateError = data.message || data.errors ? JSON.stringify(data.errors) : 'Failed to create task from template.';
                            }
                        } finally {
                            this.createFromTemplateApplying = false;
                        }
                    },
                }));
            });
        </script>
    @endpush

    @include('partials.task-panel', ['projectId' => $project->id])

    @if (session('open_task'))
        <div
            x-data
            x-init="$dispatch('open-task-panel', { taskId: '{{ session('open_task') }}', projectId: '{{ $project->id }}' })"
        ></div>
    @endif
@endsection