@php
    use App\Modules\Sales\Support\SalesOrderLifecycleStatus;

    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('sales.breadcrumb_root'), 'url' => route('sales.orders.index')],
        ['label' => $order->displayOrderNumber()],
    ];
@endphp

<x-ui.layout.page
    :title="$order->displayOrderNumber()"
    :subtitle="__('sales.orders.show_subtitle')"
    page-icon="fe fe-shopping-cart"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('sales.orders.index')" icon="fe fe-arrow-left">
            {{ __('common.back') }}
        </x-ui.buttons.secondary>
    </x-slot:actions>

    @if (session('status'))
        <div class="alert alert-success">{{ session('status') }}</div>
    @endif

    @if ($errors->has('operational'))
        <div class="alert alert-danger border border-danger">
            <div class="fw-semibold">{{ __('sales.orders.integrity.title') }}</div>
            <div class="mt-1">{{ $errors->first('operational') }}</div>
        </div>
    @endif

    <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>
            <div class="d-flex flex-wrap gap-2 align-items-center">
                <x-ui.operational.status-badge :label="$order->status" :variant="$statusVariant" />
                @if ($order->status === SalesOrderLifecycleStatus::Fulfilled->value)
                    <span class="text-muted small">{{ __('sales.orders.locked.fulfilled') }}</span>
                @elseif ($order->status === SalesOrderLifecycleStatus::Cancelled->value)
                    <span class="text-muted small">{{ __('sales.orders.locked.cancelled') }}</span>
                @endif
            </div>
        </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>
            <p class="small text-muted mb-2">{{ __('operational_ui.document.related_returns') }}</p>
            <ul class="list-unstyled small mb-0">
                @forelse ($order->returns as $ret)
                    <li class="mb-2">
                        <a href="{{ route('sales.returns.show', $ret) }}">{{ __('operational_ui.link.sales_return') }} #{{ $ret->id }}</a>
                        <x-ui.operational.status-badge class="ms-1" :label="$ret->status" variant="muted" />
                    </li>
                @empty
                    <li class="text-muted">—</li>
                @endforelse
            </ul>
        </x-slot:related>

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

        <x-slot:actions>
            @include('pages.sales.orders.partials.show-actions')
        </x-slot:actions>

        @include('pages.sales.orders.partials.show-lines')
        @include('pages.sales.orders.partials.show-forms')
    </x-ui.operational.detail-shell>

    <x-inventory.vite-operations />
</x-ui.layout.page>
