<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">{{ $product->name }}</h2>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('products.index') }}" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">{{ __('Listado') }}</a>
                @can('inventory.manage')
                    <a href="{{ route('products.edit', $product) }}" class="inline-flex rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-500">{{ __('Editar') }}</a>
                @endcan
            </div>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6 text-sm text-gray-700 dark:text-gray-300 grid md:grid-cols-2 gap-4">
                <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('SKU') }}:</span> {{ $product->sku ?: '—' }}</p>
                <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Código de barras') }}:</span> {{ $product->barcode ?: '—' }}</p>
                <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Precio venta') }}:</span> {{ number_format((float) $product->sale_price, 2) }}</p>
                <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Costo') }}:</span> {{ $product->cost_price !== null ? number_format((float) $product->cost_price, 2) : '—' }}</p>
                <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Stock') }}:</span> {{ $product->track_inventory ? $product->stock_quantity : __('Sin control') }}</p>
                <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Unidad') }}:</span> {{ $product->unit }}</p>
                <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Farmacia clínica') }}:</span>
                    {{ $product->is_pharmacy_product ? __('Sí — solo venta vía reserva médica → caja') : __('No — venta directa en POS') }}</p>
                @if ($product->description)
                    <p class="md:col-span-2">{{ $product->description }}</p>
                @endif
            </div>

            @can('inventory.manage')
                @if (! $product->is_pharmacy_product)
                    <div class="rounded-lg border border-violet-200 bg-violet-50/80 p-4 text-sm text-violet-900 dark:border-violet-800 dark:bg-violet-950/40 dark:text-violet-100">
                        <p class="font-medium">{{ __('¿Reservas desde la historia clínica?') }}</p>
                        <p class="mt-1">{{ __('Activa la casilla «Producto farmacia / reserva clínica» al editar este artículo para que aparezca al crear reservas de farmacia para pacientes.') }}</p>
                        <a href="{{ route('products.edit', $product) }}" class="mt-2 inline-flex font-semibold text-violet-800 underline hover:text-violet-950 dark:text-violet-200">{{ __('Editar producto') }} →</a>
                    </div>
                @endif
                <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6">
                    <h3 class="font-medium text-gray-900 dark:text-gray-100 mb-4">{{ __('Ajuste rápido de stock') }}</h3>
                    <form method="post" action="{{ route('products.stock', $product) }}" class="flex flex-wrap items-end gap-4">
                        @csrf
                        <div>
                            <x-input-label for="quantity_change" :value="__('Cantidad (+ entrada / − salida)')" />
                            <x-text-input id="quantity_change" class="block mt-1 w-full" type="number" name="quantity_change" required />
                            <x-input-error :messages="$errors->get('quantity_change')" class="mt-2" />
                        </div>
                        <div class="flex-1 min-w-[12rem]">
                            <x-input-label for="notes" :value="__('Motivo / nota')" />
                            <x-text-input id="notes" class="block mt-1 w-full" type="text" name="notes" />
                        </div>
                        <x-primary-button type="submit">{{ __('Aplicar') }}</x-primary-button>
                    </form>
                </div>
            @endcan

            <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6">
                <h3 class="font-medium text-gray-900 dark:text-gray-100 mb-4">{{ __('Últimos movimientos') }}</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead>
                        <tr class="text-left text-gray-500 border-b border-gray-200 dark:border-gray-700">
                            <th class="pb-2 pr-4">{{ __('Fecha') }}</th>
                            <th class="pb-2 pr-4">{{ __('Cambio') }}</th>
                            <th class="pb-2 pr-4">{{ __('Saldo') }}</th>
                            <th class="pb-2 pr-4">{{ __('Motivo') }}</th>
                            <th class="pb-2">{{ __('Notas') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($product->stockMovements as $m)
                            <tr class="border-b border-gray-100 dark:border-gray-700/80">
                                <td class="py-2 pr-4">{{ $m->created_at->translatedFormat('d/m/Y H:i') }}</td>
                                <td class="py-2 pr-4 font-mono {{ $m->quantity_change >= 0 ? 'text-green-600' : 'text-red-600' }}">{{ $m->quantity_change >= 0 ? '+' : '' }}{{ $m->quantity_change }}</td>
                                <td class="py-2 pr-4">{{ $m->balance_after }}</td>
                                <td class="py-2 pr-4">{{ $m->reason }}</td>
                                <td class="py-2 text-gray-500">{{ \Illuminate\Support\Str::limit($m->notes, 40) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="py-4 text-gray-500">{{ __('Sin movimientos.') }}</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            @can('inventory.manage')
                <form method="post" action="{{ route('products.destroy', $product) }}" class="text-right" onsubmit="return confirm(@js(__('¿Eliminar este producto?')));">
                    @csrf
                    @method('delete')
                    <button type="submit" class="text-sm text-red-600 hover:underline">{{ __('Eliminar producto') }}</button>
                </form>
            @endcan
        </div>
    </div>
</x-app-layout>
