<!-- create_invoice.php -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Crear Factura</title>
    <style>
        .input-container {
            margin: 20px 0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>Crear factura</h2>
    <div class="input-container">
        <label for="currency-rate">Copper (HG):</label>
        <input type="number" id="currency-rate" value="8050" onchange="updateTotalSum()"> <!-- Добавили событие onchange -->
        <span id="total-sum" style="margin-left: 20px;">Total Sum: $0.00</span> <!-- Место для отображения итоговой суммы -->
    </div>
    
    <form id="productForm">
        <?php include 'fetch_products.php'; // Подключаем PHP скрипт для получения списка товаров ?>
       
        <button type="button" onclick="addProduct()">Añadir producto</button>
    </form>

    <table id="invoiceTable">
        <thead>
            <tr>
                <th>Producto</th>
                <th>Cantidad</th>
                <th>Precio unitario</th>
                <th>Precio total</th>
            </tr>
        </thead>
        <tbody>
            <!-- Динамически добавляемые строки продуктов будут здесь -->
        </tbody>
    </table>

    <script>
        let invoiceTotal = 0;

        function addProduct() {
            // Функция для добавления выбранного продукта в таблицу счета
            // Для простоты предполагаем, что информация о продукте доступна непосредственно из формы
            const productSelect = document.getElementById('product');
            const selectedOption = productSelect.options[productSelect.selectedIndex];
            const productName = selectedOption.text;
            const productPrice = parseFloat(selectedOption.getAttribute('data-price'));
            const quantity = parseInt(document.getElementById('quantity').value);
            const totalPrice = productPrice * quantity;

            const tableBody = document.getElementById('invoiceTable').querySelector('tbody');
            const row = tableBody.insertRow();
            row.insertCell(0).textContent = productName;
            row.insertCell(1).textContent = quantity;
            row.insertCell(2).textContent = `$${productPrice.toFixed(2)}`;
            row.insertCell(3).textContent = `$${totalPrice.toFixed(2)}`;

            invoiceTotal += totalPrice;
            updateTotalSum(); // Обновляем итоговую сумму после каждого добавления товара
        }

        function updateTotalSum() {
            // Функция для обновления итоговой суммы
            document.getElementById('total-sum').textContent = `Total Sum: $${invoiceTotal.toFixed(2)}`;
        }
    </script>
</body>
</html>
