<!-- copying over from repo to test -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>101 Distributors</title>
    <link rel="stylesheet" href="/css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    
</head>

<body>
    
    <header>
        <nav class="container d-flex justify-content-between">
            <div class="logo">
                <img src="https://www.101distributorsga.com/images/header/logo.png" alt="101 Distributors Logo">
            </div>
            <ul class="d-flex align-items-center">
                <li><a href="/home">Home</a></li>
                <li><a href="/gallery">Gallery</a></li>
                <li><a href="/about">About us</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div class="main-content">
        <main>
            <h1>Welcome, <%= username %> to 101 Distributors</h1>
            <a href="/contact"><button type="button">Contact Us</button></a>
            <div class="container mt-5">

                <div class="my-5">
                    <h3>Add a New Order</h3>
                    <form id="addOrderForm" action="/orders/add" method="post">
                        
                        <div class="mb-3">
                            <label for="storeName" class="form-label">Store Name:</label>
                            <input type="text" class="form-control" id="storeName" name="storeName" required>
                        </div>
                        
                        <table class="table" id="items-table">
                            <thead>
                                <tr>
                                    <th>Item-Name</th>
                                    <th>Quantity</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="items-container">
                                <!-- This will hold individual item rows -->
                            </tbody>
                        </table>
                        <button type="button" onclick="addItem()" class="btn btn-primary mb-3" id="addNewBtn">Add New Item</button>
                        
                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary" id="sendOrderBtn">Send Order</button>
                        </div>
                    </form>
                </div>
                
                    </form>
                </div>
            </div>
        </main>
    </div>
    <footer>
        <img src="https://github.com/VikAsNeHrA1/Order-Management-app/blob/main/views/footer.png?raw=true" alt="Footer Image" class="footer-image" id="footer-image">
    </footer>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- JavaScript to handle form submission and modal -->
    <script>

function addItem() {
        // Create new item row
        const itemDiv = document.createElement('div');
        itemDiv.classList.add('item-row', 'mb-3');

        // Create input for item name
        const itemNameInput = document.createElement('input');
        itemNameInput.type = "text";
        itemNameInput.name = "itemName[]";
        itemNameInput.placeholder = "Item Name";
        itemNameInput.classList.add('form-control', 'mr-2');

        // Create input for item quantity
        const itemQuantityInput = document.createElement('input');
        itemQuantityInput.type = "number";
        itemQuantityInput.name = "itemQuantity[]";
        itemQuantityInput.placeholder = "Quantity";
        itemQuantityInput.classList.add('form-control', 'mr-2');

        // Create remove button
        const removeButton = document.createElement('button');
        removeButton.type = "button";
        removeButton.innerHTML = "Remove";
        removeButton.onclick = function() { 
            this.parentElement.remove();
        }
        removeButton.classList.add('btn', 'btn-danger');

        // Append inputs and button to itemDiv
        itemDiv.appendChild(itemNameInput);
        itemDiv.appendChild(itemQuantityInput);
        itemDiv.appendChild(removeButton);

        // Append itemDiv to items-container
        document.getElementById('items-container').appendChild(itemDiv);
    }

    // Add the first item row by default
    function addItem() {
    // Create a new table row
    const itemRow = document.createElement('tr');

    // Create input for item name
    const itemNameTd = document.createElement('td');
    const itemNameInput = document.createElement('input');
    itemNameInput.type = "text";
    itemNameInput.name = "itemName[]";
    itemNameInput.placeholder = "Item Name";
    itemNameInput.classList.add('form-control');
    itemNameTd.appendChild(itemNameInput);

    // Create input for item quantity
    const itemQuantityTd = document.createElement('td');
    const itemQuantityInput = document.createElement('input');
    itemQuantityInput.type = "number";
    itemQuantityInput.name = "itemQuantity[]";
    itemQuantityInput.placeholder = "Quantity";
    itemQuantityInput.classList.add('form-control');
    itemQuantityTd.appendChild(itemQuantityInput);

    // Create remove button
    const actionsTd = document.createElement('td');
    const removeButton = document.createElement('button');
    removeButton.type = "button";
    removeButton.innerHTML = "Remove";
    removeButton.onclick = function() { 
        this.parentElement.parentElement.remove();
    }
    removeButton.classList.add('btn', 'btn-danger');
    actionsTd.appendChild(removeButton);

    // Append inputs and button to itemRow
    itemRow.appendChild(itemNameTd);
    itemRow.appendChild(itemQuantityTd);
    itemRow.appendChild(actionsTd);

    // Append itemRow to items-container
    document.getElementById('items-container').appendChild(itemRow);
}

// Add the first item row by default
addItem();



document.getElementById('addOrderForm').addEventListener('submit', function(event) {
    event.preventDefault();

    // Get store name value
    const storeName = document.getElementById('storeName').value;

    // Get dynamic item names and quantities
    const itemNames = Array.from(document.querySelectorAll('input[name="itemName[]"]')).map(input => input.value);
    const itemQuantities = Array.from(document.querySelectorAll('input[name="itemQuantity[]"]')).map(input => input.value);

    // Build orderList array
    const orderList = [];
    for (let i = 0; i < itemNames.length; i++) {
        const itemName = itemNames[i];
        const itemQuantity = itemQuantities[i];
        orderList.push({ itemName, itemQuantity });
    }

    // Create formData object
    const formData = {
        storeName: storeName,
        orderList: orderList, // Send orderList as an array of objects
    };

    fetch('/orders/add', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.href = '/order-success';
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
});

    </script>
    
</body>

</html>










