@php
    $productsForJs = $pharmacyProducts->map(fn ($p) => [
        'id' => $p->id,
        'name' => $p->name,
        'sku' => $p->sku,
        'barcode' => $p->barcode,
        'price' => (float) $p->sale_price,
    ])->values();

    $initialItems = collect(old('items', []))
        ->filter(fn ($row) => filled(data_get($row, 'product_id')))
        ->map(fn ($row) => [
            'product_id' => (int) data_get($row, 'product_id'),
            'quantity' => max(1, (int) data_get($row, 'quantity', 1)),
        ])
        ->values();
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">{{ __('Nueva reserva de farmacia') }}</h2>
            <a href="{{ route('clients.patients.product-reservations.index', [$client, $patient]) }}" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">{{ __('Cancelar') }}</a>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                {{ __('Paciente') }}: <strong>{{ $patient->name }}</strong> · {{ __('Titular') }}: {{ $client->name }}
            </p>

            @if ($pharmacyProducts->isEmpty())
                <div class="rounded-xl border border-amber-400/60 bg-gradient-to-br from-amber-50 to-orange-50 p-5 text-sm text-amber-950 shadow-sm dark:border-amber-700/50 dark:from-amber-950/40 dark:to-orange-950/30 dark:text-amber-100">
                    <p class="font-semibold">{{ __('No hay productos disponibles para reserva clínica') }}</p>
                    <p class="mt-2 leading-relaxed">
                        {{ __('Las reservas solo listan productos con la casilla «Producto farmacia / reserva clínica» activa. Si ya tienes artículos en inventario (por ejemplo PROFENIL), ábrelos en Farmacia, edítalos y marca esa opción.') }}
                    </p>
                    <div class="mt-4 flex flex-wrap gap-3">
                        <a href="{{ route('products.index') }}"
                           class="inline-flex items-center gap-2 rounded-lg bg-amber-600 px-4 py-2 text-sm font-bold text-white shadow hover:bg-amber-700">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                            {{ __('Ir a productos') }}
                        </a>
                        @can('inventory.manage')
                            <a href="{{ route('products.create') }}"
                               class="inline-flex items-center gap-2 rounded-lg border border-amber-700 bg-white px-4 py-2 text-sm font-semibold text-amber-900 hover:bg-amber-100 dark:border-amber-500 dark:bg-amber-950/50 dark:text-amber-50 dark:hover:bg-amber-900/70">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                                {{ __('Crear producto') }}
                            </a>
                        @endcan
                    </div>
                </div>
            @else
                <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6"
                     x-data="reservationBuilder({{ \Illuminate\Support\Js::from($productsForJs) }}, {{ \Illuminate\Support\Js::from($initialItems) }})"
                     @click.outside="open = false">
                    <form method="post" action="{{ route('clients.patients.product-reservations.store', [$client, $patient]) }}" class="space-y-5">
                        @csrf

                        <div>
                            <x-input-label for="notes" :value="__('Nota (opcional)')" />
                            <textarea id="notes" name="notes" rows="2" class="block mt-1 w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-sm">{{ old('notes') }}</textarea>
                            <x-input-error :messages="$errors->get('notes')" class="mt-2" />
                        </div>

                        <div class="rounded-xl border border-teal-200/80 bg-teal-50/40 p-4">
                            <x-input-label for="product-search" :value="__('Buscar y agregar producto')"/>
                            <div class="relative mt-2">
                                <input id="product-search"
                                       x-model="query"
                                       @focus="open = true"
                                       @input="open = true"
                                       @keydown.escape.stop="open = false"
                                       type="text"
                                       placeholder="{{ __('Nombre, SKU o código de barras') }}"
                                       class="w-full rounded-xl border border-teal-300 bg-white px-4 py-2.5 text-sm shadow-sm focus:border-teal-500 focus:ring-teal-400"/>

                                <div x-show="open" x-cloak class="absolute z-30 mt-2 w-full overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xl">
                                    <template x-if="filteredProducts.length === 0">
                                        <p class="px-4 py-3 text-sm text-slate-500">{{ __('Sin coincidencias o ya agregados.') }}</p>
                                    </template>
                                    <ul>
                                        <template x-for="p in filteredProducts" :key="p.id">
                                            <li>
                                                <button type="button"
                                                        class="flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left hover:bg-teal-50"
                                                        @click="addProduct(p)">
                                                    <span class="min-w-0">
                                                        <span class="block truncate text-sm font-semibold text-slate-900" x-text="p.name"></span>
                                                        <span class="block truncate text-xs text-slate-500" x-text="[p.sku, p.barcode].filter(Boolean).join(' · ')"></span>
                                                    </span>
                                                    <span class="shrink-0 text-sm font-semibold text-teal-700" x-text="Number(p.price).toFixed(2)"></span>
                                                </button>
                                            </li>
                                        </template>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="mb-2 flex items-center justify-between">
                                <p class="text-sm font-semibold text-slate-700">{{ __('Productos seleccionados') }}</p>
                                <span class="text-xs text-slate-500" x-text="lines.length + ' {{ __('item(s)') }}'"></span>
                            </div>

                            <template x-if="lines.length === 0">
                                <p class="rounded-lg border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-sm text-slate-500">
                                    {{ __('No has agregado productos todavía.') }}
                                </p>
                            </template>

                            <div class="space-y-2">
                                <template x-for="(line, idx) in lines" :key="idx">
                                    <div class="grid grid-cols-12 items-center gap-2 rounded-lg border border-slate-200 bg-white p-2">
                                        <div class="col-span-7 sm:col-span-8">
                                            <p class="text-sm font-medium text-slate-900" x-text="getProduct(line.product_id)?.name || 'Producto'"></p>
                                            <p class="text-xs text-slate-500" x-text="[getProduct(line.product_id)?.sku, getProduct(line.product_id)?.barcode].filter(Boolean).join(' · ')"></p>
                                        </div>
                                        <div class="col-span-3 sm:col-span-2">
                                            <input type="number" min="1" x-model.number="line.quantity"
                                                   class="w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-teal-500 focus:ring-teal-400"/>
                                        </div>
                                        <div class="col-span-2 text-right">
                                            <button type="button" @click="removeLine(idx)" class="rounded-md p-2 text-red-600 hover:bg-red-50" title="{{ __('Quitar') }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                            </button>
                                        </div>

                                        <input type="hidden" :name="`items[${idx}][product_id]`" :value="line.product_id">
                                        <input type="hidden" :name="`items[${idx}][quantity]`" :value="line.quantity > 0 ? line.quantity : 1">
                                    </div>
                                </template>
                            </div>

                            <x-input-error :messages="$errors->get('items')" class="mt-2" />
                            @foreach (collect(old('items', [])) as $i => $row)
                                <x-input-error :messages="$errors->get('items.'.$i.'.product_id')" class="mt-2" />
                                <x-input-error :messages="$errors->get('items.'.$i.'.quantity')" class="mt-2" />
                            @endforeach
                        </div>

                        <x-primary-button>{{ __('Guardar reserva') }}</x-primary-button>
                    </form>
                </div>
            @endif
        </div>
    </div>
</x-app-layout>