@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <!-- Page Header -->
    <div class="flex items-center gap-4">
        <a href="{{ route('tasks.index') }}" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        </a>
        <div class="flex-1">
            <h1 class="text-2xl font-bold text-gray-900">{{ $task->title }}</h1>
            <div class="flex items-center gap-2 mt-1 text-sm text-gray-500">
                @if($task->project)
                <span>{{ $task->project->name }}</span>
                <span>•</span>
                @endif
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                    {{ $task->status === 'done' ? 'bg-emerald-50 text-emerald-700' :
                       ($task->status === 'in_progress' ? 'bg-blue-50 text-blue-700' :
                       ($task->status === 'review' ? 'bg-amber-50 text-amber-700' :
                       ($task->status === 'cancelled' ? 'bg-red-50 text-red-700' : 'bg-gray-100 text-gray-600'))) }}">
                    {{ __('task.status_' . $task->status) }}
                </span>
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold
                    {{ $task->priority === 'urgent' ? 'bg-red-100 text-red-700' :
                       ($task->priority === 'high' ? 'bg-orange-100 text-orange-700' :
                       ($task->priority === 'medium' ? 'bg-amber-100 text-amber-700' : 'bg-gray-100 text-gray-600')) }}">
                    {{ __('task.' . $task->priority) }}
                </span>
            </div>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('tasks.edit', $task) }}" class="px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
                {{ __('common.edit') }}
            </a>
        </div>
    </div>

    <!-- Task Details -->
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
                <p class="text-xs font-medium text-gray-500 mb-1">{{ __('task.assignee') }}</p>
                <p class="text-sm text-gray-900">{{ $task->assignee?->name ?? '-' }}</p>
            </div>
            <div>
                <p class="text-xs font-medium text-gray-500 mb-1">{{ __('task.dueDate') }}</p>
                <p class="text-sm {{ $task->due_date?->isPast() && $task->status !== 'done' ? 'text-red-600 font-medium' : 'text-gray-900' }}">
                    {{ $task->due_date ? calendar_date($task->due_date) : '-' }}
                </p>
            </div>
            @if($task->start_date)
            <div>
                <p class="text-xs font-medium text-gray-500 mb-1">{{ __('project.startDate') }}</p>
                <p class="text-sm text-gray-900">{{ calendar_date($task->start_date) }}</p>
            </div>
            @endif
            @if($task->completed_at)
            <div>
                <p class="text-xs font-medium text-gray-500 mb-1">{{ __('task.completedAt') }}</p>
                <p class="text-sm text-emerald-600">{{ calendar_date($task->completed_at) }}</p>
            </div>
            @endif
            @if($task->description)
            <div class="md:col-span-2">
                <p class="text-xs font-medium text-gray-500 mb-1">{{ __('task.description') }}</p>
                <p class="text-sm text-gray-900 whitespace-pre-line">{{ $task->description }}</p>
            </div>
            @endif
        </div>

        <!-- Quick Status Change -->
        <div class="flex items-center gap-3 pt-5 mt-5 border-t border-gray-200">
            <p class="text-xs font-medium text-gray-500">{{ __('task.status') }}:</p>
            @foreach(['pending', 'in_progress', 'review', 'done'] as $s)
            <button onclick="changeStatus({{ $task->id }}, '{{ $s }}')"
                    class="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors
                    {{ $task->status === $s ? 'bg-teal-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                {{ __('task.status_' . $s) }}
            </button>
            @endforeach
        </div>
    </div>

    <!-- Sub-tasks -->
    @if($task->children->count() > 0)
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-200">
            <h3 class="text-sm font-bold text-gray-900">زیروظایف</h3>
        </div>
        <div class="divide-y divide-gray-100">
            @foreach($task->children as $child)
            <div class="flex items-center gap-3 px-5 py-3 hover:bg-gray-50">
                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold
                    {{ $child->priority === 'urgent' ? 'bg-red-100 text-red-700' :
                       ($child->priority === 'high' ? 'bg-orange-100 text-orange-700' :
                       ($child->priority === 'medium' ? 'bg-amber-100 text-amber-700' : 'bg-gray-100 text-gray-600')) }}">
                    {{ __('task.' . $child->priority) }}
                </span>
                <a href="{{ route('tasks.show', $child) }}" class="text-sm text-gray-900 hover:text-teal-600 flex-1">{{ $child->title }}</a>
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                    {{ $child->status === 'done' ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-600' }}">
                    {{ __('task.status_' . $child->status) }}
                </span>
                <span class="text-xs text-gray-500">{{ $child->assignee?->name }}</span>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Activity Log -->
    @if($task->logs->count() > 0)
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-200">
            <h3 class="text-sm font-bold text-gray-900">{{ __('task.activityLog') }}</h3>
        </div>
        <div class="divide-y divide-gray-100 max-h-96 overflow-y-auto">
            @foreach($task->logs as $log)
            <div class="px-5 py-3">
                <div class="flex items-center gap-2 mb-1">
                    <span class="text-xs font-medium text-gray-900">{{ $log->user?->name ?? '-' }}</span>
                    <span class="text-xs text-gray-400">{{ $log->created_at ? calendar_date($log->created_at) : '' }}</span>
                </div>
                <p class="text-xs text-gray-600">
                    @if($log->field_changed === 'created')
                    {{ __('task.logCreated') }}
                    @elseif($log->field_changed === 'status')
                    {{ __('task.logStatusChanged') }}: {{ __('task.status_' . $log->old_value) }} → {{ __('task.status_' . $log->new_value) }}
                    @else
                    {{ $log->field_changed }}: {{ $log->old_value }} → {{ $log->new_value }}
                    @endif
                </p>
            </div>
            @endforeach
        </div>
    </div>
    @endif
</div>

@push('scripts')
<script>
async function changeStatus(taskId, status) {
    const res = await fetch(`/tasks/${taskId}/status`, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ status })
    });
    const data = await res.json();
    if (data.success) location.reload();
}
</script>
@endpush
@endsection