@extends('layouts.app')

@section('title', 'Agregar Producto')

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

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('inventario.store') }}" method="POST" id="productoForm">
                        @csrf
                        
                        <!-- Tabs Navigation -->
                        <ul class="nav nav-tabs" id="productoTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">
                                    <i class="fas fa-info-circle"></i> Información General
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="tecnico-tab" data-bs-toggle="tab" data-bs-target="#tecnico" type="button" role="tab">
                                    <i class="fas fa-cogs"></i> Especificaciones Técnicas
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="precios-tab" data-bs-toggle="tab" data-bs-target="#precios" type="button" role="tab">
                                    <i class="fas fa-dollar-sign"></i> Precios y Stock
                                </button>
                            </li>
                        </ul>

                        <!-- Tabs Content -->
                        <div class="tab-content mt-4" id="productoTabsContent">
                            
                            <!-- Tab 1: Información General -->
                            <div class="tab-pane fade show active" id="general" role="tabpanel">
                                <div class="row">
                                    <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') }}" 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 del Producto *</label>
                                            <input type="text" class="form-control @error('codigo') is-invalid @enderror" id="codigo" name="codigo" value="{{ old('codigo') }}" required>
                                            @error('codigo')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-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') }}</textarea>
                                            @error('descripcion')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <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="">Seleccione una categoría</option>
                                                <option value="Routers" {{ old('categoria') == 'Routers' ? 'selected' : '' }}>Routers</option>
                                                <option value="Switches" {{ old('categoria') == 'Switches' ? 'selected' : '' }}>Switches</option>
                                                <option value="Access Points" {{ old('categoria') == 'Access Points' ? 'selected' : '' }}>Access Points</option>
                                                <option value="Antenas" {{ old('categoria') == 'Antenas' ? 'selected' : '' }}>Antenas</option>
                                                <option value="Cables" {{ old('categoria') == 'Cables' ? 'selected' : '' }}>Cables</option>
                                                <option value="Conectores" {{ old('categoria') == 'Conectores' ? 'selected' : '' }}>Conectores</option>
                                                <option value="Herramientas" {{ old('categoria') == 'Herramientas' ? 'selected' : '' }}>Herramientas</option>
                                                <option value="Otros" {{ old('categoria') == 'Otros' ? 'selected' : '' }}>Otros</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') }}" 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') }}" required>
                                            @error('modelo')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <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">
                                                <option value="">Seleccione un proveedor</option>
                                                @foreach($proveedores as $proveedor)
                                                    <option value="{{ $proveedor->id }}" {{ old('proveedor_id') == $proveedor->id ? 'selected' : '' }}>
                                                        {{ $proveedor->nombre }} {{ $proveedor->razon_social ? '- ' . $proveedor->razon_social : '' }}
                                                    </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 en Almacén</label>
                                            <input type="text" class="form-control @error('ubicacion') is-invalid @enderror" id="ubicacion" name="ubicacion" value="{{ old('ubicacion') }}" placeholder="Ej: Estante A, Fila 3">
                                            @error('ubicacion')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab 2: Especificaciones Técnicas -->
                            <div class="tab-pane fade" id="tecnico" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="voltaje" class="form-label">Voltaje</label>
                                            <input type="text" class="form-control @error('voltaje') is-invalid @enderror" id="voltaje" name="voltaje" value="{{ old('voltaje') }}" placeholder="Ej: 12V, 220V">
                                            @error('voltaje')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="frecuencia" class="form-label">Frecuencia</label>
                                            <input type="text" class="form-control @error('frecuencia') is-invalid @enderror" id="frecuencia" name="frecuencia" value="{{ old('frecuencia') }}" placeholder="Ej: 2.4GHz, 5GHz">
                                            @error('frecuencia')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="potencia" class="form-label">Potencia</label>
                                            <input type="text" class="form-control @error('potencia') is-invalid @enderror" id="potencia" name="potencia" value="{{ old('potencia') }}" placeholder="Ej: 30W, 100mW">
                                            @error('potencia')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="peso" class="form-label">Peso</label>
                                            <input type="text" class="form-control @error('peso') is-invalid @enderror" id="peso" name="peso" value="{{ old('peso') }}" placeholder="Ej: 1.5kg, 200g">
                                            @error('peso')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="dimensiones" class="form-label">Dimensiones</label>
                                            <input type="text" class="form-control @error('dimensiones') is-invalid @enderror" id="dimensiones" name="dimensiones" value="{{ old('dimensiones') }}" placeholder="Ej: 20x15x5 cm">
                                            @error('dimensiones')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="especificaciones_tecnicas" class="form-label">Especificaciones Técnicas Adicionales</label>
                                    <textarea class="form-control @error('especificaciones_tecnicas') is-invalid @enderror" id="especificaciones_tecnicas" name="especificaciones_tecnicas" rows="4" placeholder="Describa características técnicas adicionales...">{{ old('especificaciones_tecnicas') }}</textarea>
                                    @error('especificaciones_tecnicas')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Tab 3: Precios y Stock -->
                            <div class="tab-pane fade" id="precios" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="precio_compra" class="form-label">Precio de Compra (Bs) *</label>
                                            <input type="number" step="0.01" min="0" class="form-control @error('precio_compra') is-invalid @enderror" id="precio_compra" name="precio_compra" value="{{ old('precio_compra') }}" required>
                                            @error('precio_compra')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="precio_venta" class="form-label">Precio de Venta (Bs) *</label>
                                            <input type="number" step="0.01" min="0" class="form-control @error('precio_venta') is-invalid @enderror" id="precio_venta" name="precio_venta" value="{{ old('precio_venta') }}" required>
                                            @error('precio_venta')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="stock_actual" class="form-label">Stock Actual *</label>
                                            <input type="number" min="0" class="form-control @error('stock_actual') is-invalid @enderror" id="stock_actual" name="stock_actual" value="{{ old('stock_actual', 0) }}" required>
                                            @error('stock_actual')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="stock_minimo" class="form-label">Stock Mínimo *</label>
                                            <input type="number" min="0" class="form-control @error('stock_minimo') is-invalid @enderror" id="stock_minimo" name="stock_minimo" value="{{ old('stock_minimo', 5) }}" required>
                                            @error('stock_minimo')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="estado" class="form-label">Estado *</label>
                                            <select class="form-select @error('estado') is-invalid @enderror" id="estado" name="estado" required>
                                                <option value="1" {{ old('estado', 1) == 1 ? 'selected' : '' }}>Activo</option>
                                                <option value="0" {{ old('estado') == 0 ? 'selected' : '' }}>Inactivo</option>
                                            </select>
                                            @error('estado')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Margen de Ganancia</label>
                                            <div class="form-control bg-light" id="margen-ganancia">
                                                0%
                                            </div>
                                            <small class="text-muted">Se calcula automáticamente basado en los precios</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="alert alert-info">
                                    <h6><i class="fas fa-info-circle"></i> Información sobre Stock:</h6>
                                    <ul class="mb-0">
                                        <li><strong>Stock Actual:</strong> Cantidad disponible en almacén</li>
                                        <li><strong>Stock Mínimo:</strong> Cantidad mínima antes de generar alerta</li>
                                        <li><strong>Margen:</strong> Se calcula como: ((Precio Venta - Precio Compra) / Precio Compra) × 100</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Botones de acción -->
                        <div class="d-flex justify-content-between mt-4">
                            <div>
                                <a href="{{ route('inventario.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancelar
                                </a>
                            </div>
                            <div>
                                <button type="button" class="btn btn-outline-primary" id="btnAnterior" style="display: none;">
                                    <i class="fas fa-arrow-left"></i> Anterior
                                </button>
                                <button type="button" class="btn btn-primary" id="btnSiguiente">
                                    Siguiente <i class="fas fa-arrow-right"></i>
                                </button>
                                <button type="submit" class="btn btn-success" id="btnGuardar" style="display: none;">
                                    <i class="fas fa-save"></i> Guardar Producto
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = ['general', 'tecnico', 'precios'];
    let currentTab = 0;
    
    const btnAnterior = document.getElementById('btnAnterior');
    const btnSiguiente = document.getElementById('btnSiguiente');
    const btnGuardar = document.getElementById('btnGuardar');
    
    // Elementos para cálculo de margen
    const precioCompra = document.getElementById('precio_compra');
    const precioVenta = document.getElementById('precio_venta');
    const margenGanancia = document.getElementById('margen-ganancia');
    
    function updateButtons() {
        btnAnterior.style.display = currentTab > 0 ? 'inline-block' : 'none';
        btnSiguiente.style.display = currentTab < tabs.length - 1 ? 'inline-block' : 'none';
        btnGuardar.style.display = currentTab === tabs.length - 1 ? 'inline-block' : 'none';
    }
    
    function calcularMargen() {
        const compra = parseFloat(precioCompra.value) || 0;
        const venta = parseFloat(precioVenta.value) || 0;
        
        if (compra > 0 && venta > 0) {
            const margen = ((venta - compra) / compra) * 100;
            margenGanancia.textContent = margen.toFixed(2) + '%';
            
            if (margen < 0) {
                margenGanancia.className = 'form-control bg-danger text-white';
            } else if (margen < 20) {
                margenGanancia.className = 'form-control bg-warning text-dark';
            } else {
                margenGanancia.className = 'form-control bg-success text-white';
            }
        } else {
            margenGanancia.textContent = '0%';
            margenGanancia.className = 'form-control bg-light';
        }
    }
    
    btnSiguiente.addEventListener('click', function() {
        if (currentTab < tabs.length - 1) {
            currentTab++;
            const nextTab = new bootstrap.Tab(document.querySelector(`#${tabs[currentTab]}-tab`));
            nextTab.show();
            updateButtons();
        }
    });
    
    btnAnterior.addEventListener('click', function() {
        if (currentTab > 0) {
            currentTab--;
            const prevTab = new bootstrap.Tab(document.querySelector(`#${tabs[currentTab]}-tab`));
            prevTab.show();
            updateButtons();
        }
    });
    
    // Escuchar cambios de tab manuales
    document.querySelectorAll('[data-bs-toggle="tab"]').forEach(function(tab) {
        tab.addEventListener('shown.bs.tab', function(e) {
            const targetId = e.target.getAttribute('data-bs-target').replace('#', '');
            currentTab = tabs.indexOf(targetId);
            updateButtons();
        });
    });
    
    // Calcular margen cuando cambien los precios
    precioCompra.addEventListener('input', calcularMargen);
    precioVenta.addEventListener('input', calcularMargen);
    
    updateButtons();
    calcularMargen();
});
</script>
@endsection