@extends('layouts.app')

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

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

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

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

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

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

                        <div class="form-group">
                            <label for="tipo_pago" class="form-label required">Tipo de Pago</label>
                            <select id="tipo_pago" name="tipo_pago"
                                class="form-control @error('tipo_pago') is-invalid @enderror" required>
                                <option value="">Seleccione tipo de pago</option>
                                <option value="efectivo" {{ old('tipo_pago') == 'efectivo' ? 'selected' : '' }}>Efectivo</option>
                                <option value="tarjeta" {{ old('tipo_pago') == 'tarjeta' ? 'selected' : '' }}>Tarjeta</option>
                                <option value="transferencia" {{ old('tipo_pago') == 'transferencia' ? 'selected' : '' }}>Transferencia</option>
                            </select>
                            @error('tipo_pago')
                                <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>
            </div>

            <!-- Productos de la Venta -->
            <div class="card mt-4">
                <div class="card-header">
                    <h3><i class="fa-solid fa-box"></i> Productos de la Venta</h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table" id="productosTable">
                            <thead>
                                <tr>
                                    <th style="width: 30%;">Producto</th>
                                    <th style="width: 12%;">Stock Disp.</th>
                                    <th style="width: 13%;">Cantidad</th>
                                    <th style="width: 18%;">Precio Unitario</th>
                                    <th style="width: 18%;">Subtotal</th>
                                    <th style="width: 9%;" class="text-center">Acción</th>
                                </tr>
                            </thead>
                            <tbody id="productosBody">
                                <!-- Las filas se agregan dinámicamente con JavaScript -->
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="6">
                                        <button type="button" class="btn btn-secondary" id="agregarProducto">
                                            <i class="fa-solid fa-plus"></i>
                                            Agregar Producto
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4" class="text-end"><strong>TOTAL:</strong></td>
                                    <td colspan="2"><strong id="totalVenta">$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 venta
                    </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 Venta
                </button>
                <a href="{{ route('ventas.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 los selects
            $('#cliente_id').select2({
                placeholder: 'Seleccione un cliente',
                allowClear: true,
                width: '100%'
            });

            $('#tipo_pago').select2({
                placeholder: 'Seleccione tipo de pago',
                width: '100%'
            });

            let filaIndex = 0;
            const productos = @json($productos);
            const productosBody = document.getElementById('productosBody');
            const totalVenta = document.getElementById('totalVenta');
            const agregarProductoBtn = document.getElementById('agregarProducto');
            const form = document.getElementById('ventaForm');

            // 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
            function formatearPrecio(valor) {
                const valorEntero = Math.round(valor);
                return '$' + valorEntero.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            }

            // Calcular total de la venta
            function calcularTotal() {
                let total = 0;
                document.querySelectorAll('.subtotal-value').forEach(input => {
                    const valor = parseFloat(input.value) || 0;
                    total += valor;
                });
                totalVenta.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();
            }

            // Validar stock disponible
            function validarStock(index) {
                const productoId = document.getElementById(`producto_${index}`).value;
                const cantidad = parseInt(document.getElementById(`cantidad_${index}`).value) || 0;

                if (productoId) {
                    const producto = productos.find(p => p.id == productoId);
                    if (producto && cantidad > producto.stock_actual) {
                        alert(`Stock insuficiente. Disponible: ${producto.stock_actual} unidades`);
                        document.getElementById(`cantidad_${index}`).value = producto.stock_actual;
                        calcularSubtotal(index);
                        return false;
                    }
                }
                return true;
            }

            // 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}" data-stock="${p.stock_actual}">${p.nombre} - ${p.codigo}</option>`).join('')}
                </select>
            </td>
            <td>
                <span id="stock_${index}" class="badge badge-info">-</span>
            </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
                $(`#producto_${index}`).on('change', function() {
                    const productoId = $(this).val();
                    if (productoId) {
                        const producto = productos.find(p => p.id == productoId);
                        if (producto) {
                            // Mostrar stock disponible
                            document.getElementById(`stock_${index}`).textContent = producto.stock_actual;

                            // Autocompletar precio de venta
                            if (producto.precio_venta) {
                                const precioInput = document.getElementById(`precio_${index}`);
                                const precioEntero = Math.round(parseFloat(producto.precio_venta));
                                const precioFormateado = precioEntero.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                                precioInput.value = precioFormateado;
                            }

                            // Ajustar cantidad máxima
                            const cantidadInput = document.getElementById(`cantidad_${index}`);
                            cantidadInput.max = producto.stock_actual;
                            if (parseInt(cantidadInput.value) > producto.stock_actual) {
                                cantidadInput.value = Math.max(1, producto.stock_actual);
                            }

                            calcularSubtotal(index);
                        }
                    } else {
                        document.getElementById(`stock_${index}`).textContent = '-';
                    }
                });

                // Agregar eventos
                document.getElementById(`cantidad_${index}`).addEventListener('input', function() {
                    validarStock(index);
                    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) {
                $(`#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;
                }

                // Validar stock de todos los productos
                let stockValido = true;
                document.querySelectorAll('[id^="producto_"]').forEach(select => {
                    const index = select.id.split('_')[1];
                    if (!validarStock(index)) {
                        stockValido = false;
                    }
                });

                if (!stockValido) {
                    e.preventDefault();
                    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