@extends('layouts.app')
@section('title', 'Tasks')

@section('content')
    <x-page-header title="Tasks" :lede="$counts['overdue'].' overdue · '.$counts['today'].' due today'" />

    <div class="tabs">
        @foreach (['' => 'All open', 'today' => 'Today', 'week' => 'This week', 'overdue' => 'Overdue'] as $key => $label)
            <a class="{{ request('due', '') === $key ? 'active' : '' }}"
               href="{{ route('app.tasks.index', array_filter(['due' => $key ?: null])) }}">{{ $label }}</a>
        @endforeach
    </div>

    <div class="grid two">
        <x-card :flush="true">
            <form class="filters" method="GET" data-autosubmit>
                <input type="hidden" name="due" value="{{ request('due') }}">
                <div class="field search"><input type="search" name="q" value="{{ request('q') }}" placeholder="Search tasks"></div>
                <div class="field">
                    <select name="assignee">
                        <option value="">Anyone</option>
                        @foreach ($owners as $id => $name)<option value="{{ $id }}" @selected((int) request('assignee') === $id)>{{ $name }}</option>@endforeach
                    </select>
                </div>
                <div class="field">
                    <select name="priority">
                        <option value="">Any priority</option>
                        @foreach (['high' => 'High', 'medium' => 'Medium', 'low' => 'Low'] as $key => $label)
                            <option value="{{ $key }}" @selected(request('priority') === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <noscript><button class="btn secondary" type="submit">Filter</button></noscript>
            </form>

            @forelse ($tasks as $task)
                <div class="row between" style="padding:11px 18px;border-bottom:1px solid var(--line);gap:12px">
                    <form method="POST" action="{{ route('app.tasks.update', $task) }}" style="display:flex;gap:10px;align-items:flex-start;flex:1">
                        @csrf @method('PUT')
                        <input type="hidden" name="status"
                               value="{{ $task->status === 'completed' ? 'pending' : 'completed' }}">
                        <button type="submit" aria-label="Toggle complete"
                                style="width:17px;height:17px;margin-top:2px;border-radius:4px;cursor:pointer;flex:0 0 auto;
                                       border:1.5px solid {{ $task->status === 'completed' ? 'var(--positive)' : 'var(--line-strong)' }};
                                       background:{{ $task->status === 'completed' ? 'var(--positive)' : 'transparent' }}"></button>
                        <span class="grow">
                            <span style="color:var(--ink-900);{{ $task->status === 'completed' ? 'text-decoration:line-through;opacity:.55' : '' }}">
                                {{ $task->title }}
                            </span>
                            <span class="sub">
                                {{ $task->assignee?->name }}
                                @if ($task->due_at)
                                    · <span style="{{ $task->due_at->isPast() && $task->status !== 'completed' ? 'color:var(--negative)' : '' }}">
                                        {{ $task->due_at->diffForHumans() }}
                                    </span>
                                @endif
                            </span>
                        </span>
                    </form>
                    <x-badge :tone="$task->priority === 'high' ? 'negative' : ($task->priority === 'low' ? 'muted' : 'warning')">
                        {{ ucfirst($task->priority) }}
                    </x-badge>
                </div>
            @empty
                <x-empty title="Nothing here" message="No tasks match this view. That is either very good news or a filter." />
            @endforelse

            <x-slot:foot>{{ $tasks->links() }}</x-slot:foot>
        </x-card>

        @can('create', \App\Models\Task::class)
            <x-card title="Add a task">
                <form method="POST" action="{{ route('app.tasks.store') }}">
                    @csrf
                    <x-field name="title" label="What needs doing" required placeholder="Call back about the proposal" />
                    <div class="grid form">
                        <x-field name="due_at" label="Due" type="datetime-local" />
                        <x-field name="priority" label="Priority" type="select"
                                 :options="['low' => 'Low', 'medium' => 'Medium', 'high' => 'High']" value="medium" required />
                    </div>
                    <x-field name="assigned_to" label="Assign to" type="select" :options="$owners" :value="auth()->id()" />
                    <x-field name="description" label="Detail" type="textarea" />
                    <button class="btn primary" type="submit">Add task</button>
                </form>
            </x-card>
        @endcan
    </div>
@endsection