<div class="mt-4 me-4">
    <button type="button" class="noti-icon position-relative" wire:click="showTaskManager" style="background: none; border: none; padding: 0 16px; color: white;">
        <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

                <div class="list-group">
                @foreach($tasks as $task)
                    <div class="list-group-item mb-2 rounded position-relative shadow">
                        <p class="mb-1 fw-semibold">{{ $task->title }}</p>
                        <small class="text-muted">{{ $task->description }}</small><br>
                        <small class="text-primary">Due {{ $task->due_at->format('d/m/Y H:i') }}</small>

                        <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                            <i class="mdi mdi-check-circle action-icon text-success btn btn-sm" wire:click="completeTask({{ $task->id }})"></i>
                            <i class="mdi mdi-trash-can  text-danger btn btn-sm" wire:click="deleteTask({{ $task->id }})"></i>
                        </div>
                    </div>
                @endforeach
            </div>
            </div>
        </div>
    @endif
</div>
