{% 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" data-target="#page-item-list">Add Item</button>
    <button type="button" class="remove-item-button" data-target="#page-item-list">Remove 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">
          {# {{ form_widget(item) }} #}
              <div>
                {# {{ form_widget(item) }} #}
                  <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>
              <button type="button" class="add-inventory-button" data-target="#item-inventory-list">Add Inventory Line Item</button>
              <button type="button" class="remove-inventory-button" data-target="#item-inventory-list">Remove Inventory Line Item </button>
              <div class="item-inventory-list" data-prototype="{{ form_widget(item.inventories.vars.prototype)|e('html_attr')  }}">
                  {% for inventory in item.inventories %}
                          {# {{ form_widget(inventory) }} #}
                      <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>
                      </div>   

                  {% endfor %}
              </div>  
          </div>    
        {% endfor %}
    </div>

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

{# {% block Javascript %}

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

        const addItemButton = document.querySelector(buttonSelector);
        addItemButton.addEventListener('click', function() {
            const newItemHtml = prototype.replace(/__name__/g, index);
            const newItem = document.createElement('div');
            //newItem.classList.add('item-form');
            newItem.innerHTML = newItemHtml;
            addRemoveButton(newItem, 'Remove Item');
            addInventoryButtons(newItem); // Add inventory buttons to new item
            container.appendChild(newItem);
            index++;
        });

        

        // Initialize existing items with remove buttons
        Array.from(container.querySelectorAll('.item-form')).forEach(item => {
            addRemoveButton(item, 'Remove Item');
            addInventoryButtons(item);

        });
    }

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

    function addInventoryButtons(item) {
        const inventoryContainer = item.querySelector('[data-prototype]');
        const addInventoryButton = document.createElement('button');
        addInventoryButton.type = 'button';
        addInventoryButton.className = 'add-inventory-button';
        addInventoryButton.textContent = 'Add Inventory';
        addInventoryButton.addEventListener('click', function() {
            const prototype = inventoryContainer.dataset.prototype;
            const index = inventoryContainer.children.length;
            const newInventoryHtml = prototype.replace(/__name__/g, index);
            const newInventory = document.createElement('div');
            newInventory.innerHTML = newInventoryHtml;
            addRemoveButton(newInventory, 'Remove Inventory Line Item');
            inventoryContainer.appendChild(newInventory);
        });
        //item.appendChild(addInventoryButton);

        // Append addInventoryButton only once per item
        if (!item.querySelector('.add-inventory-button')) {
            item.appendChild(addInventoryButton);
        }

        // Initialize existing inventories with remove buttons
        Array.from(inventoryContainer.children).forEach(inventory => {
            addRemoveButton(inventory, 'Remove Inventory Line Item');
        });
    }
    // Initialize for invoice items
    addItem('#page-item-list', '.add-item-button[data-target="#page-item-list"]');
});

</script>

{% endblock %} #}