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

<div class="max-w-5xl">
    <div class="mb-4">
        <a href="{{ route('sales.index') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400">
            &larr; Back to sales
        </a>
    </div>

    @if (session('error'))
        <div class="mb-4 rounded-lg bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 text-sm px-4 py-3">
            {{ session('error') }}
        </div>
    @endif

    <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-semibold text-gray-800 dark:text-gray-100 mb-4">New Sale</h3>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <x-input-label for="customerId" value="Customer" />
                    <div class="mt-1">
                        <x-searchable-select wire-model="customerId" :options="$customers" :selected="$customerId" placeholder="— Select a customer —" />
                    </div>
                    <x-input-error :messages="$errors->get('customerId')" class="mt-1" />
                </div>

                <div>
                    <x-input-label for="warehouseId" value="Sell from warehouse" />
                    <div class="mt-1">
                        <x-searchable-select wire-model="warehouseId" :options="$warehouses" :selected="$warehouseId" placeholder="— Select a warehouse —" />
                    </div>
                    <x-input-error :messages="$errors->get('warehouseId')" class="mt-1" />
                </div>

                <div>
                    <x-input-label for="saleDate" value="Sale date" />
                    <x-text-input wire:model="saleDate" id="saleDate" type="date" class="mt-1 block w-full" />
                    <x-input-error :messages="$errors->get('saleDate')" 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-semibold text-gray-800 dark:text-gray-100">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>

            <div class="mb-4">
                <x-input-label for="barcodeInput" value="Scan or enter barcode" />
                <input
                    type="text"
                    wire:model="barcodeInput"
                    wire:keydown.enter.prevent="lookupBarcode"
                    id="barcodeInput"
                    placeholder="Scan a barcode and press Enter to add it as a line"
                    class="mt-1 block w-full sm:w-80 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"
                />
                <x-input-error :messages="$errors->get('barcodeInput')" class="mt-1" />
            </div>

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

            {{--
                Deliberately not wrapped in overflow-x-auto: the per-row product picker
                below is an absolutely-positioned dropdown, and any ancestor with
                overflow-x set to anything but visible clips it (per the CSS spec, setting
                overflow-x forces overflow-y to auto too, even though only -x was set) -
                the dropdown was rendering cut off/cramped inside that container. This
                table's columns are narrow enough not to need horizontal scroll; if that
                changes, the picker needs to escape via a portal instead of restoring this.
            --}}
            <div>
                <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 min-w-[220px]">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" />
                                    @if ($item['product_id'] && $warehouseId)
                                        @php $product = $products->firstWhere('id', (int) $item['product_id']) @endphp
                                        @if ($product?->track_batches)
                                            <select wire:model="items.{{ $index }}.batch_id" 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 text-xs">
                                                <option value="">— Select batch —</option>
                                                @foreach ($this->batchesFor($index) as $batch)
                                                    <option value="{{ $batch->id }}">{{ $batch->batch_number }} — {{ $batch->quantity }} left @if ($batch->expiry_date), exp {{ $batch->expiry_date->format('d M Y') }} @endif</option>
                                                @endforeach
                                            </select>
                                        @else
                                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">In stock: {{ $this->availableStock($index) }}</p>
                                        @endif
                                    @endif
                                </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="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 class="flex justify-between text-gray-500 dark:text-gray-400 pt-1">
                        <span>Est. COGS</span>
                        <span>{{ number_format($this->estimatedCost(), 2) }}</span>
                    </div>
                    <div class="flex justify-between font-semibold text-green-600 dark:text-green-400">
                        <span>Est. Profit</span>
                        <span>{{ number_format($this->estimatedProfit(), 2) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('sales.index') }}" 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">Create Sale</span>
                <span wire:loading wire:target="save">Creating…</span>
            </button>
        </div>
    </form>
</div>