@section("title", "BizMan | Software Development Tasks")

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center space-x-3">
            <div>
                <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                    {{ __('Software Development Tasks') }}
                </h2>
                <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p>
            </div>
        </div>
    </x-slot>
    <div class="py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Header -->
            <div class="mb-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <a href="{{ route('software-development.index') }}" class="text-gray-500 hover:text-gray-700">
                            <svg class="w-6 h-6" 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"></path>
                            </svg>
                        </a>
                        <div>
                            <h1 class="text-2xl font-bold text-gray-800">{{ $project->project_name }}</h1>
                            <p class="text-sm text-gray-500 mt-1">{{ $project->client_name ?? 'No client' }}</p>
                        </div>
                    </div>

                    <!-- Status Badge -->
                    <span
                        class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold
                        {{ $project->status === 'planning' ? 'bg-gray-100 text-gray-700' : '' }}
                        {{ $project->status === 'development' ? 'bg-blue-100 text-blue-700' : '' }}
                        {{ $project->status === 'testing' ? 'bg-yellow-100 text-yellow-700' : '' }}
                        {{ $project->status === 'completed' ? 'bg-green-100 text-green-700' : '' }}">
                        {{ ucfirst($project->status) }}
                    </span>
                </div>
            </div>

            <!-- Project Info Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <p class="text-xs text-gray-500 uppercase mb-1">Budget</p>
                    <p class="text-lg font-bold text-gray-800">{{ $project->formatted_value }}</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <p class="text-xs text-gray-500 uppercase mb-1">Team Members</p>
                    <div class="flex flex-wrap gap-1 mt-1">
                        @forelse($project->teamMembers as $member)
                            <span
                                class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-blue-100 text-blue-800">
                                {{ $member->name }}
                            </span>
                        @empty
                            <span class="text-sm text-gray-400">No team members</span>
                        @endforelse
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <p class="text-xs text-gray-500 uppercase mb-1">Target Deployment</p>
                    <p class="text-lg font-semibold text-gray-800">
                        {{ $project->target_deployment ? $project->target_deployment->format('d M Y') : '-' }}
                    </p>
                </div>
            </div>

            <!-- Stats Cards -->
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <p class="text-xs text-gray-500 uppercase">Total Tasks</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $stats['total'] }}</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <p class="text-xs text-gray-500 uppercase">To Do</p>
                    <p class="text-2xl font-bold text-gray-600">{{ $stats['todo'] }}</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <p class="text-xs text-blue-600 uppercase">In Progress</p>
                    <p class="text-2xl font-bold text-blue-600">{{ $stats['in_progress'] }}</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <p class="text-xs text-purple-600 uppercase">Review</p>
                    <p class="text-2xl font-bold text-purple-600">{{ $stats['review'] }}</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <p class="text-xs text-green-600 uppercase">Done</p>
                    <p class="text-2xl font-bold text-green-600">{{ $stats['done'] }}</p>
                </div>
            </div>

            <!-- Info Note -->
            <div class="mb-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
                <div class="flex gap-3">
                    <svg class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div class="text-sm text-blue-800">
                        <p class="font-medium mb-1">Read-Only View</p>
                        <p>You are viewing all tasks from all developers in this project. Tasks cannot be added or
                            edited from this view.</p>
                    </div>
                </div>
            </div>

            <!-- Kanban Board -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- To Do Column -->
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-700 flex items-center gap-2">
                            <span class="w-3 h-3 bg-gray-400 rounded-full"></span>
                            To Do
                            <span class="text-sm font-normal text-gray-500">({{ $tasks['todo']->count() }})</span>
                        </h3>
                    </div>
                    <div class="space-y-3 min-h-[200px]">
                        @foreach ($tasks['todo'] as $task)
                            <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200">
                                <div class="flex flex-col-reverse gap-1">
                                    <h4 class="font-medium text-gray-900 mb-2">{{ $task->title }}</h4>
                                    @if ($task->creator)
                                        <span
                                            class="w-max inline-flex items-center px-2 py-0.5 rounded text-[10px] ml-auto font-medium bg-indigo-100 text-indigo-800">
                                            {{ $task->creator->name }}
                                        </span>
                                    @endif
                                </div>
                                @if ($task->description)
                                    <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ $task->description }}</p>
                                @endif
                                <div class="flex items-center justify-between">
                                    <span
                                        class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                        {{ $task->priority === 'high' ? 'bg-red-100 text-red-800' : '' }}
                                        {{ $task->priority === 'medium' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $task->priority === 'low' ? 'bg-green-100 text-green-800' : '' }}">
                                        {{ ucfirst($task->priority) }}
                                    </span>
                                    @if ($task->due_date)
                                        <span class="text-xs text-gray-500 flex items-center gap-1">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
                                                </path>
                                            </svg>
                                            {{ $task->due_date->format('M d') }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- In Progress Column -->
                <div class="bg-blue-50 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-blue-700 flex items-center gap-2">
                            <span class="w-3 h-3 bg-blue-500 rounded-full"></span>
                            In Progress
                            <span
                                class="text-sm font-normal text-blue-600">({{ $tasks['in_progress']->count() }})</span>
                        </h3>
                    </div>
                    <div class="space-y-3 min-h-[200px]">
                        @foreach ($tasks['in_progress'] as $task)
                            <div class="bg-white rounded-lg p-4 shadow-sm border border-blue-200">
                                <div class="flex flex-col-reverse gap-1">
                                    <h4 class="font-medium text-gray-900 mb-2">{{ $task->title }}</h4>
                                    @if ($task->creator)
                                        <span
                                            class="w-max inline-flex items-center px-2 py-0.5 rounded text-[10px] ml-auto font-medium bg-indigo-100 text-indigo-800">
                                            {{ $task->creator->name }}
                                        </span>
                                    @endif
                                </div>
                                @if ($task->description)
                                    <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ $task->description }}</p>
                                @endif
                                <div class="flex items-center justify-between">
                                    <span
                                        class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                        {{ $task->priority === 'high' ? 'bg-red-100 text-red-800' : '' }}
                                        {{ $task->priority === 'medium' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $task->priority === 'low' ? 'bg-green-100 text-green-800' : '' }}">
                                        {{ ucfirst($task->priority) }}
                                    </span>
                                    @if ($task->due_date)
                                        <span class="text-xs text-gray-500 flex items-center gap-1">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
                                                </path>
                                            </svg>
                                            {{ $task->due_date->format('M d') }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Review Column -->
                <div class="bg-purple-50 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-purple-700 flex items-center gap-2">
                            <span class="w-3 h-3 bg-purple-500 rounded-full"></span>
                            Review
                            <span class="text-sm font-normal text-purple-600">({{ $tasks['review']->count() }})</span>
                        </h3>
                    </div>
                    <div class="space-y-3 min-h-[200px]">
                        @foreach ($tasks['review'] as $task)
                            <div class="bg-white rounded-lg p-4 shadow-sm border border-purple-200">
                                <div class="flex flex-col-reverse gap-1">
                                    <h4 class="font-medium text-gray-900 mb-2">{{ $task->title }}</h4>
                                    @if ($task->creator)
                                        <span
                                            class="w-max inline-flex items-center px-2 py-0.5 rounded text-[10px] ml-auto font-medium bg-indigo-100 text-indigo-800">
                                            {{ $task->creator->name }}
                                        </span>
                                    @endif
                                </div>
                                @if ($task->description)
                                    <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ $task->description }}
                                    </p>
                                @endif
                                <div class="flex items-center justify-between">
                                    <span
                                        class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                        {{ $task->priority === 'high' ? 'bg-red-100 text-red-800' : '' }}
                                        {{ $task->priority === 'medium' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $task->priority === 'low' ? 'bg-green-100 text-green-800' : '' }}">
                                        {{ ucfirst($task->priority) }}
                                    </span>
                                    @if ($task->due_date)
                                        <span class="text-xs text-gray-500 flex items-center gap-1">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
                                                </path>
                                            </svg>
                                            {{ $task->due_date->format('M d') }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Done Column -->
                <div class="bg-green-50 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-green-700 flex items-center gap-2">
                            <span class="w-3 h-3 bg-green-500 rounded-full"></span>
                            Done
                            <span class="text-sm font-normal text-green-600">({{ $tasks['done']->count() }})</span>
                        </h3>
                    </div>
                    <div class="space-y-3 min-h-[200px]">
                        @foreach ($tasks['done'] as $task)
                            <div class="bg-white rounded-lg p-4 shadow-sm border border-green-200 opacity-75">
                                <div class="flex flex-col-reverse gap-1">
                                    <h4 class="font-medium text-gray-900 mb-2">{{ $task->title }}</h4>
                                    @if ($task->creator)
                                        <span
                                            class="w-max inline-flex items-center px-2 py-0.5 rounded text-[10px] ml-auto font-medium bg-indigo-100 text-indigo-800">
                                            {{ $task->creator->name }}
                                        </span>
                                    @endif
                                </div>
                                @if ($task->description)
                                    <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ $task->description }}
                                    </p>
                                @endif
                                <div class="flex items-center justify-between">
                                    <span
                                        class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                        {{ $task->priority === 'high' ? 'bg-red-100 text-red-800' : '' }}
                                        {{ $task->priority === 'medium' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $task->priority === 'low' ? 'bg-green-100 text-green-800' : '' }}">
                                        {{ ucfirst($task->priority) }}
                                    </span>
                                    @if ($task->due_date)
                                        <span class="text-xs text-gray-500 flex items-center gap-1">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
                                                </path>
                                            </svg>
                                            {{ $task->due_date->format('M d') }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>