{#
 # For the full copyright and license information, please view the
 # docs/licenses/LICENSE.txt file that was distributed with this source code.
 #}

<div class="card" id="customer-search-block">
  <h3 class="card-header">{{ 'Customer'|trans({}, 'Admin.Global') }}</h3>
  <div class="card-body">
    <div class="row js-search-customer-row mb-4">
      <label class="col-md-3 text-md-right col-form-label" for="customer-search-input">
        {{ 'Search for a customer'|trans({}, 'Admin.Orderscustomers.Feature') }}
      </label>
      <div class="col-md-4 mb-2">
        <input type="text"
               class="form-control"
               id="customer-search-input"
        >
        <small class="form-text">
          {{ 'Search for an existing customer by typing the first letters of his/her name.'|trans({}, 'Admin.Orderscustomers.Help') }}
          {{ 'Use OR to broaden your search'|trans({}, 'Admin.Orderscustomers.Help') }}
        </small>
      </div>
      <div class="col">
        <span class="mr-2">{{ 'or'|trans({}, 'Admin.Global') }}</span>
        <a id="customer-add-btn" class="btn btn-primary" href="{{ path('admin_customers_create', {liteDisplaying: 1, submitFormAjax: 1}) }}">
          {{ 'Add new customer'|trans({}, 'Admin.Orderscustomers.Feature') }}
        </a>
      </div>
    </div>

    <div id="customer-search-empty-result-warn" class="d-none">
        <div class="alert alert-warning" role="alert">
          <p class="alert-text">{{ 'No customers found'|trans({}, 'Admin.Orderscustomers.Notification') }}</p>
        </div>
    </div>

    <div id="customer-search-loading-notice" class="d-none">
        <div class="alert alert-info" role="alert">
          <p class="alert-text">
            {{ 'Searching for customers'|trans({}, 'Admin.Orderscustomers.Notification') }}
          </p>
        </div>
    </div>

    <div class="row js-customer-search-results"></div>
    <div class="d-none mt-4" id="customer-checkout-history">
        <ul class="nav nav-pills" role="tablist">
          <li class="nav-item">
            <a class="nav-link active show js-customer-carts-tab"
               id="customer-carts-tab"
               data-toggle="pill"
               href="#customer-carts-tab-content"
               role="tab"
               aria-controls="pills-home"
               aria-expanded="true"
               aria-selected="true"
            >
              {{ 'Carts'|trans({}, 'Admin.Global') }}
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-customer-orders-tab"
               id="customer-orders-tab"
               data-toggle="pill"
               href="#customer-orders-tab-content"
               role="tab"
               aria-controls="pills-home"
               aria-expanded="true"
               aria-selected="true"
            >
              {{ 'Orders'|trans({}, 'Admin.Global') }}
            </a>
          </li>
          <li class="nav-item ml-auto">
            <button class="navbar-toggler" type="button"
                    data-toggle="collapse"
                    data-target="#customer-tab-content-container"
                    id="customer-tab-content-container-toggler"
                    aria-expanded="true"
                    aria-label="{{ 'Toggle'|trans({}, 'Admin.Global') }}">
              <p class="mb-0 mt-2"><i class="material-icons"></i></p>
            </button>
          </li>
        </ul>
        <div class="tab-content collapse show" id="customer-tab-content-container">
          <div class="tab-pane fade active show" id="customer-carts-tab-content" role="tabpanel" aria-labelledby="pills-home-tab">
            <div class="table-responsive">
              <table class="table mb-0" id="customer-carts-table">
                <thead class="d-none">
                  <tr>
                    <th>{{ 'ID'|trans({}, 'Admin.Global') }}</th>
                    <th>{{ 'Date'|trans({}, 'Admin.Global') }}</th>
                    <th>{{ 'Total'|trans({}, 'Admin.Global') }}</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
          <div class="tab-pane fade" id="customer-orders-tab-content" role="tabpanel" aria-labelledby="pills-home-tab">
            <div class="table-responsive">
              <table class="table mb-0" id="customer-orders-table">
                <thead class="d-none">
                <tr>
                  <th>{{ 'ID'|trans({}, 'Admin.Global') }}</th>
                  <th>{{ 'Date'|trans({}, 'Admin.Global') }}</th>
                  <th>{{ 'Products'|trans({}, 'Admin.Global') }}</th>
                  <th>{{ 'Total paid'|trans({}, 'Admin.Orderscustomers.Feature') }}</th>
                  <th>{{ 'Payment'|trans({}, 'Admin.Global') }}</th>
                  <th>{{ 'Status'|trans({}, 'Admin.Global') }}</th>
                  <th></th>
                </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

<div id="customer-search-result-template" class="d-none">
  <div class="col-sm-6 col-md-4 col-xl-3 js-customer-search-result-col">
    <div class="card js-customer-search-result">
      <div class="card-header">
        <h3 class="card-header-title d-inline-block js-customer-name"></h3>
        <div class="d-inline-block float-right">
          #<span class="js-customer-id"></span>
        </div>
      </div>
      <div class="card-body">
        <p class="mb-0 js-customer-email"></p>
        <p class="mb-0 js-customer-birthday"></p>
        {% if isB2BEnabled %}
          <p class="mb-0 js-customer-company"></p>
        {% endif %}
        <p class="mb-0 js-customer-groups"></p>
      </div>
      <div class="card-footer">
        <a class="btn btn-outline-secondary js-details-customer-btn">
          {{ 'Details'|trans({}, 'Admin.Global') }}
        </a>
        <button type="button" class="btn btn-outline-primary float-right js-choose-customer-btn">
          {{ 'Choose'|trans({}, 'Admin.Actions') }}
        </button>
        <button type="button" class="btn btn-outline-primary float-right js-change-customer-btn d-none">
          {{ 'Change'|trans({}, 'Admin.Actions') }}
        </button>
      </div>
    </div>
  </div>
</div>

<script id="customer-carts-table-row-template" type="text/template">
  <tr>
    <td class="js-cart-id"></td>
    <td class="js-cart-date"></td>
    <td class="js-cart-total"></td>
    <td class="text-right">
      <a
        title="{{ 'View this cart'|trans({}, 'Admin.Orderscustomers.Feature') }}"
        class="btn btn-outline-primary js-cart-details-btn">
        {{ 'Details'|trans({}, 'Admin.Global') }}
      </a>

      <button
        title="{{ 'Use this cart'|trans({}, 'Admin.Orderscustomers.Feature') }}"
        class="btn btn-outline-primary js-use-cart-btn">
        {{ 'Use'|trans({}, 'Admin.Orderscustomers.Feature') }}
      </button>
    </td>
  </tr>
</script>

<script id="customer-orders-table-row-template" type="text/template">
  <tr>
    <td class="js-order-id"></td>
    <td class="js-order-date"></td>
    <td class="js-order-products"></td>
    <td class="js-order-total-paid"></td>
    <td class="js-order-payment-method"></td>
    <td class="js-order-status"></td>
    <td class="text-right">
      <a
        title="{{ 'View this order'|trans({}, 'Admin.Orderscustomers.Feature') }}"
        class="btn btn-outline-secondary js-order-details-btn">
        {{ 'Details'|trans({}, 'Admin.Global') }}
      </a>

      <button
        title="{{ 'Duplicate this order'|trans({}, 'Admin.Orderscustomers.Feature') }}"
        class="btn btn-outline-primary js-use-order-btn">
        {{ 'Use'|trans({}, 'Admin.Orderscustomers.Feature') }}
      </button>
    </td>
  </tr>
</script>

<script id="js-empty-list-row" type="text/template">
  <tr class="empty_row js-empty-row">
    <td colspan="8" class="border-0">
      <div class="text-center grid-table-empty">
        <p class="mb-0 mt-2"><i class="material-icons">warning</i></p>
        <p class="mb-2">{{ 'No records found'|trans({}, 'Admin.Global') }}</p>
      </div>
    </td>
  </tr>
</script>

<script id="js-loading-list-row" type="text/template">
  <tr class="empty_row js-empty-row">
    <td colspan="8" class="border-0">
      <div class="text-center grid-table-empty">
        <p class="mb-0 mt-2"><i class="material-icons">autorenew</i></p>
        <p class="mb-2">{{ 'Loading...'|trans({}, 'Admin.Global') }}</p>
      </div>
    </td>
  </tr>
</script>
