@php
    /** @var \App\Models\Order $order */
    $isAdmin = auth()->check() ? auth()->user()->isDistrictUser() : false;

    $statusText = [
        'placed' => 'Aufgegeben',
        'processing' => 'In Bearbeitung',
        'ready' => 'Abholbereit',
        'received' => 'Erhalten',
    ];

    $statusPills = [
        'placed' => 'bg-neutral-100 text-rk-slate border-rk',
        'processing' => 'bg-blue-50 text-blue-700 border-blue-200',
        'ready' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
        'received' => 'bg-neutral-100 text-rk-slate border-rk',
    ];

    $priorityLabels = [
        'low' => 'Niedrig',
        'medium' => 'Mittel',
        'high' => 'Hoch',
    ];

    $urgencyLabels = [
        'normal' => 'Normal',
        'urgent' => 'Dringend',
        'immediate' => 'Sofort',
    ];

    $priorityPills = [
        'low' => 'bg-neutral-100 text-rk-slate border-rk',
        'medium' => 'bg-amber-50 text-amber-700 border-amber-200',
        'high' => 'bg-red-50 text-red-700 border-red-200',
    ];

    $urgencyPills = [
        'normal' => 'bg-neutral-100 text-rk-slate border-rk',
        'urgent' => 'bg-red-50 text-red-700 border-red-200',
        'immediate' => 'bg-red-50 text-red-700 border-red-200',
    ];

    $sLabel = $statusText[$order->status] ?? $order->status;
    $sPill = $statusPills[$order->status] ?? 'bg-neutral-100 text-rk-slate border-rk';

    $pLabel = $priorityLabels[$order->priority] ?? $order->priority;
    $pPill = $priorityPills[$order->priority] ?? 'bg-neutral-100 text-rk-slate border-rk';

    $uLabel = $urgencyLabels[$order->urgency] ?? $order->urgency;
    $uPill = $urgencyPills[$order->urgency] ?? 'bg-neutral-100 text-rk-slate border-rk';

    $canMoveToProcessing = $isAdmin && $order->status === 'placed';
    $canMoveToReady = $isAdmin && in_array($order->status, ['placed', 'processing'], true);
    $canMoveToReceived = $isAdmin && $order->status === 'ready';

    $ts = [
        'placed_at' => $order->placed_at,
        'processed_at' => $order->processed_at,
        'ready_at' => $order->ready_at,
        'received_at' => $order->received_at,
    ];

    $fmt = fn($v) => $v ? $v->format('d.m.Y H:i') : '—';
@endphp

<x-layouts.app :title="'Bestellung · #B-' . $order->id" :userRole="$isAdmin ? 'Bezirksstelle' : 'Ortstelle'">
    <div class="flex flex-col gap-4">

        {{-- Header --}}
        <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Bestellung #B-{{ $order->id }}</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Ortstelle:
                    <span class="font-semibold text-rk-charcoal">{{ $order->station?->name ?? '—' }}</span>
                    · Erstellt: {{ $fmt($order->created_at) }}
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('orders.index') }}" class="btn-rk-soft">Zurück</a>

                <a href="{{ route('orders.pickupSlip', ['order' => $order->id]) }}" class="btn-rk-soft-green">
                    Abholschein
                </a>

                @if ($isAdmin)
                    <form method="POST"
                        action="{{ route('orders.status', ['order' => $order, 'status' => 'processing']) }}">
                        @csrf
                        <button type="submit" @disabled(!$canMoveToProcessing)
                            class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50 transition-rk hover:shadow-soft disabled:opacity-50 disabled:cursor-not-allowed">
                            In Bearbeitung
                        </button>
                    </form>

                    <form method="POST"
                        action="{{ route('orders.status', ['order' => $order, 'status' => 'ready']) }}">
                        @csrf
                        <button type="submit" @disabled(!$canMoveToReady)
                            class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50 transition-rk hover:shadow-soft disabled:opacity-50 disabled:cursor-not-allowed">
                            Abholbereit
                        </button>
                    </form>

                    <form method="POST"
                        action="{{ route('orders.status', ['order' => $order, 'status' => 'received']) }}">
                        @csrf
                        <button type="submit" @disabled(!$canMoveToReceived)
                            class="rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark transition-rk hover:shadow-soft disabled:opacity-50 disabled:cursor-not-allowed">
                            Erhalten
                        </button>
                    </form>
                @endif
            </div>
        </div>

        {{-- Meta cards --}}
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">

            {{-- Status --}}
            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Status</div>

                <div class="mt-3 flex flex-wrap items-center gap-2">
                    <span
                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $sPill }}">
                        {{ $sLabel }}
                    </span>

                    @if ($order->items?->count())
                        <span
                            class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border bg-neutral-50 text-rk-slate border-rk">
                            {{ $order->items->count() }} Position(en)
                        </span>
                    @endif
                </div>

                <div class="mt-6 text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Zeitpunkte</div>

                <div class="mt-3 space-y-2 text-sm text-rk-slate">
                    <div class="flex items-center justify-between gap-3">
                        <span>Aufgegeben</span>
                        <span class="font-semibold text-rk-charcoal">{{ $fmt($ts['placed_at']) }}</span>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <span>In Bearbeitung</span>
                        <span class="font-semibold text-rk-charcoal">{{ $fmt($ts['processed_at']) }}</span>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <span>Abholbereit</span>
                        <span class="font-semibold text-rk-charcoal">{{ $fmt($ts['ready_at']) }}</span>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <span>Erhalten</span>
                        <span class="font-semibold text-rk-charcoal">{{ $fmt($ts['received_at']) }}</span>
                    </div>
                </div>
            </div>

            {{-- Prio/Urgency + Kommentar --}}
            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Priorität & Dringlichkeit
                </div>

                <div class="mt-3 flex flex-wrap gap-2">
                    <span
                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $pPill }}">
                        {{ $pLabel }}
                    </span>
                    <span
                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $uPill }}">
                        {{ $uLabel }}
                    </span>
                </div>

                <div class="mt-6 text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Kommentar</div>

                <div class="mt-3">
                    @if ($order->comment)
                        <div
                            class="rounded-2xl border border-rk bg-neutral-50 px-4 py-3 text-sm text-rk-charcoal whitespace-pre-line">
                            {{ $order->comment }}
                        </div>
                    @else
                        <div class="text-sm text-rk-slate">—</div>
                    @endif
                </div>
            </div>

            {{-- Station/Creator --}}
            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Ortstelle</div>
                <div class="mt-3 text-sm font-semibold text-rk-charcoal">{{ $order->station?->name ?? '—' }}</div>

                @if (!empty($order->station?->email))
                    <div class="mt-1 text-sm text-rk-slate">{{ $order->station->email }}</div>
                @endif

                <div class="mt-6 text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Erstellt von</div>
                <div class="mt-3 text-sm text-rk-slate">
                    {{ $order->createdBy?->name ?? ($order->createdBy?->email ?? '—') }}
                </div>
            </div>
        </div>

        {{-- Items --}}
        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="px-5 py-4 flex items-center justify-between gap-3">
                <div>
                    <div class="text-sm font-semibold">Positionen</div>
                    <div class="text-xs text-rk-slate">{{ $order->items->count() }} Position(en)</div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="text-xs text-rk-slate/80 uppercase tracking-wider bg-neutral-50">
                        <tr class="border-t border-b border-rk">
                            <th class="py-3 px-5 text-left">Artikel</th>
                            <th class="py-3 px-5 text-left">Variante</th>
                            <th class="py-3 px-5 text-right">Menge</th>
                            <th class="py-3 px-5 text-left">Notiz</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        @forelse ($order->items as $item)
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-5 font-medium">
                                    {{ $item->product?->name ?? '—' }}
                                </td>

                                <td class="py-4 px-5 text-rk-slate">
                                    {{ $item->variant?->name ?? '—' }}
                                </td>

                                <td class="py-4 px-5 text-right font-semibold">
                                    {{ (int) $item->quantity }}
                                </td>

                                <td class="py-4 px-5 text-rk-slate">
                                    {{ $item->note ?: '—' }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="py-10 px-5 text-center text-sm text-rk-slate">
                                    Keine Positionen.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</x-layouts.app>