@extends('layouts.app')

@section('title', 'Nueva Ubicación')

@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>Nueva Ubicación
                    </h1>
                    <p class="text-muted mb-0">Crear una nueva ubicación dentro de un almacén</p>
                </div>
                <div>
                    <a href="{{ route('admin.inventory.locations.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-map-marker-alt me-2"></i>Información de la Ubicación
                    </h6>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.inventory.locations.store') }}">
                        @csrf

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

                        <!-- 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="code" class="form-label">Código de la Ubicación *</label>
                                    <input type="text" class="form-control @error('code') is-invalid @enderror" 
                                           id="code" name="code" value="{{ old('code') }}" required>
                                    @error('code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Código único dentro del almacén</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name" class="form-label">Nombre de la Ubicación *</label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                           id="name" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="description" class="form-label">Descripción</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror" 
                                              id="description" name="description" rows="3">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Ubicación Física -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-map-marker-alt me-2"></i>Ubicación Física
                                </h6>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="zone" class="form-label">Zona</label>
                                    <input type="text" class="form-control @error('zone') is-invalid @enderror" 
                                           id="zone" name="zone" value="{{ old('zone') }}" placeholder="A, B, C...">
                                    @error('zone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="aisle" class="form-label">Pasillo</label>
                                    <input type="text" class="form-control @error('aisle') is-invalid @enderror" 
                                           id="aisle" name="aisle" value="{{ old('aisle') }}" placeholder="01, 02...">
                                    @error('aisle')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="rack" class="form-label">Estante</label>
                                    <input type="text" class="form-control @error('rack') is-invalid @enderror" 
                                           id="rack" name="rack" value="{{ old('rack') }}" placeholder="01, 02...">
                                    @error('rack')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="shelf" class="form-label">Repisa</label>
                                    <input type="text" class="form-control @error('shelf') is-invalid @enderror" 
                                           id="shelf" name="shelf" value="{{ old('shelf') }}" placeholder="01, 02...">
                                    @error('shelf')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="position" class="form-label">Posición Específica</label>
                                    <input type="text" class="form-control @error('position') is-invalid @enderror" 
                                           id="position" name="position" value="{{ old('position') }}" placeholder="Izquierda, Derecha...">
                                    @error('position')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Configuración -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-cogs me-2"></i>Configuración
                                </h6>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="type" class="form-label">Tipo de Ubicación *</label>
                                    <select class="form-control @error('type') is-invalid @enderror" 
                                            id="type" name="type" required>
                                        <option value="">Seleccionar tipo...</option>
                                        <option value="storage" {{ old('type') === 'storage' ? 'selected' : '' }}>Almacenamiento</option>
                                        <option value="picking" {{ old('type') === 'picking' ? 'selected' : '' }}>Picking</option>
                                        <option value="receiving" {{ old('type') === 'receiving' ? 'selected' : '' }}>Recepción</option>
                                        <option value="shipping" {{ old('type') === 'shipping' ? 'selected' : '' }}>Envío</option>
                                        <option value="quarantine" {{ old('type') === 'quarantine' ? 'selected' : '' }}>Cuarentena</option>
                                        <option value="damaged" {{ old('type') === 'damaged' ? 'selected' : '' }}>Dañados</option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status" class="form-label">Estado *</label>
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" name="status" required>
                                        <option value="">Seleccionar estado...</option>
                                        <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Activa</option>
                                        <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactiva</option>
                                        <option value="maintenance" {{ old('status') === 'maintenance' ? 'selected' : '' }}>Mantenimiento</option>
                                        <option value="full" {{ old('status') === 'full' ? 'selected' : '' }}>Llena</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="capacity" class="form-label">Capacidad (m³)</label>
                                    <input type="number" step="0.01" class="form-control @error('capacity') is-invalid @enderror" 
                                           id="capacity" name="capacity" value="{{ old('capacity') }}">
                                    @error('capacity')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="max_products" class="form-label">Máximo de Productos</label>
                                    <input type="number" class="form-control @error('max_products') is-invalid @enderror" 
                                           id="max_products" name="max_products" value="{{ old('max_products') }}">
                                    @error('max_products')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Opciones -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-toggle-on me-2"></i>Opciones
                                </h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="allow_mixed_products" name="allow_mixed_products" 
                                           value="1" {{ old('allow_mixed_products', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="allow_mixed_products">
                                        <strong>Permitir Productos Mixtos</strong>
                                    </label>
                                    <small class="form-text text-muted d-block">Permitir diferentes tipos de productos en la misma ubicación</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <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="3">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <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.locations.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>Guardar Ubicación
                                    </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>Consejos:</h6>
                        <ul class="mb-0">
                            <li>El código debe ser único dentro del almacén</li>
                            <li>Usa coordenadas lógicas (A-01-01-01)</li>
                            <li>Las ubicaciones de picking son para productos de alta rotación</li>
                            <li>Las ubicaciones de cuarentena requieren acceso especial</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>Las ubicaciones inactivas no aparecerán en operaciones</li>
                            <li>El tipo de ubicación afecta las operaciones permitidas</li>
                            <li>La capacidad se mide en metros cúbicos</li>
                        </ul>
                    </div>

                    <div class="alert alert-success">
                        <h6><i class="fas fa-check-circle me-2"></i>Tipos de Ubicación:</h6>
                        <ul class="mb-0">
                            <li><strong>Almacenamiento:</strong> Para productos en stock</li>
                            <li><strong>Picking:</strong> Para productos de alta rotación</li>
                            <li><strong>Recepción:</strong> Para productos recién llegados</li>
                            <li><strong>Envío:</strong> Para productos listos para enviar</li>
                            <li><strong>Cuarentena:</strong> Para productos en inspección</li>
                            <li><strong>Dañados:</strong> Para productos defectuosos</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Generar código automáticamente basado en coordenadas
    function generateCode() {
        const zone = document.getElementById('zone').value;
        const aisle = document.getElementById('aisle').value;
        const rack = document.getElementById('rack').value;
        const shelf = document.getElementById('shelf').value;
        
        if (zone && aisle && rack && shelf) {
            const code = `${zone}-${aisle.padStart(2, '0')}-${rack.padStart(2, '0')}-${shelf.padStart(2, '0')}`;
            document.getElementById('code').value = code;
        }
    }

    // Generar nombre automáticamente
    function generateName() {
        const zone = document.getElementById('zone').value;
        const aisle = document.getElementById('aisle').value;
        const rack = document.getElementById('rack').value;
        const shelf = document.getElementById('shelf').value;
        
        if (zone && aisle && rack && shelf) {
            const name = `Zona ${zone} - Pasillo ${aisle} - Estante ${rack} - Repisa ${shelf}`;
            document.getElementById('name').value = name;
        }
    }

    // Event listeners
    document.getElementById('zone').addEventListener('input', generateCode);
    document.getElementById('aisle').addEventListener('input', generateCode);
    document.getElementById('rack').addEventListener('input', generateCode);
    document.getElementById('shelf').addEventListener('input', generateCode);

    document.getElementById('zone').addEventListener('input', generateName);
    document.getElementById('aisle').addEventListener('input', generateName);
    document.getElementById('rack').addEventListener('input', generateName);
    document.getElementById('shelf').addEventListener('input', generateName);
</script>
@endpush