@extends('layouts.app')

@section('title', 'Nuevo Movimiento de Inventario')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-plus me-2"></i>Nuevo Movimiento de Inventario
                    </h1>
                    <p class="text-muted mb-0">Crear un movimiento de productos entre ubicaciones</p>
                </div>
                <div>
                    <a href="{{ route('admin.inventory.movements.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Formulario -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-exchange-alt me-2"></i>Información del Movimiento
                    </h6>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.inventory.movements.store') }}" id="movementForm">
                        @csrf

                        <!-- Información Básica -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-info-circle me-2"></i>Información Básica
                                </h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="movement_type" class="form-label">Tipo de Movimiento *</label>
                                    <select class="form-control @error('movement_type') is-invalid @enderror" 
                                            id="movement_type" name="movement_type" required>
                                        <option value="">Seleccionar tipo...</option>
                                        <option value="transfer" {{ old('movement_type') === 'transfer' ? 'selected' : '' }}>Transferencia</option>
                                        <option value="relocation" {{ old('movement_type') === 'relocation' ? 'selected' : '' }}>Reubicación</option>
                                        <option value="consolidation" {{ old('movement_type') === 'consolidation' ? 'selected' : '' }}>Consolidación</option>
                                        <option value="distribution" {{ old('movement_type') === 'distribution' ? 'selected' : '' }}>Distribución</option>
                                        <option value="return" {{ old('movement_type') === 'return' ? 'selected' : '' }}>Devolución</option>
                                        <option value="pickup" {{ old('movement_type') === 'pickup' ? 'selected' : '' }}>Recogida</option>
                                    </select>
                                    @error('movement_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="priority" class="form-label">Prioridad *</label>
                                    <select class="form-control @error('priority') is-invalid @enderror" 
                                            id="priority" name="priority" required>
                                        <option value="">Seleccionar prioridad...</option>
                                        <option value="low" {{ old('priority', 'normal') === 'low' ? 'selected' : '' }}>Baja</option>
                                        <option value="normal" {{ old('priority', 'normal') === 'normal' ? 'selected' : '' }}>Normal</option>
                                        <option value="high" {{ old('priority') === 'high' ? 'selected' : '' }}>Alta</option>
                                        <option value="urgent" {{ old('priority') === 'urgent' ? 'selected' : '' }}>Urgente</option>
                                    </select>
                                    @error('priority')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="reason" class="form-label">Motivo *</label>
                                    <textarea class="form-control @error('reason') is-invalid @enderror" 
                                              id="reason" name="reason" rows="3" required 
                                              placeholder="Describe el motivo del movimiento...">{{ old('reason') }}</textarea>
                                    @error('reason')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="notes" class="form-label">Notas Adicionales</label>
                                    <textarea class="form-control @error('notes') is-invalid @enderror" 
                                              id="notes" name="notes" rows="2" 
                                              placeholder="Notas adicionales...">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Ubicación Origen -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-arrow-up me-2"></i>Ubicación Origen
                                </h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="from_warehouse_id" class="form-label">Almacén Origen *</label>
                                    <select class="form-control @error('from_warehouse_id') is-invalid @enderror" 
                                            id="from_warehouse_id" name="from_warehouse_id" required>
                                        <option value="">Seleccionar almacén...</option>
                                        @foreach($warehouses as $warehouse)
                                            <option value="{{ $warehouse->id }}" 
                                                    {{ old('from_warehouse_id') == $warehouse->id ? 'selected' : '' }}>
                                                {{ $warehouse->name }} ({{ $warehouse->code }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('from_warehouse_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="from_location_id" class="form-label">Ubicación Origen</label>
                                    <select class="form-control @error('from_location_id') is-invalid @enderror" 
                                            id="from_location_id" name="from_location_id">
                                        <option value="">Seleccionar ubicación...</option>
                                    </select>
                                    @error('from_location_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Ubicación Destino -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-arrow-down me-2"></i>Ubicación Destino
                                </h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="to_warehouse_id" class="form-label">Almacén Destino *</label>
                                    <select class="form-control @error('to_warehouse_id') is-invalid @enderror" 
                                            id="to_warehouse_id" name="to_warehouse_id" required>
                                        <option value="">Seleccionar almacén...</option>
                                        @foreach($warehouses as $warehouse)
                                            <option value="{{ $warehouse->id }}" 
                                                    {{ old('to_warehouse_id') == $warehouse->id ? 'selected' : '' }}>
                                                {{ $warehouse->name }} ({{ $warehouse->code }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('to_warehouse_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="to_location_id" class="form-label">Ubicación Destino</label>
                                    <select class="form-control @error('to_location_id') is-invalid @enderror" 
                                            id="to_location_id" name="to_location_id">
                                        <option value="">Seleccionar ubicación...</option>
                                    </select>
                                    @error('to_location_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Producto y Cantidad -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-boxes me-2"></i>Producto y Cantidad
                                </h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="product_id" class="form-label">Producto *</label>
                                    <select class="form-control @error('product_id') is-invalid @enderror" 
                                            id="product_id" name="product_id" required>
                                        <option value="">Seleccionar producto...</option>
                                        @foreach($products as $product)
                                            <option value="{{ $product->id }}" 
                                                    {{ old('product_id', $selectedProduct?->id) == $product->id ? 'selected' : '' }}>
                                                {{ $product->name }} ({{ $product->code }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('product_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="quantity" class="form-label">Cantidad *</label>
                                    <input type="number" step="0.001" min="0.001" 
                                           class="form-control @error('quantity') is-invalid @enderror" 
                                           id="quantity" name="quantity" value="{{ old('quantity') }}" required>
                                    @error('quantity')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        Stock disponible: <span id="available-stock">--</span>
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="unit_cost" class="form-label">Costo Unitario</label>
                                    <input type="number" step="0.01" min="0" 
                                           class="form-control @error('unit_cost') is-invalid @enderror" 
                                           id="unit_cost" name="unit_cost" value="{{ old('unit_cost') }}">
                                    @error('unit_cost')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Información del Lote -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-barcode me-2"></i>Información del Lote
                                </h6>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="batch_number" class="form-label">Número de Lote</label>
                                    <input type="text" class="form-control @error('batch_number') is-invalid @enderror" 
                                           id="batch_number" name="batch_number" value="{{ old('batch_number') }}">
                                    @error('batch_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="serial_number" class="form-label">Número de Serie</label>
                                    <input type="text" class="form-control @error('serial_number') is-invalid @enderror" 
                                           id="serial_number" name="serial_number" value="{{ old('serial_number') }}">
                                    @error('serial_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="expiration_date" class="form-label">Fecha de Vencimiento</label>
                                    <input type="date" class="form-control @error('expiration_date') is-invalid @enderror" 
                                           id="expiration_date" name="expiration_date" value="{{ old('expiration_date') }}">
                                    @error('expiration_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

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

        <!-- Panel de Ayuda -->
        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">
                        <i class="fas fa-info-circle me-2"></i>Información Útil
                    </h6>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6><i class="fas fa-lightbulb me-2"></i>Tipos de Movimiento:</h6>
                        <ul class="mb-0">
                            <li><strong>Transferencia:</strong> Movimiento entre almacenes</li>
                            <li><strong>Reubicación:</strong> Cambio de ubicación dentro del mismo almacén</li>
                            <li><strong>Consolidación:</strong> Agrupar productos en una ubicación</li>
                            <li><strong>Distribución:</strong> Separar productos a múltiples ubicaciones</li>
                            <li><strong>Devolución:</strong> Retorno de productos</li>
                            <li><strong>Recogida:</strong> Recogida de productos específicos</li>
                        </ul>
                    </div>

                    <div class="alert alert-warning">
                        <h6><i class="fas fa-exclamation-triangle me-2"></i>Importante:</h6>
                        <ul class="mb-0">
                            <li>Verifica que haya stock suficiente en el origen</li>
                            <li>El destino debe ser diferente al origen</li>
                            <li>Los movimientos requieren aprobación antes de ejecutarse</li>
                            <li>Se registrará automáticamente el usuario y fecha</li>
                        </ul>
                    </div>

                    <div class="alert alert-success">
                        <h6><i class="fas fa-check-circle me-2"></i>Flujo del Movimiento:</h6>
                        <ol class="mb-0">
                            <li><strong>Crear:</strong> Se crea el movimiento pendiente</li>
                            <li><strong>Aprobar:</strong> Un supervisor aprueba el movimiento</li>
                            <li><strong>Ejecutar:</strong> Se ejecuta el movimiento físico</li>
                            <li><strong>Completar:</strong> Se marca como completado</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Cargar ubicaciones cuando cambie el almacén origen
    document.getElementById('from_warehouse_id').addEventListener('change', function() {
        loadLocations(this.value, 'from_location_id');
        updateAvailableStock();
    });

    // Cargar ubicaciones cuando cambie el almacén destino
    document.getElementById('to_warehouse_id').addEventListener('change', function() {
        loadLocations(this.value, 'to_location_id');
    });

    // Actualizar stock disponible cuando cambien producto, almacén o ubicación
    document.getElementById('product_id').addEventListener('change', updateAvailableStock);
    document.getElementById('from_location_id').addEventListener('change', updateAvailableStock);

    function loadLocations(warehouseId, selectId) {
        const select = document.getElementById(selectId);
        select.innerHTML = '<option value="">Seleccionar ubicación...</option>';
        
        if (!warehouseId) return;
        
        fetch(`/admin/inventory/movements/locations-by-warehouse?warehouse_id=${warehouseId}`)
            .then(response => response.json())
            .then(data => {
                data.forEach(location => {
                    const option = document.createElement('option');
                    option.value = location.id;
                    option.textContent = `${location.name} (${location.code})`;
                    select.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error al cargar ubicaciones:', error);
            });
    }

    function updateAvailableStock() {
        const productId = document.getElementById('product_id').value;
        const warehouseId = document.getElementById('from_warehouse_id').value;
        const locationId = document.getElementById('from_location_id').value;
        const stockElement = document.getElementById('available-stock');
        
        if (!productId || !warehouseId) {
            stockElement.textContent = '--';
            return;
        }
        
        let url = `/admin/inventory/movements/available-stock?product_id=${productId}&warehouse_id=${warehouseId}`;
        if (locationId) {
            url += `&location_id=${locationId}`;
        }
        
        fetch(url)
            .then(response => response.json())
            .then(data => {
                stockElement.textContent = parseFloat(data.available_stock || 0).toFixed(3);
            })
            .catch(error => {
                console.error('Error al obtener stock:', error);
                stockElement.textContent = 'Error';
            });
    }

    // Validación del formulario
    document.getElementById('movementForm').addEventListener('submit', function(e) {
        const fromWarehouse = document.getElementById('from_warehouse_id').value;
        const toWarehouse = document.getElementById('to_warehouse_id').value;
        const fromLocation = document.getElementById('from_location_id').value;
        const toLocation = document.getElementById('to_location_id').value;
        
        if (fromWarehouse === toWarehouse && fromLocation === toLocation) {
            e.preventDefault();
            alert('El destino debe ser diferente al origen.');
            return false;
        }
        
        const quantity = parseFloat(document.getElementById('quantity').value);
        const availableStock = parseFloat(document.getElementById('available-stock').textContent);
        
        if (quantity > availableStock) {
            e.preventDefault();
            alert(`La cantidad solicitada (${quantity}) excede el stock disponible (${availableStock}).`);
            return false;
        }
    });
</script>
@endpush