{{-- resources/views/dashboard.blade.php --}}
@php
    $title = 'Dashboard';
    $pageTitle = 'Dashboard';
    $pageSubtitle = 'Übersicht für das ausgewählte Fahrzeug';

    $vehicle = app(\App\Support\VehicleContext::class)->current();
    $vehicleStatus = (int) ($vehicle?->is_active ?? 0); // 0 ready, 1 not_ready, 2 service

    $statusLabel = match ($vehicleStatus) {
        0 => 'Einsatzbereit',
        1 => 'Nicht einsatzbereit',
        2 => 'Werkstatt',
        default => 'Unbekannt',
    };

    // Status-Farben (Tailwind-only, kein Custom CSS nötig)
    $statusPill = match ($vehicleStatus) {
        0 => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
        1 => 'bg-rose-50 text-rose-700 ring-rose-200',
        2 => 'bg-amber-50 text-amber-800 ring-amber-200',
        default => 'bg-gray-50 text-gray-700 ring-gray-200',
    };

    $statusHero = match ($vehicleStatus) {
        0 => 'from-emerald-50 via-white to-white',
        1 => 'from-rose-50 via-white to-white',
        2 => 'from-amber-50 via-white to-white',
        default => 'from-gray-50 via-white to-white',
    };

    $statusDot = match ($vehicleStatus) {
        0 => 'bg-emerald-500',
        1 => 'bg-rose-500',
        2 => 'bg-amber-500',
        default => 'bg-gray-400',
    };
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="grid grid-cols-12 gap-6">

        {{-- KPIs --}}
        <section class="col-span-12">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">

                {{-- KPI Card --}}
                <div
                    class="group relative overflow-hidden rounded-3xl border border-gray-200/70 bg-white p-5 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md">
                    <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-brand/6 via-white to-white">
                    </div>
                    <div class="relative">
                        <div class="text-sm font-medium text-gray-600">Dokumente</div>
                        <div class="mt-3 flex items-end justify-between gap-3">
                            <div class="text-3xl font-bold tracking-tight text-gray-900">
                                {{ $stats['documents'] ?? '—' }}
                            </div>

                            @can('documents.view')
                                <a href="{{ route('documents.index') }}"
                                    class="inline-flex items-center gap-2 rounded-xl bg-gray-50 px-3 py-2 text-sm font-semibold text-brand ring-1 ring-gray-200 hover:bg-white hover:ring-brand/25">
                                    Ansehen
                                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2">
                                        <path d="M5 12h14" />
                                        <path d="m13 6 6 6-6 6" />
                                    </svg>
                                </a>
                            @else
                                <span class="text-sm font-semibold text-gray-400">—</span>
                            @endcan
                        </div>
                    </div>
                </div>

                {{-- KPI Card --}}
                <div
                    class="group relative overflow-hidden rounded-3xl border border-gray-200/70 bg-white p-5 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md">
                    <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-brand/6 via-white to-white">
                    </div>
                    <div class="relative">
                        <div class="text-sm font-medium text-gray-600">Offene Erinnerungen</div>
                        <div class="mt-3 flex items-end justify-between gap-3">
                            <div class="text-3xl font-bold tracking-tight text-gray-900">
                                {{ $stats['open_reminders'] ?? '—' }}
                            </div>

                            @can('reminders.view')
                                <a href="{{ route('reminders.index') }}"
                                    class="inline-flex items-center gap-2 rounded-xl bg-gray-50 px-3 py-2 text-sm font-semibold text-brand ring-1 ring-gray-200 hover:bg-white hover:ring-brand/25">
                                    Details
                                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2">
                                        <path d="M5 12h14" />
                                        <path d="m13 6 6 6-6 6" />
                                    </svg>
                                </a>
                            @else
                                <span class="text-sm font-semibold text-gray-400">—</span>
                            @endcan
                        </div>
                    </div>
                </div>

                {{-- KPI Card --}}
                <div
                    class="group relative overflow-hidden rounded-3xl border border-gray-200/70 bg-white p-5 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md">
                    <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-brand/6 via-white to-white">
                    </div>
                    <div class="relative">
                        <div class="text-sm font-medium text-gray-600">Offene Schäden</div>
                        <div class="mt-3 flex items-end justify-between gap-3">
                            <div class="text-3xl font-bold tracking-tight text-gray-900">
                                {{ $stats['open_damages'] ?? '—' }}
                            </div>

                            @can('damages.view')
                                <a href="{{ route('damages.index') }}"
                                    class="inline-flex items-center gap-2 rounded-xl bg-gray-50 px-3 py-2 text-sm font-semibold text-brand ring-1 ring-gray-200 hover:bg-white hover:ring-brand/25">
                                    Ansehen
                                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2">
                                        <path d="M5 12h14" />
                                        <path d="m13 6 6 6-6 6" />
                                    </svg>
                                </a>
                            @else
                                <span class="text-sm font-semibold text-gray-400">—</span>
                            @endcan
                        </div>
                    </div>
                </div>

            </div>
        </section>

        {{-- Mobile Quick Actions (top) --}}
        <section class="col-span-12 lg:hidden">
            <div class="rounded-3xl border border-gray-200/70 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-gray-900">Schnellaktionen</h2>
                </div>

                <div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
                    @can('documents.create')
                        <a href="{{ route('documents.index') }}"
                            class="w-full rounded-2xl bg-brand px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-brand-600 focus:outline-none focus:ring-4 focus:ring-brand/25 text-center">
                            Dokument hochladen
                        </a>
                    @else
                        <div
                            class="w-full rounded-2xl bg-gray-100 px-4 py-3 text-sm font-semibold text-gray-500 text-center">
                            Dokument hochladen
                        </div>
                    @endcan

                    @can('damages.create')
                        <a href="{{ route('damages.create') }}"
                            class="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold hover:bg-gray-50 text-center">
                            Schaden melden
                        </a>
                    @else
                        <div
                            class="w-full rounded-2xl bg-gray-100 px-4 py-3 text-sm font-semibold text-gray-500 text-center">
                            Schaden melden
                        </div>
                    @endcan

                    <a href="{{ route('vehicles.select') }}"
                        class="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold hover:bg-gray-50 text-center">
                        Fahrzeug wechseln
                    </a>
                </div>
            </div>
        </section>

        {{-- Left (Desktop: main content) --}}
        <section class="col-span-12 lg:col-span-7 space-y-6">

            {{-- Nächste Fristen --}}
            <div class="rounded-3xl border border-gray-200/70 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between gap-3">
                    <div class="flex items-center gap-3">
                        <span
                            class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-brand/10 text-brand ring-1 ring-brand/15">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M8 7V3" />
                                <path d="M16 7V3" />
                                <path d="M4 11h16" />
                                <path d="M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z" />
                            </svg>
                        </span>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Nächste Fristen</h2>
                            <p class="text-sm text-gray-600">Demnächst fällige Erinnerungen für dieses Fahrzeug.</p>
                        </div>
                    </div>

                    @can('reminders.view')
                        <a href="{{ route('reminders.index') }}"
                            class="shrink-0 inline-flex items-center gap-2 rounded-2xl bg-gray-50 px-3 py-2 text-sm font-semibold text-brand ring-1 ring-gray-200 hover:bg-white hover:ring-brand/25">
                            Alle anzeigen
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M5 12h14" />
                                <path d="m13 6 6 6-6 6" />
                            </svg>
                        </a>
                    @endcan
                </div>

                {{-- Mobile Cards --}}
                <div class="mt-4 lg:hidden space-y-3">
                    @can('reminders.view')
                        @forelse($dueReminders as $r)
                            @php
                                $due = $r->due_at;
                                $isOverdue = $due && $due->isPast();
                                $days = $due ? now()->startOfDay()->diffInDays($due->startOfDay(), false) : null;

                                $badge = 'Offen';
                                $badgeClass = 'bg-gray-50 text-gray-700 ring-gray-200';

                                if ($isOverdue) {
                                    $badge = 'Überfällig';
                                    $badgeClass = 'bg-rose-50 text-rose-700 ring-rose-200';
                                } elseif (!is_null($days)) {
                                    $badge = 'In ' . max($days, 0) . ' Tagen';
                                    $badgeClass = 'bg-amber-50 text-amber-800 ring-amber-200';
                                }
                            @endphp

                            <div class="rounded-3xl border border-gray-200/70 bg-white p-4 shadow-sm">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <div class="text-sm font-semibold text-gray-900 truncate">{{ $r->title }}</div>
                                        <div class="mt-1 text-sm text-gray-600">
                                            Fällig: <span
                                                class="font-semibold text-gray-900">{{ $due ? $due->format('d.m.Y') : '—' }}</span>
                                        </div>
                                    </div>

                                    <span
                                        class="shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $badgeClass }}">
                                        {{ $badge }}
                                    </span>
                                </div>

                                <div class="mt-4 flex justify-end">
                                    <a href="{{ route('reminders.index') }}"
                                        class="inline-flex items-center gap-2 rounded-2xl bg-gray-50 px-3 py-2 text-xs font-semibold ring-1 ring-gray-200 hover:bg-white">
                                        Details
                                    </a>
                                </div>
                            </div>
                        @empty
                            <div class="rounded-3xl border border-gray-200/70 bg-white p-5 text-sm text-gray-600 shadow-sm">
                                Keine offenen Erinnerungen.
                            </div>
                        @endforelse
                    @else
                        <div class="rounded-3xl border border-gray-200/70 bg-white p-5 text-sm text-gray-600 shadow-sm">
                            Kein Zugriff.
                        </div>
                    @endcan
                </div>

                {{-- Desktop Table --}}
                <div class="mt-4 hidden lg:block overflow-hidden rounded-2xl border border-gray-200/70">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 text-gray-600">
                            <tr>
                                <th class="px-4 py-3 text-left font-semibold">Datum</th>
                                <th class="px-4 py-3 text-left font-semibold">Thema</th>
                                <th class="px-4 py-3 text-left font-semibold">Status</th>
                                <th class="px-4 py-3 text-right font-semibold"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200/70">
                            @can('reminders.view')
                                @forelse($dueReminders as $r)
                                    @php
                                        $due = $r->due_at;
                                        $isOverdue = $due && $due->isPast();
                                        $days = $due
                                            ? now()->startOfDay()->diffInDays($due->startOfDay(), false)
                                            : null;
                                    @endphp

                                    <tr class="bg-white hover:bg-gray-50/40">
                                        <td class="px-4 py-3">{{ $due ? $due->format('d.m.Y') : '—' }}</td>
                                        <td class="px-4 py-3 font-medium text-gray-900">{{ $r->title }}</td>
                                        <td class="px-4 py-3">
                                            @if ($isOverdue)
                                                <span
                                                    class="rounded-full bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-700 ring-1 ring-rose-200">Überfällig</span>
                                            @elseif(!is_null($days))
                                                <span
                                                    class="rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-800 ring-1 ring-amber-200">
                                                    In {{ max($days, 0) }} Tagen
                                                </span>
                                            @else
                                                <span
                                                    class="rounded-full bg-gray-50 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">Offen</span>
                                            @endif
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <a href="{{ route('reminders.index') }}"
                                                class="inline-flex items-center gap-2 rounded-2xl bg-gray-50 px-3 py-2 text-xs font-semibold ring-1 ring-gray-200 hover:bg-white">
                                                Details
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr class="bg-white">
                                        <td colspan="4" class="px-4 py-6 text-center text-sm text-gray-600">
                                            Keine offenen Erinnerungen.
                                        </td>
                                    </tr>
                                @endforelse
                            @else
                                <tr class="bg-white">
                                    <td colspan="4" class="px-4 py-6 text-center text-sm text-gray-600">
                                        Kein Zugriff.
                                    </td>
                                </tr>
                            @endcan
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Letzte Aktivitäten --}}
            <div class="rounded-3xl border border-gray-200/70 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between gap-3">
                    <div class="flex items-center gap-3">
                        <span
                            class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-brand/10 text-brand ring-1 ring-brand/15">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M12 8v4l2 2" />
                                <circle cx="12" cy="12" r="9" />
                            </svg>
                        </span>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Letzte Aktivitäten</h2>
                            <p class="text-sm text-gray-600">Neuste Änderungen und Aktionen im System.</p>
                        </div>
                    </div>

                    <a href="{{ route('history.index') }}"
                        class="shrink-0 inline-flex items-center gap-2 rounded-2xl bg-gray-50 px-3 py-2 text-sm font-semibold text-brand ring-1 ring-gray-200 hover:bg-white hover:ring-brand/25">
                        Historie
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M5 12h14" />
                            <path d="m13 6 6 6-6 6" />
                        </svg>
                    </a>
                </div>

                <div class="mt-4 space-y-3">
                    @forelse(($recentActivities ?? []) as $a)
                        <div
                            class="group relative overflow-hidden rounded-3xl border border-gray-200/70 bg-white p-4 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md">
                            <div
                                class="pointer-events-none absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-brand via-brand/70 to-brand/30">
                            </div>

                            <div class="pl-3">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <div class="flex items-start gap-3">
                                            <span
                                                class="mt-0.5 inline-flex h-9 w-9 items-center justify-center rounded-2xl bg-brand/10 text-brand ring-1 ring-brand/15">
                                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
                                                    stroke="currentColor" stroke-width="2">
                                                    <path d="M12 8v4l2 2" />
                                                    <circle cx="12" cy="12" r="9" />
                                                </svg>
                                            </span>

                                            <div class="min-w-0">
                                                <div class="truncate text-sm font-semibold text-gray-900">
                                                    {{ $a['title'] ?? 'Aktivität' }}
                                                </div>
                                                @if (!empty($a['subtitle']))
                                                    <div class="mt-1 line-clamp-2 text-sm text-gray-600">
                                                        {{ $a['subtitle'] }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    @if (!empty($a['when']))
                                        <span
                                            class="shrink-0 rounded-full bg-gray-50 px-2.5 py-1 text-xs font-semibold text-gray-600 ring-1 ring-gray-200">
                                            {{ $a['when'] }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <div
                            class="rounded-3xl border border-gray-200/70 bg-white p-5 text-sm text-gray-600 shadow-sm">
                            <div class="flex items-start gap-3">
                                <span
                                    class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-gray-100 text-gray-500 ring-1 ring-gray-200">
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2">
                                        <path d="M12 8v4" />
                                        <path d="M12 16h.01" />
                                        <circle cx="12" cy="12" r="9" />
                                    </svg>
                                </span>
                                <div>
                                    <div class="font-semibold text-gray-900">Noch keine Aktivitäten</div>
                                    <div class="mt-0.5 text-sm text-gray-600">Sobald etwas passiert, erscheint es hier
                                        im Verlauf.</div>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </section>

        {{-- Right --}}
        <aside class="col-span-12 lg:col-span-5 space-y-6">

            {{-- Vehicle Status (Hero Card) --}}
            @can('vehicles.status.manage')
                <div
                    class="relative overflow-hidden rounded-3xl border border-gray-200/70 bg-gradient-to-br {{ $statusHero }} p-5 shadow-sm">
                    <div
                        class="pointer-events-none absolute -top-24 -right-24 h-56 w-56 rounded-full bg-brand/10 blur-3xl">
                    </div>

                    <div class="relative flex items-start justify-between gap-3">
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Fahrzeugstatus</h2>
                            <p class="mt-1 text-sm text-gray-600">
                                Aktueller Einsatzstatus für das ausgewählte Fahrzeug.
                            </p>
                        </div>

                        <div class="flex flex-col items-end gap-2">
                            @if (!empty($vehicle?->call_sign))
                                <span
                                    class="rounded-full bg-white/70 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200/70">
                                    {{ $vehicle->call_sign }}
                                </span>
                            @endif

                            <span
                                class="inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $statusPill }}">
                                <span class="h-2 w-2 rounded-full {{ $statusDot }}"></span>
                                {{ $statusLabel }}
                            </span>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('vehicles.status.update') }}" class="relative mt-4 space-y-3">
                        @csrf
                        @method('PATCH')

                        <div>
                            <label class="text-sm font-medium text-gray-800">Status</label>

                            <select name="is_active"
                                class="mt-2 w-full rounded-2xl border-gray-200 bg-white/90 py-2.5 text-sm shadow-sm focus:border-brand focus:ring-brand">
                                <option value="0" @selected((int) old('is_active', $vehicleStatus) === 0)>Einsatzbereit</option>
                                <option value="1" @selected((int) old('is_active', $vehicleStatus) === 1)>Nicht einsatzbereit</option>
                                <option value="2" @selected((int) old('is_active', $vehicleStatus) === 2)>Werkstatt</option>
                            </select>

                            @error('is_active')
                                <div class="mt-2 text-sm text-rose-600">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="flex items-center justify-end gap-2">
                            <button type="submit"
                                class="w-full sm:w-auto rounded-2xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-600 focus:outline-none focus:ring-4 focus:ring-brand/25">
                                Speichern
                            </button>
                        </div>

                        <div class="text-xs text-gray-500">
                            Hinweis: Kritische, einsatzrelevante Schäden können den Status automatisch überschreiben (wenn
                            aktiviert).
                        </div>
                    </form>
                </div>
            @endcan

            {{-- Schnellaktionen (Desktop only) --}}
            <div class="hidden lg:block rounded-3xl border border-gray-200/70 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-gray-900">Schnellaktionen</h2>
                </div>

                <div class="mt-4 grid grid-cols-1 gap-3">
                    @can('documents.create')
                        <a href="{{ route('documents.index') }}"
                            class="rounded-2xl bg-brand px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-brand-600 focus:outline-none focus:ring-4 focus:ring-brand/25">
                            Dokument hochladen
                        </a>
                    @else
                        <div class="rounded-2xl bg-gray-100 px-4 py-3 text-sm font-semibold text-gray-500">
                            Dokument hochladen
                        </div>
                    @endcan

                    @can('damages.create')
                        <a href="{{ route('damages.create') }}"
                            class="rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold shadow-sm hover:bg-gray-50">
                            Schaden melden
                        </a>
                    @else
                        <div class="rounded-2xl bg-gray-100 px-4 py-3 text-sm font-semibold text-gray-500">
                            Schaden melden
                        </div>
                    @endcan

                    <a href="{{ route('vehicles.select') }}"
                        class="rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold shadow-sm hover:bg-gray-50">
                        Fahrzeug wechseln
                    </a>
                </div>
            </div>

            {{-- Dokumente --}}
            <div class="rounded-3xl border border-gray-200/70 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between gap-3">
                    <div class="flex items-center gap-3">
                        <span
                            class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-brand/10 text-brand ring-1 ring-brand/15">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                <path d="M14 2v6h6" />
                            </svg>
                        </span>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Dokumente & Uploads</h2>
                            <p class="text-sm text-gray-600">Neueste Uploads für dieses Fahrzeug.</p>
                        </div>
                    </div>

                    @can('documents.view')
                        <a href="{{ route('documents.index') }}"
                            class="shrink-0 inline-flex items-center gap-2 rounded-2xl bg-gray-50 px-3 py-2 text-sm font-semibold text-brand ring-1 ring-gray-200 hover:bg-white hover:ring-brand/25">
                            Alle anzeigen
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M5 12h14" />
                                <path d="m13 6 6 6-6 6" />
                            </svg>
                        </a>
                    @endcan
                </div>

                <div class="mt-4 space-y-3">
                    @can('documents.view')
                        @forelse($latestDocuments as $doc)
                            <div class="rounded-2xl border border-gray-200/70 bg-white p-4 shadow-sm hover:bg-gray-50/40">
                                <div class="font-semibold text-gray-900 truncate">{{ $doc->title ?? $doc->original_name }}
                                </div>
                                <div class="mt-1 text-sm text-gray-600">
                                    {{ $doc->uploaded_at ? $doc->uploaded_at->format('d.m.Y') : '—' }}
                                </div>
                            </div>
                        @empty
                            <div
                                class="rounded-2xl border border-gray-200/70 bg-white p-4 text-sm text-gray-600 shadow-sm">
                                Keine Dokumente.
                            </div>
                        @endforelse
                    @else
                        <div class="rounded-2xl border border-gray-200/70 bg-white p-4 text-sm text-gray-600 shadow-sm">
                            Kein Zugriff.
                        </div>
                    @endcan
                </div>
            </div>

        </aside>
    </div>
</x-ux-layout>