@extends('layouts.app')

@section('title', 'Nueva Compra')

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

@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">Nueva Compra</h2>
            <a href="{{ route('compras.index') }}" class="btn btn-secondary">
                <i class="fa-solid fa-arrow-left"></i>
                Volver
            </a>
        </div>

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

            <!-- Información de la Compra -->
            <div class="card">
                <div class="card-header">
                    <h3><i class="fa-solid fa-file-invoice"></i> Información de la Compra</h3>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="proveedor_id" class="form-label required">Proveedor</label>
                            <select id="proveedor_id" name="proveedor_id"
                                class="form-control @error('proveedor_id') is-invalid @enderror" required>
                                <option value="">Seleccione un proveedor</option>
                                @foreach ($proveedores as $proveedor)
                                    <option value="{{ $proveedor->id }}"
                                        {{ old('proveedor_id') == $proveedor->id ? 'selected' : '' }}>
                                        {{ $proveedor->nombre }}
                                    </option>
                                @endforeach
                            </select>
                            @error('proveedor_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="fecha_compra" class="form-label required">Fecha de Compra</label>
                            <input type="date" id="fecha_compra" name="fecha_compra"
                                class="form-control @error('fecha_compra') is-invalid @enderror"
                                value="{{ old('fecha_compra', date('Y-m-d')) }}" required>
                            @error('fecha_compra')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="observaciones" class="form-label">Observaciones</label>
                        <textarea id="observaciones" name="observaciones" class="form-control @error('observaciones') is-invalid @enderror"
                            rows="2" placeholder="Observaciones adicionales (opcional)">{{ old('observaciones') }}</textarea>
                        @error('observaciones')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group" style="display: none">
                        <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>Compra completada</strong>
                                <small class="d-block text-muted">Si está marcada, el stock de los productos se actualizará
                                    automáticamente</small>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Productos de la Compra -->
            <div class="card mt-4">
                <div class="card-header">
                    <h3><i class="fa-solid fa-box"></i> Productos de la Compra</h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table" id="productosTable">
                            <thead>
                                <tr>
                                    <th style="width: 35%;">Producto</th>
                                    <th style="width: 15%;">Cantidad</th>
                                    <th style="width: 20%;">Precio Unitario</th>
                                    <th style="width: 20%;">Subtotal</th>
                                    <th style="width: 10%;" class="text-center">Acción</th>
                                </tr>
                            </thead>
                            <tbody id="productosBody">
                                <!-- Las filas se agregan dinámicamente con JavaScript -->
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="5">
                                        <button type="button" class="btn btn-secondary" id="agregarProducto">
                                            <i class="fa-solid fa-plus"></i>
                                            Agregar Producto
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="text-end"><strong>TOTAL:</strong></td>
                                    <td colspan="2"><strong id="totalCompra">$0</strong></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div id="error-productos" class="invalid-feedback" style="display: none;">
                        Debe agregar al menos un producto a la compra
                    </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>
                    Registrar Compra
                </button>
                <a href="{{ route('compras.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 proveedor
            $('#proveedor_id').select2({
                placeholder: 'Seleccione un proveedor',
                allowClear: true,
                width: '100%'
            });
            let filaIndex = 0;
            const productos = @json($productos);
            const productosBody = document.getElementById('productosBody');
            const totalCompra = document.getElementById('totalCompra');
            const agregarProductoBtn = document.getElementById('agregarProducto');
            const form = document.getElementById('compraForm');

            // Formatear número con separadores de miles
            function formatNumber(value) {
                let number = value.replace(/[^\d,]/g, '');
                const parts = number.split(',');
                if (parts.length > 2) {
                    number = parts[0] + ',' + parts.slice(1).join('');
                }
                if (parts[0]) {
                    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                }
                return parts.join(',');
            }

            // Limpiar formato para enviar al servidor
            function unformatNumber(value) {
                return value.replace(/\./g, '').replace(',', '.');
            }

            // Formatear número sin decimales (Formato Colombia: punto como separador de miles)
            function formatearPrecio(valor) {
                const valorEntero = Math.round(valor);
                return '$' + valorEntero.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            }

            // Calcular total de la compra
            function calcularTotal() {
                let total = 0;
                document.querySelectorAll('.subtotal-value').forEach(input => {
                    const valor = parseFloat(input.value) || 0;
                    total += valor;
                });
                totalCompra.textContent = formatearPrecio(total);
            }

            // Calcular subtotal de una fila
            function calcularSubtotal(index) {
                const cantidad = parseInt(document.getElementById(`cantidad_${index}`).value) || 0;
                const precioInput = document.getElementById(`precio_${index}`);
                const precio = parseFloat(unformatNumber(precioInput.value)) || 0;
                const subtotal = cantidad * precio;

                document.getElementById(`subtotal_${index}`).textContent = formatearPrecio(subtotal);
                document.getElementById(`subtotal_value_${index}`).value = subtotal;

                calcularTotal();
            }

            // Agregar nueva fila de producto
            function agregarFila() {
                const index = filaIndex++;
                const fila = document.createElement('tr');
                fila.id = `fila_${index}`;
                fila.innerHTML = `
            <td>
                <select name="productos[${index}][producto_id]" id="producto_${index}" class="form-control" required>
                    <option value="">Seleccione un producto</option>
                    ${productos.map(p => `<option value="${p.id}">${p.nombre} - ${p.codigo}</option>`).join('')}
                </select>
            </td>
            <td>
                <input type="number"
                       name="productos[${index}][cantidad]"
                       id="cantidad_${index}"
                       class="form-control"
                       min="1"
                       value="1"
                       required>
            </td>
            <td>
                <div class="input-group">
                    <span class="input-group-text">$</span>
                    <input type="text"
                           id="precio_${index}"
                           class="form-control number-format"
                           required>
                    <input type="hidden" name="productos[${index}][precio_unitario]" id="precio_value_${index}">
                </div>
            </td>
            <td>
                <strong id="subtotal_${index}">$0</strong>
                <input type="hidden" class="subtotal-value" id="subtotal_value_${index}" value="0">
            </td>
            <td class="text-center">
                <button type="button" class="btn-action btn-delete" onclick="eliminarFila(${index})">
                    <i class="fa-solid fa-trash-can"></i>
                </button>
            </td>
        `;
                productosBody.appendChild(fila);

                // Inicializar Select2 en el select de producto
                $(`#producto_${index}`).select2({
                    placeholder: 'Seleccione un producto',
                    allowClear: true,
                    width: '100%'
                });

                // Evento cuando se selecciona un producto - Autocompletar precio de compra
                $(`#producto_${index}`).on('change', function() {
                    const productoId = $(this).val();
                    if (productoId) {
                        const producto = productos.find(p => p.id == productoId);
                        if (producto && producto.precio_compra) {
                            const precioInput = document.getElementById(`precio_${index}`);
                            // Convertir a entero (sin decimales) y formatear
                            const precioEntero = Math.round(parseFloat(producto.precio_compra));
                            const precioFormateado = precioEntero.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                            precioInput.value = precioFormateado;
                            calcularSubtotal(index);
                        }
                    }
                });

                // Agregar eventos
                document.getElementById(`cantidad_${index}`).addEventListener('input', () => calcularSubtotal(
                    index));

                const precioInput = document.getElementById(`precio_${index}`);
                precioInput.addEventListener('input', function(e) {
                    const cursorPosition = this.selectionStart;
                    const oldLength = this.value.length;
                    this.value = formatNumber(this.value);
                    const newLength = this.value.length;
                    const lengthDiff = newLength - oldLength;
                    this.setSelectionRange(cursorPosition + lengthDiff, cursorPosition + lengthDiff);
                    calcularSubtotal(index);
                });
            }

            // Eliminar fila
            window.eliminarFila = function(index) {
                // Destruir Select2 antes de eliminar
                $(`#producto_${index}`).select2('destroy');
                document.getElementById(`fila_${index}`).remove();
                calcularTotal();
            };

            // Evento agregar producto
            agregarProductoBtn.addEventListener('click', agregarFila);

            // Validar y preparar formulario antes de enviar
            form.addEventListener('submit', function(e) {
                const filas = productosBody.querySelectorAll('tr').length;
                if (filas === 0) {
                    e.preventDefault();
                    document.getElementById('error-productos').style.display = 'block';
                    return false;
                }

                // Copiar valores limpios a campos hidden
                document.querySelectorAll('.number-format').forEach(input => {
                    const index = input.id.split('_')[1];
                    const hiddenInput = document.getElementById(`precio_value_${index}`);
                    if (hiddenInput) {
                        hiddenInput.value = unformatNumber(input.value);
                    }
                });
            });

            // Agregar primera fila automáticamente
            agregarFila();
        });
    </script>
@endsection