<div>
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-4">
                <h5 class="fw-bold mb-0">Tasks</h5>
                <button type="button" class="btn btn-primary btn-sm" wire:click="showAddTask">
                    <i class="mdi mdi-plus"></i>
                </button>
            </div>
            <!-- Filter Summary Cards -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="card mb-0 shadow-sm transition {{ $filter === 'overdue' ? 'border-danger border-2' : 'border-0' }}"
                         style="cursor: pointer"
                         wire:click="setFilter('overdue')">
                        <div class="card-body text-center py-3">
                            <h4 class="mb-1 mt-1 text-danger">{{ $this->counts['overdue'] }}</h4>
                            <p class="text-muted mb-0">Overdue</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-0 shadow-sm transition {{ $filter === 'soon' ? 'border-warning border-2' : 'border-0' }}"
                         style="cursor: pointer"
                         wire:click="setFilter('soon')">
                        <div class="card-body text-center py-3">
                            <h4 class="mb-1 mt-1 text-warning">{{ $this->counts['soon'] }}</h4>
                            <p class="text-muted mb-0">Due Soon</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-0 shadow-sm transition {{ $filter === 'good' ? 'border-success border-2' : 'border-0' }}"
                         style="cursor: pointer"
                         wire:click="setFilter('good')">
                        <div class="card-body text-center py-3">
                            <h4 class="mb-1 mt-1 text-success">{{ $this->counts['good'] }}</h4>
                            <p class="text-muted mb-0">Future</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Active Filter Badge -->
            @if($filter !== 'all')
                <div class="d-flex align-items-center mb-3">
                    <span class="badge bg-secondary me-2 px-2 py-1">Filtered: {{ ucfirst($filter) }}</span>
                    <a href="#" wire:click.prevent="setFilter('all')" class="text-decoration-none text-sm"><i class="mdi mdi-close"></i> Clear</a>
                </div>
            @endif

            <!-- Add Task Offcanvas -->
            <div class="offcanvas offcanvas-end {{ $showAdd ? 'show' : '' }}" tabindex="-1" style="visibility: {{ $showAdd ? 'visible' : 'hidden' }}; shadow: 0 5px 15px rgba(0,0,0,.5);">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title fw-bold">Assign New Task</h5>
                    <button type="button" class="btn-close text-reset" wire:click="hideAddTask"></button>
                </div>
                <div class="offcanvas-body">
                    <form method="post" wire:submit.prevent="addTask">
                        @csrf
                        <div class="mb-3">
                            <x-ui.input name="title" label="Title" placeholder="What needs to be done?"/>
                        </div>
                        <div class="mb-3">
                            <x-ui.input name="description" label="Description" placeholder="Add more details..."/>
                        </div>
                        <div class="mb-4">
                            <x-ui.input type="datetime-local" name="due_at" label="Due At"/>
                        </div>
                        @can('tasks.admin')
                        <div class="mb-4">
                            <x-ui.select :options="$this->users" name="assigned_to" label="Assign To"/>
                        </div>
                        @endcan


                        <div class="d-grid gap-2">
                            <x-ui.button type="submit">Save</x-ui.button>
                            <button type="button" class="btn btn-light" wire:click="hideAddTask">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
            @if($showAdd)
                <div class="offcanvas-backdrop fade show" wire:click="hideAddTask"></div>
            @endif

            <!-- Table -->
            <div class="table-responsive shadow-sm">
                <table class="table table-nowrap align-middle mb-0 bg-white">
                    <thead class="table-light">
                    <tr>
                        <th scope="col">Task</th>
                        <th scope="col">Due At</th>
                        <th scope="col" class="text-center">Assignee</th>
                        <th scope="col" class="text-center">Status</th>
                        <th scope="col" class="text-end">Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($this->tasks as $task)
                        <tr>
                            <td>
                                <h5 class="font-size-14 mb-1 fw-semibold text-dark">{{ $task->title }}</h5>
                                <p class="text-muted mb-0 font-size-13">{{ $task->description ?? 'No description' }}</p>
                            </td>
                            <td>
                                @if($task->due_at)
                                    <span>{{ $task->due_at->format('d/m/Y H:i') }}</span><br>
                                    <span class="text-primary">{{ $task->due_at->diffForHumans() }}</span>
                                @else
                                    <span class="text-muted">No Due Date</span>
                                @endif
                            </td>
                            <td class="text-center">{{ $task->user->name_first }} {{ $task->user->name_last }}</td>
                            <td class="text-center">
                                @if($task->due_at && $task->due_at->isPast())
                                    <span class="badge rounded-pill bg-danger">Overdue</span>
                                @elseif($task->due_at && $task->due_at->isBefore(now()->addDays(2)))
                                    <span class="badge rounded-pill bg-warning text-dark">Soon</span>
                                @elseif($task->due_at)
                                    <span class="badge rounded-pill bg-success">Future</span>
                                @else
                                    <span class="badge rounded-pill bg-secondary">Anytime</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <button class="btn btn-sm"
                                        wire:click="completeTask({{ $task->id }})">
                                    <i class="mdi mdi-check-circle-outline text-success"></i>
                                </button>
                                <button class="btn btn-sm"
                                        wire:click="deleteTask({{ $task->id }})">
                                    <i class="mdi mdi-trash-can text-danger"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center py-5">
                                <i class="mdi mdi-clipboard-text-outline display-4 d-block text-black-50 mb-2"></i>
                                No tasks found.
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination Links -->
            <div class="mt-3">
                {{ $this->tasks->links() }}
            </div>
        </div>
    </div>
</div>