@extends('layouts.app')

@section('title', $task->title)

@section('content')
<div class="px-4 sm:px-6 lg:px-8 py-6">
    <!-- Başlık ve Butonlar -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">{{ $task->title }}</h1>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                Görev Detayları
            </p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('tasks.index') }}" 
                class="inline-flex items-center gap-2 rounded-lg bg-gray-200 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition">
                <i class="fas fa-arrow-left"></i>
                <span class="hidden sm:inline">Geri</span>
            </a>
            @can('update', $task)
            <a href="{{ route('tasks.edit', $task) }}" 
                class="inline-flex items-center gap-2 rounded-lg bg-blue-600 dark:bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-600 transition">
                <i class="fas fa-edit"></i>
                <span class="hidden sm:inline">Düzenle</span>
            </a>
            @endcan
        </div>
    </div>

    @if(session('success'))
    <div class="mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
        <p class="text-sm text-green-800 dark:text-green-300 flex items-center">
            <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
        </p>
    </div>
    @endif

    <!-- Ana İçerik Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Sol Kolon - Görev Detayları -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Görev Bilgileri -->
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
                <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Görev Bilgileri</h2>
                </div>
                <div class="px-5 py-4 space-y-4">
                    <!-- Açıklama -->
                    @if($task->description)
                    <div>
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Açıklama</dt>
                        <dd class="text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap">{{ $task->description }}</dd>
                    </div>
                    @endif

                    <!-- Durum ve Öncelik -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Durum</dt>
                            <dd>
                                @php
                                    $statusLabels = [
                                        'todo' => ['text' => 'Yapılacak', 'class' => 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300'],
                                        'in_progress' => ['text' => 'Devam Ediyor', 'class' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300'],
                                        'review' => ['text' => 'İncelemede', 'class' => 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300'],
                                        'done' => ['text' => 'Tamamlandı', 'class' => 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300'],
                                        'cancelled' => ['text' => 'İptal Edildi', 'class' => 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300'],
                                    ];
                                    $status = $statusLabels[$task->status] ?? $statusLabels['todo'];
                                @endphp
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $status['class'] }}">
                                    {{ $status['text'] }}
                                </span>
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Öncelik</dt>
                            <dd>
                                @php
                                    $priorityLabels = [
                                        'low' => ['text' => 'Düşük', 'class' => 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300'],
                                        'medium' => ['text' => 'Orta', 'class' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300'],
                                        'high' => ['text' => 'Yüksek', 'class' => 'bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300'],
                                        'urgent' => ['text' => 'Acil', 'class' => 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300'],
                                    ];
                                    $priority = $priorityLabels[$task->priority] ?? $priorityLabels['medium'];
                                @endphp
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $priority['class'] }}">
                                    {{ $priority['text'] }}
                                </span>
                            </dd>
                        </div>
                    </div>

                    <!-- Tarihler -->
                    <div class="grid grid-cols-2 gap-4">
                        @if($task->due_date)
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Bitiş Tarihi</dt>
                            <dd class="text-sm text-gray-900 dark:text-gray-100">
                                {{ $task->due_date->format('d.m.Y') }}
                                @if($task->isOverdue())
                                    <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300">
                                        <i class="fas fa-exclamation-triangle mr-1"></i> Süresi Dolmuş
                                    </span>
                                @endif
                            </dd>
                        </div>
                        @endif
                        @if($task->completed_at)
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Tamamlanma Tarihi</dt>
                            <dd class="text-sm text-gray-900 dark:text-gray-100">
                                {{ $task->completed_at->format('d.m.Y H:i') }}
                            </dd>
                        </div>
                        @endif
                    </div>

                    <!-- Süre Bilgileri -->
                    @if($task->estimated_hours || $task->actual_hours)
                    <div class="grid grid-cols-2 gap-4">
                        @if($task->estimated_hours)
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Tahmini Süre</dt>
                            <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $task->estimated_hours }} saat</dd>
                        </div>
                        @endif
                        @if($task->actual_hours)
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Gerçek Süre</dt>
                            <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $task->actual_hours }} saat</dd>
                        </div>
                        @endif
                    </div>
                    @endif

                    <!-- Etiketler -->
                    @if($task->tags && count($task->tags) > 0)
                    <div>
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Etiketler</dt>
                        <dd class="flex flex-wrap gap-2">
                            @foreach($task->tags as $tag)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300">
                                {{ $tag }}
                            </span>
                            @endforeach
                        </dd>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Oluşturulma ve Güncelleme Bilgileri -->
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
                <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Zaman Bilgileri</h2>
                </div>
                <div class="px-5 py-4 space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Oluşturulma</span>
                        <span class="text-sm text-gray-900 dark:text-gray-100">{{ $task->created_at->format('d.m.Y H:i') }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Son Güncelleme</span>
                        <span class="text-sm text-gray-900 dark:text-gray-100">{{ $task->updated_at->format('d.m.Y H:i') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sağ Kolon - İlişkili Bilgiler -->
        <div class="space-y-6">
            <!-- Atanan Kullanıcı -->
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
                <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Atanan Kullanıcı</h2>
                </div>
                <div class="px-5 py-4">
                    @if($task->assignee)
                    <div class="flex items-center gap-3">
                        <div class="h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                            <span class="text-blue-600 dark:text-blue-400 font-semibold">
                                {{ strtoupper(substr($task->assignee->name, 0, 1)) }}
                            </span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $task->assignee->name }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $task->assignee->email }}</p>
                        </div>
                    </div>
                    @else
                    <p class="text-sm text-gray-500 dark:text-gray-400">Atanmamış</p>
                    @endif
                </div>
            </div>

            <!-- Oluşturan Kullanıcı -->
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
                <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Oluşturan</h2>
                </div>
                <div class="px-5 py-4">
                    @if($task->creator)
                    <div class="flex items-center gap-3">
                        <div class="h-10 w-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                            <span class="text-green-600 dark:text-green-400 font-semibold">
                                {{ strtoupper(substr($task->creator->name, 0, 1)) }}
                            </span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $task->creator->name }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $task->creator->email }}</p>
                        </div>
                    </div>
                    @else
                    <p class="text-sm text-gray-500 dark:text-gray-400">Bilinmiyor</p>
                    @endif
                </div>
            </div>

            <!-- Kategori -->
            @if($task->category)
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
                <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Kategori</h2>
                </div>
                <div class="px-5 py-4">
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300">
                        {{ $task->category->name }}
                    </span>
                </div>
            </div>
            @endif

            <!-- Site -->
            @if($task->site)
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
                <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Site</h2>
                </div>
                <div class="px-5 py-4">
                    <a href="{{ route('sites.show', $task->site) }}" 
                        class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                        {{ $task->site->name }}
                    </a>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $task->site->url }}</p>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection