@php
    /** @var \App\Domain\Purchasing\Models\PurchaseOrder $order */
    $statusClasses = match ($order->status->value) {
        'draft' => 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
        'submitted' => 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
        'partially_received' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
        'received' => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200',
        'cancelled' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
    };
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                    {{ $order->po_number }}
                </h2>
                <span class="px-2 py-0.5 rounded-full text-xs font-medium {{ $statusClasses }}">{{ $order->status->label() }}</span>
            </div>
            <a href="{{ route('purchasing.orders.index') }}" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline">
                {{ __('Back to purchase orders') }}
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8 space-y-6">
            @if (session('status'))
                <div class="rounded-md bg-emerald-50 dark:bg-emerald-900/40 px-4 py-3 text-sm text-emerald-800 dark:text-emerald-200">
                    {{ session('status') }}
                </div>
            @endif

            @if (session('error'))
                <div class="rounded-md bg-red-50 dark:bg-red-900/40 px-4 py-3 text-sm text-red-800 dark:text-red-200">
                    {{ session('error') }}
                </div>
            @endif

            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm mb-6">
                    <div>
                        <div class="text-gray-500 dark:text-gray-400">{{ __('Supplier') }}</div>
                        <div class="text-gray-900 dark:text-gray-100">{{ $order->supplier->name }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 dark:text-gray-400">{{ __('Warehouse') }}</div>
                        <div class="text-gray-900 dark:text-gray-100">{{ $order->warehouse->name }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 dark:text-gray-400">{{ __('Order Date') }}</div>
                        <div class="text-gray-900 dark:text-gray-100">{{ $order->order_date->format('Y-m-d') }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 dark:text-gray-400">{{ __('Expected Date') }}</div>
                        <div class="text-gray-900 dark:text-gray-100">{{ $order->expected_date?->format('Y-m-d') ?? __('—') }}</div>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-3 mb-6">
                    @can(\App\Domain\Purchasing\Support\PurchasePermissions::ORDER_UPDATE)
                        @if ($order->isEditable())
                            <a href="{{ route('purchasing.orders.edit', $order) }}"><x-secondary-button>{{ __('Edit') }}</x-secondary-button></a>
                            <form method="POST" action="{{ route('purchasing.orders.submit', $order) }}">
                                @csrf
                                <x-primary-button type="submit">{{ __('Submit to Supplier') }}</x-primary-button>
                            </form>
                        @endif
                        @if ($order->isCancellable())
                            <form method="POST" action="{{ route('purchasing.orders.cancel', $order) }}" onsubmit="return confirm('{{ __('Cancel this purchase order?') }}');">
                                @csrf
                                <x-secondary-button type="submit">{{ __('Cancel Order') }}</x-secondary-button>
                            </form>
                        @endif
                    @endcan

                    @can(\App\Domain\Purchasing\Support\PurchasePermissions::RECEIPT_CREATE)
                        @if ($order->canReceiveGoods())
                            <a href="{{ route('purchasing.receipts.create', $order) }}"><x-primary-button>{{ __('Receive Goods') }}</x-primary-button></a>
                        @endif
                    @endcan

                    @can(\App\Domain\Purchasing\Support\PurchasePermissions::INVOICE_CREATE)
                        <a href="{{ route('purchasing.invoices.create', $order) }}"><x-secondary-button>{{ __('Record Invoice') }}</x-secondary-button></a>
                    @endcan

                    @can(\App\Domain\Purchasing\Support\PurchasePermissions::RETURN_CREATE)
                        @if ($order->items->contains(fn ($item) => $item->remainingToReturn() > 0))
                            <a href="{{ route('purchasing.returns.create', $order) }}"><x-secondary-button>{{ __('Create Return') }}</x-secondary-button></a>
                        @endif
                    @endcan

                    @can(\App\Domain\Purchasing\Support\PurchasePermissions::ORDER_DELETE)
                        @if ($order->isEditable())
                            <form method="POST" action="{{ route('purchasing.orders.destroy', $order) }}" onsubmit="return confirm('{{ __('Delete this purchase order?') }}');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-sm text-red-600 dark:text-red-400 hover:underline">{{ __('Delete') }}</button>
                            </form>
                        @endif
                    @endcan
                </div>

                <h3 class="font-medium text-gray-800 dark:text-gray-200 mb-3">{{ __('Line Items') }}</h3>
                <div class="overflow-x-auto mb-6">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-900/40">
                            <tr>
                                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{{ __('Product') }}</th>
                                <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{{ __('Ordered') }}</th>
                                <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{{ __('Received') }}</th>
                                <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{{ __('Returned') }}</th>
                                <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{{ __('Unit Cost') }}</th>
                                <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{{ __('Line Total') }}</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach ($order->items as $item)
                                <tr>
                                    <td class="px-3 py-2 text-sm text-gray-900 dark:text-gray-100">{{ $item->product->name }}</td>
                                    <td class="px-3 py-2 text-sm text-right tabular-nums text-gray-500 dark:text-gray-400">{{ number_format($item->quantity_ordered) }}</td>
                                    <td class="px-3 py-2 text-sm text-right tabular-nums text-gray-500 dark:text-gray-400">{{ number_format($item->quantity_received) }}</td>
                                    <td class="px-3 py-2 text-sm text-right tabular-nums text-gray-500 dark:text-gray-400">{{ number_format($item->quantity_returned) }}</td>
                                    <td class="px-3 py-2 text-sm text-right tabular-nums text-gray-500 dark:text-gray-400">{{ number_format((float) $item->unit_cost, 2) }}</td>
                                    <td class="px-3 py-2 text-sm text-right tabular-nums text-gray-900 dark:text-gray-100">{{ number_format((float) $item->line_total, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5" class="px-3 py-2 text-sm text-right text-gray-500 dark:text-gray-400">{{ __('Subtotal') }}</td>
                                <td class="px-3 py-2 text-sm text-right tabular-nums text-gray-900 dark:text-gray-100">{{ number_format((float) $order->subtotal, 2) }}</td>
                            </tr>
                            <tr>
                                <td colspan="5" class="px-3 py-2 text-sm text-right text-gray-500 dark:text-gray-400">{{ __('Tax') }}</td>
                                <td class="px-3 py-2 text-sm text-right tabular-nums text-gray-900 dark:text-gray-100">{{ number_format((float) $order->tax_amount, 2) }}</td>
                            </tr>
                            <tr>
                                <td colspan="5" class="px-3 py-2 text-sm text-right font-medium text-gray-700 dark:text-gray-300">{{ __('Total') }}</td>
                                <td class="px-3 py-2 text-sm text-right tabular-nums font-semibold text-gray-900 dark:text-gray-100">{{ number_format((float) $order->total_amount, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <h3 class="font-medium text-gray-800 dark:text-gray-200 mb-3">{{ __('Receipts') }}</h3>
                        <ul class="space-y-2 text-sm">
                            @forelse ($order->receipts as $receipt)
                                <li class="text-gray-600 dark:text-gray-400">
                                    <span class="font-mono">{{ $receipt->receipt_number }}</span> — {{ $receipt->received_date->format('Y-m-d') }}
                                </li>
                            @empty
                                <li class="text-gray-400 dark:text-gray-500">{{ __('No receipts yet.') }}</li>
                            @endforelse
                        </ul>
                    </div>

                    <div>
                        <h3 class="font-medium text-gray-800 dark:text-gray-200 mb-3">{{ __('Invoices') }}</h3>
                        <ul class="space-y-2 text-sm">
                            @forelse ($order->invoices as $invoice)
                                <li>
                                    <a href="{{ route('purchasing.invoices.show', $invoice) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline font-mono">{{ $invoice->invoice_number }}</a>
                                    <span class="text-gray-500 dark:text-gray-400">— {{ $invoice->status->label() }}</span>
                                </li>
                            @empty
                                <li class="text-gray-400 dark:text-gray-500">{{ __('No invoices yet.') }}</li>
                            @endforelse
                        </ul>
                    </div>

                    <div>
                        <h3 class="font-medium text-gray-800 dark:text-gray-200 mb-3">{{ __('Returns') }}</h3>
                        <ul class="space-y-2 text-sm">
                            @forelse ($order->returns as $return)
                                <li class="text-gray-600 dark:text-gray-400">
                                    <span class="font-mono">{{ $return->return_number }}</span> — {{ $return->return_date->format('Y-m-d') }}
                                </li>
                            @empty
                                <li class="text-gray-400 dark:text-gray-500">{{ __('No returns yet.') }}</li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>