@php
    $reports = $this->directReportsBandwidth();
    $overCount = $reports->where('status', 'over')->count();
    $teamAvg = $this->teamAverageBandwidth($reports);
    [$weekStart, $weekEnd] = $this->currentWeekRange();

    $pillClasses = [
        'warning' => 'bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-400',
        'ok' => 'bg-success-50 text-success-600 dark:bg-success-500/10 dark:text-success-400',
        'over' => 'bg-danger-50 text-danger-600 dark:bg-danger-500/10 dark:text-danger-400',
    ];
    $barClasses = [
        'warning' => 'bg-warning-500',
        'ok' => 'bg-success-500',
        'over' => 'bg-danger-500',
    ];
    $labels = ['warning' => 'Limite', 'ok' => 'Équilibrée', 'over' => 'Surchargée'];
@endphp
<x-filament-panels::page>
    <div>
        <div class="flex items-center gap-1 mt-6">
            <button
                type="button"
                wire:click="previousPeriod"
                class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5"
            >
                <x-filament::icon icon="heroicon-o-chevron-left" class="h-4 w-4" />
            </button>

            <span class="text-sm font-semibold text-gray-950 dark:text-white">
                {{ $this->periodLabel() }}
            </span>

            <button
                type="button"
                wire:click="nextPeriod"
                class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5"
            >
                <x-filament::icon icon="heroicon-o-chevron-right" class="h-4 w-4" />
            </button>
        </div>
        <div class="mt-2 grid grid-cols-1 gap-6 xl:grid-cols-3">
            <div class="lol-span-1 xl:col-span-1">
                <x-filament::section>
                    <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Synthèse</div>
                    <div class="flex flex-col gap-3">
                        <div class="flex items-baseline gap-2">
                            <span class="text-[30px] font-bold text-gray-950 dark:text-white">
                                {{ $teamAvg['percent'] }}%
                            </span>
                            <span class="text-sm text-gray-500 dark:text-gray-400">
                                de charge moyenne
                            </span>
                                
                                
                        </div>
                        <div class="grid grid-cols-1 gap-0 xl:grid-cols-2">
                            <div class="col-span-1 xl:col-span-2">
                                <span class="text-sm text-gray-500 dark:text-gray-400">
                                    <strong class="text-gray-950 dark:text-white">{{ $reports->count() }}</strong> personne{{(($reports->count() > 1) ? 's' : '') }} sous ta responsabilité directe
                                </span>
                            </div>
                            <div class="col-span-1 xl:col-span-1">
                            @if ($overCount > 0)
                                <span class="text-sm font-semibold text-danger-600 dark:text-danger-400">{{ $overCount }} en surcharge</span>
                            @endif  
                            </div>
                        </div>                               
                    </div>
                    
                </x-filament::section>
            </div>
            <div class="col-span-1 xl:col-span-2">
                <x-filament::section>
                    <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Détail de mon équipe</div>
                    @forelse ($reports as $report)
                        @php $person = $report['person']; @endphp
                        <div class="grid grid-cols-16 gap-x-3 gap-y-1 items-center border-b border-gray-100 py-3 last:border-0 dark:border-white/5">
                            <!-- User -->
                            <div class="flex col-span-5 lg:col-span-3 items-center gap-2">
                                <span
                                class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
                                style="background-color: {{ $person->avatar_color ?? '#9CA3AF' }}"
                                x-tooltip="{ content: @js($person->full_name), theme: $store.theme, placement: 'bottom' }"
                                >
                                    {{ $person->initials }}
                                </span>
                                <span class="w-32 shrink-0 truncate text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ $person->full_name }}
                                </span>
                            </div>
                            <!-- Status Bandwidth -->
                            <div class="col-span-10 lg:col-span-2 lg:text-center text-right">
                                <span class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold {{ $pillClasses[$report['status']] }}">
                                    {{ $labels[$report['status']] }}
                                </span>
                            </div>                             
                            <!-- Bandwidth bar + info sub team -->
                            <div class="flex col-span-15 lg:col-span-10 items-center">
                                <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-100 dark:bg-white/5">
                                    @php $reportPercent = $report['capacity'] > 0 ? min(100, (int) round($report['hours'] / $report['capacity'] * 100)) : 0; @endphp
                                    <div class="h-full rounded-full {{ $barClasses[$report['status']] }}" style="width: {{ $reportPercent }}%"></div>
                                </div>
                                <span class="w-20 shrink-0 text-right text-xs tabular-nums text-gray-500 dark:text-gray-400">
                                    {{ rtrim(rtrim(number_format($report['hours'], 1), '0'), '.') }}h / {{ rtrim(rtrim(number_format($report['capacity'], 1), '0'), '.') }}h
                                </span>
                            </div>
                            <div class="col-span-1 lg:col-span-1 text-right">
                                <button
                                    type="button"
                                    wire:click="openApercuPersonWorkload({{ $person->id }}, '{{ $weekStart->toDateString() }}', '{{ $weekEnd->toDateString() }}')"
                                    class="shrink-0 text-gray-500 transition-colors hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-400"
                                >
                                    <x-filament::icon icon="heroicon-o-chevron-right" class="h-4 w-4" />
                                </button>
                            </div>
                            @if ($report['subteam'])
                            <div class="flex col-span-0 lg:col-span-5 items-center">
                            </div>
                            <div class="flex col-span-15 gap-2 lg:col-span-10 items-center">
                                <span class="text-xs text-gray-600 dark:text-gray-400">
                                    Son équipe : {{ $report['subteam']['count'].' personne'.(($report['subteam']['count'] > 1) ? 's' : '') }}
                                </span>
                                @php $reportPercent = $report['subteam']['capacity'] > 0 ? min(100, (int) round($report['subteam']['hours'] / $report['subteam']['capacity'] * 100)) : 0; @endphp
                                <span class="shrink-0 inline-flex items-center font-semibold gap-1.5 rounded-full px-2.5 py-1 text-xs {{ $pillClasses[$report['subteam']['status']] }}">
                                    {{ $reportPercent."%" }}
                                </span>
                            </div>
                            @endif
                        </div>                    
                    @empty
                        <div class="px-6 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
                            Personne sous ta responsabilité directe.
                        </div>
                    @endforelse
                </x-filament::section>
            </div>
        </div>
    </div>
</x-filament-panels::page>