{{ header }}
<header class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large flex between-xs middle-xs">
          <div>
            <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 class="flex flex-row middle-xs">
            <a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
              <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>
      <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-return" class="row hidden" data-tab="{{ tab_return }}">
      <div class="col-xs-12 bottom-padding-small">
        <span class="text-x-large text-dark">{{ tab_return }}</span>
      </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">
                  <span class="field-label required">{{ entry_order_id }}</span>
                  <input class="field-entry mask-number" type="text" name="order_id" value="{{ order_id }}">
                  {% if error_order_id %}
                    <span class="text-error text-x-small">{{ error_order_id }}</span>
                  {% endif %}
                </label>
                <label class="field field-medium">
                  <span class="field-label">{{ entry_date_ordered }}</span>
                  <input id="date" class="field-entry" type="text" name="date_ordered" value="{{ date_ordered }}" readonly />
                </label>
              </div>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label">{{ entry_customer }}</span>
                <input class="field-entry" type="text" name="customer" value="{{ customer }}" placeholder="Pesquisar Cliente" />
                <input class="field-entry" type="hidden" name="customer_id" value="{{ customer_id }}" />
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label required">{{ entry_firstname }}</span>
                <input class="field-entry" type="text" name="firstname" value="{{ firstname }}" />
                {% if error_firstname %}
                  <span class="text-error text-x-small">{{ error_firstname }}</span>
                {% endif %}
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label required">{{ entry_lastname }}</span>
                <input class="field-entry" type="text" name="lastname" value="{{ lastname }}" />
                {% if error_lastname %}
                  <span class="text-error text-x-small">{{ error_lastname }}</span>
                {% endif %}
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label required">{{ entry_email }}</span>
                <input class="field-entry" type="text" name="email" value="{{ email }}" />
                {% if error_email %}
                  <span class="text-error text-x-small">{{ error_email }}</span>
                {% endif %}
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label required">{{ entry_telephone }}</span>
                <input class="field-entry mask-celular" type="text" name="telephone" value="{{ telephone }}" />
                {% if error_telephone %}
                  <span class="text-error text-x-small">{{ error_telephone }}</span>
                {% endif %}
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="tab-product" class="row hidden" data-tab="{{ tab_product }}">
      <div class="col-xs-12 bottom-padding-small">
        <span class="text-x-large text-dark">{{ tab_product }}</span>
      </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">
              <label class="field field-medium">
                <span class="field-label required">{{ entry_product }}</span>
                <input class="field-entry" type="text" name="product" value="{{ product }}" placeholder="Pesquisar Produto"/>
                <input class="field-entry" type="hidden" name="product_id" value="{{ product_id }}" />
                {% if error_product %}
                  <span class="text-error text-x-small">{{ error_product }}</span>
                {% endif %}
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label">{{ entry_model }}</span>
                <input class="field-entry" type="text" name="model" value="{{ model }}" />
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label">{{ entry_quantity }}</span>
                <input class="field-entry mask-number" type="text" name="quantity" value="{{ quantity }}" size="3" />
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label">{{ entry_reason }}</span>
                <select class="field-entry" name="return_reason_id">
                  {% for return_reason in return_reasons %}
                    <option
                      value="{{ return_reason.return_reason_id }}"
                      {{ return_reason.return_reason_id == return_reason_id ? 'selected="selected"' : '' }}
                    >
                      {{ return_reason.name }}
                    </option>
                  {% endfor %}
                </select>
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label">{{ entry_opened }}</span>
                <select class="field-entry" name="opened">
                  <option value="1" {{ opened ? 'selected="selected"' : '' }}>{{ text_opened }}</option>
                  <option value="0" {{ not opened ? 'selected="selected"' : '' }}>{{ text_unopened }}</option>
                </select>
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label">{{ entry_comment }}</span>
                <textarea class="field-entry" name="comment" cols="40" rows="5">{{ comment }}</textarea>
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label">{{ entry_action }}</span>
                <select class="field-entry" name="return_action_id">
                  <option value="0"></option>
                  {% for return_action in return_actions %}
                    <option
                      value="{{ return_action.return_action_id }}"
                      {{ return_action.return_action_id == return_action_id ? 'selected="selected"' : '' }}
                    >
                      {{ return_action.name }}
                    </option>
                  {% endfor %}
                </select>
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label">{{ entry_return_status }}</span>
                <select class="field-entry" name="return_status_id">
                  {% for return_status in return_statuses %}
                    <option
                      value="{{ return_status.return_status_id }}"
                      {{ return_status.return_status_id == return_status_id ? 'selected="selected"' : '' }}
                    >
                      {{ return_status.name }}
                    </option>
                  {% endfor %}
                </select>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
{{ footer }}