@extends('admin.layout')
@section('title', 'Profielattributen')

@section('content')
@php
    $barMax = fn($collection, string $field) => max(1, $collection->max($field));
@endphp
<style>
    #pa-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #pa-charts { grid-template-columns: 1fr; }
    @media (min-width: 640px) {
        #pa-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        #pa-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1024px) {
        #pa-totals { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }
</style>

<div class="space-y-6">

    {{-- Totals --}}
    <div id="pa-totals" class="grid gap-3 sm:gap-4">
        @foreach([
            ['label' => __('Diagnoses'),  'key' => 'diagnoses',  'color' => '#6366f1'],
            ['label' => __('Strengths'),  'key' => 'strengths',  'color' => '#22c55e'],
            ['label' => __('Challenges'), 'key' => 'challenges', 'color' => '#f97316'],
            ['label' => __('Purposes'),   'key' => 'purposes',   'color' => '#8b5cf6'],
            ['label' => __('Interests'),  'key' => 'interests',  'color' => '#14b8a6'],
        ] as $item)
            <div class="bg-white rounded-xl border border-gray-200 p-3 sm:p-5">
                <p class="text-xs text-gray-500 uppercase tracking-wide">{{ $item['label'] }}</p>
                <p class="text-2xl sm:text-3xl font-bold mt-1" style="color:{{ $item['color'] }}">{{ number_format($totals[$item['key']]) }}</p>
            </div>
        @endforeach
    </div>

    {{-- Charts grid --}}
    <div id="pa-charts" class="grid gap-4 sm:gap-5">

        {{-- Diagnoses --}}
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-sm font-semibold text-gray-700 mb-3">{{ __('Top diagnoses') }}</p>
            @php $m = $barMax($diagnoses, 'total'); @endphp
            <div class="space-y-2">
                @foreach($diagnoses as $item)
                    <div>
                        <div class="flex justify-between text-xs mb-0.5">
                            <span class="text-gray-700 truncate max-w-[200px]" title="{{ $item->diagnosis }}">{{ $item->diagnosis }}</span>
                            <span class="text-gray-500 ml-2 shrink-0">{{ number_format($item->total) }}</span>
                        </div>
                        <div class="h-2 rounded-full bg-gray-100 overflow-hidden">
                            <div class="h-full rounded-full bg-indigo-500"
                                 style="width:{{ round($item->total / $m * 100) }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Strengths --}}
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-sm font-semibold text-gray-700 mb-3">{{ __('Top strengths') }}</p>
            @php $m = $barMax($strengths, 'total'); @endphp
            <div class="space-y-2">
                @foreach($strengths as $item)
                    <div>
                        <div class="flex justify-between text-xs mb-0.5">
                            <span class="text-gray-700 truncate max-w-[200px]" title="{{ $item->strength }}">{{ $item->strength }}</span>
                            <span class="text-gray-500 ml-2 shrink-0">{{ number_format($item->total) }}</span>
                        </div>
                        <div class="h-2 rounded-full bg-gray-100 overflow-hidden">
                            <div class="h-full rounded-full bg-green-500"
                                 style="width:{{ round($item->total / $m * 100) }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Challenges --}}
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-sm font-semibold text-gray-700 mb-3">{{ __('Top challenges') }}</p>
            @php $m = $barMax($challenges, 'total'); @endphp
            <div class="space-y-2">
                @foreach($challenges as $item)
                    <div>
                        <div class="flex justify-between text-xs mb-0.5">
                            <span class="text-gray-700 truncate max-w-[200px]" title="{{ $item->challenge }}">{{ $item->challenge }}</span>
                            <span class="text-gray-500 ml-2 shrink-0">{{ number_format($item->total) }}</span>
                        </div>
                        <div class="h-2 rounded-full bg-gray-100 overflow-hidden">
                            <div class="h-full rounded-full bg-orange-500"
                                 style="width:{{ round($item->total / $m * 100) }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Interests --}}
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-sm font-semibold text-gray-700 mb-3">{{ __('Top interests') }}</p>
            @php $m = $barMax($topInterests, 'total'); @endphp
            <div class="space-y-2">
                @foreach($topInterests as $item)
                    <div>
                        <div class="flex justify-between text-xs mb-0.5">
                            <span class="text-gray-700 truncate max-w-[200px]" title="{{ $item->name_nl }}">{{ $item->name_nl }}</span>
                            <span class="text-gray-500 ml-2 shrink-0">{{ number_format($item->total) }}</span>
                        </div>
                        <div class="h-2 rounded-full bg-gray-100 overflow-hidden">
                            <div class="h-full rounded-full bg-teal-500"
                                 style="width:{{ round($item->total / $m * 100) }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

    </div>

    {{-- Purposes + Looking for --}}
    <div class="grid gap-5" style="grid-template-columns:repeat(2,minmax(0,1fr))">

        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-sm font-semibold text-gray-700 mb-3">{{ __('Connection purposes') }}</p>
            @php $m = $barMax($purposes, 'total'); @endphp
            <div class="space-y-2">
                @foreach($purposes as $item)
                    <div>
                        <div class="flex justify-between text-xs mb-0.5">
                            <span class="text-gray-700 truncate max-w-[200px]" title="{{ $item->purpose }}">{{ $item->purpose }}</span>
                            <span class="text-gray-500 ml-2 shrink-0">{{ number_format($item->total) }}</span>
                        </div>
                        <div class="h-2 rounded-full bg-gray-100 overflow-hidden">
                            <div class="h-full rounded-full bg-violet-500"
                                 style="width:{{ round($item->total / $m * 100) }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-sm font-semibold text-gray-700 mb-3">{{ __('Looking for') }}</p>
            @php $m = $barMax($lookingFor, 'total'); @endphp
            <div class="space-y-2">
                @foreach($lookingFor as $item)
                    <div>
                        <div class="flex justify-between text-xs mb-0.5">
                            <span class="text-gray-700 truncate max-w-[200px]" title="{{ $item->gender }}">{{ $item->gender }}</span>
                            <span class="text-gray-500 ml-2 shrink-0">{{ number_format($item->total) }}</span>
                        </div>
                        <div class="h-2 rounded-full bg-gray-100 overflow-hidden">
                            <div class="h-full rounded-full bg-pink-500"
                                 style="width:{{ round($item->total / $m * 100) }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

    </div>

</div>
@endsection