@extends('layouts.app')
@section('title', 'Übersicht')
@section('content')
<div class="flex flex-wrap items-end justify-between gap-4">
    <div>
        <p class="eyebrow">Heute · {{ now('Europe/Berlin')->translatedFormat('l, d. F Y') }}</p>
        <h1 class="page-title">Guten Tag, {{ str(auth()->user()->name)->before(' ') }}</h1>
        <p class="page-subtitle">Der aktuelle Stand aus Dienstplan, Wachbuch und Inventar.</p>
    </div>
    <a href="{{ route('events.create') }}" class="button-primary">+ Termin planen</a>
</div>

<section class="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="metric"><span class="metric-label">Nächste Termine</span><strong>{{ $events->count() }}</strong><span class="metric-foot">kommende 30 Tage und darüber hinaus</span></div>
    <div class="metric"><span class="metric-label">Offene Wachbücher</span><strong>{{ $watchLogs->count() }}</strong><span class="metric-foot">Entwurf, laufend oder unvollständig</span></div>
    <div class="metric"><span class="metric-label">Fristen</span><strong>{{ $dueItems->count() }}</strong><span class="metric-foot">Ablauf oder Prüfung in 60 Tagen</span></div>
    <div class="metric metric-dark"><span class="metric-label">Systemzeit</span><strong class="text-2xl">{{ now('Europe/Berlin')->format('H:i') }}</strong><span class="metric-foot">Europe/Berlin</span></div>
</section>

<div class="mt-8 grid gap-6 xl:grid-cols-[minmax(0,1.65fr)_minmax(20rem,.8fr)]">
    <section class="panel">
        <div class="panel-header">
            <div><p class="eyebrow">Agenda</p><h2 class="section-title">Kommende Termine</h2></div>
            <a class="text-link" href="{{ route('events.index') }}">Alle anzeigen →</a>
        </div>
        <div class="divide-y divide-slate-200">
            @forelse($events as $event)
                <a href="{{ route('events.show', $event) }}" class="event-row group">
                    <div class="date-tile"><strong>{{ $event->starts_at->timezone('Europe/Berlin')->format('d') }}</strong><span>{{ $event->starts_at->timezone('Europe/Berlin')->translatedFormat('M') }}</span></div>
                    <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-center gap-2"><h3 class="truncate font-bold group-hover:text-cyan-800">{{ $event->title }}</h3><span class="badge">{{ match($event->type) {'watch_duty'=>'Wachdienst','exercise'=>'Übung','meeting'=>'Sitzung',default=>'Sonstiges'} }}</span></div>
                        <p class="mt-1 truncate text-sm text-slate-600">{{ $event->starts_at->timezone('Europe/Berlin')->format('H:i') }}–{{ $event->ends_at->timezone('Europe/Berlin')->format('H:i') }} Uhr · {{ $event->location ?: 'Kein Ort' }}</p>
                    </div>
                    <div class="hidden text-right sm:block"><strong class="block">{{ $event->assignments->where('state', 'accepted')->count() }}</strong><span class="text-xs text-slate-500">zugesagt</span></div>
                </a>
            @empty
                <div class="empty-state">Noch keine kommenden Termine.</div>
            @endforelse
        </div>
    </section>

    <div class="space-y-6">
        <section class="panel">
            <div class="panel-header"><div><p class="eyebrow">Betrieb</p><h2 class="section-title">Aktive Wachbücher</h2></div></div>
            <div class="space-y-3 p-4">
                @forelse($watchLogs as $log)
                    <a href="{{ route('watch-logs.show', $log) }}" class="block rounded-xl border border-slate-200 p-4 transition hover:border-cyan-400 hover:bg-cyan-50/40">
                        <div class="flex items-start justify-between gap-3"><strong>{{ $log->title }}</strong><span class="status-dot status-{{ $log->status }}">{{ match($log->status) {'draft'=>'Entwurf','running'=>'Laufend','incomplete'=>'Unvollständig',default=>'Geschlossen'} }}</span></div>
                        <p class="mt-2 text-xs text-slate-500">{{ $log->organization->name }} · zuletzt {{ $log->updated_at->timezone('Europe/Berlin')->diffForHumans() }}</p>
                    </a>
                @empty
                    <p class="py-6 text-center text-sm text-slate-500">Kein aktives Wachbuch.</p>
                @endforelse
            </div>
        </section>

        <section class="panel">
            <div class="panel-header"><div><p class="eyebrow">Material</p><h2 class="section-title">Anstehende Fristen</h2></div><a class="text-link" href="{{ route('inventory.index') }}">Inventar →</a></div>
            <div class="divide-y divide-slate-200">
                @forelse($dueItems as $item)
                    <div class="px-5 py-3 text-sm"><strong class="block">{{ $item->name ?: $item->article->name }}</strong><span class="text-slate-600">{{ $item->expires_on ? 'Ablauf '.$item->expires_on->format('d.m.Y') : 'Prüfung '.$item->inspection_due_on?->format('d.m.Y') }}</span></div>
                @empty
                    <p class="p-5 text-sm text-slate-500">Keine Frist in den nächsten 60 Tagen.</p>
                @endforelse
            </div>
        </section>
    </div>
</div>
@endsection