{# template/new-prod.html.twig #}

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

{% block content %}

<h1>Create new Product</h1>

    {{ form_errors(form) }}
    {{ form_start(form, {'attr': {'novalidate': 'novalidate', 'class': 'form d-flex flex-column flex-lg-row'}}) }}

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

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

    initializeForm('#page-item-list', '.add-item-button', '[data-prototype]', 'item');
    initializeForm('#item-inventory-list', '.add-inventory-button', '[data-prototype]', 'inventory');


});
</script>
{% endblock %}