<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">{{ __('Farmacia — Productos e inventario') }}</h2>
            <div class="flex items-center gap-2">
                <a href="{{ route('pos.index') }}" class="inline-flex items-center gap-2 rounded-xl border border-indigo-200 bg-white px-4 py-2 text-sm font-semibold text-indigo-700 shadow-sm hover:bg-indigo-50 dark:border-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-200 dark:hover:bg-indigo-900/60">
                    {{ __('Ir al POS') }}
                </a>
                @can('inventory.manage')
                    <a href="{{ route('products.create') }}" class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2 text-sm font-bold text-white shadow-md hover:bg-indigo-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                        {{ __('Nuevo producto') }}
                    </a>
                @endcan
            </div>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <form method="get" class="mb-6 flex flex-col gap-2 sm:flex-row sm:items-end">
                <div class="flex-1">
                    <x-input-label for="q" :value="__('Buscar')" />
                    <x-text-input id="q" class="block mt-1 w-full" type="search" name="q" :value="request('q')"
                                  placeholder="{{ __('Nombre, SKU o codigo de barras') }}" />
                </div>
                <x-primary-button type="submit">{{ __('Buscar') }}</x-primary-button>
            </form>

            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
                    <thead class="bg-gray-50 dark:bg-gray-900/50">
                    <tr>
                        <th class="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300">{{ __('Producto') }}</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300 hidden md:table-cell">{{ __('SKU / Barras') }}</th>
                        <th class="px-4 py-3 text-right font-medium text-gray-600 dark:text-gray-300">{{ __('Precio') }}</th>
                        <th class="px-4 py-3 text-right font-medium text-gray-600 dark:text-gray-300">{{ __('Stock') }}</th>
                        <th class="px-4 py-3 text-right font-medium text-gray-600 dark:text-gray-300">{{ __('Acciones') }}</th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse ($products as $product)
                        <tr>
                            <td class="px-4 py-3">
                                <a href="{{ route('products.show', $product) }}" class="font-medium text-indigo-600 dark:text-indigo-400 hover:underline">{{ $product->name }}</a>
                                @if ($product->is_pharmacy_product)
                                    <span class="ml-2 text-xs font-medium text-violet-600 dark:text-violet-400">{{ __('Clínica') }}</span>
                                @else
                                    <span class="ml-2 text-xs font-medium text-emerald-600 dark:text-emerald-400">{{ __('POS') }}</span>
                                @endif
                                @if (! $product->is_active)
                                    <span class="ml-2 text-xs text-amber-600">{{ __('Inactivo') }}</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-gray-600 dark:text-gray-400 hidden md:table-cell">
                                {{ $product->sku ?: '—' }}
                                @if($product->barcode)
                                    <br><span class="text-xs font-mono">{{ $product->barcode }}</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-right">{{ number_format((float) $product->sale_price, 2) }}</td>
                            <td class="px-4 py-3 text-right">{{ $product->track_inventory ? $product->stock_quantity : '—' }}</td>
                            <td class="px-4 py-3 text-right whitespace-nowrap">
                                <div class="inline-flex flex-wrap items-center justify-end gap-2">
                                    <a href="{{ route('products.show', $product) }}"
                                       class="inline-flex items-center gap-1 rounded-lg bg-teal-600 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-teal-700">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                        {{ __('Ver') }}
                                    </a>
                                    @can('inventory.manage')
                                        <a href="{{ route('products.edit', $product) }}"
                                           class="inline-flex items-center gap-1 rounded-lg border border-indigo-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-indigo-700 shadow-sm hover:bg-indigo-50 dark:border-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-200 dark:hover:bg-indigo-900/60">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                            {{ __('Editar') }}
                                        </a>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-8 text-center text-gray-500">{{ __('Sin productos.') }}</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
                <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">{{ $products->links() }}</div>
            </div>
        </div>
    </div>
</x-app-layout>
