<div>
    <button type="button" class="noti-icon position-relative btn btn-link text-white p-0 px-3" wire:click="showTaskManager">
        <i class="mdi mdi-checkbox-marked-circle-outline"></i>

        <!-- Red (Overdue) -->
        @if($overdue > 0)
            <span class="position-absolute top-100 start-100 translate-middle badge rounded-pill bg-danger" style="width: 19px;height: 16px">
            {{ $overdue }}
        </span>
        @endif

        <!-- Yellow (Soon) -->
        @if($soon > 0)
            <span class="position-absolute top-50 start-100 translate-middle badge rounded-pill bg-warning text-dark" style="width: 19px;height: 16px">
            {{ $soon }}
        </span>
        @endif

        <!-- Green (Good) -->
        @if($good > 0)
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success" style="width: 19px;height: 16px">
            {{ $good }}
        </span>
        @endif
    </button>


    @if($open)
        <div class="offcanvas offcanvas-end show"  tabindex="-1" style="--bs-offcanvas-width: 600px;" role="dialog">
            <div class="offcanvas-header">
                <h5 id="offcanvasRightLabel">Task Manager</h5>
                <button type="button" class="btn-close text-dark" wire:click.prevent="hideTaskManager"></button>
            </div>

            <div class="offcanvas-body  bg-light">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div>
                                    <h4 class="mb-1 mt-1 text-danger">{{ $overdue }}</h4>
                                    <p class="text-muted mb-0">Overdue</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div>
                                    <h4 class="mb-1 mt-1 text-warning">{{ $soon }}</h4>
                                    <p class="text-muted mb-0">Due Soon</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div>
                                    <h4 class="mb-1 mt-1 text-success">{{ $good }}</h4>
                                    <p class="text-muted mb-0">Future</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex flex-wrap gap-2 justify-content-between align-center mb-2">
                    <h5 class="fw-bold">My Tasks</h5>
                    <button type="button" class="btn btn-primary btn-sm" wire:click="showAddTask">Add Task</button>
                </div>

                @if($showAdd)
                    <form method="post" wire:submit.prevent="addTask" class="mb-2">
                        @csrf
                        <x-ui.input name="title" label="Title"/>
                        <x-ui.input name="description" label="Description"/>
                        <x-ui.input type="datetime-local" name="due_at" label="Due At"/>


                        <button type="submit" class="btn btn-primary w-md mt-2">Add</button>
                    </form>
                @endif

                @if($showEdit)
                    <form method="post" wire:submit.prevent="updateTask" class="mb-2 p-3 bg-white rounded shadow-sm">
                        @csrf
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <strong>Edit Task</strong>
                            <button type="button" class="btn-close" wire:click="hideEditTask"></button>
                        </div>
                        <x-ui.input name="title" label="Title"/>
                        <x-ui.input name="description" label="Description"/>
                        <x-ui.input type="datetime-local" name="due_at" label="Due At"/>

                        <div class="d-flex gap-2 mt-2">
                            <button type="submit" class="btn btn-primary">Save</button>
                            <button type="button" class="btn btn-light" wire:click="hideEditTask">Cancel</button>
                        </div>
                    </form>
                @endif

                <div class="list-group">
                @forelse($tasks as $task)
                    @php
                        $isOverdue = $task->due_at?->isPast();
                        $isSoon    = $task->due_at?->isBetween(now(), now()->addHours(48));
                    @endphp
                    <div class="list-group-item mb-2 rounded position-relative shadow
                                {{ $isOverdue ? 'border-start border-danger border-4' : ($isSoon ? 'border-start border-warning border-4' : '') }}">
                        <div class="d-flex align-items-center gap-2 flex-wrap mb-1 pe-5">
                            @if($task->owner)
                                <a wire:navigate href="{{ route('clients.show', $task->owner) }}"
                                   class="badge bg-primary text-decoration-none"
                                   title="Open client">
                                    <i class="mdi mdi-account me-1"></i>
                                    {{ $task->owner->name_first }} {{ $task->owner->name_last }}
                                </a>
                            @else
                                <span class="badge bg-secondary-subtle text-secondary border"
                                      title="Not linked to a client">
                                    <i class="mdi mdi-account-off me-1"></i> No client
                                </span>
                            @endif
                            <span class="fw-semibold">{{ $task->title }}</span>
                        </div>

                        @if($task->description)
                            <small class="text-muted d-block">{{ $task->description }}</small>
                        @endif

                        <small class="text-primary">
                            Due {{ $task->due_at ? $task->due_at->format('d/m/Y H:i') : '—' }}
                            @if($task->due_at)
                                <span class="text-muted">({{ $task->due_at->diffForHumans() }})</span>
                            @endif
                        </small>

                        <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                            <i class="mdi mdi-pencil text-primary btn btn-sm"
                               title="Edit"
                               wire:click="editTask({{ $task->id }})"></i>
                            <i class="mdi mdi-check-circle action-icon text-success btn btn-sm"
                               title="Mark complete"
                               wire:click="completeTask({{ $task->id }})"></i>
                            <i class="mdi mdi-trash-can text-danger btn btn-sm"
                               title="Delete"
                               wire:confirm="Remove this task?"
                               wire:click="deleteTask({{ $task->id }})"></i>
                        </div>
                    </div>
                @empty
                    <div class="text-center text-muted py-4">
                        <i class="mdi mdi-clipboard-check-outline fs-1 d-block"></i>
                        <span class="small">No outstanding tasks.</span>
                    </div>
                @endforelse
            </div>
            </div>
        </div>
    @endif
</div>
