@extends('layouts.app')
@section('title', $project->name)
@section('breadcrumb')
    <a href="{{ route('projects.index') }}" style="color:var(--text-secondary);">Projects</a>
    <span class="topbar-breadcrumb-sep">/</span>
    <span style="font-weight:600;color:var(--text-primary);">{{ $project->name }}</span>
@endsection

@section('content')
    {{-- Project Header --}}
    <div class="page-header">
        <div class="page-header-left">
            <div style="width:12px;height:12px;border-radius:4px;background:{{ $project->color }};"></div>
            <div>
                <h1 style="font-size:1.35rem;">{{ $project->name }}</h1>
                @if($project->description)
                    <p class="text-muted text-sm mt-1">{{ Str::limit($project->description, 120) }}</p>
                @endif
            </div>
            <span class="badge badge-{{ $project->status_badge }}">{{ ucfirst(str_replace('_', ' ', $project->status)) }}</span>
        </div>
        <div class="page-header-actions">
            {{-- Members --}}
            <div class="avatar-stack">
                @foreach($project->members->take(4) as $member)
                    <div class="avatar avatar-sm" title="{{ $member->name }}">{{ $member->initials }}</div>
                @endforeach
                @if($project->members->count() > 4)
                    <div class="avatar avatar-sm" style="background:var(--bg-tertiary);font-size:0.65rem;">+{{ $project->members->count() - 4 }}</div>
                @endif
            </div>
            <a href="{{ route('projects.export.csv', $project) }}" class="btn btn-ghost btn-sm" title="Export CSV">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Export CSV
            </a>
            <a href="{{ route('projects.settings', $project) }}" class="btn btn-ghost btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
                Settings
            </a>
            <a href="{{ route('projects.edit', $project) }}" class="btn btn-secondary btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                Edit
            </a>
            <form method="POST" action="{{ route('projects.destroy', $project) }}" style="margin:0;" onsubmit="return confirm('Delete this project?')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-ghost btn-sm" style="color:var(--accent-red);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                </button>
            </form>
        </div>
    </div>

    {{-- View Tabs --}}
    <div class="tabs" style="margin-bottom:0;">
        <a href="{{ route('projects.show', ['project' => $project, 'view' => 'board']) }}" class="tab {{ $view == 'board' ? 'active' : '' }}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:middle;"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
            Board
        </a>
        <a href="{{ route('projects.show', ['project' => $project, 'view' => 'list']) }}" class="tab {{ $view == 'list' ? 'active' : '' }}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:middle;"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
            List
        </a>
        <a href="{{ route('projects.show', ['project' => $project, 'view' => 'timeline']) }}" class="tab {{ $view == 'timeline' ? 'active' : '' }}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:middle;"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
            Timeline
        </a>
        <a href="{{ route('projects.show', ['project' => $project, 'view' => 'calendar']) }}" class="tab {{ $view == 'calendar' ? 'active' : '' }}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:middle;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
            Calendar
        </a>
        <a href="{{ route('projects.show', ['project' => $project, 'view' => 'activity']) }}" class="tab {{ $view == 'activity' ? 'active' : '' }}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:middle;"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
            Activity
        </a>
    </div>

    {{-- Add Task Form --}}
    <div x-data="{ showForm: false }" style="margin: 16px 0;">
        <button @click="showForm = !showForm" class="btn btn-secondary btn-sm" x-show="!showForm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            Add Task
        </button>
        <form method="POST" action="{{ route('tasks.store') }}" x-show="showForm" x-cloak
              style="background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
            @csrf
            <input type="hidden" name="project_id" value="{{ $project->id }}">
            <div style="flex:2;min-width:200px;">
                <label class="form-label">Title</label>
                <input type="text" name="title" class="form-control" placeholder="Task name" required>
            </div>
            <div style="flex:1;min-width:140px;">
                <label class="form-label">Assignee</label>
                <select name="assignee_id" class="form-control">
                    <option value="">Unassigned</option>
                    @foreach($users as $u)
                        <option value="{{ $u->id }}">{{ $u->name }}</option>
                    @endforeach
                </select>
            </div>
            <div style="flex:1;min-width:120px;">
                <label class="form-label">Priority</label>
                <select name="priority" class="form-control">
                    <option value="medium">Medium</option>
                    <option value="low">Low</option>
                    <option value="high">High</option>
                    <option value="urgent">Urgent</option>
                </select>
            </div>
            <div style="flex:1;min-width:120px;">
                <label class="form-label">Status</label>
                <select name="status" class="form-control">
                    <option value="todo">To Do</option>
                    <option value="in_progress">In Progress</option>
                    <option value="review">Review</option>
                </select>
            </div>
            <div style="flex:1;min-width:140px;">
                <label class="form-label">Due Date</label>
                <input type="date" name="due_date" class="form-control">
            </div>
            <div class="flex gap-2">
                <button type="submit" class="btn btn-primary btn-sm">Save</button>
                <button type="button" @click="showForm = false" class="btn btn-ghost btn-sm">Cancel</button>
            </div>
        </form>
    </div>

    {{-- BOARD VIEW (Kanban) --}}
    @if($view == 'board')
    <div class="kanban-board" style="margin-top:8px;">
        @php
            $columns = [
                'todo' => ['label' => 'To Do', 'color' => '#6b7280'],
                'in_progress' => ['label' => 'In Progress', 'color' => '#3b82f6'],
                'review' => ['label' => 'Review', 'color' => '#f59e0b'],
                'completed' => ['label' => 'Completed', 'color' => '#22c55e'],
            ];
        @endphp

        @foreach($columns as $status => $col)
            <div class="kanban-column" data-status="{{ $status }}">
                <div class="kanban-column-header">
                    <div class="kanban-column-title">
                        <span class="kanban-column-dot" style="background: {{ $col['color'] }}"></span>
                        {{ $col['label'] }}
                        <span class="kanban-column-count" id="count-{{ $status }}">{{ $tasksByStatus[$status]->count() }}</span>
                    </div>
                </div>
                <div class="kanban-column-body" id="kanban-{{ $status }}" data-status="{{ $status }}">
                    @foreach($tasksByStatus[$status] as $task)
                        <div class="kanban-card" data-task-id="{{ $task->id }}" onclick="if(!window._dragging) window.location='{{ route('tasks.show', $task) }}'">
                            @if($task->tags->count())
                                <div class="kanban-card-tags">
                                    @foreach($task->tags as $tag)
                                        <span class="kanban-card-tag" style="background: {{ $tag->color }}22; color: {{ $tag->color }};">{{ $tag->name }}</span>
                                    @endforeach
                                </div>
                            @endif

                            <div class="kanban-card-title">{{ $task->title }}</div>

                            <div class="kanban-card-footer">
                                <div class="flex items-center gap-2">
                                    @if($task->assignee)
                                        <div class="avatar avatar-xs" title="{{ $task->assignee->name }}">{{ $task->assignee->initials }}</div>
                                    @endif
                                    @if($task->due_date)
                                        <span class="text-xs {{ $task->is_overdue ? 'overdue' : 'text-muted' }}">
                                            {{ $task->due_date->format('M j') }}
                                        </span>
                                    @endif
                                </div>
                                <div class="flex items-center gap-1">
                                    <div class="priority-dot" style="background: {{ $task->priority_color }};" title="{{ ucfirst($task->priority) }}"></div>
                                    @if($task->subtasks->count())
                                        @php $prog = $task->subtask_progress; @endphp
                                        <div class="mini-progress-container" title="{{ $prog['completed'] }}/{{ $prog['total'] }} Subtasks">
                                            <div class="mini-progress-bar {{ $prog['percent'] == 100 ? 'complete' : '' }}" style="width: {{ $prog['percent'] }}%"></div>
                                        </div>
                                    @endif
                                    @if($task->comments->count())
                                        <span class="text-xs text-muted">💬 {{ $task->comments->count() }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
    @endif

    {{-- LIST VIEW --}}
    @if($view == 'list')
    <div class="card" style="margin-top:8px;" x-data="bulkActions()">
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th style="width:40px;">
                            <input type="checkbox" class="bulk-checkbox-all"
                                   @change="toggleAll($event.target.checked)"
                                   :checked="selectedIds.length === {{ $tasks->count() }} && selectedIds.length > 0"
                                   :indeterminate="selectedIds.length > 0 && selectedIds.length < {{ $tasks->count() }}"
                                   title="Select All">
                        </th>
                        <th style="width:40px;"></th>
                        <th>Task</th>
                        <th>Assignee</th>
                        <th>Due Date</th>
                        <th>Priority</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($tasks as $task)
                        <tr :class="{ 'bulk-selected': selectedIds.includes({{ $task->id }}) }">
                            <td>
                                <input type="checkbox" class="bulk-checkbox"
                                       value="{{ $task->id }}"
                                       @change="toggleTask({{ $task->id }}, $event.target.checked)"
                                       :checked="selectedIds.includes({{ $task->id }})">
                            </td>
                            <td>
                                <div class="task-checkbox {{ $task->is_completed ? 'completed' : '' }}"></div>
                            </td>
                            <td>
                                <a href="{{ route('tasks.show', $task) }}" style="color:var(--text-primary);font-weight:500;">{{ $task->title }}</a>
                                @if($task->subtasks->count())
                                    @php $prog = $task->subtask_progress; @endphp
                                    <div class="mini-progress-container" style="width:40px;margin-left:8px;" title="{{ $prog['completed'] }}/{{ $prog['total'] }} Subtasks">
                                        <div class="mini-progress-bar {{ $prog['percent'] == 100 ? 'complete' : '' }}" style="width: {{ $prog['percent'] }}%"></div>
                                    </div>
                                @endif
                            </td>
                            <td>
                                @if($task->assignee)
                                    <div class="flex items-center gap-2">
                                        <div class="avatar avatar-xs">{{ $task->assignee->initials }}</div>
                                        {{ $task->assignee->name }}
                                    </div>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td>
                                @if($task->due_date)
                                    <span class="{{ $task->is_overdue ? 'overdue' : '' }}">{{ $task->due_date->format('M j, Y') }}</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td>
                                <div class="flex items-center gap-2">
                                    <div class="priority-dot" style="background: {{ $task->priority_color }}"></div>
                                    {{ ucfirst($task->priority) }}
                                </div>
                            </td>
                            <td>
                                <span class="badge badge-{{ $task->status === 'completed' ? 'success' : ($task->status === 'in_progress' ? 'primary' : ($task->status === 'review' ? 'warning' : 'secondary')) }}">
                                    {{ ucfirst(str_replace('_', ' ', $task->status)) }}
                                </span>
                            </td>
                            <td>
                                <div class="flex gap-1">
                                    <a href="{{ route('tasks.show', $task) }}" class="btn btn-ghost btn-icon btn-sm" title="View">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                                    </a>
                                    <form method="POST" action="{{ route('tasks.destroy', $task) }}" style="margin:0" onsubmit="return confirm('Delete?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-ghost btn-icon btn-sm" title="Delete" style="color:var(--accent-red);">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted" style="padding:40px;">No tasks yet. Create one above!</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Floating Bulk Action Bar --}}
        <div class="bulk-action-bar" x-show="selectedIds.length > 0" x-transition.opacity.duration.200ms x-cloak>
            <div class="bulk-action-bar-inner">
                <span class="bulk-action-count" x-text="selectedIds.length + ' selected'"></span>

                <div class="bulk-action-divider"></div>

                <div class="bulk-action-group">
                    <label class="bulk-action-label">Status:</label>
                    <select class="bulk-action-select" @change="performAction('update_status', $event.target.value); $event.target.value = ''">
                        <option value="">Change…</option>
                        <option value="todo">To Do</option>
                        <option value="in_progress">In Progress</option>
                        <option value="review">Review</option>
                        <option value="completed">Completed</option>
                    </select>
                </div>

                <div class="bulk-action-group">
                    <label class="bulk-action-label">Priority:</label>
                    <select class="bulk-action-select" @change="performAction('update_priority', $event.target.value); $event.target.value = ''">
                        <option value="">Change…</option>
                        <option value="low">Low</option>
                        <option value="medium">Medium</option>
                        <option value="high">High</option>
                        <option value="urgent">Urgent</option>
                    </select>
                </div>

                <div class="bulk-action-divider"></div>

                <button class="btn btn-danger btn-sm" @click="performAction('delete')" title="Delete Selected">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                    Delete
                </button>

                <button class="btn btn-ghost btn-sm" @click="clearSelection()" style="margin-left:auto;">
                    ✕ Clear
                </button>
            </div>
        </div>
    </div>
    @endif

    {{-- TIMELINE VIEW --}}
    @if($view == 'timeline')
    <div class="card" style="margin-top:8px;">
        <div class="card-body">
            <div class="timeline-container">
                @php
                    $months = [];
                    $startMonth = now()->startOfMonth();
                    for ($i = 0; $i < 4; $i++) {
                        $months[] = $startMonth->copy()->addMonths($i);
                    }
                    $totalDays = $startMonth->diffInDays($startMonth->copy()->addMonths(4));
                @endphp

                <div class="timeline-header">
                    <div class="timeline-label">Task</div>
                    <div class="timeline-months">
                        @foreach($months as $month)
                            <div class="timeline-month">{{ $month->format('M Y') }}</div>
                        @endforeach
                    </div>
                </div>

                @foreach($tasks as $task)
                    <div class="timeline-row">
                        <div class="timeline-row-label">
                            <div class="priority-dot" style="background: {{ $task->priority_color }}"></div>
                            <span class="truncate">{{ Str::limit($task->title, 25) }}</span>
                        </div>
                        <div class="timeline-bar-area">
                            @php
                                $taskStart = $task->start_date ?? $task->created_at;
                                $taskEnd = $task->due_date ?? now()->addDays(7);
                                $dayOffset = max(0, $startMonth->diffInDays($taskStart, false));
                                $duration = max(1, $taskStart->diffInDays($taskEnd));
                                $leftPercent = ($dayOffset / $totalDays) * 100;
                                $widthPercent = ($duration / $totalDays) * 100;
                            @endphp
                            <div class="timeline-bar" style="left:{{ max(0, min(90, $leftPercent)) }}%;width:{{ min(100 - $leftPercent, $widthPercent) }}%;background:{{ $task->status_color }};">
                                {{ Str::limit($task->title, 20) }}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    {{-- CALENDAR VIEW --}}
    @if($view == 'calendar')
    @php
        $calMonth = request('month', now()->format('Y-m'));
        $calDate = \Carbon\Carbon::createFromFormat('Y-m', $calMonth)->startOfMonth();
        $prevMonth = $calDate->copy()->subMonth()->format('Y-m');
        $nextMonth = $calDate->copy()->addMonth()->format('Y-m');
        $startOfCal = $calDate->copy()->startOfWeek(\Carbon\Carbon::SUNDAY);
        $endOfCal = $calDate->copy()->endOfMonth()->endOfWeek(\Carbon\Carbon::SATURDAY);

        // Build a map of tasks by date
        $tasksByDate = $tasks->filter(fn($t) => $t->due_date)->groupBy(fn($t) => $t->due_date->format('Y-m-d'));
    @endphp

    <div class="card" style="margin-top:8px;">
        <div class="card-header">
            <div class="flex items-center gap-3">
                <a href="{{ route('projects.show', ['project' => $project, 'view' => 'calendar', 'month' => $prevMonth]) }}" class="btn btn-ghost btn-sm btn-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;"><polyline points="15 18 9 12 15 6"></polyline></svg>
                </a>
                <h3 class="card-header-title" style="min-width:160px;text-align:center;">{{ $calDate->format('F Y') }}</h3>
                <a href="{{ route('projects.show', ['project' => $project, 'view' => 'calendar', 'month' => $nextMonth]) }}" class="btn btn-ghost btn-sm btn-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;"><polyline points="9 18 15 12 9 6"></polyline></svg>
                </a>
            </div>
            <a href="{{ route('projects.show', ['project' => $project, 'view' => 'calendar', 'month' => now()->format('Y-m')]) }}" class="btn btn-ghost btn-sm">Today</a>
        </div>
        <div class="card-body" style="padding:0;">
            <div class="calendar-grid">
                {{-- Day headers --}}
                @foreach(['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] as $dayName)
                    <div class="calendar-day-header">{{ $dayName }}</div>
                @endforeach

                {{-- Day cells --}}
                @php $current = $startOfCal->copy(); @endphp
                @while($current <= $endOfCal)
                    @php
                        $dateKey = $current->format('Y-m-d');
                        $isToday = $current->isToday();
                        $isCurrentMonth = $current->month === $calDate->month;
                        $dayTasks = $tasksByDate->get($dateKey, collect());
                    @endphp
                    <div class="calendar-day {{ $isToday ? 'is-today' : '' }} {{ !$isCurrentMonth ? 'other-month' : '' }}">
                        <div class="calendar-day-number">{{ $current->day }}</div>
                        @foreach($dayTasks->take(3) as $dayTask)
                            <a href="{{ route('tasks.show', $dayTask) }}" class="calendar-task" title="{{ $dayTask->title }}" style="border-left-color:{{ $dayTask->priority_color }};">
                                <span class="calendar-task-title">{{ Str::limit($dayTask->title, 18) }}</span>
                            </a>
                        @endforeach
                        @if($dayTasks->count() > 3)
                            <div class="calendar-task-more">+{{ $dayTasks->count() - 3 }} more</div>
                        @endif
                    </div>
                    @php $current->addDay(); @endphp
                @endwhile
            </div>
        </div>
    </div>
    @endif

    {{-- ACTIVITY VIEW --}}
    @if($view == 'activity')
    <div class="card" style="margin-top:8px;">
        <div class="card-header">
            <h3 class="card-header-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;margin-right:6px;vertical-align:middle;color:var(--accent-primary);"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
                Project Activity
            </h3>
            <span class="badge badge-secondary">{{ $activities->count() }} events</span>
        </div>
        <div class="card-body" style="padding:20px 24px;">
            @if($activities->count())
            <div class="activity-timeline">
                @foreach($activities as $activity)
                    <div class="activity-timeline-item" data-action="{{ $activity->action }}">
                        <div class="activity-timeline-connector">
                            <div class="activity-timeline-dot" style="background:{{ $activity->color }}1a;color:{{ $activity->color }};border-color:{{ $activity->color }}33;">
                                {!! $activity->svg_icon !!}
                            </div>
                            @if(!$loop->last)
                                <div class="activity-timeline-line"></div>
                            @endif
                        </div>
                        <div class="activity-timeline-content">
                            <div class="activity-timeline-text">
                                <strong>{{ $activity->causer->name ?? 'System' }}</strong>
                                <span>{{ $activity->description }}</span>
                            </div>
                            <div class="activity-timeline-meta">
                                <span class="activity-timeline-badge" style="background:{{ $activity->color }}1a;color:{{ $activity->color }};">{{ ucfirst(str_replace('_', ' ', $activity->action)) }}</span>
                                <span class="activity-timeline-time">{{ $activity->created_at->diffForHumans() }}</span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @else
            <div class="empty-state">
                <div class="empty-state-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
                </div>
                <div class="empty-state-title">No activity yet</div>
                <div class="empty-state-text">Activity will appear here as changes are made to this project.</div>
            </div>
            @endif
        </div>
    </div>
    @endif
@endsection

@push('scripts')
<script>
const BULK_CSRF = document.querySelector('meta[name="csrf-token"]').content;

// Bulk Actions Alpine component
function bulkActions() {
    return {
        selectedIds: [],
        allTaskIds: [{{ $tasks->pluck('id')->implode(',') }}],

        toggleTask(id, checked) {
            if (checked) {
                if (!this.selectedIds.includes(id)) this.selectedIds.push(id);
            } else {
                this.selectedIds = this.selectedIds.filter(i => i !== id);
            }
        },

        toggleAll(checked) {
            this.selectedIds = checked ? [...this.allTaskIds] : [];
        },

        clearSelection() {
            this.selectedIds = [];
        },

        performAction(action, value) {
            if (!this.selectedIds.length) return;
            if (action === 'delete' && !confirm(`Delete ${this.selectedIds.length} task(s)?`)) return;
            if (!value && action !== 'delete') return;

            fetch('/tasks/bulk-action', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': BULK_CSRF,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ task_ids: this.selectedIds, action: action, value: value })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                }
            })
            .catch(err => console.error('Bulk action error:', err));
        }
    };
}

document.addEventListener('DOMContentLoaded', function() {
    // Initialize SortableJS on each kanban column
    const columns = document.querySelectorAll('.kanban-column-body');
    if (!columns.length) return;

    const CSRF = document.querySelector('meta[name="csrf-token"]').content;

    columns.forEach(col => {
        new Sortable(col, {
            group: 'kanban',
            animation: 250,
            easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
            ghostClass: 'kanban-ghost',
            chosenClass: 'kanban-chosen',
            dragClass: 'kanban-drag',
            fallbackOnBody: true,
            swapThreshold: 0.65,
            delay: 50,
            delayOnTouchOnly: true,

            onStart: function() {
                window._dragging = true;
                document.body.classList.add('kanban-dragging');
            },

            onEnd: function(evt) {
                setTimeout(() => { window._dragging = false; }, 100);
                document.body.classList.remove('kanban-dragging');

                const card = evt.item;
                const taskId = card.dataset.taskId;
                const newStatus = evt.to.dataset.status;
                const oldStatus = evt.from.dataset.status;

                if (oldStatus !== newStatus) {
                    updateColumnCount(oldStatus, -1);
                    updateColumnCount(newStatus, 1);
                    if (newStatus === 'completed') {
                        card.style.opacity = '0.7';
                    } else {
                        card.style.opacity = '1';
                    }
                }

                fetch(`/tasks/${taskId}/status`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ status: newStatus })
                })
                .then(res => res.json())
                .then(data => {
                    if (!data.success) {
                        evt.from.insertBefore(card, evt.from.children[evt.oldIndex]);
                        if (oldStatus !== newStatus) {
                            updateColumnCount(oldStatus, 1);
                            updateColumnCount(newStatus, -1);
                        }
                    }
                })
                .catch(() => {
                    evt.from.insertBefore(card, evt.from.children[evt.oldIndex]);
                    if (oldStatus !== newStatus) {
                        updateColumnCount(oldStatus, 1);
                        updateColumnCount(newStatus, -1);
                    }
                });
            }
        });
    });

    function updateColumnCount(status, delta) {
        const countEl = document.getElementById('count-' + status);
        if (countEl) {
            const current = parseInt(countEl.textContent) || 0;
            countEl.textContent = Math.max(0, current + delta);
            countEl.style.transform = 'scale(1.3)';
            setTimeout(() => { countEl.style.transform = 'scale(1)'; }, 200);
        }
    }
});
</script>
@endpush