{{ header }}
<header class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row no-space-xs middle-xs">
      <div class="col-xs-12 col-sm-6 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-6 col-md-width-auto">
        <div class="content-box padding-large flex flex-row middle-xs">
          <a href="{{ cancel }}" class="right-margin-small btn-default btn-medium btn-outline">
            <span>{{ button_cancel }}</span>
          </a>
          <button class="btn-default btn-medium btn-primary js-submit-main-form">
            <span>{{ button_save }}</span>
          </button>
        </div>
      </div>
      <div class="col-xs-12">
        {% if error_warning %}
          <div class="text-small text-error background-error padding-medium rounded-x-small full-width">{{ error_warning }}</div>
        {% endif %}
      </div>
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>
</header>
<form action="{{ action }}" method="post" class="js-main-form">
  <div class="container-fluid" data-tabs-id="tab-info">

    <div id="tab-general" class="row hidden" data-tab="{{ tab_general }}">
      <div class="col-xs-12">
        <div class="content-box">
          <div class="flex between-xs middle-xs">
            <span class="text-x-large text-dark">{{ tab_general }}</span>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="content-box background-white shadow-small padding-large">
          <div class="row">
            <div class="col-xs-12">
              <div class="field-group-join">
                <label class="field field-medium bottom-margin-large">
                  <span class="field-label required">{{ entry_name }}</span>
                  <input class="field-entry" type="text" name="name" value="{{ name }}" />
                  {% if error_name %}
                    <span class="text-small text-error">{{ error_name }}</span>
                  {% endif %}
                </label>
                <label class="field field-medium bottom-margin-large">
                  <span class="field-label required">{{ entry_code }}</span>
                  <input class="field-entry" type="text" name="code" value="{{ code }}" maxlength="20" placeholder="Código para obter o desconto"/>
                  {% if error_code %}
                    <span class="text-small text-error">{{ error_code }}</span>
                  {% endif %}
                </label>
              </div>
              <div class="field-group-join">
                <label class="field field-medium bottom-margin-large">
                  <span class="field-label">{{ entry_type }}</span>
                  <select class="field-entry js-type-discount" name="type">
                    <option value="P" {{ type == 'P' ? 'selected="selected"' : '' }}>{{ text_percent }}</option>
                    <option value="F" {{ type == 'F' ? 'selected="selected"' : '' }}>{{ text_amount }}</option>
                  </select>
                </label>
                <label class="field field-medium bottom-margin-large">
                  <span class="field-label js-discount">{{ entry_discount }}{{ type == 'P' ? ' (%)' : ' (R$)' }}</span>
                  <input class="field-entry mask-money" type="text" name="discount" value="{{ discount }}"/>
                </label>
              </div>
              <label class="field field-medium bottom-margin-large">
                <span class="field-label">{{ entry_total }}</span>
                <input class="field-entry mask-money" type="text" name="total" value="{{ total }}"/>
              </label>
              <div class="content-box">
                <span class="field-label">{{ entry_shipping }}</span>
                <div class="row no-space-xs flex bottom-margin-large">
                  <label class="radio radio-medium">
                    <input class="radio-entry" type="radio" name="shipping" value="1" {{ shipping ? 'checked="true"' : '' }}/>
                    <span class="radio-text">{{ text_yes }}</span>
                  </label>
                  <label class="radio radio-medium">
                    <input class="radio-entry" type="radio" name="shipping" value="0" {{ not shipping ? 'checked="true"' : '' }}/>
                    <span class="radio-text">{{ text_no }}</span>
                  </label>
                </div>
              </div>
              <div class="content-box">
                <label class="field field-medium bottom-margin-large">
                  <span class="field-label text-medium">{{ entry_product }}</span>
                  <input class="field-entry" type="text" name="product" value="" data-grid="false" placeholder="Pesquisar Produto" />
                </label>
    
                <div id="coupon-product" class="field field-medium bottom-margin-large scrollbox">
                  {% for coupon_product in coupon_product %}
                    <div id="coupon-product{{ coupon_product.product_id }}" class="scrollbox-item flex between-xs" style='border: 1px solid red;'>
                      <span class="text-small text-gray">{{ coupon_product.name }}</span>
                      <i class="fas fa-trash-alt text-small right-margin-small text-error"></i>
                      <input type="hidden" name="coupon_product[]" value="{{ coupon_product.product_id }}" />
                    </div>
                  {% endfor %}
                </div>

                <label id="quantity_product" class="field field-medium bottom-margin-large hidden">
                  <span class="field-label text-medium">{{ entry_quantity_product }}</span>      
                  <input class="field-entry" type="number" name="quantity_product" oninput="onlyNumer(this)" value="{{ quantity_product }}" placeholder="Quantidade de produtos" />
                </label>
              </div>
              <div class="content-box">
                <label class="field field-medium bottom-margin-large">
                  <span class="field-label text-medium">{{ entry_product_grid }}</span>
                  <input class="field-entry" type="text" name="product_grid" value=""  data-grid="true" placeholder="Pesquisar Grade" />
                </label>
                
                <label id="coupon-grid-produt" class="field field-medium bottom-margin-large scrollbox">
                  {% for coupon_grid in coupon_grid %}
                    <div id="coupon-product{{ coupon_grid.product_grid_id }}" class="scrollbox-item flex between-xs">
                      <span class="text-small text-gray">{{ coupon_grid.description }}</span>
                      <i class="fas fa-trash-alt text-small right-margin-small text-error"></i>
                      <input type="hidden" name="coupon_product_grid[]" value="{{ coupon_grid.product_grid_id }}" />
                    </div>
                  {% endfor %}
                </label>

                <label id="quantity_grade" class="field field-medium bottom-margin-large">
                  <span class="field-label text-medium">{{ entry_quantity_product_grid }}</span>
                  <input class="field-entry" type="number" name="quantity_grade" oninput="onlyNumer(this)" value="{{ quantity_grade }}" placeholder="Quantidade Grade de produto" />
                </label>
              </div>
              <div class="content-box">
                <label class="field field-medium bottom-margin-large">
                  <span class="field-label text-medium">{{ entry_category }}</span>
                  <input class="field-entry" type="text" name="category" value="" placeholder="Pesquisar Categoria" />
                </label>
                
                <label id="coupon-department" class="field field-medium scrollbox bottom-margin-large">
                  {% for coupon_category in coupon_category %}
                    <div id="coupon-category{{ coupon_category.category_id }}" class="scrollbox-item flex between-xs">
                      <span class="text-small text-gray">{{ coupon_category.name }}</span>
                      <i class="fas fa-trash-alt text-small right-margin-small text-error"></i>
                      <input type="hidden" name="coupon_category[]" value="{{ coupon_category.category_id }}" />
                    </div>
                  {% endfor %}
                </label>

                <label id="quantity_department" class="field field-medium">
                  <span class="field-label text-medium">{{ entry_quantity_department }}</span>
                  <input class="field-entry" type="number" name="quantity_department" oninput="onlyNumer(this)" value="{{ quantity_department }}" placeholder="Quantidade Departamento" />
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-md-4">
        <div class="content-box background-white shadow-small padding-large">
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_status }}</span>
            <select class="field-entry" name="status">
              <option value="1" {{ status ? 'selected="selected"' : '' }}>{{ text_enabled }}</option>
              <option value="0" {{ not status ? 'selected="selected"' : '' }}>{{ text_disabled }}</option>
            </select>
          </label>
          <div class="content-box">
            <span class="field-label">{{ entry_date_start }}</span>
            <div class="field-group-join">
              <label class="field field-medium bottom-margin-large">
                <span class="field-label">Data início:</span>
                <input
                  type="text"
                  name="date_start"
                  value="{{ date_start }}"
                  size="12"
                  id="date-start"
                  class="date field-entry"
                />
              </label>
              <label class="field field-medium bottom-margin-large">
                <span class="field-label">Data término:</span>
                <input
                  type="text"
                  name="date_end"
                  value="{{ date_end }}"
                  size="12"
                  id="date-end"
                  class="date field-entry"
                />
              </label>
            </div>
          </div>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_coupon_display }}</span>
            <select class="field-entry" name="coupon_display">
              {% for key, status in Type_DisplayModuleOption.getEnumList() %}
                <option value="{{ key }}"
                  {{ ftr_geral.isSelected(key, coupon_display) }}>{{ status }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_uses_total }}</span>
            <input class="field-entry mask-number" type="text" name="uses_total" value="{{ uses_total }}" />
          </label>
          <label class="field field-medium">
            <span class="field-label">{{ entry_uses_customer }}</span>
            <input class="field-entry mask-number" type="text" name="uses_customer" value="{{ uses_customer }}" />
          </label>
        </div>
      </div>
    </div>

    {% if coupon_id %}
      <div id="tab-history" class="row hidden" data-tab="{{ tab_history }}">
        <div class="col-xs-12">
          <div class="content-box">
            <div class="flex between-xs middle-xs">
              <span class="text-x-large text-dark">{{ tab_history }}</span>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-md-8">
          <div id="history"></div>
        </div>
      </div>
    {% endif %}

  </div>
</form>
<script type="text/javascript">
  var coupon = '{{ coupon_id }}';
  var pageHistory =   '{{ pageHistory }}';
</script>

{{ footer }}
