<ul class="isl-nodetree">
  <li>
    <div>

      <div class="isl-margin">
        Select a category to apply this discount to:
      </div>
      <div class="isl-margin isl-w-l">
        <input type="text" placeholder="Type category name" data-isl-autocomplete='{"type":"category", "target":"isl-autocomplete-a", "name":"<?php echo $module_setting; ?>[condition_category_ids][]"}' class="form-control input-sm">
        <div class="well well-sm isl-well isl-autocomplete-a">
          <?php foreach ($condition_category_ids_data as $category) { ?>
            <div class="isl-autocomplete-a<?php echo $category['category_id']; ?>"><i class="fa fa-minus-circle pointer"></i> <?php echo $category['path'] ? $category['path'] . '&nbsp;&nbsp;&gt;&nbsp;&nbsp;' . $category['name'] : $category['name']; ?><input type="hidden" name="<?php echo $module_setting; ?>[condition_category_ids][]" value="<?php echo $category['category_id']; ?>"></div>
          <?php } ?>
        </div>
      </div>

    </div>
  </li>
  <li>
    <div>

      <div class="isl-margin">
        Create tiered
        <select name="<?php echo $module_setting; ?>[discount_type]" class="form-control input-sm isl-inline-block isl-w-xs isl-mh-5">
          <option value="fixed" <?php echo $setting['item']['discount_type'] == 'fixed' ? 'selected' : ''; ?>><?php echo $currency; ?></option>
          <option value="percentage" <?php echo $setting['item']['discount_type'] == 'percentage' ? 'selected' : ''; ?>>%</option>
        </select>
        off discount:
      </div>
      <div class="isl-margin isl-w-l">
        <table class="table table-hover">
          <thead>
            <tr>
              <th style="width:140px">Minimum Qty</th>
              <th>Discount value</th>
              <th class="text-center" style="width:50px">
                <a class="btn btn-sm btn-primary btn-add-tier btn-xs"><i class="fa fa-plus"></i></a>
              </th>
            </tr>
          </thead>
          <tbody class="xoffitemsinycategoriestiered-table">
            <?php if (!$condition_min_quantities_data) { ?>
              <tr>
                <td>
                  <input type="number" name="<?php echo $module_setting; ?>[condition_min_quantities][]" value="1" min="1" class="form-control input-sm isl-inline-block isl-w-xs isl-mh-5" required>
                </td>
                <td>
                  <input type="text" name="<?php echo $module_setting; ?>[discount_values][]" value="" class="form-control input-sm isl-inline-block isl-w-s isl-mh-5" required>
                </td>
                <td class="text-center"></td>
              </tr>
            <?php } ?>

            <?php $i=0; foreach ($condition_min_quantities_data as $tier) { ?>
              <tr>
                <td>
                  <input type="number" name="<?php echo $module_setting; ?>[condition_min_quantities][]" value="<?php echo $tier['quantity']; ?>" min="1" class="form-control input-sm isl-inline-block isl-w-xs isl-mh-5" required>
                </td>
                <td>
                  <input type="text" name="<?php echo $module_setting; ?>[discount_values][]" value="<?php echo $tier['discount']; ?>" class="form-control input-sm isl-inline-block isl-w-s isl-mh-5" required>
                </td>
                <td class="text-center">
                  <?php if ($i > 0) { ?>
                    <a class="btn btn-sm btn-danger btn-remove-tier btn-xs"><i class="fa fa-minus"></i></a>
                  <?php } ?>
                </td>
              </tr>
            <?php $i++; } ?>
          </tbody>
        </table>
      </div>

    </div>
  </li>
</ul>

<template id="tier-template" class="hidden" hidden>
<tr>
  <td>
    <input type="number" name="<?php echo $module_setting; ?>[condition_min_quantities][]" value="1" min="1" class="form-control input-sm isl-inline-block isl-w-xs isl-mh-5" required>
  </td>
  <td>
    <input type="text" name="<?php echo $module_setting; ?>[discount_values][]" value="" class="form-control input-sm isl-inline-block isl-w-s isl-mh-5" required>
  </td>
  <td class="text-center">
    <a class="btn btn-sm btn-danger btn-remove-tier btn-xs"><i class="fa fa-minus"></i></a>
  </td>
</tr>
</template>

<script>
$(document).trigger('isl.autocomplete');

$('.btn-add-tier').on('click', function () {
  var tier = $('#tier-template').html();
  $('.xoffitemsinycategoriestiered-table').append(tier);
});

$('.xoffitemsinycategoriestiered-table').on('click', '.btn-remove-tier', function () {
  $(this).closest('tr').remove();
});
</script>
