@php
    $items = $record->items;
    $invoice = $record->invoice;
    $order = $record;
@endphp

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

    {{-- Header strip --}}
    <div class="flex flex-wrap gap-4 items-center justify-between bg-gray-50 dark:bg-white/5 rounded-xl px-4 py-3">
        <div>
            <span class="text-xs text-gray-500 uppercase tracking-wide">Order</span>
            <div class="font-bold text-gray-900 dark:text-white text-base">#{{ $order->id }}</div>
        </div>
        <div>
            <span class="text-xs text-gray-500 uppercase tracking-wide">Date</span>
            <div class="font-medium text-gray-900 dark:text-white">{{ $order->created_at->format('d M Y H:i') }}</div>
        </div>
        @if($invoice)
        <div>
            <span class="text-xs text-gray-500 uppercase tracking-wide">Invoice</span>
            <div>
                <a href="/admin-invoice/orders/{{ $order->id }}" target="_blank"
                   class="font-medium text-primary-600 hover:underline">
                    {{ $invoice->invoice_number }}
                </a>
            </div>
        </div>
        @endif
        <div>
            <span class="text-xs text-gray-500 uppercase tracking-wide">Payment</span>
            <div class="font-medium text-gray-900 dark:text-white capitalize">
                {{ str_replace('_', ' ', $order->payment_method ?? '—') }}
                @if($order->payment_ref)
                    <span class="text-gray-400 ml-1 text-xs">({{ $order->payment_ref }})</span>
                @endif
            </div>
        </div>
        <div>
            <span class="text-xs text-gray-500 uppercase tracking-wide">Status</span>
            <div>
                <x-filament::badge :color="match($order->status) {
                    'pending'    => 'warning',
                    'paid'       => 'success',
                    'processing' => 'info',
                    'shipped'    => 'primary',
                    'delivered'  => 'success',
                    'cancelled'  => 'danger',
                    'closed'     => 'gray',
                    default      => 'gray',
                }">
                    {{ ucfirst($order->status) }}
                </x-filament::badge>
            </div>
        </div>
    </div>

    {{-- Addresses + Shipping --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

        <div class="bg-gray-50 dark:bg-white/5 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500">
                <x-heroicon-o-map-pin class="w-4 h-4" /> Shipping Address
            </div>
            <div class="text-gray-800 dark:text-gray-200 leading-relaxed">
                {{ $order->shipping_name }}<br>
                @if($order->shipping_address) {{ $order->shipping_address }}<br> @endif
                @if($order->shipping_city) {{ $order->shipping_city }}@if($order->shipping_province), {{ $order->shipping_province }}@endif<br> @endif
                @if($order->shipping_postal_code) {{ $order->shipping_postal_code }}<br> @endif
                @if($order->shipping_phone)
                    <span class="text-gray-500">{{ $order->shipping_phone }}</span><br>
                @endif
                @if($order->shipping_email)
                    <a href="mailto:{{ $order->shipping_email }}" class="text-primary-600 hover:underline">{{ $order->shipping_email }}</a>
                @endif
            </div>
        </div>

        <div class="bg-gray-50 dark:bg-white/5 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500">
                <x-heroicon-o-truck class="w-4 h-4" /> Shipping
            </div>
            <div class="text-gray-800 dark:text-gray-200 space-y-1">
                <div><span class="text-gray-500">Carrier:</span> {{ $order->shipping_carrier ?? '—' }}</div>
                @if($order->shipping_service)
                    <div><span class="text-gray-500">Service:</span> {{ $order->shipping_service }}</div>
                @endif
                <div>
                    <span class="text-gray-500">Waybill:</span>
                    @if($order->waybill_number)
                        <span class="font-mono font-semibold">{{ $order->waybill_number }}</span>
                    @else
                        <span class="text-gray-400">—</span>
                    @endif
                </div>
                <div><span class="text-gray-500">Cost:</span> R {{ number_format($order->shipping_cost, 2) }}</div>
            </div>
        </div>

        <div class="bg-gray-50 dark:bg-white/5 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500">
                <x-heroicon-o-calculator class="w-4 h-4" /> Totals
            </div>
            <div class="text-gray-800 dark:text-gray-200 space-y-1">
                <div class="flex justify-between"><span class="text-gray-500">Subtotal (excl.):</span> R {{ number_format($order->subtotal_excl, 2) }}</div>
                <div class="flex justify-between"><span class="text-gray-500">VAT:</span> R {{ number_format($order->vat_amount, 2) }}</div>
                <div class="flex justify-between"><span class="text-gray-500">Shipping:</span> R {{ number_format($order->shipping_cost, 2) }}</div>
                <div class="flex justify-between border-t border-gray-200 dark:border-white/10 pt-1 mt-1 font-bold text-gray-900 dark:text-white">
                    <span>Total:</span> R {{ number_format($order->total_incl, 2) }}
                </div>
            </div>
        </div>

    </div>

    {{-- Products --}}
    <div>
        <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">
            Products ({{ $items->count() }})
        </div>
        <div class="rounded-xl overflow-hidden border border-gray-200 dark:border-white/10">
            <table class="w-full text-sm">
                <thead class="bg-gray-100 dark:bg-white/5 text-xs uppercase text-gray-500">
                    <tr>
                        <th class="text-left px-3 py-2">Product</th>
                        <th class="text-left px-3 py-2">Part #</th>
                        <th class="text-left px-3 py-2">Brand</th>
                        <th class="text-center px-3 py-2">Qty</th>
                        <th class="text-right px-3 py-2">Unit</th>
                        <th class="text-right px-3 py-2">Total</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-white/5">
                    @foreach($items as $item)
                    <tr class="hover:bg-gray-50 dark:hover:bg-white/5">
                        <td class="px-3 py-2 text-gray-900 dark:text-white">{{ $item->product_name }}</td>
                        <td class="px-3 py-2 font-mono text-gray-600 dark:text-gray-400">{{ $item->part_number ?? '—' }}</td>
                        <td class="px-3 py-2 text-gray-600 dark:text-gray-400">{{ $item->brand_name ?? '—' }}</td>
                        <td class="px-3 py-2 text-center font-semibold">{{ $item->qty }}</td>
                        <td class="px-3 py-2 text-right">R {{ number_format($item->unit_price_incl, 2) }}</td>
                        <td class="px-3 py-2 text-right font-semibold text-gray-900 dark:text-white">R {{ number_format($item->line_total_incl, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>