@extends('layouts.app')
@section('title', $task->title)
@section('content')
<x-ui.page-toolbar
    :title="$task->title"
    description="Task assignment and permanent status history."
    :breadcrumbs="[
        ['label' => 'Dashboard', 'url' => route('dashboard')],
        ['label' => 'Tasks', 'url' => route('tasks.index')],
        ['label' => $task->title],
    ]"
>
    <x-slot:actions>
        @if(auth()->user()?->can('update', $task) && ! in_array($task->status, ['completed', 'cancelled'], true))
            <a class="mf-btn" href="{{ route('tasks.edit', $task) }}">Edit</a>
        @endif
    </x-slot:actions>
</x-ui.page-toolbar>

<div class="grid gap-4 lg:grid-cols-3">
    <div class="mf-card mf-card-body lg:col-span-2">
        <div class="grid gap-3 sm:grid-cols-2">
            <div>
                <div class="text-xs text-muted-foreground">Status</div>
                <div class="mt-1 font-medium">{{ str($task->status)->replace('_', ' ')->headline() }}</div>
            </div>
            <div>
                <div class="text-xs text-muted-foreground">Priority</div>
                <div class="mt-1 font-medium">{{ str($task->priority)->headline() }}</div>
            </div>
            <div>
                <div class="text-xs text-muted-foreground">Category</div>
                <div class="mt-1">{{ str($task->category)->replace('_', ' ')->headline() }}</div>
            </div>
            <div>
                <div class="text-xs text-muted-foreground">Due</div>
                <div class="mt-1">{{ $task->due_at?->format('d M Y H:i') ?? 'No due date' }}</div>
            </div>
            <div>
                <div class="text-xs text-muted-foreground">Assigned to</div>
                <div class="mt-1">{{ $task->assignee?->name ?? 'Unassigned' }}</div>
            </div>
            <div>
                <div class="text-xs text-muted-foreground">Branch</div>
                <div class="mt-1">{{ $task->branch?->name }}</div>
            </div>
        </div>

        <div class="mt-4 border-t pt-4">
            <div class="text-xs text-muted-foreground">Description</div>
            <div class="mt-1 whitespace-pre-line text-sm">{{ $task->description ?: 'No description.' }}</div>
        </div>
    </div>

    <div class="mf-card mf-card-body">
        <div class="text-sm font-semibold">Progress task</div>

        @if(auth()->user()?->can('updateStatus', $task))
            @if(! in_array($task->status, ['completed', 'cancelled'], true))
                <form method="POST" action="{{ route('tasks.status', $task) }}" class="mt-3 space-y-2">
                    @csrf
                    <select class="mf-select" name="status">
                        @foreach(['pending', 'in_progress', 'completed', 'cancelled'] as $status)
                            <option value="{{ $status }}" @selected($task->status === $status)>
                                {{ str($status)->replace('_', ' ')->headline() }}
                            </option>
                        @endforeach
                    </select>
                    <button class="mf-btn mf-btn-primary w-full">Update status</button>
                </form>
            @else
                <div class="mt-3 text-sm text-muted-foreground">This task is closed permanently.</div>
            @endif
        @else
            <div class="mt-3 text-sm text-muted-foreground">
                Only the assignee or authorized task managers can update this task.
            </div>
        @endif

        <div class="mt-4 border-t pt-3 text-xs text-muted-foreground space-y-1">
            <div>Created by: {{ $task->creator?->name ?? 'System automation' }}</div>

            @if($task->completed_at)
                <div>Completed: {{ $task->completed_at->format('d M Y H:i') }} · {{ $task->completedBy?->name }}</div>
            @endif

            @if($task->cancelled_at)
                <div>Cancelled: {{ $task->cancelled_at->format('d M Y H:i') }} · {{ $task->cancelledBy?->name }}</div>
            @endif

            @if($task->automation_key)
                <div>Automated task</div>
            @endif
        </div>
    </div>
</div>
@endsection
