@php
    $title = 'TR-'.str_pad((string) $transfer->getKey(), 6, '0', STR_PAD_LEFT);
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('nav.item.inventory_visibility'), 'url' => route('inventory.visibility.index')],
        ['label' => $title],
    ];
@endphp

<x-ui.layout.page
    :title="$title"
    :subtitle="__('operational_ui.link.stock_transfer')"
    page-icon="fe fe-shuffle"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('inventory.visibility.index')" icon="fe fe-arrow-left">
            {{ __('common.back') }}
        </x-ui.buttons.secondary>
    </x-slot:actions>

    <x-ui.operational.detail-shell>
        @if ($blockedHtml)
            <x-slot:blocked>{!! $blockedHtml !!}</x-slot:blocked>
        @endif

        <x-slot:timeline>
            <x-ui.operational.workflow-timeline :steps="$timelineSteps" />
        </x-slot:timeline>

        <x-slot:status>
            <x-ui.operational.status-badge
                :label="$transfer->status instanceof \BackedEnum ? $transfer->status->value : (string) $transfer->status"
                :variant="$statusVariant"
            />
        </x-slot:status>

        @if ($nextStepTitle)
            <x-slot:nextStep>
                <x-ui.operational.next-step-callout
                    :title="$nextStepTitle"
                    :body="$nextStepBody"
                    :variant="$nextStepVariant"
                />
            </x-slot:nextStep>
        @endif

        <x-slot:related>
            <dl class="small mb-0">
                <dt class="text-muted">{{ __('inventory.items.fields.sku') }}</dt>
                <dd>{{ $transfer->item?->sku ?? '—' }}</dd>
                <dt class="text-muted mt-2">{{ __('operational_ui.xfer.quantity') }}</dt>
                <dd>{{ $transfer->quantity }}</dd>
            </dl>
        </x-slot:related>

        <x-slot:audit>
            <x-ui.operational.document-audit :rows="$auditRows" />
        </x-slot:audit>

        <div class="row g-3">
            <div class="col-md-6">
                <div class="fw-semibold small text-muted">{{ __('operational_ui.xfer.source') }}</div>
                <div>{{ $transfer->sourceWarehouse?->code ?? '—' }} — {{ $transfer->sourceWarehouse?->name ?? '' }}</div>
            </div>
            <div class="col-md-6">
                <div class="fw-semibold small text-muted">{{ __('operational_ui.xfer.destination') }}</div>
                <div>{{ $transfer->destinationWarehouse?->code ?? '—' }} — {{ $transfer->destinationWarehouse?->name ?? '' }}</div>
            </div>
        </div>
    </x-ui.operational.detail-shell>
</x-ui.layout.page>
