@php
use Carbon\Carbon;
@endphp
<div x-data="{taskId: ''}">
    <flux:heading size="xl" class="text-center">TO-DO: {{$list->name}}</flux:heading>
    <form wire:submit="create" class="my-8">
        <flux:input wire:model="task_content" placeholder="Create a new task" />
        <flux:error name="task_content" />
    </form>
    @foreach ($tasks->where('completed', false) as $t)
    <div class="task-card" wire:key="{{$t->id}}">
        <div class="flex gap-4 items-center">
            <flux:button icon="check" class="cursor-pointer" wire:click="toggleComplete({{$t->id}})" />
            <flux:text variant="strong">{{$t->content}}</flux:text>
        </div>
        <div class="flex gap-1">
            <flux:modal.trigger name="delete-task">
                <flux:button inset icon="trash" class="cursor-pointer" x-on:click="taskId = {{$t->id}}" variant="subtle"
                    class="cursor-pointer" />
            </flux:modal.trigger>
        </div>
    </div>
    @endforeach
    <div class="my-8">
        <flux:heading size="md">Completed</flux:heading>
        <flux:separator class="mt-2" />
    </div>
    @php
    $completeGroups = $tasks->where('completed', true)
    ->groupBy(
    fn($t) => $t->completed_at->toDateString()
    )->sortKeysDesc();
    @endphp
    @foreach ($completeGroups as $date => $tasks)
    <div x-data="{showSummary: false}" x-cloak>
        <div class="flex mb-4 gap-2 items-center">
            <flux:heading size="lg">{{ Carbon::parse($date)->format('D M d, Y') }}</flux:heading>
            @if (Carbon::parse($date)->isSameDay(now()))
            <flux:button x-on:click="showSummary = !showSummary" variant="filled" class="cursor-pointer" icon="eye"
                size="xs">
                <span x-show="!showSummary">Summary</span>
                <span x-show="showSummary">Hide Summary</span>
            </flux:button>
            @endif
        </div>
        <div x-show="showSummary" x-cloak>
            <ul class="list-disc list-inside my-4">
                @foreach ($tasks as $t)
                <li class="">{{$t->content}}</li>
                @endforeach
            </ul>
        </div>
    </div>
    @if (Carbon::parse($date)->isSameDay(now()))
    @foreach ($tasks as $t)
    <div class="task-card opacity-50 hover:opacity-100" wire:key="{{$t->id}}">
        <div class="flex gap-2 items-center">
            <flux:button icon="check" class="cursor-pointer" wire:click="toggleComplete({{$t->id}})" variant="primary"
                color="green" />
            <flux:text class="line-through">{{$t->content}}</flux:text>
        </div>
        <div class="flex gap-1">
            <flux:modal.trigger name="delete-task">
                <flux:button inset icon="trash" class="cursor-pointer" x-on:click="taskId = {{$t->id}}" variant="subtle"
                    class="cursor-pointer" />
            </flux:modal.trigger>
        </div>
    </div>
    @endforeach
    @else
    <ul class="list-disc list-inside my-4">
        @foreach ($tasks as $t)
        <li class="">{{$t->content}}</li>
        @endforeach
    </ul>
    @endif
    @endforeach
    <flux:modal name="delete-task" class="min-w-[22rem]">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg">Delete task?</flux:heading>
            </div>
            <div class="flex gap-2">
                <flux:modal.close>
                    <flux:button variant="ghost">Cancel</flux:button>
                </flux:modal.close>
                <flux:button class="cursor-pointer"
                    x-on:click="() => {$wire.delete(taskId); $flux.modal('delete-task').close()}" type="submit"
                    variant="danger">Delete task</flux:button>
            </div>
        </div>
    </flux:modal>
</div>