{{ header }}{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="pull-right">
				<button type="submit" form="form-set" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary">
					<i class="fa fa-save"></i>
				</button>
				<a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default">
					<i class="fa fa-reply"></i>
				</a>
			</div>
			<h1>{{ heading_title }}</h1>
			<ul class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
					<li>
						<a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
					</li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="container-fluid">
		{% if error_warning %}
			<div class="alert alert-danger">
				<i class="fa fa-exclamation-circle"></i>
				{{ error_warning_text }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">
					<i class="fa fa-pencil"></i>
					{{ text_form }}</h3>
			</div>
			<div class="panel-body">
				<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-set" class="form-horizontal">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab-settings" data-toggle="tab">{{ text_settings }}</a></li>
            <li><a href="#tab-links" data-toggle="tab">{{ text_relations }}</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab-settings">
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
              <div class="col-sm-10">
                <div class="toggle-group">
                  <input type="checkbox" name="status" {% if status == "on" %} checked="checked" {% endif %} id="input-status" tabindex="1">
                  <label for="input-status"></label>
                  <div class="onoffswitch pull-left" aria-hidden="true">
                    <div class="onoffswitch-label">
                      <div class="onoffswitch-inner"></div>
                      <div class="onoffswitch-switch"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
              <div class="col-sm-10">
                <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control"/>
                {% if error_name %}
                  <div class="text-danger">{{ error_name_module }}</div>
                {% endif %}
              </div>
            </div>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-product">{{ entry_products_to_show }}</label>
              <div class="col-sm-10">
                <input type="text" name="product-to-show" value="" placeholder="{{ entry_products }}" id="input-product" class="form-control"/>
                {% if error_products_to_show %}
                  <div class="text-danger">{{ error_products_to_show }}</div>
                {% endif %}
                <div id="products-to-show" class="well well-sm" style="height: 250px; overflow: auto;">
                  <table class="table table-bordered" id="product-to-show">
                    <thead>
                      <tr>
                        <th>{{ column_product_name }}</th>
                        <th>{{ column_discount_type }}</th>
                        <th>{{ column_discount_value }}</th>
                        <th>{{ column_qantity }}</th>
                        <th>{{ column_sort_order }}</th>
                        <th>{{ column_delete }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for product in products_to_show %}
                        <tr id="{{ product.product_id }}">
                          <td>{{ product.product_name }}</td>
                          <td>
                            <select class="form-control" name="products_to_show[{{ product.product_id }}][discount_type]">
                              <option value="percentage" {% if product.discount_type == "percentage" %} selected {% endif %}>{{ discount_type_percentage }}</option>
                              <option value="fixed" {% if product.discount_type == "fixed" %} selected {% endif %}>{{ discount_type_fixed }}</option>
                            </select>
                          </td>
                          <td>
                          <input class="form-control" type="text" name="products_to_show[{{ product.product_id }}][discount_value]" value="{{ product.discount_value }}"/><input type="hidden" name="products_to_show[{{ product.product_id }}][product_id]" value="{{ product.product_id }}"/><input type="hidden" name="products_to_show[{{ product.product_id }}][product_name]" value="{{ product.product_name }}"/>
                          {% if error_discount_product_value[product.product_id].discount_value is defined %}
                            <div class="text-danger">{{ error_discount_value }}</div>
                          {% endif %}
                          </td>
                          <td>
                          <input class="form-control" type="text" name="products_to_show[{{ product.product_id }}][product_quantity]" value="{{ product.product_quantity }}"/>
                          </td>
                          <td>
                          <input class="form-control" type="text" name="products_to_show[{{ product.product_id }}][sort_order]" value="{{ product.sort_order }}"/>
                          <input type="hidden" name="products_show_in[{{ product.product_id }}][product_id]" value="{{ product.product_id }}"/>
                          </td>
                          <td>
                            <a class="btn btn-danger" data-toggle="tooltip" data-original-title="{{ button_delete }}" onclick="deleteProduct({{ product.product_id }});"><i class="fa fa-trash-o"></i></a>
                          </td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_date }}</label>
              <div class="col-sm-10">
                <div style="display: flex; gap: 16px; align-items: center;">
                  <div class="date col-sm-4 input-group">
                    <input type="text" name="date_start" value="{{ date_start }}" placeholder="{{ entry_date_start }}" id="input-date-start" class="form-control" data-date-format="YYYY-MM-DD"/>
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-info" data-toggle="tooltip" data-original-title="{{ entry_date_start }}">
                        <i class="fa fa-calendar"></i>
                      </button>
                    </span>
                  </div>
                  <div class="date col-sm-4 input-group">
                    <input type="text" name="date_end" value="{{ date_end }}" placeholder="{{ entry_date_end }}" id="input-date-end" class="form-control" data-date-format="YYYY-MM-DD"/>
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-info" data-toggle="tooltip" data-original-title="{{ entry_date_end }}">
                        <i class="fa fa-calendar"></i>
                      </button>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-sort-order">{{ entry_sort_order }}</label>
              <div class="col-sm-10">
                <input type="text" name="sort_order" value="{{ sort_order }}" placeholder="{{ entry_sort_order }}" id="input-sort-order" class="form-control"/>
                {% if error_sort_order %}
                  <div class="text-danger">{{ error_sort_order_text }}</div>
                {% endif %}
              </div>
            </div>
          </div>
          <div class="tab-pane" id="tab-links">
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-user-group">{{ entry_customer_group }}</label>
              <div class="col-sm-10">
              <div class="well well-sm" style="height: 150px; overflow: auto;">
                {% for customer_group in customer_groups %}
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" name="customer_group_id[]" value="{{ customer_group.customer_group_id }}" {% if customer_group.customer_group_id in selected_customer_groups %} checked {% endif %}>
                      {{ customer_group.name }}
                    </label>
                  </div>
                {% endfor %}
              </div>
              {% if error_customer_group_id %}
                <div class="text-danger">{{ error_c_group_id_text }}</div>
              {% endif %}
              </div>
            </div>
            <div class="form-group required">
              <label class="col-sm-2 control-label" for="input-store">{{ entry_store }}</label>
              <div class="col-sm-10">
              <div class="well well-sm" style="height: 150px; overflow: auto;">
                {% for store in stores %}
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" name="store_id[]" value="{{ store.store_id }}" {% if store.store_id in store_id %} checked {% endif %}>
                      {{ store.name }}
                    </label>
                  </div>
                {% endfor %}
              </div>
              {% if error_store_id %}
                <div class="text-danger">{{ error_store_id_text }}</div>
              {% endif %}
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-category">{{ entry_category }}</label>
              <div class="col-sm-10">
                <input type="text" name="category" value="" placeholder="{{ entry_category }}" id="input-category" class="form-control"/>
                <div id="category-list" class="well well-sm" style="height: 250px; overflow: auto;">
                  {% for item in categories %}
                    <div id="category-{{ item.category_id }}">
                      <i onclick="deleteCategory({{ item.category_id }});" class="fa fa-minus-circle"></i>
                      {{ item.category_name }}
                      <input type="hidden" name="categories[{{ item.category_id }}][category_id]" value="{{ item.category_id }}"/>
                      <input type="hidden" name="categories[{{ item.category_id }}][category_name]" value="{{ item.category_name }}"/>
                    </div>
                  {% endfor %}
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-manufacturer">{{ entry_manufacturer }}</label>
              <div class="col-sm-10">
                <input type="text" name="manufacturer" value="" placeholder="{{ entry_manufacturer }}" id="input-manufacturer" class="form-control"/>
                <div id="manufacturer-list" class="well well-sm" style="height: 250px; overflow: auto;">
                  {% for item in manufacturers %}
                    <div id="manufacturer-{{ item.manufacturer_id }}">
                      <i onclick="deleteManufacturer({{ item.manufacturer_id }});" class="fa fa-minus-circle"></i>
                      {{ item.manufacturer_name }}
                      <input type="hidden" name="manufacturers[{{ item.manufacturer_id }}][manufacturer_id]" value="{{ item.manufacturer_id }}"/>
                      <input type="hidden" name="manufacturers[{{ item.manufacturer_id }}][manufacturer_name]" value="{{ item.manufacturer_name }}"/>
                    </div>
                  {% endfor %}
                </div>
              </div>
            </div>

          </div>
        </div>
				</form>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
    $('input[name=\'manufacturer\']').autocomplete({
        'source': function(request, response) {
            $.ajax({
                url: 'index.php?route=catalog/manufacturer/autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
                dataType: 'json',
                success: function(json) {
                    response($.map(json, function(item) {
                        return {
                            label: item['name'],
                            name: item['name'],
                            value: item['manufacturer_id'],
                            manufacturer_id: item['manufacturer_id']
                        }
                    }));
                }
            });
        },
        'select': function(item) {
            $('#manufacturer-' + item['value']).remove();
            $('#manufacturer-list').append('<div id="manufacturer-' + item['manufacturer_id'] + '"><i onclick="deleteManufacturer(' + item['manufacturer_id'] + ');" class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="manufacturers[' + item['manufacturer_id'] + '][manufacturer_id]" value="' + item['manufacturer_id'] + '" /><input type="hidden" name="manufacturers[' + item['manufacturer_id'] + '][manufacturer_name]" value="' + item['name'] + '" /></div>');
        }
    });
</script>
<script type="text/javascript">
    $('input[name=\'category\']').autocomplete({
        'source': function(request, response) {
            $.ajax({
                url: 'index.php?route=catalog/category/autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
                dataType: 'json',
                success: function(json) {
                    response($.map(json, function(item) {
                        return {
                            label: item['name'],
                            name: item['name'],
                            value: item['category_id'],
                            category_id: item['category_id']
                        }
                    }));
                }
            });
        },
        'select': function(item) {
            $('#category-' + item['value']).remove();
            $('#category-list').append('<div id="category-' + item['category_id'] + '"><i onclick="deleteCategory(' + item['category_id'] + ');" class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="categories[' + item['category_id'] + '][category_id]" value="' + item['category_id'] + '" /><input type="hidden" name="categories[' + item['category_id'] + '][category_name]" value="' + item['name'] + '" /></div>');
        }
    });
</script>
<script type="text/javascript">
  $('input[name=\'product_show_in\']').autocomplete({
    'source': function(request, response) {
      $.ajax({
        url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
        dataType: 'json',
        success: function(json) {
          response($.map(json, function(item) {
            return {
              label: item['name'],
              name: item['name'],
              value: item['product_id'],
              product_id: item['product_id'],
              model: item['model']
            }
          }));
        }
      });
    },
    'select': function(item) {
      $('#product-show-in-' + item['value']).remove();
      $('#product-show-in').append('<div id="product-show-in-' + item['product_id'] + '"><i onclick="deleteProductShowIn(' + item['product_id'] + ');" class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="products_show_in[' + item['product_id'] + '][product_id]" value="' + item['product_id'] + '" /><input type="hidden" name="products_show_in[' + item['product_id'] + '][product_name]" value="' + item['name'] + '" /></div>');
    }
  });
</script>
<script type="text/javascript">
  $('input[name=\'product-to-show\']').autocomplete({
    'source': function(request, response) {
      $.ajax({
        url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
        dataType: 'json',
        success: function(json) {
          response($.map(json, function(item) {
            return {
              label: item['name'],
              name: item['name'],
              value: item['product_id'],
              product_id: item['product_id'],
              model: item['model']
            }
          }));
        }
      });
    },
    'select': function(item) {
      let alreadyExist = $('#products-to-show tr#' + item['product_id']).length;
      if (!alreadyExist) {
        deleteProduct(item['product_id']);
        $('#product-to-show tbody').append('<tr id="' + item['product_id'] + '"><td>' + item['name'] + '</td><td><select class="form-control" name="products_to_show[' + item['product_id'] + '][discount_type]"><option value="percentage">{{ discount_type_percentage }}</option><option value="fixed">{{ discount_type_fixed }}</option></select></td><td><input class="form-control" type="text" name="products_to_show[' + item['product_id'] + '][discount_value]" value="0" /><input type="hidden" name="products_to_show[' + item['product_id'] + '][product_id]" value="' + item['product_id'] + '" /><input type="hidden" name="products_to_show[' + item['product_id'] + '][product_name]" value="' + item['name'] + ' (' + item['model'] + ')" /></td><td><input class="form-control" type="text" name="products_to_show[' + item['product_id'] + '][product_quantity]" value="1" /><input type="hidden" name="products_show_in[' + item['product_id'] + '][product_id]" value="{{ product.product_id }}"/></td><td><input class="form-control" type="text" name="products_to_show[' + item['product_id'] + '][sort_order]" value="0" /></td><td><a class="btn btn-danger" data-toggle="tooltip" data-original-title="{{ button_delete }}" onclick="deleteProduct(' + item['product_id'] + ');"><i class="fa fa-trash-o"></i></a></td></tr>');
      }
    }
  });
</script>
<script>
<!--
$('.date').datetimepicker({
  pickTime: false
});

$('.time').datetimepicker({
  pickDate: false
});

$('.datetime').datetimepicker({
  pickDate: true,
  pickTime: true
});
//-->
</script>
<script type="text/javascript">
  function deleteProduct(product_id) {
      $('#products-to-show tr#' + product_id).remove();
  }
  function deleteProductShowIn(product_id) {
    $('#product-show-in-' + product_id).remove();
  }
  function deleteCategory(category_id) {
    $('#category-' + category_id).remove();
  }
  function deleteManufacturer(manufacturer_id) {
    $('#manufacturer-' + manufacturer_id).remove();
  }
</script>
{{ footer }}