@extends('layouts.app')

@section('title', 'Team Dashboard - ' . config('app.name'))

@section('header-left')
    <h1 class="text-lg font-semibold text-gray-900">Team Dashboard</h1>
@endsection

@section('content')
    <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
        <form method="get" action="{{ route('team') }}" class="flex flex-wrap items-end gap-4">
            <div>
                <label for="from" class="block text-xs font-medium text-gray-600">From</label>
                <input id="from" type="date" name="from" value="{{ $from }}" class="mt-1 rounded-md border border-gray-300 px-3 py-2 text-sm" />
            </div>
            <div>
                <label for="to" class="block text-xs font-medium text-gray-600">To</label>
                <input id="to" type="date" name="to" value="{{ $to }}" class="mt-1 rounded-md border border-gray-300 px-3 py-2 text-sm" />
            </div>
            <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Apply</button>
        </form>
    </div>

    @if (count($members) === 0)
        <p class="rounded-lg border border-gray-200 bg-white p-6 text-center text-gray-500">No team members to show. Team dashboard is available to admins (all members) and supervisors (direct reports).</p>
    @else
        <div class="space-y-3">
            @foreach ($members as $member)
                @php
                    $u = $member['user'];
                    $total = $member['total_tasks'];
                    $completed = $member['completed_count'] ?? 0;
                    $pct = $total > 0 ? min(100, (int) round($completed / $total * 100)) : 0;
                @endphp
                <div class="rounded-lg border border-gray-200 bg-white shadow-sm" x-data="{ expanded: false }">
                    <button type="button" @click="expanded = !expanded" class="flex w-full items-center gap-4 p-4 text-left hover:bg-gray-50">
                        @if ($u->avatar_url ?? null)
                            <img src="{{ $u->avatar_url }}" alt="" class="h-10 w-10 rounded-full object-cover" />
                        @else
                            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-600 text-sm font-medium text-white">{{ strtoupper(substr($u->name ?? '', 0, 1)) }}</div>
                        @endif
                        <div class="min-w-0 flex-1">
                            <p class="font-medium text-gray-900">{{ $u->name }}</p>
                            <p class="text-xs text-gray-500">
                                Active: {{ $member['active_count'] }} · Overdue: {{ $member['overdue_count'] }} · Completed this week: {{ $member['completed_this_week'] }}
                            </p>
                            @if ($total > 0)
                                <div class="mt-1.5 h-2 w-full max-w-xs overflow-hidden rounded-full bg-gray-200">
                                    <div class="h-full rounded-full bg-indigo-600" style="width: {{ $pct }}%"></div>
                                </div>
                                <p class="mt-0.5 text-xs text-gray-500">{{ $completed }}/{{ $total }} tasks completed</p>
                            @endif
                        </div>
                        <svg class="h-5 w-5 shrink-0 text-gray-400 transition-transform" :class="expanded && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div x-show="expanded" x-cloak class="border-t border-gray-100 px-4 pb-4 pt-2">
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <h4 class="mb-2 text-sm font-medium text-gray-700">Overdue tasks</h4>
                                @if (count($member['overdue_tasks']) > 0)
                                    <ul class="space-y-1 text-sm">
                                        @foreach ($member['overdue_tasks'] as $t)
                                            <li class="flex items-center justify-between gap-2 rounded bg-red-50 px-2 py-1.5">
                                                <span class="truncate text-gray-900">{{ $t->title }}</span>
                                                <span class="shrink-0 text-xs text-red-600">{{ $t->due_date ? \Carbon\Carbon::parse($t->due_date)->format('M j') : '—' }}</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p class="text-xs text-gray-500">None</p>
                                @endif
                            </div>
                            <div>
                                <h4 class="mb-2 text-sm font-medium text-gray-700">Upcoming deadlines</h4>
                                @if (count($member['upcoming_tasks']) > 0)
                                    <ul class="space-y-1 text-sm">
                                        @foreach ($member['upcoming_tasks'] as $t)
                                            <li class="flex items-center justify-between gap-2 rounded bg-gray-50 px-2 py-1.5">
                                                <span class="truncate text-gray-900">{{ $t->title }}</span>
                                                <span class="shrink-0 text-xs text-gray-600">{{ $t->due_date ? \Carbon\Carbon::parse($t->due_date)->format('M j') : '—' }}</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p class="text-xs text-gray-500">None</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endsection