add orderstuff

templates/order/_form.html.twig

@@ -1,4 +1,114 @@
 {{ form_start(form) }}
-    {{ form_widget(form) }}
-    <button class="btn">{{ button_label|default('Save') }}</button>
+    {{ form_row(form.status) }}
+
+    <h3>Order Items</h3> <div class="order-items-wrapper"
+         data-prototype="{{ form_widget(form.orderItems.vars.prototype)|e('html_attr') }}"
+         data-index="{{ form.orderItems|length }}">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Drink Type</th>
+                    <th>Quantity</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody class="order-items-list">
+                {% for orderItemForm in form.orderItems %}
+                    <tr class="order-item-row">
+                        <td>{{ form_widget(orderItemForm.drinkType) }}</td>
+                        <td>{{ form_widget(orderItemForm.quantity) }}</td>
+                        <td>
+                            <button type="button" class="btn btn-danger remove-order-item">Remove</button>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        <button type="button" class="btn btn-success add-order-item">Add Item</button>
+    </div>
+
+    <button class="btn btn-primary mt-3">{{ button_label|default('Save') }}</button>
 {{ form_end(form) }}
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Add new item
+    document.querySelector('.add-order-item').addEventListener('click', function() {
+        const wrapper = document.querySelector('.order-items-wrapper');
+        const index = parseInt(wrapper.dataset.index);
+
+        // Get the prototype HTML
+        const prototype = wrapper.dataset.prototype;
+
+        // Create a new row
+        const row = document.createElement('tr');
+        row.className = 'order-item-row';
+
+        // Create cells for drink type, quantity, and actions
+        const drinkTypeCell = document.createElement('td');
+        const quantityCell = document.createElement('td');
+        const actionsCell = document.createElement('td');
+
+        // Extract the form elements from the prototype
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = prototype.replace(/__name__/g, index);
+
+        // Find the drink type and quantity inputs
+        const drinkTypeInput = tempDiv.querySelector('[name$="[drinkType]"]');
+        const quantityInput = tempDiv.querySelector('[name$="[quantity]"]');
+
+        // Move the inputs to their respective cells
+        if (drinkTypeInput) {
+            drinkTypeCell.appendChild(drinkTypeInput.parentNode);
+        }
+
+        if (quantityInput) {
+            quantityCell.appendChild(quantityInput.parentNode);
+        }
+
+        // Create remove button
+        const removeButton = document.createElement('button');
+        removeButton.type = 'button';
+        removeButton.className = 'btn btn-danger remove-order-item';
+        removeButton.textContent = 'Remove';
+        actionsCell.appendChild(removeButton);
+
+        // Add cells to the row
+        row.appendChild(drinkTypeCell);
+        row.appendChild(quantityCell);
+        row.appendChild(actionsCell);
+
+        // Add the row to the table
+        document.querySelector('.order-items-list').appendChild(row);
+
+        // Update the index
+        wrapper.dataset.index = index + 1;
+
+        // Add event listener to the new remove button
+        removeButton.addEventListener('click', function() {
+            row.remove();
+        });
+    });
+
+    // Remove existing items
+    document.querySelectorAll('.remove-order-item').forEach(function(button) {
+        button.addEventListener('click', function() {
+            // Find the row
+            const row = this.closest('.order-item-row');
+
+            // Add a hidden input to mark this item for deletion
+            const orderItemId = row.querySelector('input[name$="[id]"]');
+            if (orderItemId) {
+                const hiddenInput = document.createElement('input');
+                hiddenInput.type = 'hidden';
+                hiddenInput.name = orderItemId.name.replace('[id]', '[_delete]');
+                hiddenInput.value = 1;
+                row.appendChild(hiddenInput);
+            }
+
+            // Hide the row instead of removing it
+            row.style.display = 'none';
+        });
+    });
+});
+</script>