{% 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="#product-items-list">Add Item</button>
<div id="product-items-list" data-prototype="{{ form_widget(form.items.vars.prototype)|e }}">
   
    {% for item in form.items %}
        {# <div class="item-form">
            {{ form_widget(item) }}
        </div> #}
        <div class="item-form" style="display: none">
          {# {{ 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.tax_type) }}
                      {{ form_widget(item.tax_type) }}
                      {{ form_errors(item.tax_type) }}
                  </div>
                  <div>
                      {{ form_label(item.display_weight) }}
                      {{ form_widget(item.display_weight) }}
                      {{ form_errors(item.display_weight) }}
                  </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">
                  {% for inventory in item.inventories %}
                          {# {{ form_widget(inventory) }} #}
                      <div class="inventory-form">
                          <div>
                              {{ form_label(inventory.location) }}
                              {{ form_widget(inventory.location) }}
                              {{ form_errors(inventory.location) }}      
                          </div>
                          <div>
                              {{ form_label(inventory.opening_qty) }}
                              {{ form_widget(inventory.opening_qty) }}
                              {{ form_errors(inventory.opening_qty) }}      
                          </div>
                          <div>
                              {{ form_label(inventory.shelf_name) }}
                              {{ form_widget(inventory.shelf_name) }}
                              {{ form_errors(inventory.shelf_name) }}      
                          </div>
                          <div>
                              {{ form_label(inventory.unit_cost_price) }}
                              {{ form_widget(inventory.unit_cost_price) }}
                              {{ form_errors(inventory.unit_cost_price) }}      
                          </div>
                          <div>
                              {{ form_label(inventory.reserved_qty) }}
                              {{ form_widget(inventory.reserved_qty) }}
                              {{ form_errors(inventory.reserved_qty) }}      
                          </div>
                         
                          <div>
                              {{ form_label(inventory.low_qty_threshold_limit) }}
                              {{ form_widget(inventory.low_qty_threshold_limit) }}
                              {{ form_errors(inventory.low_qty_threshold_limit) }}      
                          </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 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, 'Remove Item');
                addInventoryButtons(newItem); // Add inventory buttons to new item
                container.appendChild(newItem);
                index++;
            });

            // Initialize existing items with remove buttons and inventory buttons
            Array.from(container.children).forEach(item => {
                addRemoveButton(item, 'Remove Inventory');
                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);
            });

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

            // Initialize remove buttons for existing inventories
            Array.from(inventoryContainer.children).forEach(inventory => {
                addRemoveButton(inventory, 'Remove Inventory Line Item');
            });
        }


        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);
                });
            });
        }
        


        // Initialize for product items
        addItem('#product-items-list', '.add-item-button[data-target="#product-items-list"]');
    });
    </script>
{% endblock %}