<div class="modal-header">
  <button type="button" class="pull-right btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
  <h4 class="modal-title">{{ product_name }} - {{ tab_option }}</h4>
</div>
<div class="modal-body">
  <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-product-option" class="form-horizontal">
	<div class="tab-pane" id="tab-option">
      <div class="row">
		<div class="col-sm-3">
          <ul class="nav nav-pills nav-stacked" id="option">
            {% set option_row = 0 %}
            {% for product_option in product_options %}
              <li><a href="#tab-option{{ option_row }}" data-toggle="tab"><span class="btn btn-danger opt-btn btn-sm" onclick="$('a[href=\'#tab-option{{ option_row }}\']').parent().remove(); $('#tab-option{{ option_row }}').remove(); $('#option a:first').tab('show');"><i class="fa fa-minus-circle"></i></span> {{ product_option.name }}</a></li>
              {% set option_row = option_row + 1 %}
            {% endfor %}
            <li><input type="text" name="option" value="" placeholder="{{ entry_option }}" id="input-option" class="form-control" /></li>
          </ul>
        </div>
        <div class="col-sm-9">
          <div class="tab-content"> {% set option_row = 0 %}
            {% set option_value_row = 0 %}
            {% for product_option in product_options %}
              <div class="tab-pane" id="tab-option{{ option_row }}">
                <input type="hidden" name="product_option[{{ option_row }}][product_option_id]" value="{{ product_option.product_option_id }}" />
                <input type="hidden" name="product_option[{{ option_row }}][name]" value="{{ product_option.name }}" />
                <input type="hidden" name="product_option[{{ option_row }}][option_id]" value="{{ product_option.option_id }}" />
                <input type="hidden" name="product_option[{{ option_row }}][type]" value="{{ product_option.type }}" />
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-required{{ option_row }}">{{ entry_required }}</label>
                  <div class="col-sm-10">
                    <select name="product_option[{{ option_row }}][required]" id="input-required{{ option_row }}" class="form-control">
                      {% if product_option.required %}
						<option value="1" selected="selected">{{ text_yes }}</option>
                        <option value="0">{{ text_no }}</option>
                        {% else %}
						<option value="1">{{ text_yes }}</option>
                        <option value="0" selected="selected">{{ text_no }}</option>
                      {% endif %}
					</select>
                  </div>
                </div>
                {% if product_option.type == 'text' %}
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-value{{ option_row }}" class="form-control" />
                    </div>
                  </div>
                {% endif %}
                {% if product_option.type == 'textarea' %}
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                    <div class="col-sm-10">
                      <textarea name="product_option[{{ option_row }}][value]" rows="5" placeholder="{{ entry_option_value }}" id="input-value{{ option_row }}" class="form-control">{{ product_option.value }}</textarea>
                    </div>
                  </div>
                {% endif %}
                {% if product_option.type == 'file' %}
                  <div class="form-group" style="display: none;">
                    <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-value{{ option_row }}" class="form-control" />
                    </div>
                  </div>
                {% endif %}
                {% if product_option.type == 'date' %}
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                    <div class="col-sm-3">
                      <div class="input-group date">
                        <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" data-date-format="YYYY-MM-DD" id="input-value{{ option_row }}" class="form-control" />
                        <span class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button></span>
					  </div>
                    </div>
                  </div>
                {% endif %}
                {% if product_option.type == 'time' %}
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                    <div class="col-sm-10">
                      <div class="input-group time">
                        <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" data-date-format="HH:mm" id="input-value{{ option_row }}" class="form-control" />
                        <span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span>
					  </div>
                    </div>
                  </div>
                {% endif %}
                {% if product_option.type == 'datetime' %}
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-value{{ option_row }}">{{ entry_option_value }}</label>
                    <div class="col-sm-10">
                      <div class="input-group datetime">
                        <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-value{{ option_row }}" class="form-control" />
                        <span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span>
					  </div>
                    </div>
                  </div>
                {% endif %}
                {% if product_option.type == 'select' or product_option.type == 'radio' or product_option.type == 'checkbox' or product_option.type == 'image' %}
                  <div class="table-responsive">
                    <table id="option-value{{ option_row }}" class="table table-striped table-bordered table-hover">
                      <thead>
                        <tr>
                          <td class="text-left">{{ entry_option_value }}</td>
                          <td class="text-right">{{ entry_quantity }}</td>
                          <td class="text-left">{{ entry_subtract }}</td>
                          <td class="text-right">{{ entry_price }}</td>
                          <td class="text-right">{{ entry_option_points }}</td>
                          <td class="text-right">{{ entry_weight }}</td>
                          <td></td>
                        </tr>
                      </thead>
                      <tbody>
                        {% for product_option_value in product_option.product_option_value %}
                          <tr id="option-value-row{{ option_value_row }}">
                            <td class="text-left">
							  <select name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][option_value_id]" class="form-control">
                                {% if option_values[product_option.option_id] %}
								  {% for option_value in option_values[product_option.option_id] %}
									{% if option_value.option_value_id == product_option_value.option_value_id %}
									  <option value="{{ option_value.option_value_id }}" selected="selected">{{ option_value.name }}</option>
									  {% else %}
									  <option value="{{ option_value.option_value_id }}">{{ option_value.name }}</option>
									{% endif %}
                                  {% endfor %}
                                {% endif %}
							  </select>
                              <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][product_option_value_id]" value="{{ product_option_value.product_option_value_id }}" />
							</td>
                            <td class="text-right"><input type="text" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][quantity]" value="{{ product_option_value.quantity }}" placeholder="{{ entry_quantity }}" class="form-control" /></td>
                            <td class="text-left">
							  <select name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][subtract]" class="form-control">
                                {% if product_option_value.subtract %}
								  <option value="1" selected="selected">{{ text_yes }}</option>
                                  <option value="0">{{ text_no }}</option>
                                  {% else %}
								  <option value="1">{{ text_yes }}</option>
                                  <option value="0" selected="selected">{{ text_no }}</option>
                                {% endif %}
                              </select>
							</td>
                            <td class="text-right">
							  <select name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][price_prefix]" class="form-control">
                                {% if product_option_value.price_prefix == '+' %}
								  <option value="+" selected="selected">+</option>
                                  {% else %}
								  <option value="+">+</option>
                                {% endif %}
                                {% if product_option_value.price_prefix == '-' %}
								  <option value="-" selected="selected">-</option>
                                  {% else %}
								  <option value="-">-</option>
                                {% endif %}
                              </select>
                              <input type="text" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][price]" value="{{ product_option_value.price }}" placeholder="{{ entry_price }}" class="form-control" />
							</td>
                            <td class="text-right">
							  <select name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][points_prefix]" class="form-control">
                                {% if product_option_value.points_prefix == '+' %}
								  <option value="+" selected="selected">+</option>
                                  {% else %}
								  <option value="+">+</option>
                                {% endif %}
                                {% if product_option_value.points_prefix == '-' %}
								  <option value="-" selected="selected">-</option>
                                  {% else %}
								  <option value="-">-</option>
                                {% endif %}
                              </select>
                              <input type="text" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][points]" value="{{ product_option_value.points }}" placeholder="{{ entry_points }}" class="form-control" />
							</td>
                            <td class="text-right">
							  <select name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][weight_prefix]" class="form-control">
                                {% if product_option_value.weight_prefix == '+' %}
								  <option value="+" selected="selected">+</option>
                                  {% else %}
								  <option value="+">+</option>
                                {% endif %}
                                {% if product_option_value.weight_prefix == '-' %}
								  <option value="-" selected="selected">-</option>
                                  {% else %}
								  <option value="-">-</option>
                                {% endif %}
                              </select>
                              <input type="text" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][weight]" value="{{ product_option_value.weight }}" placeholder="{{ entry_weight }}" class="form-control" />
							</td>
                            <td class="text-right"><button type="button" onclick="$(this).tooltip('destroy');$('#option-value-row{{ option_value_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
                          </tr>
                          {% set option_value_row = option_value_row + 1 %}
                        {% endfor %}
                      </tbody>
                      <tfoot>
                        <tr>
                          <td colspan="6"></td>
                          <td class="text-left"><button type="button" onclick="addOptionValue('{{ option_row }}');" data-toggle="tooltip" title="{{ button_option_value_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                  <select id="option-values{{ option_row }}" style="display: none;">
                    {% if option_values[product_option.option_id] %}
                      {% for option_value in option_values[product_option.option_id] %}
						<option value="{{ option_value.option_value_id }}">{{ option_value.name }}</option>
                      {% endfor %}
                    {% endif %}
				  </select>
                {% endif %}
			  </div>
              {% set option_row = option_row + 1 %}
            {% endfor %}
		  </div>
        </div>
      </div>
    </div>
  </form>
</div>
<div class="modal-footer">
  <div class="text-center"><a data-form="form-product-option" class="button-save btn btn-primary"><i class="fa fa-save"></i> {{ button_save }}</a></div>
</div>
<script type="text/javascript"><!--
$(".button-save").on('click', function(){
	$.ajax({
		url: $('#' + $(this).data('form')).attr('action'),
		type: 'post',
		dataType: 'json',
		data: $('#' + $(this).data('form') + ' input[type="text"], #' + $(this).data('form') + ' input[type="hidden"], #' + $(this).data('form') + ' input[type="checkbox"]:checked , #' + $(this).data('form') + ' input[type="radio"]:checked, #' + $(this).data('form') + ' textarea, #' + $(this).data('form') + ' select'),
		success: function(json) {
			if (json['error']) {
				$('#form-product-option').before('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
				
				$('.alert-danger').delay(1500).fadeOut(500);
			}
			
			if (json['success']) {
				$('#form-product-option').before('<div class="alert alert-success"><i class="fa fa-exclamation-circle"></i> ' + json['success'] + '</div>');			
									
				setTimeout(function(){
					$('#modal-product-edit').modal('hide');
				}, 1000)
			}
		}
	});
});   
//--></script>
<script type="text/javascript"><!--
var option_row = {{ option_row }};

$('input[name=\'option\']').autocomplete({
	'source': function(request, response) {
		$.ajax({
			url: 'index.php?route=catalog/option/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
			dataType: 'json',
			success: function(json) {
				response($.map(json, function(item) {
					return {
						category: item['category'],
						label: item['name'],
						value: item['option_id'],
						type: item['type'],
						option_value: item['option_value']
					}
				}));
			}
		});
	},
	'select': function(item) {
		html  = '<div class="tab-pane" id="tab-option' + option_row + '">';
		html += '	<input type="hidden" name="product_option[' + option_row + '][product_option_id]" value="" />';
		html += '	<input type="hidden" name="product_option[' + option_row + '][name]" value="' + item['label'] + '" />';
		html += '	<input type="hidden" name="product_option[' + option_row + '][option_id]" value="' + item['value'] + '" />';
		html += '	<input type="hidden" name="product_option[' + option_row + '][type]" value="' + item['type'] + '" />';

		html += '	<div class="form-group">';
		html += '	  <label class="col-sm-2 control-label" for="input-required' + option_row + '">{{ entry_required }}</label>';
		html += '	  <div class="col-sm-10"><select name="product_option[' + option_row + '][required]" id="input-required' + option_row + '" class="form-control">';
		html += '	      <option value="1">{{ text_yes }}</option>';
		html += '	      <option value="0">{{ text_no }}</option>';
		html += '	  </select></div>';
		html += '	</div>';

		if (item['type'] == 'text') {
			html += '	<div class="form-group">';
			html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
			html += '	  <div class="col-sm-10"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value }}" id="input-value' + option_row + '" class="form-control" /></div>';
			html += '	</div>';
		}

		if (item['type'] == 'textarea') {
			html += '	<div class="form-group">';
			html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
			html += '	  <div class="col-sm-10"><textarea name="product_option[' + option_row + '][value]" rows="5" placeholder="{{ entry_option_value }}" id="input-value' + option_row + '" class="form-control"></textarea></div>';
			html += '	</div>';
		}

		if (item['type'] == 'file') {
			html += '	<div class="form-group" style="display: none;">';
			html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
			html += '	  <div class="col-sm-10"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value }}" id="input-value' + option_row + '" class="form-control" /></div>';
			html += '	</div>';
		}

		if (item['type'] == 'date') {
			html += '	<div class="form-group">';
			html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
			html += '	  <div class="col-sm-3"><div class="input-group date"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value }}" data-date-format="YYYY-MM-DD" id="input-value' + option_row + '" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></div>';
			html += '	</div>';
		}

		if (item['type'] == 'time') {
			html += '	<div class="form-group">';
			html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
			html += '	  <div class="col-sm-10"><div class="input-group time"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value }}" data-date-format="HH:mm" id="input-value' + option_row + '" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></div>';
			html += '	</div>';
		}

		if (item['type'] == 'datetime') {
			html += '	<div class="form-group">';
			html += '	  <label class="col-sm-2 control-label" for="input-value' + option_row + '">{{ entry_option_value }}</label>';
			html += '	  <div class="col-sm-10"><div class="input-group datetime"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-value' + option_row + '" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></div>';
			html += '	</div>';
		}

		if (item['type'] == 'select' || item['type'] == 'radio' || item['type'] == 'checkbox' || item['type'] == 'image') {
			html += '<div class="table-responsive">';
			html += '  <table id="option-value' + option_row + '" class="table table-striped table-bordered table-hover">';
			html += '  	 <thead>';
			html += '      <tr>';
			html += '        <td class="text-left">{{ entry_option_value }}</td>';
			html += '        <td class="text-right">{{ entry_quantity }}</td>';
			html += '        <td class="text-left">{{ entry_subtract }}</td>';
			html += '        <td class="text-right">{{ entry_price }}</td>';
			html += '        <td class="text-right">{{ entry_option_points }}</td>';
			html += '        <td class="text-right">{{ entry_weight }}</td>';
			html += '        <td></td>';
			html += '      </tr>';
			html += '  	 </thead>';
			html += '  	 <tbody>';
			html += '    </tbody>';
			html += '    <tfoot>';
			html += '      <tr>';
			html += '        <td colspan="6"></td>';
			html += '        <td class="text-left"><button type="button" onclick="addOptionValue(' + option_row + ');" data-toggle="tooltip" title="{{ button_option_value_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>';
			html += '      </tr>';
			html += '    </tfoot>';
			html += '  </table>';
			html += '</div>';

            html += '  <select id="option-values' + option_row + '" style="display: none;">';

            for (i = 0; i < item['option_value'].length; i++) {
				html += '  <option value="' + item['option_value'][i]['option_value_id'] + '">' + item['option_value'][i]['name'] + '</option>';
            }

            html += '  </select>';
			html += '</div>';
		}

		$('#tab-option .tab-content').append(html);

		$('#option > li:last-child').before('<li><a href="#tab-option' + option_row + '" data-toggle="tab"><span class="btn btn-danger opt-btn btn-sm" onclick=" $(\'#option a:first\').tab(\'show\');$(\'a[href=\\\'#tab-option' + option_row + '\\\']\').parent().remove(); $(\'#tab-option' + option_row + '\').remove();"><i class="fa fa-minus-circle"></i></span>' + item['label'] + '</li>');

		$('#option a[href=\'#tab-option' + option_row + '\']').tab('show');

		$('[data-toggle=\'tooltip\']').tooltip({
			container: 'body',
			html: true
		});

		$('.date').datetimepicker({
			language: '{{ datepicker }}',
			pickTime: false
		});

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

		$('.datetime').datetimepicker({
			language: '{{ datepicker }}',
			pickDate: true,
			pickTime: true
		});

		option_row++;
	}
});
//--></script> 
  <script type="text/javascript"><!--
var option_value_row = {{ option_value_row }};

function addOptionValue(option_row) {
	html  = '<tr id="option-value-row' + option_value_row + '">';
	html += '  <td class="text-left"><select name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][option_value_id]" class="form-control">';
	html += $('#option-values' + option_row).html();
	html += '  </select><input type="hidden" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][product_option_value_id]" value="" /></td>';
	html += '  <td class="text-right"><input type="text" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][quantity]" value="" placeholder="{{ entry_quantity }}" class="form-control" /></td>';
	html += '  <td class="text-left"><select name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][subtract]" class="form-control">';
	html += '    <option value="1">{{ text_yes }}</option>';
	html += '    <option value="0">{{ text_no }}</option>';
	html += '  </select></td>';
	html += '  <td class="text-right"><select name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][price_prefix]" class="form-control">';
	html += '    <option value="+">+</option>';
	html += '    <option value="-">-</option>';
	html += '  </select>';
	html += '  <input type="text" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][price]" value="" placeholder="{{ entry_price }}" class="form-control" /></td>';
	html += '  <td class="text-right"><select name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][points_prefix]" class="form-control">';
	html += '    <option value="+">+</option>';
	html += '    <option value="-">-</option>';
	html += '  </select>';
	html += '  <input type="text" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][points]" value="" placeholder="{{ entry_points }}" class="form-control" /></td>';
	html += '  <td class="text-right"><select name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][weight_prefix]" class="form-control">';
	html += '    <option value="+">+</option>';
	html += '    <option value="-">-</option>';
	html += '  </select>';
	html += '  <input type="text" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][weight]" value="" placeholder="{{ entry_weight }}" class="form-control" /></td>';
	html += '  <td class="text-left"><button type="button" onclick="$(this).tooltip(\'destroy\');$(\'#option-value-row' + option_value_row + '\').remove();" data-toggle="tooltip" rel="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
	html += '</tr>';

	$('#option-value' + option_row + ' tbody').append(html);
	$('[rel=tooltip]').tooltip();

	option_value_row++;
}
//--></script> 
  <script type="text/javascript"><!--
$('.date').datetimepicker({
	language: '{{ datepicker }}',
	pickTime: false
});

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

$('.datetime').datetimepicker({
	language: '{{ datepicker }}',
	pickDate: true,
	pickTime: true
});
//--></script> 
  <script type="text/javascript"><!--
$('#option a:first').tab('show');
//--></script>
