@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('procurement.breadcrumb_root'), 'url' => route('procurement.purchase-orders.index')],
        ['label' => $purchaseOrder->po_number],
    ];
@endphp

<x-ui.layout.page
    :title="$purchaseOrder->po_number"
    :subtitle="__('procurement.po.show_subtitle')"
    page-icon="fe fe-file-text"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('procurement.purchase-orders.index')" icon="fe fe-arrow-left">
            {{ __('common.back') }}
        </x-ui.buttons.secondary>
    </x-slot:actions>

    @if ($errors->has('operational'))
        <div class="alert alert-danger">{{ $errors->first('operational') }}</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>
            <x-ui.operational.status-badge
                :label="$purchaseOrder->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>
            <p class="small text-muted mb-2">{{ __('procurement.po.receipts') }}</p>
            <ul class="list-unstyled small mb-0">
                @forelse ($purchaseOrder->goodsReceipts as $gr)
                    <li class="mb-2 d-flex flex-wrap align-items-center gap-2">
                        <a href="{{ route('procurement.goods-receipts.show', $gr) }}">#{{ $gr->id }}</a>
                        <x-ui.operational.status-badge :label="$gr->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.procurement.purchase-orders.partials.show-actions')
        </x-slot:actions>

        @include('pages.procurement.purchase-orders.partials.show-main')
    </x-ui.operational.detail-shell>

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