@php
    $statusMeta = [
        'draft'              => ['label' => __('Draft'),               'color' => 'slate'],
        'approved'           => ['label' => __('Approved'),            'color' => 'sky'],
        'sent'               => ['label' => __('Sent'),                'color' => 'indigo'],
        'partially_received' => ['label' => __('Partially Received'),  'color' => 'amber'],
        'received'           => ['label' => __('Received'),            'color' => 'emerald'],
        'cancelled'          => ['label' => __('Cancelled'),           'color' => 'slate'],
    ];
    $tonePill = [
        'up'    => 'bg-emerald-50 text-emerald-700',
        'down'  => 'bg-rose-50 text-rose-700',
        'muted' => 'bg-slate-100 text-slate-500',
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        {{-- Header --}}
        <x-page-header :title="__('Purchase Orders')" :subtitle="__('Raise, approve and send orders to suppliers, then receive them into a bill.')">
            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New Purchase Order') }}
                </x-button>
            @endif
        </x-page-header>

        <x-purchasing-tabs />

        {{-- KPI cards --}}
        <section class="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($kpis as $kpi)
                <x-card class="flex items-start gap-4 p-5">
                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-white shadow-sm ring-1 ring-white/40" style="background: linear-gradient(135deg, {{ $kpi['accent'] }}, {{ $kpi['accent'] }}bb)">
                        <x-icon :name="$kpi['icon']" class="h-5 w-5" />
                    </span>
                    <div class="min-w-0">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $kpi['label'] }}</p>
                        <p class="mt-1 truncate text-2xl font-bold leading-none tracking-tight text-slate-900 tabular-nums">{{ $kpi['value'] }}</p>
                        <span class="mt-2 inline-flex w-fit items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold {{ $tonePill[$kpi['sub']['tone']] ?? $tonePill['muted'] }}">
                            {{ $kpi['sub']['text'] }}
                        </span>
                    </div>
                </x-card>
            @endforeach
        </section>

        {{-- Orders table --}}
        <x-card class="overflow-hidden">
            {{-- Toolbar --}}
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:p-5">
                <div class="relative max-w-md flex-1">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('Search PO #, supplier...') }}"
                        class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500"
                    />
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    <select wire:model.live="supplierFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All Suppliers') }}</option>
                        @foreach ($suppliers as $supplier)
                            <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                        @endforeach
                    </select>

                    <select wire:model.live="statusFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All Status') }}</option>
                        @foreach ($statuses as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Table --}}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('PO #') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Supplier') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Order Date') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Expected') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Total') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($orders as $order)
                            <tr wire:key="po-{{ $order->id }}" class="transition hover:bg-slate-50/70">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <p class="text-sm font-semibold text-slate-900">{{ $order->po_number }}</p>
                                    @if ($order->supplier_bill_id)
                                        <p class="text-xs text-emerald-500">{{ __('Billed') }}</p>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">{{ $order->supplier?->name ?? '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ optional($order->order_date)->format('j M Y') ?? '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ optional($order->expected_date)->format('j M Y') ?? '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums text-slate-700">
                                    {{ $order->currency_code }} {{ number_format((float) $order->total, 2) }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <x-badge :color="$statusMeta[$order->status]['color'] ?? 'slate'">
                                        {{ $statusMeta[$order->status]['label'] ?? $order->status_label }}
                                    </x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        <a href="{{ route('purchase-orders.preview', $order) }}" target="_blank" rel="noopener"
                                           title="{{ __('View / print') }}" class="text-slate-400 transition hover:text-indigo-600">
                                            <x-icon name="eye" class="h-4 w-4" />
                                        </a>
                                        <a href="{{ route('purchase-orders.pdf', $order) }}"
                                           title="{{ __('Download PDF') }}" class="text-slate-400 transition hover:text-slate-700">
                                            <x-icon name="arrow-down-tray" class="h-4 w-4" />
                                        </a>
                                        <x-notes-button :for="$order" />
                                        @if ($canManage && $order->status === 'draft')
                                            <button wire:click="approve({{ $order->id }})" class="text-sky-600 transition hover:text-sky-800">{{ __('Approve') }}</button>
                                            <button wire:click="edit({{ $order->id }})" class="text-slate-500 transition hover:text-slate-700">{{ __('Edit') }}</button>
                                        @endif
                                        @if ($canManage && $order->status === 'approved')
                                            <button wire:click="send({{ $order->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Send') }}</button>
                                        @endif
                                        @if ($canManage && $order->is_receivable)
                                            <button
                                                wire:click="receive({{ $order->id }})"
                                                wire:confirm="{{ __('Receive this order and create a supplier bill?') }}"
                                                class="text-emerald-600 transition hover:text-emerald-800"
                                            >{{ __('Receive') }}</button>
                                        @endif
                                        @if ($order->supplier_bill_id)
                                            <a href="{{ route('purchasing.index', ['tab' => 'bills']) }}" class="text-slate-500 transition hover:text-slate-700">{{ __('View Bill') }}</a>
                                        @endif
                                        @if ($canManage && ! in_array($order->status, ['received', 'cancelled'], true))
                                            <button
                                                wire:click="cancel({{ $order->id }})"
                                                wire:confirm="{{ __('Cancel this purchase order?') }}"
                                                class="text-amber-600 transition hover:text-amber-800"
                                            >{{ __('Cancel') }}</button>
                                        @endif
                                        @if ($canDelete)
                                            <button
                                                wire:click="delete({{ $order->id }})"
                                                wire:confirm="{{ __('Delete this purchase order?') }}"
                                                class="text-rose-600 transition hover:text-rose-800"
                                            >{{ __('Delete') }}</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="clipboard-document-list"
                                        :title="__('No purchase orders yet')"
                                        :message="$search !== '' || $statusFilter !== '' || $supplierFilter !== '' ? __('Try adjusting your search or filters.') : __('Raise your first purchase order to commit spend before the bill arrives.')"
                                        class="border-0 bg-transparent py-0"
                                    >
                                        @if ($canManage && $search === '' && $statusFilter === '' && $supplierFilter === '')
                                            <x-button wire:click="create" type="button">
                                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                {{ __('New Purchase Order') }}
                                            </x-button>
                                        @endif
                                    </x-empty-state>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                {{ $orders->links() }}
            </div>
        </x-card>
    </div>

    {{-- ============================================================= --}}
    {{-- Create / Edit PO modal                                         --}}
    {{-- ============================================================= --}}
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Purchase Order') : __('New Purchase Order') }}
        </x-slot>

        <x-slot name="content">
            <div class="space-y-5">
                {{-- Header fields --}}
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <x-label for="po-supplier" value="{{ __('Supplier') }}" />
                        <select id="po-supplier" wire:model.live="supplier_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Select a supplier...') }}</option>
                            @foreach ($suppliers as $supplier)
                                <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="supplier_id" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="po-currency" value="{{ __('Currency') }}" />
                        <select id="po-currency" wire:model.live="currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->code }}">{{ $currency->code }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="currency_code" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="po-rate" value="{{ __('Exchange Rate (to base)') }}" />
                        <x-input id="po-rate" type="number" step="0.000001" min="0" class="mt-1 block w-full" wire:model="exchange_rate" />
                        <x-input-error for="exchange_rate" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="po-date" value="{{ __('Order Date') }}" />
                        <x-input id="po-date" type="date" class="mt-1 block w-full" wire:model="order_date" />
                        <x-input-error for="order_date" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="po-expected" value="{{ __('Expected Date (optional)') }}" />
                        <x-input id="po-expected" type="date" class="mt-1 block w-full" wire:model="expected_date" />
                        <x-input-error for="expected_date" class="mt-2" />
                    </div>
                </div>

                {{-- Lines --}}
                <div>
                    <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-slate-900">{{ __('Lines') }}</h3>
                        <button type="button" wire:click="addLine" class="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 transition hover:text-indigo-800">
                            <x-icon name="plus" class="h-4 w-4" />
                            {{ __('Add line') }}
                        </button>
                    </div>
                    <x-input-error for="lines" class="mt-2" />

                    <div class="mt-3 space-y-3">
                        @foreach ($lines as $i => $line)
                            @php
                                $qty = (float) ($line['quantity'] ?? 0);
                                $price = (float) ($line['unit_price'] ?? 0);
                                $rate = (float) ($line['tax_rate'] ?? 0);
                                $lineTotal = round($qty * $price, 2);
                                $lineTax = round($lineTotal * $rate / 100, 2);
                            @endphp
                            <div wire:key="po-line-{{ $i }}" class="rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                                <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
                                    <div class="sm:col-span-12">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Catalogue item') }}</label>
                                        <select
                                            wire:model="lines.{{ $i }}.item_ref"
                                            wire:change="onItemChosen({{ $i }})"
                                            class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                        >
                                            <option value="">{{ __('Manual entry / non-stock') }}</option>
                                            @if ($variants->isNotEmpty())
                                                <optgroup label="{{ __('Stock / Materials') }}">
                                                    @foreach ($variants as $variant)
                                                        <option value="variant:{{ $variant->id }}">{{ $variant->material_name }}{{ $variant->label ? ', ' . $variant->label : '' }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endif
                                            @if ($products->isNotEmpty())
                                                <optgroup label="{{ __('Products') }}">
                                                    @foreach ($products as $product)
                                                        <option value="product:{{ $product->id }}">{{ $product->name }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endif
                                        </select>
                                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Pick from stock to link inventory (received into stock on receipt), pick a product to prefill, or enter manually below.') }}</p>
                                    </div>

                                    <div class="sm:col-span-12">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Description') }}</label>
                                        <input
                                            type="text"
                                            wire:model="lines.{{ $i }}.description"
                                            class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                        />
                                    </div>

                                    <div class="sm:col-span-3">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Qty') }}</label>
                                        <input
                                            type="number" step="0.000001" min="0"
                                            wire:model.live.debounce.400ms="lines.{{ $i }}.quantity"
                                            class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                        />
                                    </div>

                                    <div class="sm:col-span-3">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Unit Price') }}</label>
                                        <input
                                            type="number" step="0.01" min="0"
                                            wire:model.live.debounce.400ms="lines.{{ $i }}.unit_price"
                                            class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                        />
                                    </div>

                                    <div class="sm:col-span-2">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Tax %') }}</label>
                                        <input
                                            type="number" step="0.01" min="0"
                                            wire:model.live.debounce.400ms="lines.{{ $i }}.tax_rate"
                                            class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                        />
                                    </div>

                                    <div class="flex items-end justify-between sm:col-span-4">
                                        <div>
                                            <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Line Total') }}</label>
                                            <p class="mt-1 py-2 text-sm font-semibold tabular-nums text-slate-900">
                                                {{ number_format($lineTotal, 2) }}
                                                @if ($lineTax > 0)
                                                    <span class="text-xs font-normal text-slate-400">+{{ number_format($lineTax, 2) }} {{ __('tax') }}</span>
                                                @endif
                                            </p>
                                        </div>
                                        <button type="button" wire:click="removeLine({{ $i }})" class="mb-2 text-slate-300 transition hover:text-rose-500" title="{{ __('Remove line') }}">
                                            <x-icon name="trash" class="h-4 w-4" />
                                        </button>
                                    </div>

                                    @error('lines.' . $i . '.description') <p class="sm:col-span-12 text-xs text-rose-600">{{ $message }}</p> @enderror
                                    @error('lines.' . $i . '.quantity') <p class="sm:col-span-12 text-xs text-rose-600">{{ $message }}</p> @enderror
                                    @error('lines.' . $i . '.unit_price') <p class="sm:col-span-12 text-xs text-rose-600">{{ $message }}</p> @enderror
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Notes + totals --}}
                <div class="grid grid-cols-1 gap-4 border-t border-slate-100 pt-4 sm:grid-cols-2">
                    <div>
                        <x-label for="po-notes" value="{{ __('Notes (optional)') }}" />
                        <textarea id="po-notes" rows="3" wire:model="notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    </div>

                    <div class="rounded-xl bg-slate-50 p-4 text-sm">
                        <div class="flex items-center justify-between text-slate-600">
                            <span>{{ __('Subtotal') }}</span>
                            <span class="tabular-nums">{{ $currency_code }} {{ number_format($totals['subtotal'], 2) }}</span>
                        </div>
                        <div class="mt-2 flex items-center justify-between text-slate-600">
                            <span>{{ __('Tax') }}</span>
                            <span class="tabular-nums">{{ $currency_code }} {{ number_format($totals['tax'], 2) }}</span>
                        </div>
                        <div class="mt-3 flex items-center justify-between border-t border-slate-200 pt-3 text-base font-bold text-slate-900">
                            <span>{{ __('Total') }}</span>
                            <span class="tabular-nums">{{ $currency_code }} {{ number_format($totals['total'], 2) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">{{ $editingId ? __('Save Changes') : __('Create Order') }}</span>
                <span wire:loading wire:target="save">{{ __('Saving...') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>