@php
    /** @var \App\Models\Order $record */
    $record = $this->record;

    $statusFlow = ['pending', 'paid', 'processing', 'shipped', 'delivered'];
    $terminal   = in_array($record->status, ['cancelled', 'closed']);
    $currentIdx = array_search($record->status, $statusFlow);

    $statusMeta = [
        'pending'    => ['label' => 'Pending',    'color' => '#d97706', 'icon' => 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'],
        'paid'       => ['label' => 'Paid',       'color' => '#16a34a', 'icon' => 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
        'processing' => ['label' => 'Processing', 'color' => '#2563eb', 'icon' => 'M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495'],
        'shipped'    => ['label' => 'Shipped',    'color' => '#7c3aed', 'icon' => 'M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12'],
        'delivered'  => ['label' => 'Delivered',  'color' => '#059669', 'icon' => 'M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z'],
        'cancelled'  => ['label' => 'Cancelled',  'color' => '#dc2626', 'icon' => 'M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
        'closed'     => ['label' => 'Closed',     'color' => '#6b7280', 'icon' => 'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z'],
    ];

    $canEdit  = auth()->user()?->can('orders.edit');
    $canClose = auth()->user()?->can('orders.close');

    $subtotal = $record->subtotal_excl ?? 0;
    $vat      = $record->vat_amount    ?? 0;
    $shipping = $record->shipping_cost ?? 0;
    $credit   = $record->credit_applied ?? 0;
    $total    = $record->total_incl    ?? 0;

    $events = $record->events ?? collect();
    $dotColors = [
        'order_placed'    => '#16a34a', 'status_change' => '#3b82f6',
        'item_edit'       => '#f59e0b', 'shipping_change' => '#06b6d4',
        'credit_issued'   => '#16a34a', 'note_added' => '#9ca3af',
        'message_sent'    => '#8b5cf6', 'private_note' => '#f59e0b',
    ];
    $eventLabels = [
        'order_placed'    => 'Order Placed',  'status_change'   => 'Status Update',
        'item_edit'       => 'Items Modified', 'shipping_change' => 'Shipping Updated',
        'credit_issued'   => 'Credit Issued',  'note_added'      => 'Note Added',
        'message_sent'    => 'Message Sent',   'private_note'    => 'Private Note',
    ];
@endphp

<x-filament-panels::page>
<style>
/* ── Console layout ───────────────────────────────────────── */
.oc-console {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .oc-console { grid-template-columns: 1fr; }
    .oc-right   { order: -1; }
}

/* ── Order header bar ─────────────────────────────────────── */
.oc-header-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.oc-header-cell {
    flex: 1;
    min-width: 110px;
    padding: 12px 16px;
    border-right: 1px solid #f3f4f6;
}
.oc-header-cell:last-child { border-right: none; }
.oc-hc-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 3px;
}
.oc-hc-value {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.oc-hc-value a { color: #16a34a; text-decoration: none; }
.oc-hc-value a:hover { text-decoration: underline; }

/* ── Section card ─────────────────────────────────────────── */
.oc-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}
.oc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}
.oc-card-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
}
.oc-card-body { padding: 16px; }

/* ── Items table ──────────────────────────────────────────── */
.oc-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.oc-items-table th {
    text-align: left;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 1px solid #f3f4f6;
}
.oc-items-table td {
    padding: 8px 8px;
    border-bottom: 1px solid #f9fafb;
    color: #374151;
    vertical-align: top;
}
.oc-items-table tr:last-child td { border-bottom: none; }
.oc-item-name { font-weight: 500; color: #111827; line-height: 1.3; }
.oc-item-part { font-size: 10px; color: #9ca3af; margin-top: 2px; }
.oc-totals-row {
    display: flex;
    justify-content: flex-end;
}
.oc-totals {
    min-width: 220px;
    margin-top: 12px;
    font-size: 12px;
}
.oc-totals-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: #6b7280;
    gap: 24px;
}
.oc-totals-line.total {
    border-top: 1.5px solid #e5e7eb;
    margin-top: 4px;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

/* ── Timeline ─────────────────────────────────────────────── */
.oc-timeline { padding: 4px 0; }
.oc-tl-item  { display: flex; gap: 12px; }
.oc-tl-spine {
    display: flex; flex-direction: column;
    align-items: center; flex-shrink: 0; width: 14px;
}
.oc-tl-dot {
    width: 10px; height: 10px; border-radius: 50%;
    margin-top: 3px; flex-shrink: 0;
}
.oc-tl-line { width: 1px; flex: 1; background: #e5e7eb; margin: 3px 0; }
.oc-tl-body { padding-bottom: 16px; flex: 1; }
.oc-tl-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 3px;
}
.oc-tl-desc  { font-size: 12px; color: #4b5563; line-height: 1.4; }
.oc-tl-who   { font-size: 10px; color: #9ca3af; margin-top: 2px; }

/* ── Status stepper ───────────────────────────────────────── */
.oc-stepper { display: flex; flex-direction: column; gap: 0; }
.oc-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}
.oc-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 11px; top: 24px;
    width: 2px;
    height: calc(100% - 4px);
    background: #e5e7eb;
}
.oc-step-icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #e5e7eb;
    background: #fff;
    position: relative; z-index: 1;
    transition: background .2s, border-color .2s;
}
.oc-step-icon.done {
    background: #16a34a;
    border-color: #16a34a;
}
.oc-step-icon.current {
    background: #fff;
    border-color: var(--step-color);
    box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.oc-step-icon.future { background: #f9fafb; border-color: #e5e7eb; }
.oc-step-icon svg { width: 12px; height: 12px; stroke: #fff; }
.oc-step-icon.current svg { stroke: var(--step-color); }
.oc-step-icon.future svg  { stroke: #d1d5db; }
.oc-step-body {
    padding: 2px 0 16px;
    flex: 1;
}
.oc-step-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
}
.oc-step-label.current { color: var(--step-color); }
.oc-step-label.future  { color: #9ca3af; }
.oc-step-btn {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--step-color);
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    letter-spacing: .02em;
}
.oc-step-btn:hover {
    background: #e5e7eb;
}
.oc-terminal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ── Meta card ────────────────────────────────────────────── */
.oc-meta { display: flex; flex-direction: column; gap: 10px; }
.oc-meta-row {
    display: flex; gap: 8px;
    font-size: 12px; line-height: 1.4;
}
.oc-meta-icon {
    width: 14px; flex-shrink: 0; margin-top: 1px; color: #9ca3af;
}
.oc-meta-label { color: #6b7280; min-width: 80px; }
.oc-meta-value { color: #111827; font-weight: 500; flex: 1; }

/* ── Right panel ──────────────────────────────────────────── */
.oc-right .oc-card { position: sticky; top: 20px; }
</style>

<div class="oc-console">

    {{-- ═══════════════════ LEFT PANEL ═══════════════════ --}}
    <div class="oc-left">

        {{-- Order header bar --}}
        <div class="oc-header-bar">
            <div class="oc-header-cell">
                <div class="oc-hc-label">Order</div>
                <div class="oc-hc-value">#{{ $record->id }}</div>
            </div>
            <div class="oc-header-cell">
                <div class="oc-hc-label">Customer</div>
                <div class="oc-hc-value">
                    @if($record->user_id)
                        <a href="{{ route('filament.admin.resources.system.users.edit', $record->user_id) }}">
                            {{ $record->shipping_name }}
                        </a>
                    @else
                        {{ $record->shipping_name }}
                    @endif
                </div>
            </div>
            <div class="oc-header-cell">
                <div class="oc-hc-label">Date</div>
                <div class="oc-hc-value">{{ $record->created_at->format('d M Y, H:i') }}</div>
            </div>
            <div class="oc-header-cell">
                <div class="oc-hc-label">Total</div>
                <div class="oc-hc-value" style="color:#16a34a;">R {{ number_format($total, 2) }}</div>
            </div>
            <div class="oc-header-cell">
                <div class="oc-hc-label">Payment</div>
                <div class="oc-hc-value" style="text-transform:capitalize;">
                    {{ str_replace('_', ' ', $record->payment_method ?? '—') }}
                    @if($record->payment_ref)
                        <div style="font-size:10px;color:#9ca3af;font-weight:400;">{{ $record->payment_ref }}</div>
                    @endif
                </div>
            </div>
            <div class="oc-header-cell">
                <div class="oc-hc-label">Invoice</div>
                <div class="oc-hc-value">
                    @if($record->invoice)
                        <a href="/admin-invoice/orders/{{ $record->id }}" target="_blank">
                            {{ $record->invoice->invoice_number }}
                        </a>
                    @else
                        <span style="color:#9ca3af;font-weight:400;">Not generated</span>
                    @endif
                </div>
            </div>
            @if($record->placed_by_user_id)
            <div class="oc-header-cell">
                <div class="oc-hc-label">Counter Sale By</div>
                <div class="oc-hc-value">
                    <span style="background:#fef9c3;color:#854d0e;padding:2px 8px;border-radius:999px;font-size:11px;">
                        {{ $record->placedByUser?->name ?? '—' }}
                    </span>
                </div>
            </div>
            @endif
        </div>

        {{-- Items table --}}
        <div class="oc-card">
            <div class="oc-card-head">
                <span class="oc-card-title">Order Items</span>
                <span style="font-size:11px;color:#9ca3af;">{{ $record->items->count() }} line{{ $record->items->count() !== 1 ? 's' : '' }}</span>
            </div>
            <div class="oc-card-body" style="padding:0;">
                <table class="oc-items-table">
                    <thead>
                        <tr>
                            <th style="padding-left:16px;">Product</th>
                            <th>Brand</th>
                            <th style="text-align:center;">Qty</th>
                            <th style="text-align:right;">Unit</th>
                            <th style="text-align:right;padding-right:16px;">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($record->items as $item)
                    <tr>
                        <td style="padding-left:16px;max-width:280px;">
                            <div class="oc-item-name">{{ $item->product_name }}</div>
                            <div class="oc-item-part">{{ $item->part_number }}</div>
                        </td>
                        <td style="color:#6b7280;white-space:nowrap;">{{ $item->brand_name ?? '—' }}</td>
                        <td style="text-align:center;font-weight:600;">{{ $item->qty }}</td>
                        <td style="text-align:right;white-space:nowrap;">R {{ number_format($item->unit_price_incl, 2) }}</td>
                        <td style="text-align:right;white-space:nowrap;font-weight:600;padding-right:16px;">R {{ number_format($item->line_total_incl, 2) }}</td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>

                <div class="oc-totals-row" style="padding:0 16px 16px;">
                    <div class="oc-totals">
                        <div class="oc-totals-line">
                            <span>Subtotal (excl. VAT)</span>
                            <span>R {{ number_format($subtotal, 2) }}</span>
                        </div>
                        <div class="oc-totals-line">
                            <span>VAT (15%)</span>
                            <span>R {{ number_format($vat, 2) }}</span>
                        </div>
                        <div class="oc-totals-line">
                            <span>Shipping</span>
                            <span>R {{ number_format($shipping, 2) }}</span>
                        </div>
                        @if($credit > 0)
                        <div class="oc-totals-line">
                            <span>Credit Applied</span>
                            <span style="color:#16a34a;">− R {{ number_format($credit, 2) }}</span>
                        </div>
                        @endif
                        <div class="oc-totals-line total">
                            <span>Total (incl. VAT)</span>
                            <span>R {{ number_format($total, 2) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Timeline --}}
        <div class="oc-card">
            <div class="oc-card-head">
                <span class="oc-card-title">Timeline</span>
                <span style="font-size:11px;color:#9ca3af;">{{ $events->count() }} events</span>
            </div>
            <div class="oc-card-body">
                @php
    // Group consecutive same-type events (collapse repeated item_edit runs)
    $groupedEvents = [];
    $prevType = null;
    foreach ($events as $event) {
        $type = $event->event_type ?? 'note_added';
        if ($prevType === $type && in_array($type, ['item_edit', 'shipping_change']) && !empty($groupedEvents)) {
            $groupedEvents[count($groupedEvents) - 1]['events'][] = $event;
        } else {
            $groupedEvents[] = ['type' => $type, 'events' => [$event]];
        }
        $prevType = $type;
    }
@endphp

@if($events->isEmpty())
    <p style="text-align:center;color:#9ca3af;font-size:12px;padding:8px 0;">No events recorded yet.</p>
@else
<ol class="oc-timeline" style="list-style:none;padding:0;margin:0;">
@foreach($groupedEvents as $gIdx => $group)
@php
    $isGroup  = count($group['events']) > 1;
    $rep      = $group['events'][0]; // representative event
    $type     = $group['type'];
    $dot      = $dotColors[$type]    ?? '#9ca3af';
    $label    = $eventLabels[$type]  ?? ucfirst(str_replace('_', ' ', $type));
    $isLast   = $gIdx === count($groupedEvents) - 1;

    $badgeBg = match($type) {
        'status_change'        => '#dbeafe', 'message_sent'    => '#ede9fe',
        'order_placed'         => '#dcfce7', 'credit_issued'   => '#dcfce7',
        'item_edit'            => '#fef3c7', 'shipping_change' => '#cffafe',
        'private_note'         => '#fef9c3', 'collection_requested' => '#dcfce7',
        default                => '#f3f4f6',
    };
    $badgeFg = match($type) {
        'status_change'        => '#1d4ed8', 'message_sent'    => '#6d28d9',
        'order_placed'         => '#15803d', 'credit_issued'   => '#15803d',
        'item_edit'            => '#b45309', 'shipping_change' => '#0e7490',
        'private_note'         => '#b45309', 'collection_requested' => '#15803d',
        default                => '#6b7280',
    };
@endphp

@if($isGroup)
{{-- Collapsed group of consecutive same-type events --}}
<li class="oc-tl-item" x-data="{ open: false }">
    <div class="oc-tl-spine">
        <div class="oc-tl-dot" style="background:{{ $dot }};box-shadow:0 0 0 3px {{ $dot }}22;"></div>
        @if(!$isLast)<div class="oc-tl-line"></div>@endif
    </div>
    <div class="oc-tl-body" style="{{ $isLast ? 'padding-bottom:0' : '' }}">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:2px;">
            <span class="oc-tl-badge" style="background:{{ $badgeBg }};color:{{ $badgeFg }};">{{ $label }}</span>
            <span style="font-size:10px;color:#9ca3af;white-space:nowrap;">
                {{ $group['events'][count($group['events'])-1]->created_at?->format('d M Y, H:i') }} – {{ $rep->created_at?->format('H:i') }}
            </span>
        </div>
        <button @click="open = !open"
            style="background:none;border:none;padding:0;font-size:12px;color:#6b7280;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:inherit;">
            <svg :style="`width:12px;height:12px;flex-shrink:0;transition:transform .15s;${open ? 'transform:rotate(90deg)' : ''}`" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
            </svg>
            {{ count($group['events']) }} {{ $label }} events — click to expand
        </button>
        <div x-show="open" x-collapse style="margin-top:8px;border-left:2px solid #e5e7eb;padding-left:12px;">
            @foreach($group['events'] as $ev)
            @php
                $evWho  = $ev->createdBy?->name;
                $evWhen = $ev->created_at?->format('d M Y, H:i') ?? '—';
                $evMeta = $ev->metadata ?? [];
            @endphp
            <div style="margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #f3f4f6;">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;">
                    <span style="font-size:11px;color:#374151;font-weight:500;">{{ $ev->description }}</span>
                    <span style="font-size:10px;color:#9ca3af;">{{ $evWhen }}</span>
                </div>
                @if(!empty($evMeta['changes']))
                    <ul style="list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:2px;">
                    @foreach($evMeta['changes'] as $ch)
                        <li style="font-size:11px;color:#6b7280;">
                            @if(($ch['action'] ?? '') === 'removed')
                                <span style="color:#dc2626;">−</span> Removed: {{ $ch['name'] }}
                            @elseif(($ch['action'] ?? '') === 'added')
                                <span style="color:#16a34a;">+</span> Added: {{ $ch['name'] }} ×{{ $ch['qty'] }}
                                @if(!empty($ch['price'])) <span style="color:#9ca3af;">(R{{ number_format($ch['price'],2) }})</span>@endif
                            @else
                                <span style="color:#b45309;">~</span> {{ $ch['name'] }}: qty {{ $ch['qty_from'] }} → {{ $ch['qty_to'] }}
                            @endif
                        </li>
                    @endforeach
                    </ul>
                @endif
                @if($evWho)<span style="font-size:10px;color:#9ca3af;">by {{ $evWho }}</span>@endif
            </div>
            @endforeach
        </div>
    </div>
</li>

@else
{{-- Single event --}}
@php
    $ev   = $rep;
    $meta = $ev->metadata ?? [];
    $who  = $ev->createdBy?->name;
    $when = $ev->created_at?->format('d M Y, H:i') ?? '—';
@endphp
<li class="oc-tl-item">
    <div class="oc-tl-spine">
        <div class="oc-tl-dot" style="background:{{ $dot }};box-shadow:0 0 0 3px {{ $dot }}22;"></div>
        @if(!$isLast)<div class="oc-tl-line"></div>@endif
    </div>
    <div class="oc-tl-body" style="{{ $isLast ? 'padding-bottom:0' : '' }}">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:2px;">
            <span class="oc-tl-badge" style="background:{{ $badgeBg }};color:{{ $badgeFg }};">{{ $label }}</span>
            <span style="font-size:10px;color:#9ca3af;white-space:nowrap;">{{ $when }}</span>
        </div>
        <p class="oc-tl-desc">{{ $ev->description }}</p>
        @if(!empty($meta['changes']))
            <ul style="list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:2px;">
            @foreach($meta['changes'] as $ch)
                <li style="font-size:11px;color:#6b7280;">
                    @if(($ch['action'] ?? '') === 'removed')
                        <span style="color:#dc2626;">−</span> Removed: {{ $ch['name'] }}
                    @elseif(($ch['action'] ?? '') === 'added')
                        <span style="color:#16a34a;">+</span> Added: {{ $ch['name'] }} ×{{ $ch['qty'] }}
                        @if(!empty($ch['price'])) <span style="color:#9ca3af;">(R{{ number_format($ch['price'],2) }})</span>@endif
                    @else
                        <span style="color:#b45309;">~</span> {{ $ch['name'] }}: qty {{ $ch['qty_from'] }} → {{ $ch['qty_to'] }}
                    @endif
                </li>
            @endforeach
            </ul>
        @endif
        @if($who)<p class="oc-tl-who">by {{ $who }}</p>@endif
    </div>
</li>
@endif

@endforeach
</ol>
@endif
            </div>
        </div>

        {{-- Messages thread --}}
        <div class="oc-card">
            <div class="oc-card-head">
                <span class="oc-card-title">Messages</span>
                @php $msgCount = $record->messages->where('is_private_note', false)->count(); @endphp
                @if($msgCount > 0)
                    <span style="background:#ede9fe;color:#6d28d9;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;">
                        {{ $msgCount }}
                    </span>
                @endif
            </div>
            <div style="padding:0;">
                @livewire('admin.order-chat', ['orderId' => $record->id], key('chat-'.$record->id))
            </div>
        </div>

    </div>{{-- /oc-left --}}

    {{-- ═══════════════════ RIGHT PANEL ══════════════════ --}}
    <div class="oc-right">

        {{-- Status stepper card --}}
        <div class="oc-card">
            <div class="oc-card-head">
                <span class="oc-card-title">Order Status</span>
            </div>
            <div class="oc-card-body">

                @if($terminal)
                @php
                    $tm = $statusMeta[$record->status] ?? $statusMeta['cancelled'];
                @endphp
                <div class="oc-terminal-badge" style="background:{{ $tm['color'] }}18;color:{{ $tm['color'] }};border:1px solid {{ $tm['color'] }}40;width:100%;">
                    <svg style="width:14px;height:14px;stroke:currentColor;fill:none;" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="{{ $tm['icon'] }}"/>
                    </svg>
                    {{ $tm['label'] }}
                </div>
                @if($canEdit)
                <button wire:click="setStatus('pending')"
                        style="width:100%;padding:7px 12px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;font-size:11px;color:#6b7280;cursor:pointer;font-family:inherit;"
                        onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='#fff'">
                    ↩ Reopen as Pending
                </button>
                @endif

                @else

                <ol class="oc-stepper" style="list-style:none;padding:0;margin:0;">
                @foreach($statusFlow as $i => $step)
                @php
                    $meta     = $statusMeta[$step];
                    $isDone   = $currentIdx !== false && $i < $currentIdx;
                    $isCurrent= $record->status === $step;
                    $isFuture = $currentIdx !== false ? $i > $currentIdx : true;
                    $stateClass = $isDone ? 'done' : ($isCurrent ? 'current' : 'future');
                    $isLast   = $i === count($statusFlow) - 1;
                @endphp
                <li class="oc-step" style="--step-color:{{ $meta['color'] }}">
                    <div class="oc-step-icon {{ $stateClass }}">
                        @if($isDone)
                            {{-- checkmark --}}
                            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                            </svg>
                        @else
                            <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="{{ $meta['icon'] }}"/>
                            </svg>
                        @endif
                    </div>
                    <div class="oc-step-body" style="{{ $isLast ? 'padding-bottom:0' : '' }}">
                        <div class="oc-step-label {{ $stateClass }}">{{ $meta['label'] }}</div>
                        @if($isFuture && $canEdit)
                            <button class="oc-step-btn"
                                wire:click="setStatus('{{ $step }}')"
                                onclick="return confirm('Move order to {{ $meta['label'] }}?') || event.stopImmediatePropagation()">
                                Set {{ $meta['label'] }}
                            </button>
                        @elseif($isCurrent)
                            <div style="font-size:10px;color:{{ $meta['color'] }};margin-top:2px;font-weight:500;">● Current</div>
                        @endif
                    </div>
                </li>
                @endforeach
                </ol>

                @endif
            </div>
        </div>

        @if($canEdit && !$terminal)
        <div class="oc-card" style="border-color:#fee2e2;">
            <div class="oc-card-body" style="padding:12px 16px;">
                <div style="font-size:10px;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Destructive Actions</div>
                <button wire:click="setStatus('cancelled')"
                        onclick="return confirm('Cancel this order? This cannot be undone.') || event.stopImmediatePropagation()"
                        style="width:100%;padding:8px 12px;border:1px solid #fca5a5;background:#fff5f5;border-radius:6px;font-size:12px;font-weight:600;color:#dc2626;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;"
                        onmouseover="this.style.background='#fef2f2'" onmouseout="this.style.background='#fff5f5'">
                    <svg style="width:14px;height:14px;stroke:currentColor;fill:none;" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    Cancel Order
                </button>
            </div>
        </div>
        @endif

        {{-- Order meta card --}}
        <div class="oc-card">
            <div class="oc-card-head">
                <span class="oc-card-title">Details</span>
            </div>
            <div class="oc-card-body">
                <div class="oc-meta">
                    {{-- Contact & Delivery --}}
                    <div>
                        <div style="font-size:10px;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Contact & Delivery</div>
                        <div style="background:#f9fafb;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;">
                            <div style="font-size:12px;font-weight:600;color:#111827;">{{ $record->shipping_name }}</div>
                            @if($record->shipping_email)
                            <div style="display:flex;align-items:center;gap:6px;font-size:12px;color:#374151;">
                                <svg style="width:12px;height:12px;flex-shrink:0;stroke:#9ca3af;fill:none;" viewBox="0 0 24 24" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
                                </svg>
                                {{ $record->shipping_email }}
                            </div>
                            @endif
                            @if($record->shipping_phone)
                            <div style="display:flex;align-items:center;gap:6px;font-size:12px;color:#374151;">
                                <svg style="width:12px;height:12px;flex-shrink:0;stroke:#9ca3af;fill:none;" viewBox="0 0 24 24" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
                                </svg>
                                {{ $record->shipping_phone }}
                            </div>
                            @endif
                            <div style="border-top:1px solid #e5e7eb;padding-top:6px;margin-top:2px;font-size:12px;color:#4b5563;line-height:1.5;">
                                {{ $record->shipping_address }}<br>
                                {{ $record->shipping_city }}, {{ $record->shipping_province }} {{ $record->shipping_postal_code }}
                            </div>
                        </div>
                    </div>

                    {{-- Carrier + Waybill --}}
                    @if($record->shipping_carrier || $record->waybill_number)
                    <div style="border-top:1px solid #f3f4f6;padding-top:10px;margin-top:2px;">
                        <div style="font-size:10px;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;">Shipping</div>
                        @if($record->shipping_carrier)
                        <div style="font-size:12px;color:#374151;margin-bottom:4px;">
                            <span style="color:#6b7280;">Carrier:</span>
                            {{ $record->shipping_carrier }}
                            @if($record->shipping_service) · {{ $record->shipping_service }} @endif
                        </div>
                        @endif
                        @if($record->waybill_number)
                        <div style="font-size:12px;color:#374151;margin-bottom:4px;">
                            <span style="color:#6b7280;">Waybill:</span>
                            <span style="font-family:monospace;background:#f3f4f6;padding:1px 5px;border-radius:3px;">{{ $record->waybill_number }}</span>
                        </div>
                        @endif
                        @if($record->cart_weight_kg)
                        <div style="font-size:11px;color:#9ca3af;">Weight: {{ number_format($record->cart_weight_kg, 2) }} kg</div>
                        @endif
                    </div>
                    @endif

                    {{-- Order notes --}}
                    @if($record->order_notes)
                    <div style="border-top:1px solid #f3f4f6;padding-top:10px;margin-top:2px;">
                        <div style="font-size:10px;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;">Customer Notes</div>
                        <div style="font-size:12px;color:#374151;background:#fffbeb;border:1px solid #fcd34d;border-radius:6px;padding:8px 10px;line-height:1.5;">
                            {{ $record->order_notes }}
                        </div>
                    </div>
                    @endif

                    {{-- Credits summary --}}
                    @if($record->credits->count() > 0)
                    <div style="border-top:1px solid #f3f4f6;padding-top:10px;margin-top:2px;">
                        <div style="font-size:10px;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;">Credits / Refunds</div>
                        @foreach($record->credits as $credit)
                        <div style="display:flex;justify-content:space-between;font-size:11px;color:#374151;margin-bottom:4px;">
                            <span>{{ $credit->reason }}</span>
                            <span style="font-weight:600;color:#16a34a;">R {{ number_format($credit->amount, 2) }}</span>
                        </div>
                        @endforeach
                    </div>
                    @endif

                </div>
            </div>
        </div>

    </div>{{-- /oc-right --}}

</div>{{-- /oc-console --}}

</x-filament-panels::page>