<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_special }}</h4>
</div>
<div class="modal-body">
  <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-product-price-special" class="form-horizontal">
	<table id="special-modal" class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <td class="text-center" style="width: 20%;">{{ entry_customer_group }}</td>
          <td class="text-right" style="width: 10%;">{{ entry_priority }}</td>
          <td class="text-right" style="width: 20%;">{{ entry_price }}</td>
          <td class="text-left" style="width: 25%;">{{ entry_date_start }}</td>
          <td class="text-left" style="width: 25%;">{{ entry_date_end }}</td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        {% set special_row = 0 %}
        {% for product_special in product_specials %}
          <tr id="special-modal-row{{ special_row }}">
            <td class="text-left">
			  <select name="product_special[{{ special_row }}][customer_group_id]" class="form-control">
                {% for customer_group in customer_groups %}
                  {% if customer_group.customer_group_id == product_special.customer_group_id %}
					<option value="{{ customer_group.customer_group_id }}" selected="selected">{{ customer_group.name }}</option>
					{% else %}
					<option value="{{ customer_group.customer_group_id }}">{{ customer_group.name }}</option>
				  {% endif %}
				{% endfor %}
              </select>
			</td>
            <td class="text-right"><input type="text" name="product_special[{{ special_row }}][priority]" value="{{ product_special.priority }}" placeholder="{{ entry_priority }}" class="form-control" /></td>
            <td class="text-right"><input type="text" name="product_special[{{ special_row }}][price]" value="{{ product_special.price }}" placeholder="{{ entry_price }}" class="form-control" /></td>
            <td class="text-left" style="width: 20%;">
			  <div class="input-group date">
                <input type="text" name="product_special[{{ special_row }}][date_start]" value="{{ product_special.date_start }}" placeholder="{{ entry_date_start }}" data-date-format="YYYY-MM-DD" class="form-control" />
                <span class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button></span>
			  </div>
			</td>
            <td class="text-left" style="width: 20%;">
			  <div class="input-group date">
                <input type="text" name="product_special[{{ special_row }}][date_end]" value="{{ product_special.date_end }}" placeholder="{{ entry_date_end }}" data-date-format="YYYY-MM-DD" class="form-control" />
                <span class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button></span>
			  </div>
			</td>
            <td class="text-left"><button type="button" onclick="$('#special-modal-row{{ special_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
          </tr>
          {% set special_row = special_row + 1 %}
        {% endfor %}
      </tbody>
	  <tfoot>
        <tr>
          <td colspan="5"></td>
          <td class="text-left"><button type="button" onclick="addSpecial();" data-toggle="tooltip" title="{{ button_special_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
        </tr>
      </tfoot>
    </table>
  </form>
</div>
<div class="modal-footer">
  <div class="text-center"><a data-form="form-product-price-special" 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') + ' select'),
		success: function(json) {
			if (json['error']) {
				$('#form-product-price-special').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-price-special').before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');			
				
				setTimeout(function(){
					$('#modal-product-edit').modal('hide');
					$('#product-price{{ product_id }}').load('index.php?route=editors/product_edit/loadPrice&user_token={{ user_token }}&product_id={{ product_id }}');	
					$('#product-price-special{{ product_id }}').load('index.php?route=editors/product_edit/loadPriceSpecial&user_token={{ user_token }}&product_id={{ product_id }}');
				}, 1000)
			}
		}
	});
});  
//--></script>
  <script type="text/javascript"><!--
var special_row = {{ special_row }};

function addSpecial() {
	html  = '<tr id="special-modal-row' + special_row + '">';
    html += '  <td class="text-left"><select name="product_special[' + special_row + '][customer_group_id]" class="form-control">';
    {% for customer_group in customer_groups %}
    html += '      <option value="{{ customer_group.customer_group_id }}">{{ customer_group.name|escape('js') }}</option>';
    {% endfor %}
    html += '  </select></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][priority]" value="" placeholder="{{ entry_priority }}" class="form-control" /></td>';
	html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][price]" value="" placeholder="{{ entry_price }}" class="form-control" /></td>';
    html += '  <td class="text-left" style="width: 20%;"><div class="input-group date"><input type="text" name="product_special[' + special_row + '][date_start]" value="" placeholder="{{ entry_date_start }}" data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></td>';
	html += '  <td class="text-left" style="width: 20%;"><div class="input-group date"><input type="text" name="product_special[' + special_row + '][date_end]" value="" placeholder="{{ entry_date_end }}" data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></td>';
	html += '  <td class="text-left"><button type="button" onclick="$(\'#special-modal-row' + special_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
	html += '</tr>';

	$('#special-modal tbody').append(html);

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

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