{{ 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">
          <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>
          {% if error.warning %}
            <div class="warning full-width">{{ error.warning }}</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container-fluid">
  <div class="row x-small-space-xs flex middle-xs">
    <div class="col-md-2">
      <label class="field field-medium">
        <span class="field-label">{{ entry_date_start }}</span>
        <input class="field-entry {{ (error.date_ini) ? 'field-entry-error' : '' }}  " type="text" name="filter_date_start" value="{{ filter_date_start }}" id="date-start" />
      </label>
    </div>
    <div class="col-md-2">
      <label class="field field-medium">
        <span class="field-label">{{ entry_date_end }}</span>
        <input class="field-entry {{ (error.date_end) ? 'field-entry-error' : '' }}" type="text" name="filter_date_end" value="{{ filter_date_end }}" id="date-end" />
      </label>
    </div>
    <div class="col-md-width-auto">
      <label class="field field-medium">
        <span class="field-label">{{ entry_group }}</span>
        <select class="field-entry" name="filter_group">
          {% for groups in groups %}
            <option value="{{ groups.value }}" {{ groups.value == filter_group ? 'selected' : '' }}>
              {{ groups.text }}
            </option>
          {% endfor %}
        </select>
      </label>
    </div>
    <div class="col-md-2">
      <label class="field field-medium">
        <span class="field-label">{{ entry_status }}</span>
        <select class="field-entry" name="filter_order_status_id">
          <option value="0">{{ text_all_status }}</option>
          {% for order_status in order_statuses %}
            <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == filter_order_status_id ? 'selected' : '' }}>
              {{ order_status.name }}
            </option>
          {% endfor %}
        </select>
      </label>
    </div>
    <div class="col-md">
      <label class="field field-medium">
        <span class="field-label">{{ entry_payment_method }}</span>
        <select class="field-entry" name="filter_order_payment_method">
          <option value="">{{ text_no_paymentMethod }}</option>
            {% for payment_method in payment_methods.code %}
              <option value="{{ payment_method }}" {{ payment_method == filter_order_payment_method ? 'selected' : '' }}>
                {{ payment_methods.name[payment_method] }}
              </option>
            {% endfor %}
        </select>
      </label>
    </div>
    <div class="col-md">
      <div class="field-group">
        <label class="field-label" for="filter_order_payment_method">{{ text_origem_pedido }}</label>
        <select class="field-entry field-entry-medium" id="filter_origem_pedido" name="filter_origem_pedido">
          <option value="">{{ text_all }}</option>
          {% for key, type in Type_OrigemSistema.getEnumList() %}
            <option value="{{ key }}" {{ filter_origem_pedido|length and filter_origem_pedido == key ? 'selected' : '' }}>{{ type }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="col-md-width-auto">
      <button class="btn-default btn-medium-square btn-primary top-margin-medium js-btn-filter">
        <i class="fas fa-filter"></i>
        <span>{{ button_filter }}</span>
      </button>
    </div>
  </div>

  {% if orders %}
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box background-white bottom-border-gray padding-medium top-margin-medium">
          <div class="row no-space-xs middle-xs">
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_date_start }} / {{ column_date_end }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_orders }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_products }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_price_products }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_price_shippings }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_order_shipping }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_discount }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_total }}</span>
            </div>
          </div>
        </div>
        {% for order in orders %}
          <div class="content-box background-white padding-medium bottom-border-gray">
            <div class="row no-space-xs middle-xs">
              <div class="col-xs">
                <span class="text-small text-dark">{{ order.date_start }} / {{ order.date_end }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-dark">{{ order.orders }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-dark">{{ order.products }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-dark">{{ order.prices_products }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-dark">{{ order.price_shippings }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-dark">{{ order.order_no_shipping }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-dark">{{ order.discount }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-dark">{{ order.total }}</span>
              </div>
            </div>
          </div>
        {% endfor %}
        <div class="content-box background-white bottom-border-gray padding-medium">
          <div class="row no-space-xs middle-xs">
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ text_total }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ totals.vTotalOrders }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ totals.vTotalProducts }}
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ totals.vTotalProdutoPreco }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ totals.vTotalFrete }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ totals.vTotalSemFrete }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ totals.vTotalDesconto }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ totals.vTotalTotal }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box">
          {{ pagination }}
        </div>
      </div>
    </div>
  {% else %}
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center top-margin-medium">
          <span class="text-medium text-gray">{{ text_no_results }}</span>
        </div>
      </div>
    </div>
  {% endif %}
</div>

{{ footer }}