{% 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>
    {{ form_label(form.productMediaDoc) }}
    {{ form_widget(form.productMediaDoc) }}
    {{ form_errors(form.productMediaDoc) }}
</div>

<h3>Items</h3>
<button type="button" class="add-item-button">Add Item</button>
<div id="page-item-list" data-prototype="{{ form_widget(form.items.vars.prototype)|e('html_attr') }}">
    {% for item in form.items %}
    <div class="item-form">
        <div>
            {{ form_label(item.sale_price) }}
            {{ form_widget(item.sale_price) }}
            {{ form_errors(item.sale_price) }}
        </div>
        <div>
            {{ form_label(item.display_weight) }}
            {{ form_widget(item.display_weight) }}
            {{ form_errors(item.display_weight) }}
        </div>
        <div>
            {{ form_label(item.tax_type) }}
            {{ form_widget(item.tax_type) }}
            {{ form_errors(item.tax_type) }}
        </div>
        <div>
            {{ form_label(item.itemMediaDoc) }}
            {{ form_widget(item.itemMediaDoc) }}
            {{ form_errors(item.itemMediaDoc) }}
        </div>
        <div>
            {{ form_label(item.isActive) }}
            {{ form_widget(item.isActive) }}
            {{ form_errors(item.isActive) }}
        </div>
        <div>
            {{ form_label(item.color) }}
            {{ form_widget(item.color) }}
            {{ form_errors(item.color) }}
        </div>
        <div>
            {{ form_label(item.size) }}
            {{ form_widget(item.size) }}
            {{ form_errors(item.size) }}
        </div>

        <div class="item-inventory-list" data-prototype="{{ form_widget(item.inventories.vars.prototype)|e('html_attr') }}">
            <button type="button" class="add-inventory-button">Add Inventory Line Item</button>
            {% for inventory in item.inventories %}
            <div class="inventory-form">
                <div>
                    {{ form_label(inventory.opening_stock) }}
                    {{ form_widget(inventory.opening_stock) }}
                    {{ form_errors(inventory.opening_stock) }}
                </div>
                <div>
                    {{ form_label(inventory.reserved_stock) }}
                    {{ form_widget(inventory.reserved_stock) }}
                    {{ form_errors(inventory.reserved_stock) }}
                </div>
                <div>
                    {{ form_label(inventory.location) }}
                    {{ form_widget(inventory.location) }}
                    {{ form_errors(inventory.location) }}
                </div>
                <div>
                    {{ form_label(inventory.low_stock_threshold_qty) }}
                    {{ form_widget(inventory.low_stock_threshold_qty) }}
                    {{ form_errors(inventory.low_stock_threshold_qty) }}
                </div>
                <button type="button" class="remove-inventory-button">Remove Inventory</button>
            </div>
            {% endfor %}
        </div>
        <button type="button" class="remove-item-button">Remove Item</button>
    </div>
    {% endfor %}
</div>

<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 addForm(container, prototype, name) {
        const formCount = container.children.length;
        const newForm = prototype.replace(/__name__/g, formCount);
        const div = document.createElement('div');
        div.classList.add(name + '-form');
        div.innerHTML = newForm;

        const removeButton = document.createElement('button');
        removeButton.innerHTML = 'Remove ' + name.charAt(0).toUpperCase() + name.slice(1);
        removeButton.type = 'button';
        removeButton.classList.add('remove-' + name + '-button');
        removeButton.addEventListener('click', function() {
            container.removeChild(div);
        });

        div.appendChild(removeButton);
        container.appendChild(div);

        // Check if the new form is an item form and add an inventory form by default
        if (name === 'item') {
            const inventoryContainer = div.querySelector('.item-inventory-list');
            const inventoryPrototype = inventoryContainer.getAttribute('data-prototype');
            addForm(inventoryContainer, inventoryPrototype, 'inventory');
        }

        // Initialize inventory forms within the new item form
        initializeInventory(div.querySelector('.item-inventory-list'), '.add-inventory-button', '[data-prototype]', 'inventory');
    }

    function initializeForm(containerSelector, buttonSelector, prototypeSelector, name) {
        const container = document.querySelector(containerSelector);
        const prototype = container.getAttribute('data-prototype');
        const button = document.querySelector(buttonSelector);

        button.addEventListener('click', function() {
            addForm(container, prototype, name);
        });

        container.querySelectorAll('.remove-' + name + '-button').forEach(button => {
            button.addEventListener('click', function() {
                container.removeChild(button.parentElement);
            });
        });
    }

    function initializeInventory(container, buttonSelector, prototypeSelector, name) {
        const prototype = container.getAttribute('data-prototype');
        const button = container.querySelector(buttonSelector);

        button.addEventListener('click', function() {
            addForm(container, prototype, name);
        });

        container.querySelectorAll('.remove-' + name + '-button').forEach(button => {
            button.addEventListener('click', function() {
                container.removeChild(button.parentElement);
            });
        });
    }

    // Initialize for items
    initializeForm('#page-item-list', '.add-item-button', '[data-prototype]', 'item');

    // Initialize for inventories (as a sub-prototype of items)
    document.querySelectorAll('.item-inventory-list').forEach(container => {
        initializeInventory(container, '.add-inventory-button', '[data-prototype]', 'inventory');
    });
});


</script>
{% endblock %}