@extends('admin.layout')
@section('title', $user->name)

@section('content')

<div class="mb-4">
    <a href="{{ route('admin.users.index') }}" class="text-sm text-gray-400 hover:text-gray-600 transition">
        ← Gebruikers
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Left: profile info --}}
    <div class="lg:col-span-2 space-y-6">

        {{-- Basic info card --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <div class="flex items-center gap-4 mb-5">
                @if ($user->profile)
                <a href="{{ route('profiles.show', $user->profile) }}" target="_blank" class="shrink-0 group">
                @endif
                @if ($user->primaryPhoto)
                    <img src="{{ $user->primaryPhoto->thumbUrl() }}"
                         class="w-16 h-16 rounded-full object-cover shrink-0 group-hover:opacity-80 transition" alt="">
                @else
                    <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center text-xl font-semibold text-gray-500 shrink-0 group-hover:opacity-80 transition">
                        {{ mb_substr($user->name, 0, 1) }}
                    </div>
                @endif
                @if ($user->profile)
                </a>
                @endif
                <div>
                    @if ($user->profile)
                        <a href="{{ route('profiles.show', $user->profile) }}" target="_blank"
                           class="text-lg font-semibold text-gray-800 hover:text-blue-600 transition"><span class="text-gray-400 font-normal text-sm">#{{ $user->id }}</span> {{ $user->name }} ↗</a>
                    @else
                        <h2 class="text-lg font-semibold text-gray-800"><span class="text-gray-400 font-normal text-sm">#{{ $user->id }}</span> {{ $user->name }}</h2>
                    @endif
                    <p class="text-sm text-gray-400">{{ $user->email }}</p>
                    <div class="flex gap-2 mt-1.5">
                        <span class="text-xs px-2 py-0.5 rounded-full
                            @if($user->role === \App\Enums\Role::Admin) bg-red-100 text-red-700
                            @elseif($user->role === \App\Enums\Role::Moderator) bg-orange-100 text-orange-700
                            @elseif($user->role === \App\Enums\Role::Support) bg-sky-100 text-sky-700
                            @else bg-gray-100 text-gray-500 @endif">
                            {{ ucfirst($user->role?->value ?? 'user') }}
                        </span>
                        @if ($user->isOrg())
                            <span class="text-xs px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-700">ORG</span>
                        @elseif ($user->is_pro)
                            <span class="text-xs px-2 py-0.5 rounded-full bg-violet-100 text-violet-700">PRO</span>
                        @elseif ($user->is_premium)
                            <span class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-700">Premium</span>
                        @endif
                        @if ($user->suspended_at)
                            <span class="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-600">Geschorst</span>
                        @endif
                    </div>
                </div>
            </div>

            <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
                <div>
                    <dt class="text-xs text-gray-400">ID</dt>
                    <dd class="text-gray-700 font-mono">{{ $user->id }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Lid sinds</dt>
                    <dd class="text-gray-700">{{ $user->created_at->format('d/m/Y H:i:s') }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">E-mail geverifieerd</dt>
                    <dd class="text-gray-700">
                        {{ $user->email_verified_at ? $user->email_verified_at->format('d/m/Y') : '—' }}
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Abonnement</dt>
                    <dd class="text-gray-700">
                        {{ $user->subscription_plan ?? '—' }}
                        @if ($user->subscription_status)
                            <span class="text-xs text-gray-400">({{ $user->subscription_status }})</span>
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Likes gegeven / ontvangen / matches</dt>
                    <dd class="text-gray-700">{{ $user->likes_count }} / {{ $user->liked_by_count }} / {{ $matches->count() }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Volgt / Volgers</dt>
                    <dd class="text-gray-700">{{ $followingCount }} / {{ $followersCount }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Gesprekken / Berichten</dt>
                    <dd class="text-gray-700">{{ $conversationCount }} / {{ $messageCount }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Geblokkeerd</dt>
                    <dd class="text-gray-700">{{ $blockedCount }} profiel(en)</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Abonnement gestart op</dt>
                    <dd class="text-gray-700">{{ $user->subscription_started_at?->format('d/m/Y') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Rondleiding voltooid</dt>
                    <dd class="text-gray-700">{{ $user->tour_completed ? 'Ja' : 'Nee' }}</dd>
                </div>
                @if ($user->suspended_at)
                    <div class="col-span-2">
                        <dt class="text-xs text-gray-400">Geschorst op</dt>
                        <dd class="text-gray-700">{{ $user->suspended_at->format('d/m/Y H:i:s') }}</dd>
                    </div>
                    @if ($user->suspension_reason)
                        <div class="col-span-2">
                            <dt class="text-xs text-gray-400">Reden</dt>
                            <dd class="text-gray-700">{{ $user->suspension_reason }}</dd>
                        </div>
                    @endif
                @endif
            </dl>
        </div>

        {{-- Profile info --}}
        @if ($user->profile)
        @php
            $p    = $user->profile;
            $dash = fn($v) => filled($v)
                ? '<span class="text-green-600">' . e($v) . '</span>'
                : '<span class="text-red-400">—</span>';
            $bool = fn($v) => '<span class="text-green-600">' . ($v ? 'Ja' : 'Nee') . '</span>';
            $tags = fn(array $arr) => $arr
                ? '<span class="text-green-600">' . e(implode(', ', $arr)) . '</span>'
                : '<span class="text-red-400">—</span>';
        @endphp
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">Profiel #{{ $p->id }}</h3>

            {{-- Basisgegevens --}}
            <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">Basisgegevens</p><div class="flex-1 h-px bg-gray-100"></div></div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm mb-5">
                <div>
                    <dt class="text-xs text-gray-400">Zichtbaar</dt>
                    @if ($p->is_visible && $p->isComplete())
                        <dd class="text-green-600">Ja</dd>
                    @elseif ($p->is_visible && !$p->isComplete())
                        <dd class="text-red-500">Nee <span class="text-gray-400 text-xs">(onvolledig)</span></dd>
                    @else
                        <dd class="text-red-500">Nee</dd>
                    @endif
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Type</dt>
                    <dd>{!! $dash($p->profile_type) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Voornaam / achternaam</dt>
                    <dd>{!! $dash(trim($user->name . ' ' . $user->last_name)) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Geslacht</dt>
                    <dd>{!! $dash($p->gender) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Geboortedatum</dt>
                    <dd>{!! $p->date_of_birth ? '<span class="text-green-600">' . $p->date_of_birth->format('d/m/Y') . ' (' . $p->date_of_birth->age . ' jr)</span>' : '<span class="text-red-400">—</span>' !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Postcode / stad / land</dt>
                    <dd>{!! $dash($p->zip_code) !!} {!! $dash($p->city) !!} {!! $dash($p->country) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Talen</dt>
                    <dd>{!! $tags(array_filter([$p->preferred_language, $p->preferred_language_2, $p->preferred_language_3])) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Bezigheid</dt>
                    <dd>{!! $dash($p->occupation) !!}</dd>
                </div>
                <div class="col-span-2">
                    <dt class="text-xs text-gray-400">Over mij</dt>
                    <dd class="text-xs mt-0.5 whitespace-pre-line">{!! $dash($p->about_me) !!}</dd>
                </div>
            </dl>

            {{-- Verbinding & matching --}}
            <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">Verbinding & matching</p><div class="flex-1 h-px bg-gray-100"></div></div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm mb-5">
                <div>
                    <dt class="text-xs text-gray-400">Diagnoses</dt>
                    <dd>{!! $tags($p->diagnoses) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Verbindingsdoelen</dt>
                    <dd>{!! $tags($p->connectionPurpose) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Zoekend naar (geslacht)</dt>
                    <dd>{!! $tags($p->lookingFor) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Leeftijdsvoorkeur</dt>
                    <dd>
                        @if ($p->looking_for_age_min || $p->looking_for_age_max)
                            <span class="text-green-600">{{ $p->looking_for_age_min ?? '?' }} – {{ $p->looking_for_age_max ?? '?' }} jr</span>
                        @else
                            <span class="text-red-400">—</span>
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Krachten</dt>
                    <dd>{!! $tags($p->strengths) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Uitdagingen</dt>
                    <dd>{!! $tags($p->challenges) !!}</dd>
                </div>
                <div class="col-span-2">
                    <dt class="text-xs text-gray-400">Interesses</dt>
                    <dd>{!! $tags($p->interestTagSlugs) !!}</dd>
                </div>
            </dl>

            {{-- Matching profiel --}}
            <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">Matching profiel</p><div class="flex-1 h-px bg-gray-100"></div></div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm mb-4">
                <div>
                    <dt class="text-xs text-gray-400 mb-1">Sociale energie</dt>
                    @php $se = (int) ($user->profile?->social_energy ?? 0); @endphp
                    @if ($se)
                        <div class="flex items-center gap-2">
                            <div class="w-20 h-2 rounded-full bg-gray-100 overflow-hidden">
                                <div class="h-full rounded-full bg-green-500" style="width:{{ round($se/9*100) }}%"></div>
                            </div>
                            <span class="text-sm font-semibold tabular-nums text-green-600">{{ $se }}/9</span>
                        </div>
                    @else
                        <span class="text-red-400 text-xs">—</span>
                    @endif
                </div>
                <div>
                    <dt class="text-xs text-gray-400 mb-1">Communicatiestijl</dt>
                    @php $cs = $user->profile?->communication_style ?? []; @endphp
                    @if (!empty($cs))
                        <div class="flex flex-wrap gap-1">
                            @foreach ($cs as $style)
                                <span class="px-2 py-0.5 rounded-full text-xs bg-green-50 text-green-700 border border-green-100">{{ $style }}</span>
                            @endforeach
                        </div>
                    @else
                        <span class="text-red-400 text-xs">—</span>
                    @endif
                </div>
            </dl>

            {{-- MBTI --}}
            <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">MBTI</p><div class="flex-1 h-px bg-gray-100"></div></div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm mb-5">
                <div>
                    <dt class="text-xs text-gray-400">Type</dt>
                    <dd class="font-mono">{!! $dash($p->mbti_type) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Zichtbaar op profiel</dt>
                    <dd>{!! $bool($user->mbti_visible) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Betrouwbaarheid</dt>
                    <dd class="text-gray-700">{{ $p->mbti_confidence ? $p->mbti_confidence . '%' : '—' }}</dd>
                </div>
            </dl>

            {{-- Sensorisch profiel --}}
            <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">Sensorisch profiel</p><div class="flex-1 h-px bg-gray-100"></div></div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm mb-5">
                <div>
                    <dt class="text-xs text-gray-400">Ingevuld</dt>
                    <dd class="text-gray-700">
                        @if ($signalPlan && $signalPlan->sensory_profile && $signalPlan->sensory_profile !== 'null')
                            Ja
                        @else
                            Nee
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Zichtbaar op profiel</dt>
                    <dd>{!! $bool($user->sensory_profile_visible) !!}</dd>
                </div>
            </dl>

            {{-- Sociaal --}}
            <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">Sociaal</p><div class="flex-1 h-px bg-gray-100"></div></div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm">
                <div>
                    <dt class="text-xs text-gray-400">Website</dt>
                    <dd class="truncate">{!! $dash($p->website) !!}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Telefoon</dt>
                    <dd>{!! $dash($p->phone) !!}</dd>
                </div>
                @foreach ([
                    'Instagram' => $p->social_instagram,
                    'Facebook'  => $p->social_facebook,
                    'X'         => $p->social_x,
                    'LinkedIn'  => $p->social_linkedin,
                    'TikTok'    => $p->social_tiktok,
                    'Reddit'    => $p->social_reddit,
                    'Pinterest' => $p->social_pinterest,
                    'YouTube'   => $p->social_youtube,
                    'Tumblr'    => $p->social_tumblr,
                    'Vimeo'     => $p->social_vimeo,
                ] as $label => $val)
                    <div>
                        <dt class="text-xs text-gray-400">{{ $label }}</dt>
                        <dd class="truncate">{!! $dash($val) !!}</dd>
                    </div>
                @endforeach
            </dl>
        </div>
        @endif

        {{-- PRO profiel --}}
        @if ($user->proProfile)
        @php $pp = $user->proProfile; @endphp
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">PRO profiel #{{ $pp->id }}</h3>

            <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">Identiteit</p><div class="flex-1 h-px bg-gray-100"></div></div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm mb-5">
                <div><dt class="text-xs text-gray-400">Zichtbaar</dt><dd class="{{ $pp->is_visible ? 'text-green-600' : 'text-red-500' }}">{{ $pp->is_visible ? 'Ja' : 'Nee' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Neurodivergent</dt><dd class="text-gray-700">{{ $pp->is_neurodivergent ? 'Ja' : 'Nee' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Naam</dt><dd class="text-gray-700">{{ trim(($pp->first_name ?? '') . ' ' . ($pp->last_name ?? '')) ?: '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Geslacht / Geboortedatum</dt><dd class="text-gray-700">{{ $pp->gender ?? '—' }} {{ $pp->date_of_birth ? '· ' . $pp->date_of_birth->format('d/m/Y') : '' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Talen</dt><dd class="text-gray-700">{{ implode(', ', array_filter([$pp->preferred_language, $pp->preferred_language_2, $pp->preferred_language_3])) ?: '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Actief sinds</dt><dd class="text-gray-700">{{ $pp->active_since ?? '—' }}</dd></div>
            </dl>

            <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">Organisatie</p><div class="flex-1 h-px bg-gray-100"></div></div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm mb-5">
                <div><dt class="text-xs text-gray-400">Naam</dt><dd class="text-gray-700">{{ $pp->organization_name ?? '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Kernactiviteit</dt><dd class="text-gray-700">{{ $pp->core_activity ?? '—' }}</dd></div>
                <div class="col-span-2"><dt class="text-xs text-gray-400">Adres</dt><dd class="text-gray-700">{{ trim(($pp->address ?? '') . ', ' . ($pp->zip_code ?? '') . ' ' . ($pp->city ?? '') . ' ' . ($pp->country ?? ''), ', ') ?: '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Contact e-mail</dt><dd class="text-gray-700 truncate">{{ $pp->contact_email ?? '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Telefoon / Mobiel</dt><dd class="text-gray-700">{{ $pp->phone ?? '—' }} {{ $pp->mobile ? '/ ' . $pp->mobile : '' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Website</dt><dd class="text-gray-700 truncate">{{ $pp->website ?? '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Booking URL</dt><dd class="text-gray-700 truncate">{{ $pp->booking_url ?? '—' }}</dd></div>
            </dl>

            <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">Erkenning</p><div class="flex-1 h-px bg-gray-100"></div></div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm mb-5">
                <div><dt class="text-xs text-gray-400">RIZIV-nummer</dt><dd class="text-gray-700 font-mono">{{ $pp->riziv_number ?? '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Psycholoog-registratie</dt><dd class="text-gray-700 font-mono">{{ $pp->psychologist_registration ?? '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Klinisch-psycholoog visum</dt><dd class="text-gray-700 font-mono">{{ $pp->clinical_psychologist_visa ?? '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Beroepsvereniging</dt><dd class="text-gray-700">{{ $pp->professional_association ?? '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Wachttijd</dt><dd class="text-gray-700">{{ $pp->waitlist ? 'Ja' : 'Nee' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Consultprijs</dt><dd class="text-gray-700">{{ $pp->consultation_price ?? '—' }}</dd></div>
            </dl>

            <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">Aanbod</p><div class="flex-1 h-px bg-gray-100"></div></div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm mb-5">
                <div><dt class="text-xs text-gray-400">Ondersteuningsvormen</dt><dd class="text-gray-700">{{ $pp->support_types ? implode(', ', $pp->support_types) : '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Ondersteunt bij</dt><dd class="text-gray-700">{{ $pp->support_for ? implode(', ', $pp->support_for) : '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Leeftijdsgroepen</dt><dd class="text-gray-700">{{ $pp->age_groups ? implode(', ', $pp->age_groups) : '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Doelgroepen</dt><dd class="text-gray-700">{{ $pp->target_groups ? implode(', ', $pp->target_groups) : '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Serviceformaten</dt><dd class="text-gray-700">{{ $pp->service_formats ? implode(', ', $pp->service_formats) : '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Focusonderwerpen</dt><dd class="text-gray-700">{{ $pp->focus_topics ? implode(', ', $pp->focus_topics) : '—' }}</dd></div>
            </dl>

            @php
                $ppSocials = array_filter([
                    'LinkedIn' => $pp->social_linkedin, 'Instagram' => $pp->social_instagram,
                    'Facebook' => $pp->social_facebook, 'X'         => $pp->social_x,
                    'TikTok'   => $pp->social_tiktok,   'YouTube'   => $pp->social_youtube,
                    'Reddit'   => $pp->social_reddit,   'Pinterest' => $pp->social_pinterest,
                    'Tumblr'   => $pp->social_tumblr,   'Vimeo'     => $pp->social_vimeo,
                ]);
            @endphp
            @if ($ppSocials)
                <div class="flex items-center gap-3 mb-2"><p class="text-xs font-bold text-gray-500 uppercase tracking-wide whitespace-nowrap">Sociaal</p><div class="flex-1 h-px bg-gray-100"></div></div>
                <dl class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
                    @foreach ($ppSocials as $label => $val)
                        <div><dt class="text-xs text-gray-400">{{ $label }}</dt><dd class="text-gray-700 truncate">{{ $val }}</dd></div>
                    @endforeach
                </dl>
            @endif
        </div>
        @endif

        {{-- Video --}}
        @if ($user->video)
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-3">Introvideo</h3>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm">
                <div>
                    <dt class="text-xs text-gray-400">Status</dt>
                    <dd>
                        @php $vs = $user->video->status; @endphp
                        <span class="text-xs px-2 py-0.5 rounded-full
                            {{ $vs === 'ready' ? 'bg-green-100 text-green-700' : ($vs === 'failed' ? 'bg-red-100 text-red-600' : 'bg-yellow-100 text-yellow-700') }}">
                            {{ ucfirst($vs) }}
                        </span>
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Geüpload op</dt>
                    <dd class="text-gray-700">{{ $user->video->created_at->format('d/m/Y H:i') }}</dd>
                </div>
                <div class="col-span-2">
                    <dt class="text-xs text-gray-400">Video UID</dt>
                    <dd class="font-mono text-xs text-gray-600">{{ $user->video->video_uid }}</dd>
                </div>
                @if ($user->video->playback_url)
                <div class="col-span-2">
                    <dt class="text-xs text-gray-400">Playback URL</dt>
                    <dd class="text-xs text-indigo-600 truncate">
                        <a href="{{ $user->video->playback_url }}" target="_blank" class="hover:underline">{{ $user->video->playback_url }}</a>
                    </dd>
                </div>
                @endif
            </dl>
        </div>
        @endif

        {{-- Photos --}}
        @if ($user->photos->isNotEmpty())
        @php
            $photosData = $user->photos->values()->map(fn($p) => [
                'id'        => $p->id,
                'src'       => $p->fullUrl(),
                'isPrimary' => (bool) $p->is_primary,
            ])->toArray();
        @endphp
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5"
                 x-data="{
                     photos: {{ Js::from($photosData) }},
                     open: false,
                     idx: 0,
                     openAt(i) { this.idx = i; this.open = true; },
                     prev() { this.idx = (this.idx - 1 + this.photos.length) % this.photos.length; },
                     next() { this.idx = (this.idx + 1) % this.photos.length; },
                 }"
                 @keydown.arrow-left.window="open && prev()"
                 @keydown.arrow-right.window="open && next()"
                 @keydown.escape.window="open = false">

                <h3 class="text-sm font-semibold text-gray-700 mb-3">
                    Foto's ({{ $user->photos->count() }})
                </h3>

                <div class="flex flex-wrap gap-2">
                    @foreach ($user->photos as $i => $photo)
                        <button type="button"
                                @click="openAt({{ $i }})"
                                class="relative group focus:outline-none">
                            <img src="{{ $photo->thumbUrl() }}"
                                 class="w-16 h-16 rounded-lg object-cover {{ $photo->is_primary ? 'ring-2 ring-blue-400' : '' }} group-hover:opacity-80 transition"
                                 alt="">
                            @if ($photo->is_primary)
                                <span class="absolute bottom-0.5 left-0.5 text-[9px] bg-blue-500 text-white rounded px-1 leading-tight">primair</span>
                            @endif
                        </button>
                    @endforeach
                </div>

                {{-- Lightbox --}}
                <div x-show="open"
                     x-transition.opacity
                     @click.self="open = false"
                     class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
                     style="display:none">
                    <div class="relative max-w-lg w-full" @click.stop>

                        <img :src="photos[idx]?.src" class="w-full rounded-xl shadow-2xl object-contain max-h-[75vh]" alt="">

                        {{-- Prev / Next --}}
                        @if ($user->photos->count() > 1)
                        <button type="button"
                                @click="prev()"
                                class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-12 flex items-center justify-center w-9 h-9 rounded-full bg-white/15 hover:bg-white/30 text-white transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
                        </button>
                        <button type="button"
                                @click="next()"
                                class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-12 flex items-center justify-center w-9 h-9 rounded-full bg-white/15 hover:bg-white/30 text-white transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                        </button>
                        @endif

                        {{-- Counter + teller --}}
                        @if ($user->photos->count() > 1)
                        <p class="absolute top-2 right-3 text-xs text-white/70 tabular-nums"
                           x-text="(idx + 1) + ' / ' + photos.length"></p>
                        @endif

                        <div class="mt-3 flex items-center justify-between gap-3">
                            <span x-show="photos[idx]?.isPrimary"
                                  class="text-xs bg-blue-500 text-white rounded-full px-2.5 py-1">
                                Profielfoto
                            </span>
                            <span x-show="!photos[idx]?.isPrimary"></span>

                            <div class="flex items-center gap-2">
                                <button type="button"
                                        @click="open = false"
                                        class="px-3 py-1.5 text-sm rounded-lg bg-white/10 text-white hover:bg-white/20 transition">
                                    Sluiten
                                </button>

                                @foreach ($user->photos as $photo)
                                <form x-show="photos[idx]?.id === {{ $photo->id }}"
                                      method="POST"
                                      action="{{ route('admin.users.photos.destroy', [$user, $photo]) }}"
                                      onsubmit="return confirm('Foto verwijderen?')">
                                    @csrf @method('DELETE')
                                    <button type="submit"
                                            class="px-3 py-1.5 text-sm rounded-lg bg-red-600 text-white hover:bg-red-700 transition">
                                        Verwijder foto
                                    </button>
                                </form>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Account activiteit --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-3">Account activiteit</h3>

            <dl class="grid grid-cols-3 gap-x-4 gap-y-3 text-sm mb-4">
                <div>
                    <dt class="text-xs text-gray-400">Ingelogd</dt>
                    <dd class="font-medium text-green-600">{{ $loginStats['total_success'] }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Mislukt</dt>
                    <dd class="font-medium {{ $loginStats['total_failed'] > 5 ? 'text-red-600' : 'text-gray-700' }}">
                        {{ $loginStats['total_failed'] }}
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Geblokkeerd</dt>
                    <dd class="font-medium {{ $loginStats['total_throttled'] > 0 ? 'text-yellow-600' : 'text-gray-400' }}">
                        {{ $loginStats['total_throttled'] }}
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Laatste activiteit</dt>
                    <dd class="text-gray-700 text-xs">
                        @if ($loginStats['last_active_at'])
                            {{ $loginStats['last_active_at']->format('d/m/Y H:i:s') }}
                            <span class="text-gray-400 block">{{ $loginStats['last_active_at']->diffForHumans() }}</span>
                        @else
                            <span class="text-gray-400">—</span>
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Laatste login</dt>
                    <dd class="text-gray-700 text-xs">
                        @if ($loginStats['last_login'])
                            {{ $loginStats['last_login']->created_at->format('d/m/Y H:i:s') }}
                            <span class="text-gray-400 block">{{ $loginStats['last_login']->ip_address }}</span>
                        @else
                            <span class="text-gray-400">—</span>
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Laatste mislukt</dt>
                    <dd class="text-gray-700 text-xs">
                        @if ($loginStats['last_failed'])
                            {{ $loginStats['last_failed']->created_at->format('d/m/Y H:i:s') }}
                            <span class="text-gray-400 block">{{ $loginStats['last_failed']->ip_address }}</span>
                        @else
                            <span class="text-gray-400">—</span>
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Foto's ↑/✕</dt>
                    <dd class="text-gray-700">{{ $loginStats['total_photos'] }} / {{ $loginStats['total_photo_del'] }}</dd>
                </div>
            </dl>

            @if ($recentLogins->isNotEmpty())
                @php
                    $typeMap = [
                        'success'                    => ['label' => 'Ingelogd',                  'dot' => 'bg-green-400'],
                        'failed'                     => ['label' => 'Login mislukt',             'dot' => 'bg-red-400'],
                        'login_throttled'            => ['label' => 'Geblokkeerd',               'dot' => 'bg-yellow-400'],
                        'logout'                     => ['label' => 'Uitgelogd',                 'dot' => 'bg-gray-300'],
                        'registration'               => ['label' => 'Geregistreerd',             'dot' => 'bg-green-400'],
                        'registration_failed'        => ['label' => 'Registratie mislukt',       'dot' => 'bg-red-400'],
                        'email_verified'             => ['label' => 'E-mail geverifieerd',       'dot' => 'bg-green-400'],
                        'password_reset_requested'   => ['label' => 'Reset aangevraagd',         'dot' => 'bg-blue-400'],
                        'password_reset_completed'   => ['label' => 'Reset voltooid',            'dot' => 'bg-blue-400'],
                        'password_changed'           => ['label' => 'Wachtwoord gewijzigd',      'dot' => 'bg-blue-400'],
                        'email_changed'              => ['label' => 'E-mail gewijzigd',          'dot' => 'bg-blue-400'],
                        'account_deletion_requested' => ['label' => 'Verwijdering aangevraagd',  'dot' => 'bg-orange-400'],
                        'account_deleted'            => ['label' => 'Account verwijderd',        'dot' => 'bg-red-400'],
                        'photo_uploaded'             => ['label' => 'Foto geüpload',             'dot' => 'bg-sky-400'],
                        'photo_upload_failed'        => ['label' => 'Foto upload mislukt',       'dot' => 'bg-red-400'],
                        'photo_deleted'              => ['label' => 'Foto verwijderd',           'dot' => 'bg-orange-400'],
                    ];
                @endphp
                <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
                    Activiteitenlog ({{ $recentLogins->count() }})
                </h4>
                <ul class="divide-y divide-gray-50 text-xs">
                    @foreach ($recentLogins as $log)
                        @php
                            $cfg = $typeMap[$log->type] ?? ['label' => $log->type, 'dot' => 'bg-gray-300'];
                            $sub = null;
                            if ($log->type === 'failed') {
                                $sub = match($log->context['reason'] ?? null) {
                                    'email_not_found' => 'e-mail onbekend',
                                    'wrong_password'  => 'fout wachtwoord',
                                    default           => null,
                                };
                            } elseif ($log->type === 'registration' && ($log->context['email_failed'] ?? false)) {
                                $sub = 'verificatie-e-mail mislukt';
                            } elseif ($log->type === 'registration_failed') {
                                $sub = 'DB-fout';
                            } elseif ($log->type === 'photo_upload_failed') {
                                $sub = \Illuminate\Support\Str::limit($log->context['error'] ?? '', 50);
                            } elseif ($log->type === 'photo_deleted' && ($log->context['was_primary'] ?? false)) {
                                $sub = 'was profielfoto';
                            }
                        @endphp
                        <li class="py-1.5 flex items-start justify-between gap-2">
                            <div class="flex items-start gap-2 min-w-0">
                                <span class="w-1.5 h-1.5 rounded-full {{ $cfg['dot'] }} shrink-0 mt-1.5"></span>
                                <div class="min-w-0">
                                    <span class="font-medium text-gray-600">{{ $cfg['label'] }}</span>
                                    @if ($sub)
                                        <span class="text-gray-400"> — {{ $sub }}</span>
                                    @endif
                                    @if ($log->ip_address)
                                        <span class="text-gray-300 ml-1.5 font-mono">{{ $log->ip_address }}</span>
                                    @endif
                                </div>
                            </div>
                            <span class="text-gray-400 shrink-0 whitespace-nowrap tabular-nums">
                                {{ $log->created_at->format('d/m H:i:s') }}
                            </span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>

        {{-- Subscription history --}}
        @if ($paymentLogs->isNotEmpty() || $subscriptionAdminLogs->isNotEmpty())
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">Abonnementshistoriek</h3>

            @php
                $eventColors = [
                    'checkout_started'             => 'bg-gray-100 text-gray-600',
                    'plan_switch_started'          => 'bg-gray-100 text-gray-600',
                    'payment_paid'                 => 'bg-green-100 text-green-800',
                    'renewal_paid'                 => 'bg-green-100 text-green-800',
                    'payment_failed'               => 'bg-red-100 text-red-700',
                    'payment_expired'              => 'bg-red-100 text-red-700',
                    'payment_cancelled'            => 'bg-red-100 text-red-700',
                    'subscription_cancelled'       => 'bg-orange-100 text-orange-700',
                    'subscription_creation_failed' => 'bg-red-100 text-red-700',
                    'referral_reward_granted'      => 'bg-violet-100 text-violet-700',
                    'webhook_received'             => 'bg-blue-100 text-blue-700',
                    'webhook_error'                => 'bg-red-100 text-red-700',
                ];
                $actionColors = [
                    'subscription_grant'   => 'bg-blue-100 text-blue-700',
                    'subscription_extend'  => 'bg-green-100 text-green-700',
                    'subscription_revoke'  => 'bg-red-100 text-red-700',
                    'subscription_trial'   => 'bg-emerald-100 text-emerald-700',
                    'subscription_manual'  => 'bg-gray-100 text-gray-600',
                ];
                $actionLabels = [
                    'subscription_grant'   => 'Verleend',
                    'subscription_extend'  => 'Verlengd',
                    'subscription_revoke'  => 'Ingetrokken',
                    'subscription_trial'   => 'Proefperiode',
                    'subscription_manual'  => 'Handmatig',
                ];
            @endphp

            @if ($paymentLogs->isNotEmpty())
                <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">Mollie betalingen</h4>
                <div class="overflow-x-auto mb-5">
                    <table class="w-full text-xs">
                        <thead>
                            <tr class="text-gray-400 border-b border-gray-50">
                                <th class="text-left py-1.5 pr-3 font-medium">Datum</th>
                                <th class="text-left py-1.5 pr-3 font-medium">Event</th>
                                <th class="text-left py-1.5 pr-3 font-medium">Plan</th>
                                <th class="text-left py-1.5 pr-3 font-medium">Bedrag</th>
                                <th class="text-left py-1.5 pr-3 font-medium">Periode</th>
                                <th class="text-left py-1.5 font-medium">Mollie ID</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @foreach ($paymentLogs as $log)
                            <tr>
                                <td class="py-1.5 pr-3 text-gray-400 whitespace-nowrap tabular-nums">
                                    {{ $log->created_at->format('d/m/Y H:i:s') }}
                                </td>
                                <td class="py-1.5 pr-3">
                                    <span class="px-1.5 py-0.5 rounded text-[11px] font-medium {{ $eventColors[$log->event] ?? 'bg-gray-100 text-gray-600' }}">
                                        {{ $log->event }}
                                    </span>
                                </td>
                                <td class="py-1.5 pr-3 text-gray-600">{{ $log->plan ?? '—' }}</td>
                                <td class="py-1.5 pr-3 font-mono text-gray-700">
                                    @if ($log->amount)
                                        €{{ $log->amount }}
                                        @if ($log->discount_amount)
                                            <span class="text-green-600">(-€{{ $log->discount_amount }})</span>
                                        @endif
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="py-1.5 pr-3 text-gray-500 whitespace-nowrap tabular-nums">
                                    @if ($log->subscription_starts_at && $log->subscription_ends_at)
                                        {{ $log->subscription_starts_at->format('d/m/y') }} – {{ $log->subscription_ends_at->format('d/m/y') }}
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="py-1.5 font-mono text-gray-400 truncate max-w-32"
                                    title="{{ $log->mollie_payment_id }}">
                                    {{ $log->mollie_payment_id ? substr($log->mollie_payment_id, 0, 18) . '…' : '—' }}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

            @if ($subscriptionAdminLogs->isNotEmpty())
                <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">Admin-aanpassingen</h4>
                <div class="overflow-x-auto">
                    <table class="w-full text-xs">
                        <thead>
                            <tr class="text-gray-400 border-b border-gray-50">
                                <th class="text-left py-1.5 pr-3 font-medium">Datum</th>
                                <th class="text-left py-1.5 pr-3 font-medium">Actie</th>
                                <th class="text-left py-1.5 pr-3 font-medium">Door</th>
                                <th class="text-left py-1.5 pr-3 font-medium">Waarde</th>
                                <th class="text-left py-1.5 font-medium">Periode</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @foreach ($subscriptionAdminLogs as $log)
                            <tr>
                                <td class="py-1.5 pr-3 text-gray-400 whitespace-nowrap tabular-nums">
                                    {{ $log->created_at->format('d/m/Y H:i:s') }}
                                </td>
                                <td class="py-1.5 pr-3">
                                    <span class="px-1.5 py-0.5 rounded text-[11px] font-medium {{ $actionColors[$log->action] ?? 'bg-gray-100 text-gray-600' }}">
                                        {{ $actionLabels[$log->action] ?? $log->action }}
                                    </span>
                                </td>
                                <td class="py-1.5 pr-3 text-gray-600">
                                    @if ($log->admin)
                                        <a href="{{ route('admin.users.show', $log->admin) }}"
                                           class="text-indigo-500 hover:underline">{{ $log->admin->name }}</a>
                                    @else
                                        <span class="text-gray-400">—</span>
                                    @endif
                                </td>
                                <td class="py-1.5 pr-3 text-gray-600 font-mono">{{ $log->new_value ?? '—' }}</td>
                                <td class="py-1.5 text-gray-500 whitespace-nowrap tabular-nums">
                                    @if (!empty($log->meta['starts_at']) || !empty($log->meta['ends_at']))
                                        @if (!empty($log->meta['starts_at']))
                                            {{ \Carbon\Carbon::parse($log->meta['starts_at'])->format('d/m/y') }}
                                        @endif
                                        @if (!empty($log->meta['ends_at']))
                                            – {{ \Carbon\Carbon::parse($log->meta['ends_at'])->format('d/m/y') }}
                                        @endif
                                    @else
                                        —
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
        @endif

        {{-- Sessieoverzicht --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-3">Recente sessies <span class="text-gray-400 font-normal">(laatste 20)</span></h3>
            @if (empty($recentSessions) || count($recentSessions) === 0)
                <p class="text-xs text-gray-400">Geen sessies geregistreerd.</p>
            @else
                <div class="overflow-x-auto">
                    <table class="w-full text-xs">
                        <thead>
                            <tr class="text-gray-400 border-b border-gray-50">
                                <th class="text-left py-1.5 pr-3 font-medium">Start</th>
                                <th class="text-left py-1.5 pr-3 font-medium">Laatste activiteit</th>
                                <th class="text-left py-1.5 pr-3 font-medium">Pagina's</th>
                                <th class="text-left py-1.5 pr-3 font-medium">Toestel</th>
                                <th class="text-left py-1.5 font-medium">Bron</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @foreach ($recentSessions as $session)
                            <tr>
                                <td class="py-1.5 pr-3 text-gray-400 whitespace-nowrap tabular-nums">
                                    {{ \Carbon\Carbon::parse($session->started_at)->format('d/m/Y H:i:s') }}
                                </td>
                                <td class="py-1.5 pr-3 text-gray-400 whitespace-nowrap tabular-nums">
                                    {{ \Carbon\Carbon::parse($session->last_active_at)->format('d/m H:i:s') }}
                                </td>
                                <td class="py-1.5 pr-3 font-medium {{ $session->page_count > 1 ? 'text-green-600' : 'text-gray-400' }}">
                                    {{ $session->page_count }}
                                </td>
                                <td class="py-1.5 pr-3 text-gray-500">
                                    {{ $session->device_type }} · {{ $session->browser }}
                                </td>
                                <td class="py-1.5 text-gray-400">{{ $session->source_type ?? '—' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

        {{-- ICE-contacten (noodcontacten) --}}
        @if ($user->iceContacts->isNotEmpty())
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-3">
                Noodcontacten (ICE)
                <span class="ml-2 text-xs font-normal text-gray-400">({{ $user->iceContacts->count() }})</span>
            </h3>
            <div class="overflow-x-auto">
                <table class="w-full text-xs">
                    <thead>
                        <tr class="text-gray-400 border-b border-gray-50">
                            <th class="text-left py-1.5 pr-3 font-medium">Naam</th>
                            <th class="text-left py-1.5 pr-3 font-medium">Relatie</th>
                            <th class="text-left py-1.5 pr-3 font-medium">Telefoon</th>
                            <th class="text-left py-1.5 pr-3 font-medium">E-mail</th>
                            <th class="text-left py-1.5 font-medium">Notitie</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach ($user->iceContacts as $ice)
                        <tr>
                            <td class="py-1.5 pr-3 font-medium text-gray-700">{{ $ice->name }}</td>
                            <td class="py-1.5 pr-3 text-gray-500">{{ $ice->relation ?? '—' }}</td>
                            <td class="py-1.5 pr-3 text-gray-500 font-mono">{{ $ice->phone ?? '—' }}</td>
                            <td class="py-1.5 pr-3 text-gray-500 truncate max-w-36">{{ $ice->email ?? '—' }}</td>
                            <td class="py-1.5 text-gray-400">{{ $ice->note ?? '—' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        {{-- Likes & Matches --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">
                Likes &amp; Matches
                <span class="ml-2 text-xs font-normal text-gray-400">
                    {{ $user->likes_count }} gegeven · {{ $user->liked_by_count }} ontvangen · {{ $matches->count() }} {{ $matches->count() === 1 ? 'match' : 'matches' }}
                </span>
            </h3>

            @if ($matches->isNotEmpty())
                @php $givenByTarget = $likesGiven->keyBy('to_user_id'); @endphp
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Matches</p>
                <div class="flex flex-wrap gap-2 mb-5">
                    @foreach ($matches as $match)
                        @php $matchLike = $givenByTarget[$match->id] ?? null; @endphp
                        <a href="{{ route('admin.users.show', $match) }}"
                           class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs bg-green-50 text-green-700 border border-green-200 hover:bg-green-100 transition"
                           title="{{ $matchLike ? $matchLike->created_at->format('d/m/y H:i:s') : '' }}">
                            <span class="w-1.5 h-1.5 rounded-full bg-green-500 shrink-0"></span>
                            <span class="text-green-400 font-normal">#{{ $match->id }}</span> {{ $match->name }}
                            @if ($matchLike)
                                <span class="text-green-400 font-normal">{{ $matchLike->created_at->format('d/m/y H:i:s') }}</span>
                            @endif
                        </a>
                    @endforeach
                </div>
            @endif

            <div class="grid grid-cols-2 gap-4">

                {{-- Likes gegeven --}}
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
                        Gegeven <span class="font-normal text-gray-400">({{ $likesGiven->count() }})</span>
                    </p>
                    @if ($likesGiven->isEmpty())
                        <p class="text-xs text-gray-300 italic">Geen</p>
                    @else
                        <div class="space-y-1 max-h-48 overflow-y-auto pr-1">
                            @foreach ($likesGiven as $like)
                                <div class="flex items-center justify-between gap-2 text-xs">
                                    <a href="{{ route('admin.users.show', $like->to_user_id) }}"
                                       class="text-indigo-600 hover:underline truncate">
                                        <span class="text-gray-400 font-normal">#{{ $like->to_user_id }}</span> {{ $like->toUser?->name ?? '—' }}
                                    </a>
                                    <span class="text-gray-300 shrink-0 tabular-nums">
                                        {{ $like->created_at->format('d/m/y H:i:s') }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- Likes ontvangen --}}
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
                        Ontvangen <span class="font-normal text-gray-400">({{ $likesReceived->count() }})</span>
                    </p>
                    @if ($likesReceived->isEmpty())
                        <p class="text-xs text-gray-300 italic">Geen</p>
                    @else
                        <div class="space-y-1 max-h-48 overflow-y-auto pr-1">
                            @foreach ($likesReceived as $like)
                                <div class="flex items-center justify-between gap-2 text-xs">
                                    <a href="{{ route('admin.users.show', $like->from_user_id) }}"
                                       class="text-indigo-600 hover:underline truncate">
                                        <span class="text-gray-400 font-normal">#{{ $like->from_user_id }}</span> {{ $like->fromUser?->name ?? '—' }}
                                    </a>
                                    <span class="text-gray-300 shrink-0 tabular-nums">
                                        {{ $like->created_at->format('d/m/y H:i:s') }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

            </div>
        </div>

        {{-- GDPR --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">Persoonsgegevens (GDPR)</h3>

            @php
                $yn = fn($v) => $v
                    ? '<span class="text-green-600">Ja</span>'
                    : '<span class="text-gray-400">Nee</span>';

                // Unieke IPs uit loginlogs
                $knownIps = $recentLogins
                    ->pluck('ip_address')
                    ->merge(collect($recentSessions)->pluck('ip'))
                    ->filter()
                    ->unique()
                    ->sort()
                    ->values();

                // Unieke user agents uit loginlogs
                $knownUAs = $recentLogins
                    ->pluck('user_agent')
                    ->filter()
                    ->unique()
                    ->values();

                // Unieke apparaat+browser combos uit sessies
                $knownDevices = collect($recentSessions)
                    ->map(fn($s) => trim(($s->device_type ?? '') . ' · ' . ($s->browser ?? ''), ' ·'))
                    ->filter()
                    ->unique()
                    ->values();

                $howFoundLabel = match($user->how_found) {
                    'search_engine' => 'Zoekmachine',
                    'social_media'  => 'Social media',
                    'friend_family' => 'Vriend of familie',
                    'professional'  => 'Therapeut / coach / professional',
                    'news_blog'     => 'Nieuwsartikel of blog',
                    'event'         => 'Evenement of activiteit',
                    'other'         => 'Anders',
                    default         => null,
                };
            @endphp

            {{-- Toestemming --}}
            <p class="text-[11px] font-semibold text-gray-400 uppercase tracking-wide mb-2">Toestemming</p>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm mb-5">
                <div>
                    <dt class="text-xs text-gray-400">Algemene voorwaarden</dt>
                    <dd class="text-gray-700">
                        @if ($user->terms_accepted_at)
                            {{ $user->terms_accepted_at->format('d/m/Y H:i:s') }}
                            @if ($user->terms_version)
                                <span class="text-xs text-gray-400 ml-1">v{{ $user->terms_version }}</span>
                            @endif
                        @else
                            <span class="text-red-500">Niet geaccepteerd</span>
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Privacyverklaring versie</dt>
                    <dd class="text-gray-700">{{ $user->privacy_version ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Account aangemaakt</dt>
                    <dd class="text-gray-700">{{ $user->created_at->format('d/m/Y H:i:s') }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">E-mail geverifieerd</dt>
                    <dd>
                        @if ($user->email_verified_at)
                            <span class="text-gray-700">{{ $user->email_verified_at->format('d/m/Y H:i:s') }}</span>
                        @else
                            <span class="text-red-500">Niet geverifieerd</span>
                        @endif
                    </dd>
                </div>
                <div class="col-span-2">
                    <dt class="text-xs text-gray-400">Hoe gevonden</dt>
                    <dd class="text-gray-700">{{ $howFoundLabel ?? ($user->how_found ?: '—') }}</dd>
                </div>
            </dl>

            {{-- Communicatievoorkeuren --}}
            <p class="text-[11px] font-semibold text-gray-400 uppercase tracking-wide mb-1">Communicatievoorkeuren</p>
            <p class="text-[10px] text-gray-400 mb-2">E-mail</p>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mb-3">
                <div><dt class="text-xs text-gray-400">Bij like</dt><dd>{!! $yn($user->email_likes) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Bij match</dt><dd>{!! $yn($user->email_matches) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Groepsuitnodiging</dt><dd>{!! $yn($user->email_group_invite) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Evenementuitnodiging</dt><dd>{!! $yn($user->email_event_invite) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Nieuw bericht</dt><dd>{!! $yn($user->email_message) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Marketing</dt><dd>{!! $yn($user->email_marketing) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Maandelijkse digest</dt><dd>{!! $yn($user->email_digest) !!}</dd></div>
            </dl>
            <p class="text-[10px] text-gray-400 mb-2">In-app / push</p>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mb-3">
                <div><dt class="text-xs text-gray-400">Bij like</dt><dd>{!! $yn($user->notify_likes) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Bij match</dt><dd>{!! $yn($user->notify_matches) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Groepsactiviteit</dt><dd>{!! $yn($user->notify_group_activity) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Evenementherinneringen</dt><dd>{!! $yn($user->notify_event_reminders) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Groepsuitnodiging</dt><dd>{!! $yn($user->notify_group_invite) !!}</dd></div>
                <div><dt class="text-xs text-gray-400">Evenementuitnodiging</dt><dd>{!! $yn($user->notify_event_invite) !!}</dd></div>
            </dl>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mb-5">
                <div><dt class="text-xs text-gray-400">Berichten ontvangen</dt><dd>{!! $yn($user->allow_messages) !!}</dd></div>
                <div>
                    <dt class="text-xs text-gray-400">Uitnodigingen van</dt>
                    <dd class="text-gray-700 text-xs">
                        @if ($user->invite_from)
                            {{ implode(', ', (array) $user->invite_from) }}
                        @else
                            <span class="text-gray-400">—</span>
                        @endif
                    </dd>
                </div>
            </dl>

            {{-- Registratie --}}
            <p class="text-[11px] font-semibold text-gray-400 uppercase tracking-wide mb-2">Registratie</p>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm mb-5">
                <div>
                    <dt class="text-xs text-gray-400">Registratie-IP</dt>
                    <dd class="font-mono text-gray-700">{{ $registrationLog?->ip_address ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Registratietijd</dt>
                    <dd class="text-gray-700">
                        {{ $registrationLog ? $registrationLog->created_at->format('d/m/Y H:i:s') : '—' }}
                    </dd>
                </div>
                <div class="col-span-2">
                    <dt class="text-xs text-gray-400">Browser / apparaat bij registratie</dt>
                    <dd class="text-gray-600 text-xs break-all">{{ $registrationLog?->user_agent ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Referralcode (eigen)</dt>
                    <dd class="font-mono text-gray-700">{{ $user->referral_code ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Doorverwezen door</dt>
                    <dd>
                        @if ($user->referredBy)
                            <a href="{{ route('admin.users.show', $user->referredBy) }}"
                               class="text-indigo-600 hover:underline">{{ $user->referredBy->name }}</a>
                            <span class="text-xs text-gray-400 ml-1">#{{ $user->referred_by }}</span>
                        @else
                            <span class="text-gray-400">—</span>
                        @endif
                    </dd>
                </div>
                @if ($user->referral_rewarded_at)
                    <div class="col-span-2">
                        <dt class="text-xs text-gray-400">Referral beloond op</dt>
                        <dd class="text-gray-700">{{ $user->referral_rewarded_at->format('d/m/Y H:i:s') }}</dd>
                    </div>
                @endif
            </dl>

            {{-- Bekende IP-adressen --}}
            <p class="text-[11px] font-semibold text-gray-400 uppercase tracking-wide mb-2">
                Bekende IP-adressen
                <span class="font-normal normal-case">(laatste 50 logingebeurtenissen + sessies)</span>
            </p>
            @if ($knownIps->isEmpty())
                <p class="text-xs text-gray-300 italic mb-5">Geen geregistreerd.</p>
            @else
                <div class="flex flex-wrap gap-1.5 mb-5">
                    @foreach ($knownIps as $ip)
                        <span class="font-mono text-xs px-2 py-0.5 rounded bg-gray-50 border border-gray-100 text-gray-600">{{ $ip }}</span>
                    @endforeach
                </div>
            @endif

            {{-- Apparaten & browsers --}}
            <p class="text-[11px] font-semibold text-gray-400 uppercase tracking-wide mb-2">
                Apparaten &amp; browsers
                <span class="font-normal normal-case">(laatste 20 sessies)</span>
            </p>
            @if ($knownDevices->isEmpty() && $knownUAs->isEmpty())
                <p class="text-xs text-gray-300 italic mb-5">Geen geregistreerd.</p>
            @else
                @if ($knownDevices->isNotEmpty())
                    <div class="flex flex-wrap gap-1.5 mb-2">
                        @foreach ($knownDevices as $device)
                            <span class="text-xs px-2 py-0.5 rounded bg-sky-50 border border-sky-100 text-sky-700">{{ $device }}</span>
                        @endforeach
                    </div>
                @endif
                @if ($knownUAs->isNotEmpty())
                    <details class="mb-5">
                        <summary class="cursor-pointer text-xs text-gray-400 hover:text-gray-600 select-none">
                            User agents ({{ $knownUAs->count() }}) ▸
                        </summary>
                        <ul class="mt-2 space-y-1">
                            @foreach ($knownUAs as $ua)
                                <li class="text-[11px] text-gray-500 font-mono break-all bg-gray-50 rounded px-2 py-1">{{ $ua }}</li>
                            @endforeach
                        </ul>
                    </details>
                @else
                    <div class="mb-5"></div>
                @endif
            @endif

            {{-- Mollie & betaalidentifiers --}}
            <p class="text-[11px] font-semibold text-gray-400 uppercase tracking-wide mb-2">Mollie &amp; betaalidentifiers</p>
            <dl class="grid grid-cols-1 gap-y-2.5 text-sm">
                <div>
                    <dt class="text-xs text-gray-400">Mollie klant-ID</dt>
                    <dd class="font-mono text-gray-700 text-xs">{{ $user->mollie_customer_id ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Mollie abonnements-ID</dt>
                    <dd class="font-mono text-gray-700 text-xs">{{ $user->mollie_subscription_id ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400">Betalingsreferentie</dt>
                    <dd class="font-mono text-gray-700 text-xs">{{ $user->subscription_payment_ref ?? '—' }}</dd>
                </div>
                @if ($user->payout_iban)
                    <div>
                        <dt class="text-xs text-gray-400">Uitbetaling IBAN</dt>
                        <dd class="font-mono text-gray-700 text-xs">{{ $user->payout_iban }}</dd>
                    </div>
                @endif
            </dl>
        </div>

    </div>

    {{-- Right: actions --}}
    <div class="space-y-5">

        {{-- GDPR data download --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-1">Gegevensexport (GDPR)</h3>
            <p class="text-xs text-gray-400 mb-3">Identiek aan de CSV die de gebruiker zelf kan downloaden.</p>
            <a href="{{ route('admin.users.export', $user) }}"
               class="flex items-center justify-center gap-2 w-full py-2 text-sm border border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 transition">
                ↓ Download CSV
            </a>
        </div>

        {{-- Change role --}}
        @if (auth()->user()->isAdmin())
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h3 class="text-sm font-semibold text-gray-700 mb-3">Rol wijzigen</h3>
                <form method="POST" action="{{ route('admin.users.role', $user) }}">
                    @csrf @method('PATCH')
                    <select name="role"
                            class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 mb-3 focus:outline-none focus:ring-1 focus:ring-blue-400">
                        @foreach (\App\Enums\Role::cases() as $role)
                            <option value="{{ $role->value }}" @selected($user->role === $role)>
                                {{ ucfirst($role->value) }}
                            </option>
                        @endforeach
                    </select>
                    <button type="submit"
                            class="w-full py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                        Opslaan
                    </button>
                </form>
            </div>
        @endif

        {{-- Subscription management --}}
        @if (auth()->user()->isAdmin())
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h3 class="text-sm font-semibold text-gray-700 mb-3">Abonnement</h3>

                {{-- Current state summary --}}
                <p class="text-sm mb-4">
                    @if ($user->is_pro)
                        <span class="font-medium text-violet-600">🏅 PRO</span>
                    @elseif ($user->is_premium && $user->subscription_status === 'trial')
                        <span class="font-medium text-emerald-600">🎁 Gratis periode</span>
                    @elseif ($user->is_premium)
                        <span class="font-medium text-blue-600">💎 Premium</span>
                    @else
                        <span class="text-gray-400">Geen actief abonnement</span>
                    @endif
                    @if ($user->subscription_status === 'cancelled' && $user->subscription_ends_at)
                        <span class="text-gray-500"> — opgezegd, toegang t/m {{ $user->subscription_ends_at->format('d/m/Y') }}</span>
                    @elseif ($user->subscription_ends_at && in_array($user->subscription_status, ['active', 'trial']))
                        <span class="text-gray-500"> — loopt t/m {{ $user->subscription_ends_at->format('d/m/Y') }}</span>
                    @endif
                </p>

                {{-- Quick actions --}}
                <div class="flex flex-wrap gap-2 mb-5">
                    @if (! ($user->is_premium && $user->subscription_status === 'active'))
                        <form method="POST" action="{{ route('admin.users.subscription', $user) }}">
                            @csrf @method('PATCH')
                            <input type="hidden" name="action" value="grant">
                            <input type="hidden" name="plan"   value="monthly">
                            <button class="px-3 py-1.5 text-xs rounded-lg bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100 transition">
                                + Maandelijks
                            </button>
                        </form>
                        <form method="POST" action="{{ route('admin.users.subscription', $user) }}">
                            @csrf @method('PATCH')
                            <input type="hidden" name="action" value="grant">
                            <input type="hidden" name="plan"   value="yearly">
                            <button class="px-3 py-1.5 text-xs rounded-lg bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100 transition">
                                + Jaarlijks
                            </button>
                        </form>
                    @endif

                    {{-- Trial period (no plan) --}}
                    @foreach ([7, 14, 30] as $trialDays)
                        <form method="POST" action="{{ route('admin.users.subscription', $user) }}">
                            @csrf @method('PATCH')
                            <input type="hidden" name="action" value="trial">
                            <input type="hidden" name="days"   value="{{ $trialDays }}">
                            <button class="px-3 py-1.5 text-xs rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100 transition">
                                🎁 {{ $trialDays }}d gratis
                            </button>
                        </form>
                    @endforeach
                    <form method="POST" action="{{ route('admin.users.subscription', $user) }}"
                          x-data="{ days: 30 }" class="flex items-center gap-1">
                        @csrf @method('PATCH')
                        <input type="hidden" name="action" value="trial">
                        <input type="number" name="days" x-model="days" min="1" max="365"
                               class="w-16 text-xs border border-emerald-200 rounded-lg px-2 py-1.5 text-center focus:outline-none focus:ring-1 focus:ring-emerald-400">
                        <button class="px-3 py-1.5 text-xs rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100 transition">
                            🎁 Aangepast
                        </button>
                    </form>

                    @if ($user->is_premium)
                        <form method="POST" action="{{ route('admin.users.subscription', $user) }}">
                            @csrf @method('PATCH')
                            <input type="hidden" name="action" value="extend">
                            <input type="hidden" name="months" value="1">
                            <button class="px-3 py-1.5 text-xs rounded-lg bg-green-50 text-green-700 border border-green-200 hover:bg-green-100 transition">
                                Verleng +1 maand
                            </button>
                        </form>
                        <form method="POST" action="{{ route('admin.users.subscription', $user) }}">
                            @csrf @method('PATCH')
                            <input type="hidden" name="action" value="extend">
                            <input type="hidden" name="months" value="12">
                            <button class="px-3 py-1.5 text-xs rounded-lg bg-green-50 text-green-700 border border-green-200 hover:bg-green-100 transition">
                                Verleng +1 jaar
                            </button>
                        </form>
                        <form method="POST" action="{{ route('admin.users.subscription', $user) }}"
                              onsubmit="return confirm('Abonnement volledig verwijderen en alle velden wissen?')">
                            @csrf @method('PATCH')
                            <input type="hidden" name="action" value="revoke">
                            <button class="px-3 py-1.5 text-xs rounded-lg bg-red-50 text-red-700 border border-red-200 hover:bg-red-100 transition">
                                Intrekken
                            </button>
                        </form>
                    @endif
                </div>

                {{-- Manual edit --}}
                <details>
                    <summary class="cursor-pointer text-xs text-gray-400 hover:text-gray-600 select-none mb-1">
                        Handmatig aanpassen ▸
                    </summary>
                    <form method="POST" action="{{ route('admin.users.subscription', $user) }}"
                          class="space-y-3 mt-3">
                        @csrf @method('PATCH')
                        <input type="hidden" name="action" value="manual">

                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Plan</label>
                            <select name="subscription_plan"
                                    class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-400">
                                <option value="">— geen —</option>
                                <option value="monthly"     @selected($user->subscription_plan === 'monthly')>Maandelijks (€9,00)</option>
                                <option value="yearly"      @selected($user->subscription_plan === 'yearly')>Jaarlijks (€70,00)</option>
                                <option value="pro_monthly" @selected($user->subscription_plan === 'pro_monthly')>PRO Maandelijks (€15,00)</option>
                                <option value="pro_yearly"  @selected($user->subscription_plan === 'pro_yearly')>PRO Jaarlijks (€117,00)</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Status</label>
                            <select name="subscription_status"
                                    class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-400">
                                <option value="">— geen —</option>
                                <option value="active"    @selected($user->subscription_status === 'active')>Actief</option>
                                <option value="trial"     @selected($user->subscription_status === 'trial')>Proefperiode</option>
                                <option value="cancelled" @selected($user->subscription_status === 'cancelled')>Opgezegd</option>
                                <option value="suspended" @selected($user->subscription_status === 'suspended')>Geschorst</option>
                                <option value="completed" @selected($user->subscription_status === 'completed')>Voltooid</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Gestart op</label>
                            <input type="date" name="subscription_started_at"
                                   value="{{ $user->subscription_started_at?->format('Y-m-d') }}"
                                   class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-400">
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Verloopt op</label>
                            <input type="date" name="subscription_ends_at"
                                   value="{{ $user->subscription_ends_at?->format('Y-m-d') }}"
                                   class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-400">
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Betalingsreferentie</label>
                            <input type="text" name="subscription_payment_ref"
                                   value="{{ $user->subscription_payment_ref }}"
                                   placeholder="—"
                                   class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 font-mono focus:outline-none focus:ring-1 focus:ring-blue-400">
                        </div>

                        <button type="submit"
                                class="w-full py-2 text-sm bg-gray-700 text-white rounded-lg hover:bg-gray-800 transition">
                            Opslaan
                        </button>
                    </form>
                </details>
            </div>
        @endif

        {{-- Impersonation --}}
        @if (auth()->user()->isAdmin() && ! $user->isAdmin() && ! $user->isModerator() && ! $user->isSupport())
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h3 class="text-sm font-semibold text-gray-700 mb-1">Profiel invullen als gebruiker</h3>
                <p class="text-xs text-gray-400 mb-3">Log tijdelijk in als deze gebruiker om diens profiel voor te bereiden. Een rode banner herinnert je dat je aan het impersoneren bent.</p>
                <form method="POST" action="{{ route('admin.users.impersonate', $user) }}">
                    @csrf
                    <button type="submit"
                            class="w-full py-2 text-sm bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition">
                        ✏️ Inloggen als {{ $user->name }}
                    </button>
                </form>
            </div>
        @endif

        {{-- PRO type selector --}}
        @if (auth()->user()->isAdmin())
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h3 class="text-sm font-semibold text-gray-700 mb-1">PRO type</h3>
                <p class="text-xs text-gray-400 mb-3">Bepaalt of een PRO-gebruiker als individuele hulpverlener of als hulporganisatie verschijnt.</p>
                <form method="POST" action="{{ route('admin.users.pro_type', $user) }}" class="flex items-center gap-2">
                    @csrf @method('PATCH')
                    <select name="pro_type"
                            class="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-400">
                        <option value="">— geen (reguliere gebruiker) —</option>
                        <option value="individual"   @selected($user->pro_type === 'individual')>🧑‍⚕️ Hulpverlener (individual)</option>
                        <option value="organization" @selected($user->pro_type === 'organization')>🏢 Hulporganisatie (organization)</option>
                    </select>
                    <button type="submit"
                            class="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
                        Opslaan
                    </button>
                </form>
                @if (session('success') && str_contains(session('success'), 'Pro type'))
                    <p class="mt-2 text-xs text-green-600">{{ session('success') }}</p>
                @endif
            </div>
        @endif

        {{-- Suspend / unsuspend --}}
        @if (auth()->user()->isAdmin() || auth()->user()->isModerator())
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h3 class="text-sm font-semibold text-gray-700 mb-3">Schorsing</h3>

                @if ($user->suspended_at)
                    <form method="POST" action="{{ route('admin.users.unsuspend', $user) }}">
                        @csrf
                        <button type="submit"
                                class="w-full py-2 text-sm border border-green-200 text-green-600 rounded-lg hover:bg-green-50 transition">
                            Schorsing opheffen
                        </button>
                    </form>
                @else
                    <form method="POST" action="{{ route('admin.users.suspend', $user) }}">
                        @csrf
                        <textarea name="reason" rows="3" placeholder="Reden (optioneel)…"
                                  class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 mb-3 resize-none focus:outline-none focus:ring-1 focus:ring-red-300"></textarea>
                        <button type="submit"
                                class="w-full py-2 text-sm border border-red-200 text-red-600 rounded-lg hover:bg-red-50 transition"
                                onclick="return confirm('Gebruiker schorsen?')">
                            Schorsen
                        </button>
                    </form>
                @endif
            </div>
        @endif

        {{-- Delete account --}}
        @if (auth()->user()->isAdmin() && $user->id !== auth()->id())
            <div class="bg-white rounded-xl shadow-sm border border-red-100 p-5"
                 x-data="{ open: false }">
                <h3 class="text-sm font-semibold text-red-600 mb-3">{{ __('Danger zone') }}</h3>
                <button type="button" @click="open = true"
                        class="w-full py-2 text-sm border border-red-300 text-red-600 rounded-lg hover:bg-red-50 transition">
                    {{ __('Delete account') }}
                </button>

                <div x-show="open" x-cloak
                     class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
                    <div class="bg-white rounded-xl shadow-xl border border-red-100 p-6 max-w-sm w-full mx-4">
                        <h4 class="text-base font-semibold text-gray-800 mb-2">{{ __('Delete account permanently?') }}</h4>
                        <p class="text-sm text-gray-500 mb-5">
                            {{ __('This removes the user, all profile data, photos, likes, messages, and subscriptions. This action cannot be undone.') }}
                        </p>
                        <p class="text-sm font-medium text-gray-700 mb-4 break-all">{{ $user->name }} — {{ $user->email }}</p>
                        <div class="flex gap-3">
                            <button type="button" @click="open = false"
                                    class="flex-1 py-2 text-sm border border-gray-200 text-gray-500 rounded-lg hover:bg-gray-50 transition">
                                {{ __('Cancel') }}
                            </button>
                            <form method="POST" action="{{ route('admin.users.destroy', $user) }}" class="flex-1">
                                @csrf @method('DELETE')
                                <button type="submit"
                                        class="w-full py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
                                    {{ __('Delete permanently') }}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif

    </div>
</div>

@endsection