{#
 # 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 d-none" id="cart-block">
  <h3 class="card-header">{{ 'Cart'|trans({}, 'Admin.Orderscustomers.Feature') }}</h3>
  <div class="card-body">
    <div class="alert alert-danger d-none" id="js-cart-error-block">
      <div class="alert-text"></div>
    </div>
    <div class="row">
      <label class="col-md-6 col-xl-3 text-md-right col-form-label" for="product-search">{{ 'Search for a product'|trans({}, 'Admin.Orderscustomers.Feature') }}</label>
      <div class="col-md-6 col-xl-4">
        <input id="product-search" type="text" class="form-control">
        <small class="form-text">
          {{ 'Search for an existing product by typing the first letters of its name.'|trans({}, 'Admin.Orderscustomers.Help') }}
        </small>
      </div>
    </div>

    <div class="js-no-products-found d-none">
        <div class="alert alert-danger" role="alert">
          <p class="alert-text">{{ 'No products found'|trans({}, 'Admin.Orderscustomers.Notification') }}</p>
        </div>
    </div>

    <div class="js-searching-products d-none">
        <div class="alert alert-info" role="alert">
          <p class="alert-text">{{ 'Searching for products'|trans({}, 'Admin.Orderscustomers.Notification') }}</p>
        </div>
    </div>

    <hr class="mt-3 mb-3">

        <div id="product-search-results" class="d-none">
          <form id="js-add-product-form">

            <div class="row js-product-select-row">
              <label class="col-md-6 col-xl-3 text-md-right col-form-label" for="product-select">{{ 'Product'|trans({}, 'Admin.Global') }}</label>
              <div class="col-md-6 col-xl-4">
                <select name="product_id" id="product-select" class="form-control custom-select" data-customization-label="{{ 'Customization'|trans({}, 'Admin.Catalog.Feature') }}"></select>
              </div>
            </div>

            <div class="row mt-3 js-combinations-row d-none">
              <label class="col-md-6 col-xl-3 text-md-right col-form-label" for="combination-select">{{ 'Combination'|trans({}, 'Admin.Global') }}</label>
              <div class="col-md-6 col-xl-4">
                <select name="combination_id" id="combination-select" class="form-control custom-select"></select>
              </div>
            </div>

            <div class="row mt-3 d-none" id="js-customization-container">
              <span class="col-md-6 col-xl-3 text-md-right col-form-label">{{ 'Customization'|trans({}, 'Admin.Catalog.Feature') }}</span>
              <div class="col-md-6 col-xl-4 custom-fields-container" id="js-custom-fields-container"></div>
            </div>

            <div class="row mt-3 js-quantity-row">
              <label class="col-md-6 col-xl-3 text-md-right col-form-label" for="quantity-input">{{ 'Quantity'|trans({}, 'Admin.Global') }}</label>
              <div class="col-6 col-xl-3">
                <input name="product_quantity" id="quantity-input" type="number" min="1" value="1" class="form-control">
                {% if stockManagementEnabled %}
                  <small class="form-text">
                    {{ 'In stock'|trans({}, 'Admin.Orderscustomers.Feature') }}
                    <span class="js-in-stock-counter"></span>
                  </small>
                {% endif %}
              </div>
            </div>
            <div class="row mt-3">
              <div class="col-md-6 offset-md-6 offset-xl-3">
                <button id="add-product-to-cart-btn" type="button" class="btn btn-primary">
                  {{ 'Add to cart'|trans({}, 'Admin.Orderscustomers.Feature') }}
                </button>
              </div>
            </div>

          </form>
          <hr>
        </div>
        <div class="js-no-records-found"></div>
          <div class="table-responsive">
            <table id="products-table" class="table d-none">
              <thead>
              <tr>
                <th>{{ 'Product'|trans({}, 'Admin.Global') }}</th>
                <th>{{ 'Description'|trans({}, 'Admin.Global') }}</th>
                <th>{{ 'Reference'|trans({}, 'Admin.Global') }}</th>
                <th>{{ 'Price per unit'|trans({}, 'Admin.Catalog.Feature') }}</th>
                <th>{{ 'Quantity'|trans({}, 'Admin.Global') }}</th>
                <th>{{ 'Price'|trans({}, 'Admin.Global') }}</th>
                <th></th>
              </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        <div class="row js-tax-warning d-none">
          <div class="col-xl-6 offset-xl-3">
            <div class="alert alert-warning">
              <div class="alert-text">
                {{ 'The prices are without taxes.'|trans({}, 'Admin.Orderscustomers.Notification') }}
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <label class="col-md-6 col-xl-3 text-md-right col-form-label" for="js-cart-currency-select">{{ 'Currency'|trans({}, 'Admin.Global') }}</label>
          <div class="col-md-6 col-xl-4">
            <select class="form-control custom-select" id="js-cart-currency-select">
              {% for name, id in currencies %}
                <option value="{{ id }}">{{ name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="row mt-3">
          <label class="col-md-6 col-xl-3 text-md-right col-form-label" for="js-cart-language-select">{{ 'Language'|trans({}, 'Admin.Global') }}</label>
          <div class="col-md-6 col-xl-4">
            <select class="form-control custom-select" id="js-cart-language-select">
              {% for name, id in languages %}
                <option value="{{ id }}">{{ name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
  </div>
</div>

{% set requiredFieldMarkTemplate %}
  <span class="js-required-field-mark text-danger d-none">*</span>
{% endset %}

<script id="js-product-custom-text-template" type="text/template">
  <div class="js-product-custom-text">
    {{ requiredFieldMarkTemplate }}
    <label for="" class="js-product-custom-input-label"></label>
    <input name="" type="text" class="form-control js-product-custom-input">
  </div>
</script>

<script id="js-product-custom-file-template" type="text/template">
  <div class="mt-3">
      {{ requiredFieldMarkTemplate }}
      <label for="" class="js-product-custom-input-label"></label>
      <div class="custom-file">
        <input name="" type="file" class="custom-file-input js-product-custom-input">
        <label class="custom-file-label">
          {{ 'Choose file(s)'|trans({}, 'Admin.Actions') }}
        </label>
      </div>
  </div>
</script>

<script id="products-table-row-template" type="text/template">
  <tr>
    <td><img class="js-product-image" src="" alt=""></td>
    <td class="js-product-definition-td">
      <p class="mb-0 js-product-name"></p>
      <p class="js-product-attr"></p>
    </td>
    <td class="js-product-ref"></td>
    <td><input class="form-control js-product-unit-input" type="text"></td>
    <td>
      <input type="number" min="1" class="form-control js-product-qty-input" style="max-width: 100px;{% if not stockManagementEnabled %}margin-top:0px;{% endif %}">
      {% if stockManagementEnabled %}
        <small class="form-text">
          {{ 'In stock'|trans({}, 'Admin.Orderscustomers.Feature') }}
          <span class="js-product-qty-stock"></span>
        </small>
      {% endif %}
    </td>
    <td class="js-product-total-price"></td>
    <td class="text-right">
      <button class="btn btn-outline-danger js-product-remove-btn">{{ 'Remove'|trans({}, 'Admin.Actions') }}</button>
    </td>
  </tr>
</script>

<script id="products-table-gift-row-template" type="text/template">
  <tr>
    <td><img class="js-product-image" src="" alt=""></td>
    <td class="js-product-definition-td">
      <p class="mb-0 js-product-name"></p>
      <p class="js-product-attr"></p>
    </td>
    <td class="js-product-ref"></td>
    <td>{{ 'Gift'|trans({}, 'Admin.Orderscustomers.Feature') }}</td>
    <td class="js-product-gift-qty"></td>
    <td class="js-product-total-price">{{ 'Gift'|trans({}, 'Admin.Orderscustomers.Feature') }}</td>
    <td></td>
  </tr>
</script>

<script type="text/template" id="js-table-product-customized-text-template">
  <div class="row">
    <small class="col d-inline">
      <span class="js-customization-name"></span>
      <span>: </span>
      <span class="js-customization-value"></span>
    </small>
  </div>
</script>

<script type="text/template" id="js-table-product-customized-file-template">
  <div class="row">
    <small class="col d-inline">
      <span class="js-customization-name"></span>
      <span>: </span>
      <span class="js-customization-value"> <img src="" alt=""></span>
    </small>
  </div>
</script>
