@extends('workspace.layouts.workspace')
@section('title', 'My Tasks')
@section('page-title', 'My Tasks')

@section('ws-content')

{{-- Add task form --}}
<div class="ws-card" style="margin-bottom:1.25rem;">
    <h3 style="font-family:'Fraunces',serif; font-size:0.9rem; font-weight:700; margin-bottom:0.85rem;">Add New Task</h3>
    <form action="{{ route('workspace.tasks.store') }}" method="POST">
        @csrf
        <div style="display:grid; grid-template-columns:1fr auto auto auto; gap:0.6rem; align-items:end;">
            <div>
                <label class="form-label">Task Title *</label>
                <input type="text" name="title" placeholder="Describe the task…" class="form-field" required value="{{ old('title') }}">
            </div>
            <div>
                <label class="form-label">Priority</label>
                <select name="priority" class="form-field">
                    <option value="low">Low</option>
                    <option value="medium" selected>Medium</option>
                    <option value="high">High</option>
                </select>
            </div>
            <div>
                <label class="form-label">Due Date</label>
                <input type="date" name="due_date" class="form-field" min="{{ today()->format('Y-m-d') }}">
            </div>
            <div>
                <label class="form-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" style="width:0.8rem;height:0.8rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
                    Add
                </button>
            </div>
        </div>
        <div style="margin-top:0.6rem;">
            <label class="form-label">Description (optional)</label>
            <textarea name="description" rows="2" class="form-field" placeholder="Additional details…" style="resize:none;">{{ old('description') }}</textarea>
        </div>
    </form>
</div>

{{-- Kanban board --}}
<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;">

    @foreach(['pending'=>'Pending','in_progress'=>'In Progress','done'=>'Done'] as $status => $label)
    @php
        $statusTasks = $tasks[$status] ?? collect();
        $colors = ['pending'=>'#f59e0b','in_progress'=>'#2d3aff','done'=>'#10b981'];
        $col = $colors[$status];
    @endphp
    <div>
        {{-- Column header --}}
        <div style="display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem;">
            <div style="width:8px;height:8px;border-radius:999px;background:{{ $col }};"></div>
            <span style="font-size:0.75rem; font-weight:600; color:#0f0f14;">{{ $label }}</span>
            <span style="margin-left:auto; font-size:0.68rem; font-weight:600; color:#9ca3af; background:#f3f4f6; border-radius:999px; padding:0.1rem 0.5rem;">{{ $statusTasks->count() }}</span>
        </div>

        {{-- Task cards --}}
        <div style="display:flex; flex-direction:column; gap:0.5rem; min-height:4rem;">
            @forelse($statusTasks as $task)
            <div class="ws-card" style="padding:0.9rem; position:relative;">
                {{-- Priority indicator --}}
                <div style="position:absolute; top:0; left:0; bottom:0; width:3px; border-radius:12px 0 0 12px; background:{{ $task->priority_color }};"></div>
                <div style="padding-left:0.5rem;">
                    <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:0.5rem; margin-bottom:0.5rem;">
                        <p style="font-size:0.8rem; font-weight:600; color:{{ $task->status==='done' ? '#9ca3af' : '#0f0f14' }}; line-height:1.35; {{ $task->status==='done' ? 'text-decoration:line-through;' : '' }} flex:1;">{{ $task->title }}</p>
                        <div style="display:flex; gap:0.3rem; flex-shrink:0;">
                            {{-- Toggle done --}}
                            <form action="{{ route('workspace.tasks.toggle', $task) }}" method="POST">
                                @csrf @method('PATCH')
                                <button type="submit" class="btn btn-xs {{ $task->status==='done' ? 'btn-outline' : 'btn-primary' }}" title="{{ $task->status==='done' ? 'Mark pending' : 'Mark done' }}">
                                    {{ $task->status==='done' ? '↩' : '✓' }}
                                </button>
                            </form>
                            {{-- Delete --}}
                            <form action="{{ route('workspace.tasks.destroy', $task) }}" method="POST" onsubmit="return confirm('Delete this task?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-xs btn-danger" title="Delete">×</button>
                            </form>
                        </div>
                    </div>

                    @if($task->description)
                    <p style="font-size:0.72rem; color:#9ca3af; line-height:1.5; margin-bottom:0.5rem;">{{ Str::limit($task->description, 80) }}</p>
                    @endif

                    <div style="display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;">
                        <span class="pill priority-{{ $task->priority }}">{{ ucfirst($task->priority) }}</span>
                        @if($task->due_date)
                        <span style="font-size:0.62rem; font-weight:500; color:{{ $task->due_date->isPast() && $task->status!=='done' ? '#dc2626' : '#9ca3af' }};">
                            {{ $task->due_date->isPast() && $task->status!=='done' ? '⚠' : '📅' }} {{ $task->due_date->format('d M') }}
                        </span>
                        @endif
                        @if($task->status==='done' && $task->completed_at)
                        <span style="font-size:0.62rem; color:#10b981;">✓ {{ $task->completed_at->diffForHumans() }}</span>
                        @endif
                    </div>

                    {{-- Move to in progress button (for pending tasks) --}}
                    @if($task->status === 'pending')
                    <form action="{{ route('workspace.tasks.update', $task) }}" method="POST" style="margin-top:0.5rem;">
                        @csrf @method('PATCH')
                        <input type="hidden" name="status" value="in_progress">
                        <button type="submit" class="btn btn-xs btn-outline" style="font-size:0.62rem;">→ Start</button>
                    </form>
                    @endif
                </div>
            </div>
            @empty
            <div style="border:1.5px dashed #e5e7eb; border-radius:10px; padding:1.5rem; text-align:center;">
                <p style="font-size:0.72rem; color:#d1d5db;">No {{ strtolower($label) }} tasks</p>
            </div>
            @endforelse
        </div>
    </div>
    @endforeach
</div>

@endsection