{# templates/product/new.html.twig #}
{% extends 'shared/secure.html.twig'%}
{% block title %}Product Manager{% endblock %}


{% block content %}

<h1>Create new Product</h1>

    {{ form_start(form) }}

    <div>
        {{ form_label(form.name) }}
        {{ form_widget(form.name) }}
        {{ form_errors(form.name) }}
    </div>
    
    <div>
        {{ form_label(form.description) }}
        {{ form_widget(form.description) }}
        {{ form_errors(form.description) }}
    </div>

    <div>
        {{ form_label(form.isActive) }}
        {{ form_widget(form.isActive) }}
        {{ form_errors(form.isActive) }}
    </div>

    <div>
        {{ form_label(form.category) }}
        {{ form_widget(form.category) }}
        {{ form_errors(form.category) }}
    </div>

    <div>
        {{ form_label(form.primary_unit) }}
        {{ form_widget(form.primary_unit) }}
        {{ form_errors(form.primary_unit) }}
    </div>

    {# <div id="items_container" data-prototype="{{ form_widget(form.items.vars.prototype)|e('html_attr') }}">
        <h3>Items</h3>
        {% for item in form.items %}
            <div class="item-form">
                {{ form_widget(item) }}
                <button type="button" class="remove-item">Remove</button>
            </div>
        {% endfor %}
    </div> #}
<button type="button" class="add-item-button" data-target="#invoice-items-list">Add Item</button>
    <div id="invoice-items-list" data-prototype="{{ form_widget(form.items.vars.prototype)|e }}">
    <!-- Invoice items will be appended here -->
    <h3>Items</h3>
        {% for item in form.items %}
            <div class="item-form">
                {{ form_widget(item) }}
                
            </div>
        {% endfor %}
</div>



    {# <button type="button" id="add_item">Add Item</button> #}

    <button type="submit">Save</button>
    <a href="{{ path('app_products') }}">Back to list</a>
    {{ form_end(form) }}
{% endblock %}

{% block Javascript %}
<script src="{{secure_assets}}/plugins/custom/datatables/datatables.bundle.js"></script>
<script src="{{secure_assets}}/plugins/custom/formrepeater/formrepeater.bundle.js"></script>
<script src="{{secure_assets}}/js/custom/apps/catalog/save-product-v1.3.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    function addItem(containerSelector, buttonSelector) {
        const container = document.querySelector(containerSelector);
        const prototype = container.dataset.prototype;
        let index = container.children.length;

        const addItemButton = document.querySelector(buttonSelector);
        addItemButton.addEventListener('click', function() {
            const newItemHtml = prototype.replace(/__name__/g, index);
            const newItem = document.createElement('div');
            newItem.innerHTML = newItemHtml;
            addRemoveButton(newItem);
            container.appendChild(newItem);
            index++;
        });

        // Initialize existing items with remove buttons
        Array.from(container.children).forEach(item => {
            addRemoveButton(item);
        });
    }

    function addRemoveButton(item) {
        const removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.className = 'remove-item-button';
        removeButton.textContent = 'Remove Item';
        removeButton.addEventListener('click', function() {
            item.remove();
        });
        item.appendChild(removeButton);
    }

    // Initialize for invoice items
    addItem('#invoice-items-list', '.add-item-button[data-target="#invoice-items-list"]');
    // Add similar lines for orders and journals
    //addItem('#order-items-list', '.add-item-button[data-target="#order-items-list"]');
    //addItem('#journal-items-list', '.add-item-button[data-target="#journal-items-list"]');
});
</script>
   
    {# <script>
document.addEventListener('DOMContentLoaded', function() {
    function addItem(containerSelector, buttonSelector) {
        const container = document.querySelector(containerSelector);
        const prototype = container.dataset.prototype;
        let index = container.children.length;

        const addItemButton = document.querySelector(buttonSelector);
        addItemButton.addEventListener('click', function() {
            const newItem = prototype.replace(/__name__/g, index);
            container.insertAdjacentHTML('beforeend', newItem);
            index++;
            addRemoveButton(container, container.lastElementChild);
        });

        // Initialize existing items with remove buttons
        Array.from(container.children).forEach(item => {
            addRemoveButton(container, item);
        });
    }

    function addRemoveButton(container, item) {
        const removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.className = 'remove-item-button';
        removeButton.textContent = 'Remove Item';
        removeButton.addEventListener('click', function() {
            container.removeChild(item);
        });
        item.appendChild(removeButton);
    }

    // Initialize for invoice items
    addItem('#invoice-items-list', '.add-item-button[data-target="#invoice-items-list"]');
    // Add similar lines for orders and journals
    addItem('#order-items-list', '.add-item-button[data-target="#order-items-list"]');
    addItem('#journal-items-list', '.add-item-button[data-target="#journal-items-list"]');
});
</script> #}




 {# <script>
        document.addEventListener('DOMContentLoaded', function() {
            const itemsContainer = document.getElementById('items_container');
            const addItemButton = document.getElementById('add_item');

            let index = {{ form.items|length }};

            addItemButton.addEventListener('click', function() {
                const prototype = itemsContainer.dataset.prototype;
                const newItemForm = prototype.replace(/__name__/g, index);

                const div = document.createElement('div');
                div.classList.add('item-form');
                div.innerHTML = newItemForm + '<button type="button" class="remove-item">Remove</button>';
                itemsContainer.appendChild(div);

                index++;
            });

            itemsContainer.addEventListener('click', function(event) {
                if (event.target && event.target.classList.contains('remove-item')) {
                    event.target.closest('.item-form').remove();
                }
            });
        });
    </script> #}

{% endblock %}