@extends('layouts.app')

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

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

    <div class="row">
        <div class="col-md-6">
            <form action="{{ route('preventas.store') }}" method="post" id="ventaForm">
                @csrf
                <!-- Agregar ubicacion_id como campo oculto -->
                <input type="hidden" name="ubicacion_id" value="{{ $ubicaciones->first()->id }}">
                <!-- Campos para nombre_cliente y tel_cliente -->
                <div class="form-group">
                    <label for="nombre_cliente">Nombre del cliente:</label>
                    <input type="text" name="nombre_cliente" class="form-control" id="nombreClienteInput" required>
                </div>
                <div class="form-group">
                    <label for="tel_cliente">Teléfono del cliente:</label>
                    <input type="tel" name="tel_cliente" class="form-control" id="telClienteInput" required>
                </div>
                <!-- Campos ocultos para precio_total y cantidad_total -->
                <input type="hidden" name="precio_total" id="precioTotalInput" value="0">
                <input type="hidden" name="cantidad_total" id="cantidadTotalInput" value="0">
                <!-- Cambios en la estructura de los datos enviados -->
                <div id="productosInput">
                    <!-- Aquí se agregarán dinámicamente los campos de productos -->
                </div>
                <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></td>
                        </tr>
                    </tfoot>
                </table>
                <!-- Botón Realizar Preventa -->
                <button type="submit" class="btn btn-success" id="realizarPreventaBtn" style="display: none;">Realizar Preventa</button>
            </form>
        </div>
        <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>
                    @foreach($productos as $producto)
                        <option value="{{ $producto->id }}" data-precio1="{{ $producto->precio1 }}" data-precio2="{{ $producto->precio2 }}" data-cantidad="{{ $producto->cantidad }}">
                            {{ $producto->nombre }} Código1: {{ $producto->codigo1 }} Código2: {{ $producto->codigo2 }} Cantidad en stock: {{ $producto->cantidad }}
                            Ubicacion: {{ $producto->ubicacion->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="precio">Precio:</label>
                <select name="precio" class="form-control" id="precioSelect" required>
                    <option value="">Selecciona una opción</option>
                    <option value="precio1">Precio regular</option>
                    <option value="precio2">Precio en 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>
            <!-- Botón Agregar Producto -->
            <button type="button" class="btn btn-primary" id="agregarProducto">Agregar Producto</button>
        </div>
    </div>
</section>

<script>
    // Script para actualizar la cantidad máxima al cambiar el producto seleccionado
    var productoSelect = document.getElementById('productoSelect');
    var cantidadInput = document.getElementById('cantidadInput');
    var productosListBody = document.getElementById('productosList');
    var precioTotalSpan = document.getElementById('precioTotal');
    var realizarPreventaBtn = document.getElementById('realizarPreventaBtn');

    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');

        // Habilitar el campo de cantidad
        cantidadInput.max = cantidad;
    });

    // Script para agregar productos a la lista
   // Script para agregar productos a la lista
   document.getElementById('agregarProducto').addEventListener('click', function () {
    // Obtener datos del producto seleccionado
    var productoId = productoSelect.value;
    var productoNombre = productoSelect.options[productoSelect.selectedIndex].text;
    var precioSeleccionado = document.getElementById('precioSelect').value;
    var precio;
    if (precioSeleccionado === 'precio1') {
        precio = parseFloat(productoSelect.options[productoSelect.selectedIndex].getAttribute('data-precio1'));
    } else if (precioSeleccionado === 'precio2') {
        precio = parseFloat(productoSelect.options[productoSelect.selectedIndex].getAttribute('data-precio2'));
    }
    var cantidad = parseInt(cantidadInput.value);
    var total = precio * cantidad;
    var precioTotalProducto = total; // El precio total del producto es el precio multiplicado por la cantidad

    // Agregar producto a la lista de productos agregados
    productosAgregados.push({
        id: productoId,
        nombre: productoNombre,
        cantidad: cantidad,
        precio: precio,
        total: total,
        precio_total: precioTotalProducto // Incluir el precio_total en los datos del producto
    });

    // Crear campos ocultos para los productos y agregarlos al formulario
    var productoCantidadInput = document.createElement('input');
    productoCantidadInput.type = 'hidden';
    productoCantidadInput.name = 'productos[' + productoId + '][cantidad]';
    productoCantidadInput.value = cantidad;
    document.getElementById('productosInput').appendChild(productoCantidadInput);

    var productoPrecioInput = document.createElement('input');
    productoPrecioInput.type = 'hidden';
    productoPrecioInput.name = 'productos[' + productoId + '][precio]';
    productoPrecioInput.value = precio;
    document.getElementById('productosInput').appendChild(productoPrecioInput);

    var productoPrecioTotalInput = document.createElement('input'); // Agregar campo para el precio_total
    productoPrecioTotalInput.type = 'hidden';
    productoPrecioTotalInput.name = 'productos[' + productoId + '][precio_total]';
    productoPrecioTotalInput.value = precioTotalProducto;
    document.getElementById('productosInput').appendChild(productoPrecioTotalInput);

    // Llamar a la función que actualiza la tabla de productos
    actualizarProductosList();

    // Calcular el precio total y la cantidad total
    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 el botón "Realizar Preventa" si hay productos en la lista
    if (productosAgregados.length > 0) {
        realizarPreventaBtn.style.display = 'inline-block';
    } else {
        realizarPreventaBtn.style.display = 'none';
    }
});



    function actualizarProductosList() {
        // Limpiar la lista de productos
        productosListBody.innerHTML = '';

        // Recorrer la lista de productos y agregar cada uno a la tabla
        productosAgregados.forEach(function (producto, index) {
            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>
                    <button type="button" class="btn btn-danger btn-sm" onclick="eliminarProducto(${index})">Eliminar</button>
                </td>
            `;
            productosListBody.appendChild(fila);
        });
    }

    function eliminarProducto(index) {
        // Eliminar el producto de la lista de productos agregados
        productosAgregados.splice(index, 1);

        // Eliminar el campo oculto correspondiente al producto eliminado
        var productoId = productoSelect.value;
        var productoInput = document.querySelector('input[name="productos[' + productoId + '][cantidad]"]');
        productoInput.parentNode.removeChild(productoInput);

        // Llamar a la función que actualiza la tabla de productos
        actualizarProductosList();

        // Calcular el precio total y la cantidad total
        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;

        // Ocultar el botón "Realizar Preventa" si no hay productos en la lista
        if (productosAgregados.length === 0) {
            realizarPreventaBtn.style.display = '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 opción',
                allowClear: true,
            });
        });
    </script>
@endpush
@endsection