saufen/templates/order/_form.html.twig

{{ form_start(form) }}
    {{ form_row(form.status) }}

    <h3>
      ORDER ITEMS
      <span class="emoji-normal">🍑</span>
      <span class="emoji-enhanced">🍑🍆💋</span>
      <span class="emoji-bonkers">🍑🍆💋👅😈🏳️‍🌈✨</span>
    </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 <span class="emoji-normal">🍆</span><span class="emoji-enhanced">🍆💦🍑</span><span class="emoji-bonkers">🍆💦🍑👅💋</span></th>
                    <th>QUANTITY <span class="emoji-normal">💦</span><span class="emoji-enhanced">💦🍑</span><span class="emoji-bonkers">💦🍑🍆👅</span></th>
                    <th>ACTIONS <span class="emoji-normal">💖</span><span class="emoji-enhanced">💖🏳️‍🌈</span><span class="emoji-bonkers">💖🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span></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
                              <span class="emoji-normal">🗑️</span>
                              <span class="emoji-enhanced">🗑️💦</span>
                              <span class="emoji-bonkers">🗑️💦🍑🍆👅💋😈🏳️‍🌈✨</span>
                            </button>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <button type="button" class="btn btn-success add-order-item">
          ADD ITEM
          <span class="emoji-normal">➕</span>
          <span class="emoji-enhanced">➕🍑</span>
          <span class="emoji-bonkers">➕🍑🍆💦👅💋😈🏳️‍🌈✨</span>
        </button>
    </div>

    <button class="btn btn-primary mt-3">
      SAVE
      <span class="emoji-normal">💦</span>
      <span class="emoji-enhanced">💦🍑🍆</span>
      <span class="emoji-bonkers">💦🍑🍆👅💋😈🏳️‍🌈✨</span>
    </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>