@extends('layouts.app')

@section('title', 'Görev Yönetimi')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Görev Yönetimi</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Tüm görevlerin listesi
            </p>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
            <a href="{{ route('tasks.create') }}" class="inline-flex items-center justify-center rounded-lg bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 transition-all duration-200">
                <i class="fas fa-plus mr-2"></i>
                Yeni Görev Ekle
            </a>
        </div>
    </div>

    <!-- İstatistikler -->
    <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-6">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-tasks text-gray-400 dark:text-gray-500 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Toplam</dt>
                            <dd class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $stats['total'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-list text-gray-400 dark:text-gray-500 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Yapılacak</dt>
                            <dd class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $stats['todo'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-spinner text-blue-400 dark:text-blue-500 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Devam Ediyor</dt>
                            <dd class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $stats['in_progress'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-green-400 dark:text-green-500 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Tamamlandı</dt>
                            <dd class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $stats['done'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-red-400 dark:text-red-500 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Süresi Dolmuş</dt>
                            <dd class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $stats['overdue'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-user text-indigo-400 dark:text-indigo-500 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Görevlerim</dt>
                            <dd class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $stats['my_tasks'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtreleme -->
    <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg border border-gray-200 dark:border-gray-700">
        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
            <form method="GET" action="{{ route('tasks.index') }}" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
                <div>
                    <label for="status" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">Durum</label>
                    <select name="status" id="status" class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200">
                        <option value="all" {{ request('status') == 'all' ? 'selected' : '' }}>Tümü</option>
                        <option value="todo" {{ request('status') == 'todo' ? 'selected' : '' }}>Yapılacak</option>
                        <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>Devam Ediyor</option>
                        <option value="review" {{ request('status') == 'review' ? 'selected' : '' }}>İncelemede</option>
                        <option value="done" {{ request('status') == 'done' ? 'selected' : '' }}>Tamamlandı</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>İptal Edildi</option>
                    </select>
                </div>
                <div>
                    <label for="priority" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">Öncelik</label>
                    <select name="priority" id="priority" class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200">
                        <option value="all" {{ request('priority') == 'all' ? 'selected' : '' }}>Tümü</option>
                        <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>Düşük</option>
                        <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Orta</option>
                        <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>Yüksek</option>
                        <option value="urgent" {{ request('priority') == 'urgent' ? 'selected' : '' }}>Acil</option>
                    </select>
                </div>
                <div>
                    <label for="category_id" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">Kategori</label>
                    <select name="category_id" id="category_id" class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200">
                        <option value="">Tümü</option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="assigned_to" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">Atanan</label>
                    <select name="assigned_to" id="assigned_to" class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200">
                        <option value="">Tümü</option>
                        <option value="me" {{ request('assigned_to') == 'me' ? 'selected' : '' }}>Bana Atanan</option>
                        @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ request('assigned_to') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-end">
                    <button type="submit" class="w-full rounded-lg bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 transition-all duration-200">
                        <i class="fas fa-filter mr-2"></i>
                        Filtrele
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Görev Listesi -->
    <div class="mt-6 bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md border border-gray-200 dark:border-gray-700">
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            @forelse($tasks as $task)
            <li>
                <a href="{{ route('tasks.show', $task) }}" class="block hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                    <div class="px-4 py-4 sm:px-6">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <p class="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
                                    {{ $task->title }}
                                </p>
                                <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $task->status_badge_class }}">
                                    {{ $task->status_label }}
                                </span>
                                <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $task->priority_badge_class }}">
                                    {{ $task->priority_label }}
                                </span>
                            </div>
                            <div class="ml-2 flex-shrink-0 flex">
                                @if($task->isOverdue())
                                <span class="text-red-500 dark:text-red-400 text-xs font-medium">Süresi Dolmuş</span>
                                @endif
                                @if($task->due_date)
                                <span class="text-gray-500 dark:text-gray-400 text-xs ml-4">
                                    <i class="fas fa-calendar mr-1"></i>
                                    {{ $task->due_date->format('d.m.Y') }}
                                </span>
                                @endif
                            </div>
                        </div>
                        <div class="mt-2 sm:flex sm:justify-between">
                            <div class="sm:flex">
                                <p class="flex items-center text-sm text-gray-500 dark:text-gray-400">
                                    @if($task->assignee)
                                    <i class="fas fa-user mr-1"></i>
                                    {{ $task->assignee->name }}
                                    @else
                                    <i class="fas fa-user-slash mr-1"></i>
                                    Atanmamış
                                    @endif
                                </p>
                                @if($task->category)
                                <p class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:ml-6">
                                    <span class="inline-block w-3 h-3 rounded-full mr-2" style="background-color: {{ $task->category->color }}"></span>
                                    {{ $task->category->name }}
                                </p>
                                @endif
                                @if($task->site)
                                <p class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:ml-6">
                                    <i class="fas fa-globe mr-1"></i>
                                    {{ $task->site->name }}
                                </p>
                                @endif
                            </div>
                            <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
                                <p>
                                    <i class="fas fa-clock mr-1"></i>
                                    {{ $task->created_at->format('d.m.Y H:i') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            @empty
            <li class="px-4 py-8 text-center">
                <i class="fas fa-tasks text-gray-400 dark:text-gray-500 text-4xl mb-4"></i>
                <p class="text-gray-500 dark:text-gray-400">Henüz görev bulunmuyor.</p>
                <a href="{{ route('tasks.create') }}" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium">
                    İlk görevi oluştur
                </a>
            </li>
            @endforelse
        </ul>
    </div>

    <!-- Pagination -->
    <div class="mt-6">
        {{ $tasks->links() }}
    </div>
</div>
@endsection