@extends('layouts.app')

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

@section('header', 'Gestión de Productos')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-container--default .select2-selection--single {
        height: 42px;
        border: 2px solid var(--border-color);
        border-radius: 8px;
        padding: 6px 12px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 28px;
        color: var(--text-primary);
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px;
    }
    .select2-dropdown {
        border: 2px solid var(--border-color);
        border-radius: 8px;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: var(--primary-color);
    }
</style>
@endpush

@section('content')
<div class="page-container">
    <div class="page-header">
        <h2 class="page-title">Nuevo Producto</h2>
        <a href="{{ route('productos.index') }}" class="btn btn-secondary">
            <i class="fa-solid fa-arrow-left"></i>
            Volver
        </a>
    </div>

    <form action="{{ route('productos.store') }}" method="POST">
        @csrf

        <!-- Información Básica -->
        <div class="card">
            <div class="card-header">
                <h3><i class="fa-solid fa-info-circle"></i> Información Básica</h3>
            </div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label for="codigo" class="form-label required">Código</label>
                        <input type="text"
                               id="codigo"
                               name="codigo"
                               class="form-control @error('codigo') is-invalid @enderror"
                               value="{{ old('codigo') }}"
                               required
                               autofocus
                               maxlength="50">
                        @error('codigo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="nombre" class="form-label required">Nombre del Producto</label>
                        <input type="text"
                               id="nombre"
                               name="nombre"
                               class="form-control @error('nombre') is-invalid @enderror"
                               value="{{ old('nombre') }}"
                               required
                               maxlength="200">
                        @error('nombre')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="categoria_id" class="form-label required">Categoría</label>
                        <select id="categoria_id"
                                name="categoria_id"
                                class="form-control @error('categoria_id') is-invalid @enderror"
                                required>
                            <option value="">Seleccione una categoría</option>
                            @foreach($categorias as $categoria)
                                <option value="{{ $categoria->id }}"
                                        {{ old('categoria_id') == $categoria->id ? 'selected' : '' }}>
                                    {{ $categoria->nombre }}
                                </option>
                            @endforeach
                        </select>
                        @error('categoria_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group" style="display: none;">
                        <label for="marca" class="form-label">Marca</label>
                        <input type="text"
                               id="marca"
                               name="marca"
                               class="form-control @error('marca') is-invalid @enderror"
                               value="{{ old('marca') }}"
                               maxlength="100"
                               placeholder="Opcional">
                        @error('marca')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="presentacion" class="form-label">Presentación</label>
                        <input type="text"
                               id="presentacion"
                               name="presentacion"
                               class="form-control @error('presentacion') is-invalid @enderror"
                               value="{{ old('presentacion') }}"
                               placeholder="Ej: 100ml, 50ml, etc."
                               maxlength="100">
                        @error('presentacion')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="form-group" style="display: none;">
                    <label for="descripcion" class="form-label">Descripción</label>
                    <textarea id="descripcion"
                              name="descripcion"
                              class="form-control @error('descripcion') is-invalid @enderror"
                              rows="3"
                              placeholder="Descripción detallada del producto (opcional)">{{ old('descripcion') }}</textarea>
                    @error('descripcion')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Precios -->
        <div class="card mt-4">
            <div class="card-header">
                <h3><i class="fa-solid fa-dollar-sign"></i> Información de Precios</h3>
            </div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label for="precio_compra" class="form-label required">Precio de Compra</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="text"
                                   id="precio_compra"
                                   name="precio_compra_display"
                                   class="form-control number-format @error('precio_compra') is-invalid @enderror"
                                   value="{{ old('precio_compra', '0') }}"
                                   required>
                            <input type="hidden" name="precio_compra" id="precio_compra_hidden" value="{{ old('precio_compra', '0') }}">
                        </div>
                        @error('precio_compra')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="precio_venta" class="form-label required">Precio de Venta</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="text"
                                   id="precio_venta"
                                   name="precio_venta_display"
                                   class="form-control number-format @error('precio_venta') is-invalid @enderror"
                                   value="{{ old('precio_venta', '0') }}"
                                   required>
                            <input type="hidden" name="precio_venta" id="precio_venta_hidden" value="{{ old('precio_venta', '0') }}">
                        </div>
                        @error('precio_venta')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Inventario -->
        <div class="card mt-4">
            <div class="card-header">
                <h3><i class="fa-solid fa-boxes-stacked"></i> Control de Inventario</h3>
            </div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label for="stock_actual" class="form-label required">Stock Actual</label>
                        <input type="text"
                               id="stock_actual"
                               name="stock_actual_display"
                               class="form-control number-format @error('stock_actual') is-invalid @enderror"
                               value="{{ old('stock_actual', '0') }}"
                               required>
                        <input type="hidden" name="stock_actual" id="stock_actual_hidden" value="{{ old('stock_actual', '0') }}">
                        @error('stock_actual')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text">Cantidad disponible en inventario</small>
                    </div>

                    <div class="form-group">
                        <label for="stock_minimo" class="form-label required">Stock Mínimo</label>
                        <input type="text"
                               id="stock_minimo"
                               name="stock_minimo_display"
                               class="form-control number-format @error('stock_minimo') is-invalid @enderror"
                               value="{{ old('stock_minimo', '0') }}"
                               required>
                        <input type="hidden" name="stock_minimo" id="stock_minimo_hidden" value="{{ old('stock_minimo', '0') }}">
                        @error('stock_minimo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text">Alerta cuando el stock llegue a este nivel</small>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-check">
                        <input type="checkbox"
                               id="estado"
                               name="estado"
                               class="form-check-input"
                               value="1"
                               {{ old('estado', true) ? 'checked' : '' }}>
                        <label for="estado" class="form-check-label">
                            <strong>Producto activo</strong>
                            <small class="d-block text-muted">Los productos activos están disponibles para ventas</small>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botones de Acción -->
        <div class="form-actions-bottom">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fa-solid fa-save"></i>
                Guardar Producto
            </button>
            <a href="{{ route('productos.index') }}" class="btn btn-secondary btn-lg">
                <i class="fa-solid fa-xmark"></i>
                Cancelar
            </a>
        </div>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar Select2 en el select de categoría
    $('#categoria_id').select2({
        placeholder: 'Seleccione una categoría',
        allowClear: true,
        width: '100%'
    });


    // Función para formatear números con separadores de miles (Formato Colombia)
    // Separador de miles: PUNTO (.)
    // Separador decimal: COMA (,)
    function formatNumber(value) {
        // Remover todo excepto números y coma
        let number = value.replace(/[^\d,]/g, '');

        // Permitir solo una coma decimal
        const parts = number.split(',');
        if (parts.length > 2) {
            number = parts[0] + ',' + parts.slice(1).join('');
        }

        // Formatear la parte entera con separadores de miles (puntos)
        if (parts[0]) {
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        }

        return parts.join(',');
    }

    // Función para limpiar el formato y obtener el número puro para el servidor
    // Quita los puntos (separadores de miles) y reemplaza la coma por punto
    function unformatNumber(value) {
        return value.replace(/\./g, '').replace(',', '.');
    }

    // Aplicar formato a todos los inputs con la clase number-format
    const numberInputs = document.querySelectorAll('.number-format');

    numberInputs.forEach(input => {
        // Formatear el valor inicial si existe
        if (input.value && input.value !== '0') {
            const cleanValue = unformatNumber(input.value);
            input.value = formatNumber(cleanValue);
        }

        // Evento para formatear mientras se escribe
        input.addEventListener('input', function(e) {
            const cursorPosition = this.selectionStart;
            const oldLength = this.value.length;
            const oldValue = this.value;

            // Formatear el valor
            this.value = formatNumber(this.value);

            // Ajustar la posición del cursor
            const newLength = this.value.length;
            const lengthDiff = newLength - oldLength;
            this.setSelectionRange(cursorPosition + lengthDiff, cursorPosition + lengthDiff);
        });

        // Limpiar el valor al perder el foco para evitar ceros innecesarios
        input.addEventListener('blur', function() {
            if (this.value === '' || this.value === '0') {
                this.value = '0';
            }
        });
    });

    // Al enviar el formulario, copiar valores limpios a los campos hidden
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        // Precio de compra
        const precioCompraDisplay = document.getElementById('precio_compra');
        const precioCompraHidden = document.getElementById('precio_compra_hidden');
        if (precioCompraDisplay && precioCompraHidden) {
            precioCompraHidden.value = unformatNumber(precioCompraDisplay.value);
        }

        // Precio de venta
        const precioVentaDisplay = document.getElementById('precio_venta');
        const precioVentaHidden = document.getElementById('precio_venta_hidden');
        if (precioVentaDisplay && precioVentaHidden) {
            precioVentaHidden.value = unformatNumber(precioVentaDisplay.value);
        }

        // Stock actual
        const stockActualDisplay = document.getElementById('stock_actual');
        const stockActualHidden = document.getElementById('stock_actual_hidden');
        if (stockActualDisplay && stockActualHidden) {
            stockActualHidden.value = unformatNumber(stockActualDisplay.value).split('.')[0]; // Solo enteros
        }

        // Stock mínimo
        const stockMinimoDisplay = document.getElementById('stock_minimo');
        const stockMinimoHidden = document.getElementById('stock_minimo_hidden');
        if (stockMinimoDisplay && stockMinimoHidden) {
            stockMinimoHidden.value = unformatNumber(stockMinimoDisplay.value).split('.')[0]; // Solo enteros
        }
    });
});
</script>

@endsection