@extends('layouts.admin')

@section('title', 'Tasks')

@section('content')
    <x-page-header
        title="Task Monitoring"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Tasks'],
        ]"
        subtitle="Track execution status and resource allocation across all sites."
    />

    <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm mb-6">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
            <div class="md:col-span-5">
                <label class="text-xs font-semibold uppercase tracking-wider text-slate-500">Project Filter</label>
                <select name="project_id" class="mt-1 w-full h-11 rounded-xl border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all">
                    <option value="">All active projects</option>
                    @foreach ($projects as $p)
                        <option value="{{ $p->id }}" @selected((string) request('project_id') === (string) $p->id)>{{ $p->name }} ({{ $p->code }})</option>
                    @endforeach
                </select>
            </div>
            <div class="md:col-span-4">
                <label class="text-xs font-semibold uppercase tracking-wider text-slate-500">Execution Status</label>
                <select name="status" class="mt-1 w-full h-11 rounded-xl border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all">
                    <option value="">All statuses</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s->value }}" @selected(request('status') === $s->value)>{{ $s->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div class="md:col-span-3 flex gap-2">
                <x-button type="submit" class="flex-1 h-11">Filter Tasks</x-button>
                <x-button :href="route('admin.tasks.index')" variant="secondary" class="h-11">Reset</x-button>
            </div>
        </form>
    </div>

    <x-table-wrapper>
        <table class="min-w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Task ID</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Project / Site</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Task Detail</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Status</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Assigned Team</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100">
                @forelse ($tasks as $t)
                    <tr class="group hover:bg-slate-50 transition-colors">
                        <td class="px-4 py-4 whitespace-nowrap font-mono text-xs font-bold text-slate-400 group-hover:text-blue-600 transition-colors">#{{ $t->id }}</td>
                        <td class="px-4 py-4">
                            <div class="text-xs font-bold text-slate-900 mb-1">{{ $t->project?->name ?? '-' }}</div>
                            <div class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-slate-100 text-slate-500 border border-slate-200">
                                {{ $t->project?->code ?? '-' }}
                            </div>
                        </td>
                        <td class="px-4 py-4">
                            <div class="font-bold text-slate-800 leading-none mb-1">{{ $t->title }}</div>
                            <div class="text-xs text-slate-500 truncate max-w-xs" title="{{ $t->description }}">{{ $t->description ?? 'No description' }}</div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <x-status-badge :value="$t->status?->value ?? $t->status" :label="$t->status?->label() ?? $t->status" />
                        </td>
                        <td class="px-4 py-4">
                            <div class="flex flex-col gap-1">
                                <div class="flex items-center gap-1.5">
                                    <div class="h-4 w-4 rounded-full bg-blue-100 text-[8px] font-bold text-blue-600 flex items-center justify-center">E</div>
                                    <span class="text-xs font-medium text-slate-700">{{ $t->engineer?->name ?? 'Unassigned' }}</span>
                                </div>
                                <div class="flex items-center gap-1.5">
                                    <div class="h-4 w-4 rounded-full bg-slate-100 text-[8px] font-bold text-slate-600 flex items-center justify-center">S</div>
                                    <span class="text-xs font-medium text-slate-500">{{ $t->siteSupervisor?->name ?? '-' }}</span>
                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="p-10 text-center text-slate-500 font-medium">No tasks found matching your criteria.</td></tr>
                @endforelse
            </tbody>
        </table>
    </x-table-wrapper>

    <div class="mt-4">
        {{ $tasks->links() }}
    </div>

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