{% set stylePrefix = j3.document.isPopup('quickview') ? 'quickviewPageStyle' : 'productPageStyle' %}
<div id="mpdependentoption-{{ mp_option }}">
{% if options %}
<div class="options {{ j3.settings.get('product_page_options_push_classes') }}">
{% for option in options %}
{% if option.type == 'select' %}
<div class="form-group{% if option.required %} required {% endif %} product-option-{{ option.type }} {% if j3.settings.get(stylePrefix ~ 'OptionsPushSelect') %}push-option{% endif %}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
  <select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="form-control">
    <option value="">{{ text_select }}</option>
    {% for option_value in option.product_option_value %}
    <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
    {% if option_value.price %}
    ({{ option_value.price_prefix }}{{ option_value.price }})
    {% endif %} </option>
    {% endfor %}
  </select>
</div>
{% endif %}
{% if option.type == 'radio' %}
<div class="form-group{% if option.required %} required {% endif %} product-option-{{ option.type }} {% if j3.settings.get(stylePrefix ~ 'OptionsPushRadio') %}push-option{% endif %}">
  <label class="control-label">{{ option.name }}</label>
  <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
    <div class="radio">
      <label>
        <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
        {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" data-toggle="tooltip" data-tooltip-class="push-tooltip" data-placement="{{ j3.settings.get(stylePrefix ~ 'PushTooltipPosition') }}" title="{{ option_value.name }} {% if option_value.price %} ({{ option_value.price_prefix }}{{ option_value.price }}) {% endif %}"/> {% endif %}
        <span class="option-value">
          {{ option_value.name }}
          {% if option_value.price %}
            <span class="option-price">
              ({{ option_value.price_prefix }}{{ option_value.price }})
            </span>
          {% endif %}
        </span>
      </label>
    </div>
    {% endfor %} </div>
</div>
{% endif %}
{% if option.type == 'checkbox' %}
<div class="form-group{% if option.required %} required {% endif %} product-option-{{ option.type }} {% if j3.settings.get(stylePrefix ~ 'OptionsPushCheckbox') %}push-option{% endif %}">
  <label class="control-label">{{ option.name }}</label>
  <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
    <div class="checkbox">
      <label>
        <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" />
        {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" data-toggle="tooltip" data-tooltip-class="push-tooltip" data-placement="{{ j3.settings.get(stylePrefix ~ 'PushTooltipPosition') }}" title="{{ option_value.name }} {% if option_value.price %} ({{ option_value.price_prefix }}{{ option_value.price }}) {% endif %}"/> {% endif %}
        <span class="option-value">
          {{ option_value.name }}
          {% if option_value.price %}
            <span class="option-price">({{ option_value.price_prefix }}{{ option_value.price }})</span>
          {% endif %}
        </span>
      </label>
    </div>
    {% endfor %} </div>
</div>
{% endif %}
{% if option.type == 'text' %}
<div class="form-group{% if option.required %} required {% endif %} product-option-{{ option.type }}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
  <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control" />
</div>
{% endif %}
{% if option.type == 'textarea' %}
<div class="form-group{% if option.required %} required {% endif %} product-option-{{ option.type }}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
  <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>
</div>
{% endif %}
{% if option.type == 'file' %}
<div class="form-group{% if option.required %} required {% endif %} product-option-{{ option.type }}">
  <label class="control-label">{{ option.name }}</label>
  <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
  <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id }}" />
</div>
{% endif %}
{% if option.type == 'date' %}
<div class="form-group{% if option.required %} required {% endif %} product-option-{{ option.type }}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
  <div class="input-group date" data-picker-class="product-options pp-date-time-picker">
    <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD" id="input-option{{ option.product_option_id }}" 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>
{% endif %}
{% if option.type == 'datetime' %}
<div class="form-group{% if option.required %} required {% endif %} product-option-{{ option.type }}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
  <div class="input-group datetime" data-picker-class="product-options pp-date-time-picker">
    <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-option{{ option.product_option_id }}" 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>
{% endif %}
{% if option.type == 'time' %}
<div class="form-group{% if option.required %} required {% endif %} product-option-{{ option.type }}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
  <div class="input-group time" data-picker-class="product-options pp-date-time-picker">
    <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id }}" 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>
{% endif %}
{% endfor %}

</div>
{% endif %}
<script>
function mp_option_journal3_{{ mp_option }} () {
	var $html = $('html');

    // Product Page
	if ($html.hasClass('route-product-product')) {
		// sync image carousels

		// image zoom


		// Select first option
		if ((Journal['isPopup'] ? Journal['quickviewPageStyleOptionsSelect'] : Journal['productPageStyleOptionsSelect']) === 'all') {
			$('.product-options #mpdependentoption-{{ mp_option }} .form-group .radio:first-child input, .product-options #mpdependentoption-{{ mp_option }} .form-group .checkbox:first-child input').prop('checked', true).trigger('change');
			$('.product-options #mpdependentoption-{{ mp_option }} .form-group select').each(function() {
				$(this).find('option').eq(1).prop('selected', true).trigger('change');
			});
		}

		if ((Journal['isPopup'] ? Journal['quickviewPageStyleOptionsSelect'] : Journal['productPageStyleOptionsSelect']) === 'required') {
			$('.product-options #mpdependentoption-{{ mp_option }} .form-group.required .radio:first-child input, .product-options #mpdependentoption-{{ mp_option }} .form-group.required .checkbox:first-child input').prop('checked', true).trigger('change');
			$('.product-options #mpdependentoption-{{ mp_option }} .form-group.required select').each(function() {
				$(this).find('option').eq(1).prop('selected', true).trigger('change');
			});
		}

		// Auto Update Price
		if (Journal['isPopup'] ? Journal['quickviewPageStylePriceUpdate'] : Journal['productPageStylePriceUpdate']) {
			function autoUpdatePrice() {
				$.ajax({
					url: 'index.php?route=journal3/price',
					type: 'post',
					data: $('#product-id, #product-quantity, #product input[type="radio"]:checked, #product input[type="checkbox"]:checked, #product select'),
					dataType: 'json',
					beforeSend: function () {
						$('#button-cart').button('loading');
					},
					complete: function () {
						$('#button-cart').button('reset');
					},
					success: function (json) {
						if (json['response']['status'] === 'error') {
							alert(json['response']['message']);
						} else {
							if (json['response']['tax']) {
								$('.product-tax').html(json['response']['tax']);
							}

							if (json['response']['price']) {
								if (json['response']['special']) {
									$('.product-price-group .product-price-old').html(json['response']['price']);
									$('.product-price-group .product-price-new').html(json['response']['special']);
								} else {
									$('.product-price-group .product-price').html(json['response']['price']);
								}
							}

							if (json['response']['discounts']) {
								$('.product-discount').each(function (index) {
									$(this).html(json['response']['discounts'][index]);
								});
							}

							if (json['response']['weight']) {
								$('.product-stats .product-weight span').html(json['response']['weight']);
							}
						}
					}
				});
			}

			$('.product-options #mpdependentoption-{{ mp_option }} input[type="radio"], .product-options #mpdependentoption-{{ mp_option }} input[type="checkbox"], .product-options #mpdependentoption-{{ mp_option }} select, #product-quantity').on('change', autoUpdatePrice);

			autoUpdatePrice();
		}

		// Push Option Radio
		// $('.push-option.product-option-radio').each(function () {
		// 	var $this = $(this);
		// 	var hasImages = $this.find('img').length > 0;
		// 	var options = $this.find('.radio').map(function (index) {
		// 		var text = $(this).text().trim();
		//
		// 		if (hasImages) {
		// 			$this.addClass('push-image');
		// 			var src = $(this).find('img').attr('src') || 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
		// 			return '<li class="' + ($(this).find('input').is(':checked') ? 'checked' : '') + '" data-index="' + index + '"><img src="' + src + '" alt="' + text + '" title="' + text + '" data-tooltip-class="push-image-tooltip" /></li>';
		// 		}
		//
		// 		return '<li class="' + ($(this).find('input').is(':checked') ? 'checked' : '') + '" data-index="' + index + '">' + text + '</li>';
		// 	});
		//
		// 	$this.append('<ul>' + options.toArray().join('') + '</ul>');
		//
		// 	$this.find('li').on('click', function () {
		// 		$this.find('.radio').eq($(this).data('index')).find('input').trigger('click');
		// 		$this.find('li').not($(this)).removeClass('checked');
		// 		$(this).addClass('checked');
		// 	});
		//
		// 	$this.find('li img').tooltip({ container: 'body' });
		// });

		// Push Option Checkbox
		// $('.push-option.product-option-checkbox').each(function () {
		// 	var $this = $(this);
		// 	var hasImages = $this.find('img').length;
		// 	var options = $this.find('.checkbox').map(function (index) {
		// 		var text = $(this).text().trim();
		//
		// 		if (hasImages) {
		// 			$this.addClass('push-image');
		// 			var src = $(this).find('img').attr('src') || 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
		// 			return '<li class="' + ($(this).find('input').is(':checked') ? 'checked' : '') + '" data-index="' + index + '"><img src="' + src + '" alt="' + text + '" title="' + text + '" data-tooltip-class="push-image-tooltip" /></li>';
		// 		}
		//
		// 		return '<li class="' + ($(this).find('input').is(':checked') ? 'checked' : '') + '" data-index="' + index + '">' + text + '</li>';
		// 	});
		//
		// 	$this.append('<ul>' + options.toArray().join('') + '</ul>');
		//
		// 	$this.find('li').on('click', function () {
		// 		$this.find('.checkbox').eq($(this).data('index')).find('input').trigger('click');
		// 		$(this).toggleClass('checked');
		// 	});
		//
		// 	$this.find('li img').tooltip({ container: 'body' });
		// });

		// Push Option Select
		// $('.push-option.product-option-select').each(function () {
		// 	var $this = $(this);
		// 	var options = $this.find('option').slice(1).map(function (index) {
		// 		return '<li class="' + ($(this).is(':checked') ? 'checked' : '') + '" data-index="' + index + '">' + $(this).text() + '</li>';
		// 	});
		//
		// 	$this.append('<ul>' + options.toArray().join('') + '</ul>');
		//
		// 	$this.find('li').on('click', function () {
		// 		$this.find('option').eq($(this).data('index') + 1).prop('selected', true);
		// 		$this.find('select').trigger('change');
		// 		$this.find('li').not($(this)).removeClass('checked');
		// 		$(this).addClass('checked');
		// 	});
		// });
	}

}

bindMpDependentChange();
mp_option_journal3_{{ mp_option }}();
</script>
</div>