@php
    $productOptions = $products->map(fn ($product) => (object) ['id' => $product->id, 'name' => "{$product->name} ({$product->sku})"]);
@endphp

<div>
    <div class="mb-4">
        <a href="{{ route('sale_orders.show', $saleOrder) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400">
            &larr; Back to {{ $saleOrder->order_number }}
        </a>
    </div>

    <x-page-header section="Sale orders" :title="'Edit '.$saleOrder->order_number" />

    <form wire:submit="save" class="space-y-6">
        <div class="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl p-6">
            <h3 class="text-base font-bold text-gray-900 dark:text-white mb-1">Details</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">{{ $saleOrder->customer->name }} &middot; {{ $saleOrder->warehouse->name }}</p>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <x-input-label for="orderDate" value="Order date" />
                    <x-text-input wire:model="orderDate" id="orderDate" type="date" class="mt-1 block w-full" />
                    <x-input-error :messages="$errors->get('orderDate')" class="mt-1" />
                </div>

                <div>
                    <x-input-label for="expectedDate" value="Expected dispatch date (optional)" />
                    <x-text-input wire:model="expectedDate" id="expectedDate" type="date" class="mt-1 block w-full" />
                    <x-input-error :messages="$errors->get('expectedDate')" class="mt-1" />
                </div>

                <div class="sm:col-span-2">
                    <x-input-label for="notes" value="Notes (optional)" />
                    <textarea wire:model="notes" id="notes" rows="2" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-base font-bold text-gray-900 dark:text-white">Items</h3>
                <button type="button" wire:click="addItem" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400">
                    + Add line
                </button>
            </div>

            <x-input-error :messages="$errors->get('items')" class="mb-3" />

            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead>
                        <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                            <th class="pb-2 pr-3">Product</th>
                            <th class="pb-2 px-3 w-24">Quantity</th>
                            <th class="pb-2 px-3 w-32">Unit Price</th>
                            <th class="pb-2 px-3 w-24">Tax %</th>
                            <th class="pb-2 px-3 w-32 text-right">Line Total</th>
                            <th class="pb-2 w-10"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($items as $index => $item)
                            <tr class="border-t border-gray-100 dark:border-gray-700">
                                <td class="py-2 pr-3">
                                    <x-searchable-select wire-model="items.{{ $index }}.product_id" :options="$productOptions" :selected="$item['product_id']" placeholder="— Select —" />
                                    <x-input-error :messages="$errors->get('items.'.$index.'.product_id')" class="mt-1" />
                                </td>
                                <td class="py-2 px-3">
                                    <input type="number" min="1" wire:model="items.{{ $index }}.quantity" class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" />
                                </td>
                                <td class="py-2 px-3">
                                    <input type="number" min="0" step="0.01" wire:model="items.{{ $index }}.unit_price" class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" />
                                </td>
                                <td class="py-2 px-3">
                                    <input type="number" min="0" max="100" step="0.01" wire:model="items.{{ $index }}.tax_rate" class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" />
                                </td>
                                <td class="py-2 px-3 text-right text-gray-600 dark:text-gray-300">
                                    {{ number_format((float) ($item['quantity'] ?: 0) * (float) ($item['unit_price'] ?: 0), 2) }}
                                </td>
                                <td class="py-2 text-right">
                                    @if (count($items) > 1)
                                        <button type="button" wire:click="removeItem({{ $index }})" class="text-red-500 hover:text-red-700">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                <button type="button" wire:click="addItem" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400">
                    + Add line
                </button>
            </div>

            <div class="flex justify-end mt-4">
                <div class="w-full sm:w-64 space-y-1 text-sm">
                    <div class="flex justify-between text-gray-600 dark:text-gray-300">
                        <span>Subtotal</span>
                        <span>{{ number_format($this->subtotal(), 2) }}</span>
                    </div>
                    <div class="flex justify-between text-gray-600 dark:text-gray-300">
                        <span>Tax</span>
                        <span>{{ number_format($this->taxTotal(), 2) }}</span>
                    </div>
                    <div class="flex justify-between font-semibold text-gray-800 dark:text-gray-100 pt-1 border-t border-gray-100 dark:border-gray-700">
                        <span>Total</span>
                        <span>{{ number_format($this->grandTotal(), 2) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('sale_orders.show', $saleOrder) }}" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
                Cancel
            </a>
            <button type="submit" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition">
                <span wire:loading.remove wire:target="save">Save Changes</span>
                <span wire:loading wire:target="save">Saving…</span>
            </button>
        </div>
    </form>
</div>