<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ isset($product) ? 'Editar Producto: ' . $product->name : 'Crear Nuevo Producto' }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    
                    <form method="POST" action="{{ isset($product) ? route('products.update', $product->id) : route('products.store') }}" enctype="multipart/form-data">
                        @csrf
                        @if(isset($product))
                            @method('PUT')
                        @endif

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                            <!-- SKU -->
                            <div>
                                <x-input-label for="sku" value="SKU (Código de Barras)" />
                                <x-text-input id="sku" class="block mt-1 w-full" type="text" name="sku" :value="old('sku', $product->sku ?? '')" placeholder="Escanea código o deja vacío" autofocus />
                                <p class="text-xs text-gray-500 mt-1">Si queda vacío, se generará uno aleatorio.</p>
                                <x-input-error :messages="$errors->get('sku')" class="mt-2" />
                            </div>

                            <!-- Proveedor -->
                            <div>
                                <x-input-label for="supplier_id" value="Proveedor" />
                                <select id="supplier_id" name="supplier_id" class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm block mt-1 w-full" required>
                                    <option value="">Seleccione un proveedor...</option>
                                    @foreach($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}" {{ (old('supplier_id') == $supplier->id || (isset($product) && $product->supplier_id == $supplier->id)) ? 'selected' : '' }}>
                                            {{ $supplier->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <x-input-error :messages="$errors->get('supplier_id')" class="mt-2" />
                            </div>

                            <!-- Categoría -->
                            <div>
                                <x-input-label for="category_id" value="Categoría" />
                                <select id="category_id" name="category_id" class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm block mt-1 w-full">
                                    <option value="">Ninguna / General</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ (old('category_id') == $category->id || (isset($product) && $product->category_id == $category->id)) ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <x-input-error :messages="$errors->get('category_id')" class="mt-2" />
                            </div>

                            <!-- Nombre -->
                            <div class="md:col-span-2">
                                <x-input-label for="name" value="Nombre del Producto" />
                                <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name', $product->name ?? '')" required />
                                <x-input-error :messages="$errors->get('name')" class="mt-2" />
                            </div>

                            <!-- Descripción -->
                            <div class="md:col-span-2">
                                <x-input-label for="description" value="Descripción (Opcional)" />
                                <textarea id="description" name="description" rows="3" class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm block mt-1 w-full">{{ old('description', $product->description ?? '') }}</textarea>
                                <x-input-error :messages="$errors->get('description')" class="mt-2" />
                            </div>

                            <!-- Imagen del Producto -->
                            <div class="md:col-span-2">
                                <x-input-label for="image" value="Imagen del Producto (Opcional)" />
                                
                                @if(isset($product) && $product->image)
                                    <div class="mt-2 mb-4">
                                        <p class="text-sm text-gray-500 mb-2">Imagen actual:</p>
                                        <img src="{{ Storage::url($product->image) }}" alt="Imagen actual de {{ $product->name }}" class="h-32 object-contain rounded border bg-gray-50 p-1">
                                    </div>
                                @endif
                                
                                <input type="file" id="image" name="image" class="block w-full text-sm text-gray-500 mt-1 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" accept="image/*">
                                <x-input-error :messages="$errors->get('image')" class="mt-2" />
                            </div>

                            <!-- Precio Compra -->
                            <div>
                                <x-input-label for="purchase_price" value="Precio de Compra (S/)" />
                                <x-text-input id="purchase_price" class="block mt-1 w-full" type="number" step="0.01" name="purchase_price" :value="old('purchase_price', $product->purchase_price ?? '0.00')" required />
                                <x-input-error :messages="$errors->get('purchase_price')" class="mt-2" />
                            </div>

                            <!-- Precio Venta -->
                            <div>
                                <x-input-label for="sale_price" value="Precio de Venta (S/)" />
                                <x-text-input id="sale_price" class="block mt-1 w-full" type="number" step="0.01" name="sale_price" :value="old('sale_price', $product->sale_price ?? '0.00')" required />
                                <x-input-error :messages="$errors->get('sale_price')" class="mt-2" />
                            </div>

                            <!-- Stock Actual -->
                            <div>
                                <x-input-label for="stock" value="Stock Actual" />
                                <x-text-input id="stock" class="block mt-1 w-full" type="number" name="stock" :value="old('stock', $product->stock ?? '0')" required />
                                <x-input-error :messages="$errors->get('stock')" class="mt-2" />
                            </div>

                            <!-- Stock Mínimo -->
                            <div>
                                <x-input-label for="min_stock" value="Alerta de Stock Mínimo" />
                                <x-text-input id="min_stock" class="block mt-1 w-full" type="number" name="min_stock" :value="old('min_stock', $product->min_stock ?? '5')" required />
                                <p class="text-xs text-gray-500 mt-1">Se enviará alerta en POS cuando baje de este umbral.</p>
                                <x-input-error :messages="$errors->get('min_stock')" class="mt-2" />
                            </div>

                        </div>

                        <div class="flex items-center justify-end mt-8">
                            <a href="{{ route('products.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-300 mr-2">
                                Cancelar
                            </a>
                            <x-primary-button>
                                {{ isset($product) ? 'Actualizar Producto' : 'Guardar Producto' }}
                            </x-primary-button>
                        </div>
                    </form>

                    <!-- Delete button if in Edit Mode -->
                    @if(isset($product))
                        <button type="button" onclick="swalDelete('{{ route('products.destroy', $product->id) }}', '{{ csrf_token() }}', '\u00bfEliminar este producto?', 'Esta acci\u00f3n es permanente e irreversible.')" class="text-sm text-rose-600 hover:text-rose-900 font-medium">
                            Eliminar Producto permanentemente
                        </button>
                    @endif

                </div>
            </div>
        </div>
    </div>
</x-app-layout>
