{{-- resources/views/todo/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Todo List')

@section('css')
<style>
    .todo-card {
        transition: all 0.3s ease;
    }
    .todo-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .todo-completed {
        text-decoration: line-through;
        opacity: 0.7;
    }
    .todo-actions {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .todo-item:hover .todo-actions {
        opacity: 1;
    }
    .status-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
    }
    .status-completed {
        background: #d1fae5;
        color: #065f46;
    }
    .status-pending {
        background: #fee2e2;
        color: #991b1b;
    }
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    .notification-toast {
        animation: slideIn 0.3s ease;
    }
</style>
@endsection

@section('content')
<section class="content-header">
    <div class="tw-flex tw-justify-between tw-items-center tw-mb-4">
        <h1 class="tw-text-2xl md:tw-text-3xl tw-font-bold tw-text-gray-800">
            Todo List
        </h1>
        <div class="tw-flex tw-gap-2">
            <a href="{{ route('todotest.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Create New Todo
            </a>
            <button onclick="clearAllTodos()" class="btn btn-danger" id="clearAllBtn">
                <i class="fas fa-trash-alt"></i> Clear All
            </button>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <!-- Stats Cards -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>{{ $todos->total() }}</h3>
                        <p>Total Todos</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-tasks"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3>{{ $todos->where('completed', true)->count() }}</h3>
                        <p>Completed</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>{{ $todos->where('completed', false)->count() }}</h3>
                        <p>Pending</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-clock"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="small-box bg-secondary">
                    <div class="inner">
                        <h3>{{ $todos->first() ? $todos->first()->created->diffForHumans() : 'N/A' }}</h3>
                        <p>Latest Todo</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-calendar"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Todo List -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Your Todos</h3>
                <div class="card-tools">
                    <div class="input-group input-group-sm" style="width: 250px;">
                        <input type="text" id="searchTodo" class="form-control float-right" placeholder="Search todo...">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-default" onclick="searchTodos()">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="todo-list" id="todoList">
                    @forelse($todos as $todo)
                        <div class="todo-item p-3 border-bottom" data-id="{{ $todo->id }}" data-completed="{{ $todo->completed }}">
                            <div class="tw-flex tw-items-center tw-justify-between">
                                <div class="tw-flex tw-items-center tw-flex-1">
                                    <input type="checkbox" 
                                           class="todo-checkbox mr-3" 
                                           data-id="{{ $todo->id }}"
                                           {{ $todo->completed ? 'checked' : '' }}
                                           style="width: 20px; height: 20px;">
                                    <div class="tw-flex-1">
                                        <div class="todo-text {{ $todo->completed ? 'todo-completed' : '' }}">
                                            {{ $todo->text }}
                                        </div>
                                        <small class="text-muted">
                                            Created: {{ $todo->created->format('M d, Y H:i') }}
                                            <span class="ml-2">
                                                UUID: {{ substr($todo->uuid, 0, 8) }}...
                                            </span>
                                        </small>
                                    </div>
                                </div>
                                <div class="todo-actions tw-flex tw-gap-2">
                                    <span class="status-badge {{ $todo->completed ? 'status-completed' : 'status-pending' }}">
                                        {{ $todo->completed ? 'Completed' : 'Pending' }}
                                    </span>
                                    <a href="{{ route('todo.edit', $todo->id) }}" class="btn btn-sm btn-info">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button onclick="deleteTodo({{ $todo->id }})" class="btn btn-sm btn-danger">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center p-5">
                            <i class="fas fa-check-circle fa-4x text-muted mb-3"></i>
                            <p class="text-muted">No todos yet. Create your first todo!</p>
                            <a href="{{ route('todo.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Create Todo
                            </a>
                        </div>
                    @endforelse
                </div>
            </div>
            <div class="card-footer clearfix">
                {{ $todos->links() }}
            </div>
        </div>
    </div>
</section>

<!-- Notification Container -->
<div id="notificationContainer" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>

@endsection

@section('javascripts')

@endsection