{% extends "panel_base.html" %}

{% block header_title %}{{gettext("New Product Type")}} | {{get_sitename()}}{% endblock %}
{% block title %}{{gettext("New Product Type")}}{% endblock %}

{% block content %}
<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
      <div class="x_title">
        <h2>{{gettext("New Product Type")}}</h2>
        <ul class="nav navbar-left panel_toolbox">
          <li><a class="close-link"><i class="fa fa-close"></i></a>
          </li>
          <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
          </li>            
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <form method="POST" enctype="multipart/form-data">
          <div class="col-md-6">
              <div class="form-group">
                  <label for="name">{{gettext("name")}}</label>
                  <input placeholder="{{gettext('name')}}" type="text" id="name" name="name" required="required" class="form-control" {% if product_type %}value="{{product_type.name}}"{% endif %}>
              </div>
              <div class="divider-dashed"></div>
              <div class="form-group">
                <label for="product_attributes">
                  {{gettext("product type attributes")}} ({{gettext("optional")}})
                </label>
                <select {% if product_type %}data-id="{{product_type.id}}"{% endif %} id="product_attributes" name="product_attributes" class="form-control" multiple="multiple"></select>
              </div>
              <div class="divider-dashed"></div>
              <div class="form-group">
                <label for="product_variants">
                  {{gettext("product type variants")}} ({{gettext("optional")}})
                </label>
                <select {% if product_type %}data-id="{{product_type.id}}"{% endif %} id="product_variants" name="product_variants" class="form-control" multiple="multiple"></select>
              </div>
          </div>
          <div class="col-md-6">
              <div class="form-group">
                <label for="is_shipping_required">{{gettext("is shipping required")}}</label>
                <input placeholder="{{gettext('is shipping required')}}" type="checkbox" id="is_shipping_required" name="is_shipping_required" class="form-check-input" {% if product_type and product_type.is_shipping_required %}checked=""{% endif %}>
              </div>
              <div class="divider-dashed"></div>
              <div class="form-group">
                <label for="is_file_required">{{gettext("is file required")}}</label>
                <input placeholder="{{gettext('is file required')}}" type="checkbox" id="is_file_required" name="is_file_required" class="form-check-input" {% if product_type and product_type.is_file_required %}checked=""{% endif %}>
              </div>
              <div class="divider-dashed"></div>
              <div class="form-group">
                  <label for="has_variants">{{gettext("has variants")}}</label>
                  <input placeholder="{{gettext('has variants')}}" type="checkbox" id="has_variants" name="has_variants" class="form-check-input" {% if product_type and product_type.has_variants %}checked=""{% endif %}>
              </div>
              <div class="divider-dashed"></div>
              <button class="btn btn-success" type="submit">{{gettext("Save")}}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block js_block %}
<script>
{% if product_type %}
var product_variants = [
  {% for attr in product_type.variant_attributes %}
  {id:{{attr.id}}, text: "{{attr.name}}", selected: true},
  {% endfor %}
]
var product_attributes = [
  {% for attr in product_type.product_attributes %}
  {id:{{attr.id}}, text: "{{attr.name}}", selected: true},
  {% endfor %}
]
{% else %}
var product_variants = []
var product_attributes = []
{% endif %}
$(function(){

  $("#product_variants").each(function(){
    var $this = $(this);
    $this.select2({
      ajax: {
        url: '/panel/ecommerce/api/products/attributes/?type=variant&product_type_id='+ $(this).data('id'),
        dataType: 'json'
      },
      multiple: true,
      data: product_variants
    });
  });

  $("#product_attributes").each(function(){
    var $this = $(this);
    $this.select2({
      ajax: {
        url: '/panel/ecommerce/api/products/attributes/?type=attribute&product_type_id='+ $this.data('id'),
        dataType: 'json'
      },
      multiple: true,
      data: product_attributes
    });
  });
});
</script>
{% endblock %}