{{ header }}
<div class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12 col-sm col-md">
        <div class="content-box vertical-padding-large">
          <span class="text-x-large text-dark">{{ heading_title }}</span>
          <div class="adm-breadcrumb">
            {% for breadcrumb in breadcrumbs %}
              <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
              <a href="{{ breadcrumb.href }}"
                 class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-width-auto col-md-width-auto">
        <div class="content-box vertical-padding-x-large flex flex-row middle-xs">
          <a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
            <span>{{ button_cancel }}</span>
          </a>
          <button type="button" class="btn-default btn-medium btn-primary js-submit-proccess-form">
            <span>{{ button_save }}</span>
          </button>
        </div>
      </div>

      <div class="js-warning"></div>

    </div>
  </div>
</div>


<div class="container-fluid">
  <div class="row">

    {% if items_processoscenda %}

    <form action="{{ action }}" method="post" class="col-xs-12 js-proccess-form">

        {% for item_processo in items_processoscenda %}
          <div id="{{ item_processo.id_processo_venda_item }}" class="js-toggle-control content-box background-white hover:shadow-large shadow-small padding-medium top-margin-small cursor-pointer">
            <div class="row middle-xs">
              <div class="col-xs-width-auto">
                <span class="text-dark text-medium text-bold">{{item_processo.ordem}}</span>
              </div>
              <div class="col-xs">
                <span class="text-dark text-medium text-bold visible-block">{{item_processo.text_tipo_processo_venda}}</span>
              </div>
              <div class="col-xs">
                {% if constant('Type_UtilizaProccessVenda::TpUtPv_Sim') == item_processo.status %}
                  <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block text-success background-success text-small">{{item_processo.text_status}}</span>
                {% elseif constant('Type_UtilizaProccessVenda::TpUtPv_Obrigatorio') == item_processo.status %}
                  <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block text-warning background-warning text-small">{{item_processo.text_status}}</span>
                {% else %}
                  <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block text-error background-error text-small">{{item_processo.text_status}}</span>
                {% endif %}
              </div>
              <div class="col-xs-width-auto">
                <i class="fas fa-chevron-down text-medium"></i>
              </div>
            </div>
          </div>
          <div class="hidden row no-space-xs">
            {% for item_order_status in item_processo.order_status_list %}
              <div class="col-xs-12 col-md">
                <div class="content-box padding-medium">
                  <div class="flex between-xs vertical-padding-small" data-tipo-status="{{ item_order_status.type_status }}" style="flex-wrap: nowrap">
                    <div>
                      <span class="text-small text-dark text-bold visible-block">Status: {{item_order_status.name}} </span>
                      <span class="text-x-small text-gray visible-block">({{item_order_status.text_status_repli}})</span>
                    </div>
                    <button type="button" class="btn-default btn-medium-square btn-success js-btn-add" {{ constant('Type_UtilizaProccessVenda::TpUtPv_Nao') == item_processo.status ? 'disabled' : '' }}>
                      <i class="fas fa-plus"></i>
                    </button>
                  </div>
                  <div class="field-group top-margin-x-small js-field-group">
                    {% for item_status in item_order_status.values  %}
                      <div class="js-field-entry-group field-entry-group bottom-margin-x-small">
                        <select class="field-entry field-entry-medium" {{ constant('Type_UtilizaProccessVenda::TpUtPv_Nao') == item_processo.status ? 'disabled' : '' }}
                                name="processo_venda[{{item_processo.id_processo_venda_item}}][{{ item_status.tipo_status }}][]"
                          {{ constant('Type_ProcessoVendaUtiliza::TpPrVnUt_Nao') == item_processo.status ? 'readonly' : '' }}>
                          {% for order_status in order_statuses %}
                            <option {{ order_status.order_status_id == item_status.order_status_id ? 'selected="selected"' : '' }} value="{{ order_status.order_status_id }}">{{ order_status.name }}</option>
                          {% endfor %}
                        </select>
                        <button type="button" class="btn-default btn-medium-square js-btn-remove {{ item_order_status.values|length > 1 ? 'btn-error' : '' }}" {{ constant('Type_UtilizaProccessVenda::TpUtPv_Nao') == item_processo.status ? 'disabled' : '' }}>
                          <i class="fas fa-times"></i>
                        </button>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        {% endfor %}

    </form>

    {% else %}

      <div class="col-xs-12">
        <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center">
          <span class="text-medium text-gray">{{ text_no_results }}</span>
        </div>
      </div>

    {% endif %}

  </div>
</div>

<script>
  var
    salesProcess = '{{ processosVenda|json_encode() }}',
    processo_venda_id = '{{ processo_venda_id }}';

  var control = document.querySelectorAll('.js-toggle-control');
  for (let i = 0; i < control.length; i++) {
    control[i].onclick = toggleContent;
  }
  function toggleContent() {
    var content = this.nextElementSibling;
    content.classList.toggle('hidden');
  }

  var btnRemove = document.body.querySelectorAll('.js-btn-remove');
  for (var i = 0; i < btnRemove.length; i++) {
    if (!btnRemove[i].disabled){
      btnRemove[i].onclick = removeBtn;
    }
  }

  function removeBtn() {

    var
      container = this.parentNode.parentNode;
    field = container.querySelectorAll('.js-field-entry-group');

    if (field.length > 1) {
      container.removeChild(this.parentNode);
      disableBtnSingleField(container);
    }
  }

  function disableBtnSingleField(container) {
    var
      field = container.querySelectorAll('.js-field-entry-group');


    if (field.length == 1) {
      var btnRemove = container.querySelector('.js-btn-remove');
      btnRemove.classList.remove('btn-error');
      btnRemove.onclick = function () { };
    }
  }

  var btnAdd = document.querySelectorAll('.js-btn-add');
  for (let i = 0; i < btnAdd.length; i++) {
    if (!btnAdd[i].disabled){
      btnAdd[i].onclick = appendField;
    }
  }

  function appendField() {
    var
      container = this.parentNode.parentNode.querySelector('.js-field-group'),
      field = container.querySelector('.js-field-entry-group'),
      originalButton = field.querySelector('.js-btn-remove');

    if (originalButton) {
      originalButton.classList.add('btn-error');
      originalButton.onclick = removeBtn;
    }

    var
      fieldClone = field.cloneNode(true),
      btnRemove = fieldClone.querySelector('.js-btn-remove');

    btnRemove.classList.add('btn-error');
    btnRemove.onclick = removeBtn;

    container.appendChild(fieldClone);
  }


</script>
{{ footer }}
