<x-layout title="Lauck - Ver Producto">
    
    <x-section-header subtitle="Inventario" title="Detalle de " highlight="Producto" />

    @php
        $proveedor = \App\Models\Supplier::find($product->suppliers_id);
        
        // Mapeo para traducir el tipo de producto al español
        $tipos = [
            'accessory' => 'Accesorio',
            'bike'      => 'Bicicleta',
            'clothing'  => 'Indumentaria',
            'spare'     => 'Repuesto',
            'children'  => 'Infantil',
            'rollers'   => 'Rollers',
            'skate'     => 'Skate',
            'service'   => 'Servicio',
            'other'     => 'Otro'
        ];
        $tipoTraducido = $tipos[$product->type] ?? 'Desconocido';
    @endphp

    <div class="w-full max-w-4xl mx-auto bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-8 shadow-lg mb-10">
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">

            <div class="md:col-span-4">
                <x-forms.label for="name" value="Nombre del Producto" />
                <div class="bg-gray-300/50 dark:bg-neutral-800/50 border border-neutral-400/50 dark:border-neutral-700/50 text-gray-900 dark:text-gray-100 text-sm rounded-lg block w-full p-2.5 font-semibold">
                    {{ $product->name }}
                </div>
            </div>
            
            <div class="md:col-span-2">
                <x-forms.label for="suppliers_id" value="Proveedor" />
                <div class="bg-gray-300/50 dark:bg-neutral-800/50 border border-neutral-400/50 dark:border-neutral-700/50 text-gray-900 dark:text-gray-100 text-sm rounded-lg block w-full p-2.5 font-semibold">
                    {{ $proveedor ? $proveedor->name : 'Proveedor no asignado' }}
                </div>
            </div>

            <div class="md:col-span-2">
                <x-forms.label for="type" value="Tipo de Producto" />
                <div class="bg-gray-300/50 dark:bg-neutral-800/50 border border-neutral-400/50 dark:border-neutral-700/50 text-gray-900 dark:text-gray-100 text-sm rounded-lg block w-full p-2.5 font-semibold uppercase tracking-wider">
                    {{ $tipoTraducido }}
                </div>
            </div>

            <div class="md:col-span-2">
                <x-forms.label for="price" value="Precio Venta" />
                <div class="bg-gray-300/50 dark:bg-neutral-800/50 border border-neutral-400/50 dark:border-neutral-700/50 text-green-700 dark:text-neon-lime text-lg rounded-lg block w-full p-2.5 font-black font-mono">
                    ${{ number_format($product->price, 2, ',', '.') }}
                </div>
            </div>

            <div class="md:col-span-2">
                <x-forms.label for="stock_quantity" value="Cantidad Actual" />
                <div class="bg-gray-300/50 dark:bg-neutral-800/50 border border-neutral-400/50 dark:border-neutral-700/50 text-gray-900 dark:text-gray-100 text-sm rounded-lg block w-full p-2.5 font-bold flex items-center gap-2">
                    {{ $product->stock_quantity }} unidades
                    
                    @if($product->stock_quantity <= $product->min_stock_alert)
                        <span class="text-xs bg-red-600 text-white px-2 py-0.5 rounded uppercase shadow-sm shadow-red-900/50">¡Bajo Stock!</span>
                    @endif
                </div>
            </div>

            <div class="md:col-span-4">
                <x-forms.label for="image" value="Fotografía del Producto" />
                <div class="mt-2">
                    @if($product->image_path)
                        <img src="{{ asset('storage/' . $product->image_path) }}" alt="{{ $product->name }}" class="w-full max-w-sm rounded-lg border border-neutral-400 dark:border-neutral-700 shadow-md">
                    @else
                        <div class="w-full max-w-sm h-40 bg-gray-300 dark:bg-neutral-800 border-2 border-dashed border-gray-400 dark:border-neutral-600 rounded-lg flex flex-col items-center justify-center text-gray-500">
                            <svg class="w-8 h-8 mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            <span class="text-sm font-semibold">Sin imagen asignada</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="flex items-center justify-between md:justify-end space-x-4 border-t border-neutral-400 dark:border-neutral-700 pt-6">
            <a href="{{ route('productos.index') }}" class="text-gray-800 dark:text-gray-400 hover:text-black hover:dark:text-white font-medium text-sm transition-colors">
                Volver al listado
            </a>
            <a href="{{ route('productos.edit', $product) }}" class="px-6 py-2.5 bg-neutral-900 dark:bg-neon-lime text-neon-lime dark:text-neutral-900 font-bold rounded-lg hover:bg-neutral-800 hover:dark:bg-[#b3e600] transition-colors shadow-lg dark:shadow-neon-lime/20 flex items-center gap-2">
                <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/></svg>
                Editar Producto
            </a>
        </div>
        
    </div>

</x-layout>