@extends('layouts.app')

@section('content')
<section class="section">
    <div class="section-header">
        <h3 class="page__heading">🛒 Realizar Venta</h3>
    </div>

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="row">
        <!-- Formulario de Selección de Producto -->
        <div class="col-md-6">
            <div class="form-group">
                <label for="producto_id">📦 Producto:</label>
                <select name="producto_id" class="form-control select2" id="productoSelect" required>
                    <option value="" disabled selected>Selecciona un producto</option>
                    @foreach($productos as $producto)
                        <option 
                            value="{{ $producto->id }}" 
                            data-precio1="{{ $producto->precio2 }}" 
                            data-precio2="{{ $producto->precio3 }}" 
                            data-cantidad="{{ $producto->cantidad }}" 
                            data-ubicacion-id="{{ $producto->ubicacion_id }}">
                            {{ $producto->nombre }} - Código 1: {{ $producto->codigo1 }} 
                            - Código 2: {{ $producto->codigo2 }} - Cantidad: {{ $producto->cantidad }} 
                            - Ubicación: {{ $producto->ubicacion->nombre ?? 'Sin ubicación' }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label for="precio">💰 Precio:</label>
                <select name="precio" class="form-control" id="precioSelect" required>
                    <option value="" disabled selected>Selecciona un tipo de precio</option>
                    <option value="precio1">Precio Regular</option>
                    <option value="precio2">Precio Oferta</option>
                </select>
            </div>

            <div class="form-group">
                <label for="cantidad">📊 Cantidad:</label>
                <input type="number" name="cantidad" class="form-control" id="cantidadInput" min="1" required>
            </div>
            <button type="button" class="btn btn-primary" id="agregarProducto">➕ Agregar Producto</button>
        </div>

        <!-- Resumen de Productos -->
        <div class="col-md-6">
            <form action="{{ route('ventas.store') }}" method="POST" id="ventaForm">
                @csrf
                <input type="hidden" name="ubicacion_id" id="ubicacionIdInput" value="">
                <input type="hidden" name="precio_total" id="precioTotalInput" value="0">
                <input type="hidden" name="cantidad_total" id="cantidadTotalInput" value="0">

                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th>Precio</th>
                            <th>Cantidad</th>
                            <th>Total</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="productosList"></tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3" class="text-right"><strong>Total:</strong></td>
                            <td colspan="2"><span id="precioTotal">0.00</span> Bs.</td>
                        </tr>
                    </tfoot>
                </table>

                <button type="submit" class="btn btn-success" id="realizarVenta" style="display: none;">✅ Realizar Venta</button>
            </form>
        </div>
    </div>
</section>
<script>
 
    var productoSelect = document.getElementById('productoSelect');
    var cantidadInput = document.getElementById('cantidadInput');
    var productosListBody = document.getElementById('productosList');
    var precioTotalSpan = document.getElementById('precioTotal');
    var realizarVentaBtn = document.getElementById('realizarVenta');
    var productosAgregados = [];
    var precioTotalInput = document.getElementById('precioTotalInput');
    var cantidadTotalInput = document.getElementById('cantidadTotalInput');

    productoSelect.addEventListener('change', function () {
        var selectedProduct = this.options[this.selectedIndex];
        var cantidad = selectedProduct.getAttribute('data-cantidad');

        // Actualizar cantidad máxima disponible
        cantidadInput.max = cantidad;
    });

    // Agregar productos a la lista
    document.getElementById('agregarProducto').addEventListener('click', function () {
        var selectedProduct = productoSelect.options[productoSelect.selectedIndex];
        if (!selectedProduct || cantidadInput.value <= 0) {
            alert('Completa todos los campos antes de agregar un producto.');
            return;
        }

        var productoNombre = selectedProduct.text;
        var precioSeleccionado = document.getElementById('precioSelect').value;
        var precio;
        if (precioSeleccionado === 'precio1') {
            precio = parseFloat(selectedProduct.getAttribute('data-precio1'));
        } else if (precioSeleccionado === 'precio2') {
            precio = parseFloat(selectedProduct.getAttribute('data-precio2'));
        }

        var cantidad = parseInt(cantidadInput.value);
        var ubicacionId = selectedProduct.getAttribute('data-ubicacion-id');
        var total = precio * cantidad;

        // Validación adicional para ubicacion_id
        if (!ubicacionId) {
            alert('La ubicación del producto seleccionado no está disponible.');
            return;
        }

        // Verificar si el producto ya está en la lista
        var productoExistente = productosAgregados.find(function (producto) {
            return producto.id === selectedProduct.value && producto.precio === precio;
        });

        if (productoExistente) {
            // Actualizar cantidad y total si ya existe
            productoExistente.cantidad += cantidad;
            productoExistente.total = productoExistente.precio * productoExistente.cantidad;
            actualizarFilaProducto(productoExistente);
        } else {
            // Agregar nuevo producto
            var nuevoProducto = {
                id: selectedProduct.value,
                nombre: productoNombre,
                precio: precio,
                cantidad: cantidad,
                total: total,
                ubicacion_id: ubicacionId
            };
            productosAgregados.push(nuevoProducto);
            agregarFilaProducto(nuevoProducto);
        }

        actualizarTotales();
    });

    function agregarFilaProducto(producto) {
        var fila = document.createElement('tr');
        fila.innerHTML = `
            <td>${producto.nombre}</td>
            <td>${producto.precio.toFixed(2)}</td>
            <td>${producto.cantidad}</td>
            <td>${producto.total.toFixed(2)}</td>
            <td>
                <input type="hidden" name="productos[${productosAgregados.length - 1}][id]" value="${producto.id}">
                <input type="hidden" name="productos[${productosAgregados.length - 1}][cantidad]" value="${producto.cantidad}">
                <input type="hidden" name="productos[${productosAgregados.length - 1}][precio]" value="${producto.precio}">
                <input type="hidden" name="productos[${productosAgregados.length - 1}][ubicacion_id]" value="${producto.ubicacion_id}">
                <button type="button" class="btn btn-danger btn-sm" onclick="eliminarProducto(this)">Eliminar</button>
            </td>
        `;
        productosListBody.appendChild(fila);
    }

    function actualizarFilaProducto(producto) {
        var filas = productosListBody.getElementsByTagName('tr');
        for (var i = 0; i < filas.length; i++) {
            var celdas = filas[i].getElementsByTagName('td');
            if (celdas[0].textContent === producto.nombre && parseFloat(celdas[1].textContent) === producto.precio) {
                celdas[2].textContent = producto.cantidad;
                celdas[3].textContent = producto.total.toFixed(2);

                // Actualizar inputs hidden
                var inputsHidden = celdas[4].getElementsByTagName('input');
                inputsHidden[1].value = producto.cantidad;
                inputsHidden[2].value = producto.precio;
                inputsHidden[3].value = producto.ubicacion_id;
                break;
            }
        }
    }

    function eliminarProducto(boton) {
        var fila = boton.parentNode.parentNode;
        var productoId = fila.querySelector('input[name*="[id]"]').value;

        // Eliminar del array
        productosAgregados = productosAgregados.filter(function (p) {
            return p.id !== productoId;
        });

        fila.remove();
        actualizarTotales();
    }

    function actualizarTotales() {
        var precioTotal = productosAgregados.reduce(function (total, producto) {
            return total + producto.total;
        }, 0);
        var cantidadTotal = productosAgregados.reduce(function (total, producto) {
            return total + producto.cantidad;
        }, 0);

        precioTotalSpan.textContent = precioTotal.toFixed(2);
        precioTotalInput.value = precioTotal.toFixed(2);
        cantidadTotalInput.value = cantidadTotal;

        // Mostrar/ocultar el botón "Realizar Venta"
        realizarVentaBtn.style.display = productosAgregados.length > 0 ? 'inline-block' : 'none';
    }
</script>



@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                theme: 'classic',
                placeholder: 'Selecciona una o varias opciones',
                allowClear: true,
            });
        });
    </script>
@endpush
@endsection