@extends('layouts.app')

@section('title', 'Tasks - ' . config('app.name'))

@section('content')
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-semibold mb-2">Tasks</h2>
            <p class="text-[#706f6c] dark:text-[#A1A09A]">
                Track and manage your tasks
            </p>
        </div>
        <button class="px-5 py-2.5 bg-white dark:bg-[#161615] text-[#1b1b18] dark:text-white border border-[#1b1b18] dark:border-[#3E3E3A] hover:bg-[#FDFDFC] dark:hover:bg-[#0a0a0a] rounded-sm text-sm font-medium transition-all">
            Add Task
        </button>
    </div>

    <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg overflow-hidden">
        @php
            $tasks = [
                ['title' => 'Complete project documentation', 'status' => 'pending', 'priority' => 'high'],
                ['title' => 'Review pull requests', 'status' => 'in-progress', 'priority' => 'medium'],
                ['title' => 'Update user dashboard', 'status' => 'pending', 'priority' => 'low'],
                ['title' => 'Fix reported bugs', 'status' => 'completed', 'priority' => 'high'],
                ['title' => 'Team meeting preparation', 'status' => 'pending', 'priority' => 'medium'],
            ];
        @endphp

        <div class="divide-y divide-[#e3e3e0] dark:divide-[#3E3E3A]">
            @foreach($tasks as $task)
                <div class="p-4 hover:bg-[#FDFDFC] dark:hover:bg-[#1b1b18] transition-colors">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <input type="checkbox" class="w-4 h-4 border border-[#e3e3e0] dark:border-[#3E3E3A] rounded" {{ $task['status'] === 'completed' ? 'checked' : '' }}>
                            <span class="{{ $task['status'] === 'completed' ? 'line-through text-[#706f6c] dark:text-[#A1A09A]' : '' }}">{{ $task['title'] }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-xs px-2 py-1 bg-[#e3e3e0] dark:bg-[#3E3E3A] text-[#1b1b18] dark:text-white rounded-sm">{{ ucfirst($task['priority']) }}</span>
                            <span class="text-xs px-2 py-1 {{ $task['status'] === 'completed' ? 'bg-green-100 text-green-800' : ($task['status'] === 'in-progress' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800') }} rounded-sm">{{ ucfirst(str_replace('-', ' ', $task['status'])) }}</span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection