@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <x-chm.layout.page title="Todo List" subtitle="Track your tasks, priorities, and due dates." icon="bx bx-task">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('admin.dashboard')">Home</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">Todo List</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <div class="row g-3 mb-4">
            <div class="col-md-4"><x-chm.stat-card label="Active" :value="$stats['active']" icon="bx bx-list-check" color="primary" /></div>
            <div class="col-md-4"><x-chm.stat-card label="Completed" :value="$stats['completed']" icon="bx bx-check-circle" color="success" /></div>
            <div class="col-md-4"><x-chm.stat-card label="Overdue" :value="$stats['overdue']" icon="bx bx-error" color="warning" /></div>
        </div>

        <div class="row g-4">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h6 class="mb-3">Add task</h6>
                        <form method="POST" action="{{ route('application.todos.store') }}">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Title</label>
                                <input type="text" name="title" class="form-control" required maxlength="255" value="{{ old('title') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea name="description" class="form-control" rows="3" maxlength="2000">{{ old('description') }}</textarea>
                            </div>
                            <div class="row g-2 mb-3">
                                <div class="col-6">
                                    <label class="form-label">Priority</label>
                                    <select name="priority" class="form-select">
                                        <option value="low">Low</option>
                                        <option value="medium" selected>Medium</option>
                                        <option value="high">High</option>
                                    </select>
                                </div>
                                <div class="col-6">
                                    <label class="form-label">Due date</label>
                                    <input type="date" name="due_date" class="form-control" value="{{ old('due_date') }}">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary w-100"><i class="bx bx-plus"></i> Add task</button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <ul class="nav nav-tabs chm-tabs mb-3">
                    <li class="nav-item"><a class="nav-link {{ $filter === 'active' ? 'active' : '' }}" href="{{ route('application.todos.index', ['filter' => 'active']) }}">Active</a></li>
                    <li class="nav-item"><a class="nav-link {{ $filter === 'completed' ? 'active' : '' }}" href="{{ route('application.todos.index', ['filter' => 'completed']) }}">Completed</a></li>
                    <li class="nav-item"><a class="nav-link {{ $filter === 'all' ? 'active' : '' }}" href="{{ route('application.todos.index', ['filter' => 'all']) }}">All</a></li>
                </ul>

                @forelse($todos as $todo)
                    <div class="card chm-todo-item mb-2 {{ $todo->isCompleted() ? 'chm-todo-completed' : '' }}">
                        <div class="card-body d-flex gap-3 align-items-start">
                            <form method="POST" action="{{ route('application.todos.update', $todo->id) }}">
                                @csrf @method('PATCH')
                                <input type="hidden" name="completed" value="{{ $todo->isCompleted() ? '0' : '1' }}">
                                <button type="submit" class="btn btn-sm {{ $todo->isCompleted() ? 'btn-success' : 'btn-outline-secondary' }} rounded-circle chm-todo-check">
                                    <i class="bx {{ $todo->isCompleted() ? 'bx-check' : 'bx-circle' }}"></i>
                                </button>
                            </form>
                            <div class="flex-grow-1">
                                <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                                    <strong class="{{ $todo->isCompleted() ? 'text-decoration-line-through text-muted' : '' }}">{{ $todo->title }}</strong>
                                    <span class="badge chm-todo-priority-{{ $todo->priority }}">{{ ucfirst($todo->priority) }}</span>
                                    @if($todo->due_date)
                                        <span class="small text-muted"><i class="bx bx-calendar"></i> {{ $todo->due_date->format('M j, Y') }}</span>
                                    @endif
                                </div>
                                @if($todo->description)
                                    <p class="small text-muted mb-0">{{ $todo->description }}</p>
                                @endif
                            </div>
                            <form method="POST" action="{{ route('application.todos.destroy', $todo->id) }}" class="chm-confirm-delete-form" data-confirm-text="Delete this task?">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bx bx-trash"></i></button>
                            </form>
                        </div>
                    </div>
                @empty
                    <x-chm.empty-state icon="bx bx-task" title="No tasks" message="Add your first task using the form on the left." />
                @endforelse
            </div>
        </div>
    </x-chm.layout.page>
</div>

@endsection