@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="h3 mb-0">Editar Producto</h2>
                <a href="{{ route('inventario.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Volver al Inventario
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('inventario.update', $producto) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <!-- Información General -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3">Información General</h5>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="nombre" class="form-label">Nombre del Producto *</label>
                                    <input type="text" class="form-control @error('nombre') is-invalid @enderror" 
                                           id="nombre" name="nombre" value="{{ old('nombre', $producto->nombre) }}" required>
                                    @error('nombre')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="codigo" class="form-label">Código *</label>
                                    <input type="text" class="form-control @error('codigo') is-invalid @enderror" 
                                           id="codigo" name="codigo" value="{{ old('codigo', $producto->codigo) }}" required>
                                    @error('codigo')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="descripcion" class="form-label">Descripción *</label>
                                    <textarea class="form-control @error('descripcion') is-invalid @enderror" 
                                              id="descripcion" name="descripcion" rows="3" required>{{ old('descripcion', $producto->descripcion) }}</textarea>
                                    @error('descripcion')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Especificaciones Técnicas -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3">Especificaciones Técnicas</h5>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="categoria" class="form-label">Categoría *</label>
                                    <select class="form-select @error('categoria') is-invalid @enderror" 
                                            id="categoria" name="categoria" required>
                                        <option value="">Seleccionar categoría</option>
                                        <option value="Routers" {{ old('categoria', $producto->categoria) == 'Routers' ? 'selected' : '' }}>Routers</option>
                                        <option value="Switches" {{ old('categoria', $producto->categoria) == 'Switches' ? 'selected' : '' }}>Switches</option>
                                        <option value="Access Points" {{ old('categoria', $producto->categoria) == 'Access Points' ? 'selected' : '' }}>Access Points</option>
                                        <option value="Adaptadores" {{ old('categoria', $producto->categoria) == 'Adaptadores' ? 'selected' : '' }}>Adaptadores</option>
                                        <option value="Cables" {{ old('categoria', $producto->categoria) == 'Cables' ? 'selected' : '' }}>Cables</option>
                                        <option value="Antenas" {{ old('categoria', $producto->categoria) == 'Antenas' ? 'selected' : '' }}>Antenas</option>
                                        <option value="Herramientas" {{ old('categoria', $producto->categoria) == 'Herramientas' ? 'selected' : '' }}>Herramientas</option>
                                    </select>
                                    @error('categoria')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="marca" class="form-label">Marca *</label>
                                    <input type="text" class="form-control @error('marca') is-invalid @enderror" 
                                           id="marca" name="marca" value="{{ old('marca', $producto->marca) }}" required>
                                    @error('marca')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="modelo" class="form-label">Modelo *</label>
                                    <input type="text" class="form-control @error('modelo') is-invalid @enderror" 
                                           id="modelo" name="modelo" value="{{ old('modelo', $producto->modelo) }}" required>
                                    @error('modelo')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Precios y Stock -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3">Precios y Stock</h5>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="precio_compra" class="form-label">Precio de Compra (Bs.) *</label>
                                    <input type="number" step="0.01" class="form-control @error('precio_compra') is-invalid @enderror" 
                                           id="precio_compra" name="precio_compra" value="{{ old('precio_compra', $producto->precio_compra) }}" 
                                           required min="0">
                                    @error('precio_compra')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="precio_venta" class="form-label">Precio de Venta (Bs.) *</label>
                                    <input type="number" step="0.01" class="form-control @error('precio_venta') is-invalid @enderror" 
                                           id="precio_venta" name="precio_venta" value="{{ old('precio_venta', $producto->precio_venta) }}" 
                                           required min="0">
                                    @error('precio_venta')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="stock_minimo" class="form-label">Stock Mínimo *</label>
                                    <input type="number" class="form-control @error('stock_minimo') is-invalid @enderror" 
                                           id="stock_minimo" name="stock_minimo" value="{{ old('stock_minimo', $producto->stock_minimo) }}" 
                                           required min="0">
                                    @error('stock_minimo')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="unidad_medida" class="form-label">Unidad de Medida *</label>
                                    <select class="form-select @error('unidad_medida') is-invalid @enderror" 
                                            id="unidad_medida" name="unidad_medida" required>
                                        <option value="unidad" {{ old('unidad_medida', $producto->unidad_medida) == 'unidad' ? 'selected' : '' }}>Unidad</option>
                                        <option value="metro" {{ old('unidad_medida', $producto->unidad_medida) == 'metro' ? 'selected' : '' }}>Metro</option>
                                        <option value="rollo" {{ old('unidad_medida', $producto->unidad_medida) == 'rollo' ? 'selected' : '' }}>Rollo</option>
                                        <option value="caja" {{ old('unidad_medida', $producto->unidad_medida) == 'caja' ? 'selected' : '' }}>Caja</option>
                                        <option value="paquete" {{ old('unidad_medida', $producto->unidad_medida) == 'paquete' ? 'selected' : '' }}>Paquete</option>
                                    </select>
                                    @error('unidad_medida')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Información Adicional -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3">Información Adicional</h5>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="proveedor_id" class="form-label">Proveedor *</label>
                                    <select class="form-select @error('proveedor_id') is-invalid @enderror" 
                                            id="proveedor_id" name="proveedor_id" required>
                                        <option value="">Seleccionar proveedor</option>
                                        @foreach($proveedores as $proveedor)
                                            <option value="{{ $proveedor->id }}" 
                                                    {{ old('proveedor_id', $producto->proveedor_id) == $proveedor->id ? 'selected' : '' }}>
                                                {{ $proveedor->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('proveedor_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="ubicacion" class="form-label">Ubicación *</label>
                                    <input type="text" class="form-control @error('ubicacion') is-invalid @enderror" 
                                           id="ubicacion" name="ubicacion" value="{{ old('ubicacion', $producto->ubicacion) }}" 
                                           placeholder="Ej: Estante A-1, Almacén Principal" required>
                                    @error('ubicacion')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Control de Stock -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3">Control de Stock</h5>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h4 class="{{ $producto->stock_actual <= $producto->stock_minimo ? 'text-danger' : 'text-success' }}">
                                            {{ $producto->stock_actual }}
                                        </h4>
                                        <p class="mb-0">Stock Actual</p>
                                        <small class="text-muted">{{ $producto->unidad_medida }}</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-8">
                                <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#ajustarStockModal">
                                    <i class="fas fa-adjust"></i> Ajustar Stock
                                </button>
                                <small class="text-muted d-block mt-2">
                                    Use este botón para realizar ajustes de inventario (entradas, salidas, correcciones)
                                </small>
                            </div>
                        </div>

                        <!-- Botones -->
                        <div class="row">
                            <div class="col-12">
                                <hr>
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('inventario.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-times"></i> Cancelar
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Actualizar Producto
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para ajustar stock -->
<div class="modal fade" id="ajustarStockModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajustar Stock - {{ $producto->nombre }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('inventario.ajustar-stock', $producto->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <strong>Stock actual:</strong> {{ $producto->stock_actual }} {{ $producto->unidad_medida }}
                    </div>
                    
                    <div class="mb-3">
                        <label for="tipo_movimiento" class="form-label">Tipo de Movimiento</label>
                        <select class="form-select" id="tipo_movimiento" name="tipo_movimiento" required>
                            <option value="entrada">Entrada (+)</option>
                            <option value="salida">Salida (-)</option>
                            <option value="ajuste">Ajuste/Corrección</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="cantidad" class="form-label">Cantidad</label>
                        <input type="number" class="form-control" id="cantidad" name="cantidad" required min="1">
                    </div>
                    <div class="mb-3">
                        <label for="observaciones" class="form-label">Observaciones</label>
                        <textarea class="form-control" id="observaciones" name="observaciones" rows="3" placeholder="Motivo del ajuste..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-warning">Realizar Ajuste</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Calcular margen de ganancia automáticamente
document.getElementById('precio_compra').addEventListener('input', calcularMargen);
document.getElementById('precio_venta').addEventListener('input', calcularMargen);

function calcularMargen() {
    const precioCompra = parseFloat(document.getElementById('precio_compra').value) || 0;
    const precioVenta = parseFloat(document.getElementById('precio_venta').value) || 0;
    
    if (precioCompra > 0 && precioVenta > precioCompra) {
        const margen = ((precioVenta - precioCompra) / precioCompra * 100).toFixed(2);
        
        // Mostrar margen si hay un elemento para ello
        const margenElement = document.getElementById('margen_display');
        if (margenElement) {
            margenElement.textContent = `Margen: ${margen}%`;
            margenElement.className = 'text-success small';
        }
    }
}

// Ejecutar cálculo inicial
calcularMargen();
</script>
@endpush
@endsection