@once
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js" defer></script>
@endonce

<div x-data="kanbanBoard()" x-init="init()">

<style>
/* ── Board shell ───────────────────────────────────────────── */
.kb-board {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    overflow-x: auto;
    padding: 4px 2px 16px;
}

/* ── Column ────────────────────────────────────────────────── */
.kb-col {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kb-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 10px;
}

.kb-col-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kb-col-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.kb-col-count {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 1px 7px;
    border-radius: 999px;
}

.kb-col-total {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* ── Cards container ───────────────────────────────────────── */
.kb-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
    padding: 4px 0;
}

/* ── Card ──────────────────────────────────────────────────── */
.kb-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    cursor: grab;
    transition: box-shadow .15s, transform .1s;
    text-decoration: none;
    display: block;
    position: relative;
}

.kb-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-1px);
    border-color: #d1d5db;
    text-decoration: none;
}

.kb-card:active { cursor: grabbing; }

.kb-card.sortable-ghost {
    opacity: .35;
    background: #f9fafb;
    border: 1.5px dashed #d1d5db;
}

.kb-card.sortable-drag {
    box-shadow: 0 12px 32px rgba(0,0,0,.15);
    transform: rotate(1deg) scale(1.01);
}

/* Card header */
.kb-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.kb-card-id {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    flex: 1;
}

.kb-card-customer {
    font-size: 12px;
    color: #374151;
    font-weight: 500;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card description */
.kb-card-desc {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card footer row */
.kb-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.kb-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 3px 7px;
    font-weight: 500;
    white-space: nowrap;
}

.kb-chip svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

.kb-total-chip {
    font-size: 11px;
    font-weight: 700;
    color: #111827;
}

/* Age indicator */
.kb-age-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Three-dot menu area */
.kb-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    color: #9ca3af;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .1s, color .1s;
}
.kb-menu-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Empty column state */
.kb-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 12px;
    color: #d1d5db;
    border: 1.5px dashed #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}
</style>

<div class="kb-board">
    @foreach($columns as $col)
    <div class="kb-col">

        {{-- Column header --}}
        <div class="kb-col-header">
            <div class="kb-col-title-row">
                <span class="kb-col-title">{{ $col['label'] }}</span>
                <span class="kb-col-count">{{ $col['count'] }}</span>
            </div>
            @if($col['total'] > 0)
                <span class="kb-col-total">R {{ number_format($col['total'] / 1000, 1) }}k</span>
            @endif
        </div>

        {{-- Cards --}}
        <div class="kb-cards" data-status="{{ $col['status'] }}">
            @forelse($col['orders'] as $order)
            @php
                $hours     = $order->created_at->diffInHours(now());
                $ageLabel  = $order->created_at->diffForHumans(['short' => true, 'parts' => 1]);
                $ageDotClr = $hours < 24 ? '#22c55e' : ($hours < 72 ? '#f59e0b' : '#ef4444');
                $viewUrl   = route('filament.admin.resources.orders.view', $order->id);
            @endphp

            <div class="kb-card" data-order-id="{{ $order->id }}" @dragstart.prevent>

                {{-- Title row: order # + menu --}}
                <div class="kb-card-head">
                    <span class="kb-card-id">#{{ $order->id }}</span>
                    <a href="{{ $viewUrl }}" class="kb-menu-btn" title="View order">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
                        </svg>
                    </a>
                </div>

                {{-- Customer name --}}
                <div class="kb-card-customer">{{ $order->shipping_name }}</div>

                {{-- Description: shipping service or payment method --}}
                <div class="kb-card-desc">
                    @if($order->shipping_service)
                        {{ $order->shipping_service }}
                    @elseif($order->shipping_carrier)
                        Via {{ $order->shipping_carrier }}
                    @else
                        {{ ucfirst(str_replace('_', ' ', $order->payment_method ?? 'Order')) }}
                    @endif
                </div>

                {{-- Footer chips --}}
                <div class="kb-card-footer">
                    <div style="display:flex;gap:5px;flex-wrap:wrap;align-items:center;">
                        {{-- Age --}}
                        <span class="kb-chip">
                            <span class="kb-age-dot" style="background:{{ $ageDotClr }}"></span>
                            {{ $ageLabel }}
                        </span>

                        {{-- Carrier badge if present --}}
                        @if($order->shipping_carrier)
                        <span class="kb-chip">
                            <svg viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="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"/>
                            </svg>
                            {{ $order->shipping_carrier }}
                        </span>
                        @endif
                    </div>

                    {{-- Total --}}
                    <span class="kb-total-chip">R {{ number_format($order->total_incl, 0) }}</span>
                </div>

            </div>
            @empty
            <div class="kb-empty">No orders</div>
            @endforelse
        </div>

    </div>
    @endforeach
</div>

<script>
function kanbanBoard() {
    return {
        init() {
            const setup = () => {
                this.$el.querySelectorAll('.kb-cards[data-status]').forEach(col => {
                    Sortable.create(col, {
                        group:          'orders',
                        animation:      150,
                        ghostClass:     'sortable-ghost',
                        dragClass:      'sortable-drag',
                        delay:          80,
                        delayOnTouchOnly: true,
                        onEnd: (evt) => {
                            const orderId   = parseInt(evt.item.dataset.orderId);
                            const newStatus = evt.to.dataset.status;
                            const oldStatus = evt.from.dataset.status;
                            if (newStatus === oldStatus) return;
                            evt.item.addEventListener('click', e => e.preventDefault(), { once: true });
                            @this.moveOrder(orderId, newStatus);
                        },
                    });
                });
            };

            typeof Sortable !== 'undefined'
                ? setup()
                : setTimeout(setup, 600);
        }
    };
}
</script>

</div>