{{ header }}

<div class="container page-category">
	
  <div class="row">{{ column_left }}
    
    <div id="content" class="col-xs-12">
    
		<div class="row product-view product-detail"> 
		
		{#========== Product Left ============#}
		<div class="content-product-left  col-xs-12">
			<div class="so-loadeding" ></div>
			{% if column_left  %}
				<a href="javascript:void(0)" class="btn btn-primary open-sidebar "><i class="fa fa-bars"></i>{{ text_sidebar }}</a>
				<div class="sidebar-overlay "></div>
			{% endif %}
			
			{% if images %}
				
				{#==== Gallery - Large image  ==== #}
				<div class="large-image ">
					<div class="box-label">
						{#===== New Label==============#}
						{% if soconfig.get_settings('new_status') and day_number_boolean %} 
							<span class="label-product label-new">{{ objlang.get('text_new')}} </span>
						{% endif %} 
						
						{#=======Discount Label======= #}
						{% if soconfig.get_settings('discount_status')  %} 
						{% if price  and  special  %} 
							<span class="label-product label-sale">
								 {{ discount }}
							</span>
						{% endif %} 
						{% endif %} 
					</div> 
					<img itemprop="image" class="product-image-zoom" src="{{popup}}" data-zoom-image="{{popup}}" title="{{ heading_title }}" alt="{{ heading_title }}" />
				</div>
				
				{#==== Gallery - Bottom Thumbnails ==== #}
				<div id="thumb-slider" class="full_slider contentslider contentslider--default" data-rtl="{{direction}}" data-autoplay="no"  data-pagination="no" data-delay="4" data-speed="0.6" data-margin="10"  data-items_column0="4" data-items_column1="3" data-items_column2="5"
				data-items_column3="4" data-items_column4="3" data-arrows="yes" data-lazyload="yes" data-loop="no" data-hoverpause="yes">
					{% for key,image in images %}
						<div class="image-additional">
						<a data-index="{{key}}" class="img thumbnail " data-image="{{image.popup}}" title="{{ heading_title }}">
							<img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />
						</a>
						</div>
					{% endfor %}
					</ul>
				</div>
				
			{% endif %}
		</div>
        {#========== //Product Left ============#}

		{#========== Product Right ============#}
		<div class="content-product-right col-xs-12">
			
			
			{% if model %}
				<div class="model font-ct"><span>{{ text_model }} </span> {{ model }}</div>
			{% endif %}
					
			{% if review_status %}
			{#======== Review - Rating ========== #}
			<div class="box-review">
				<div class="rating">
					<div class="rating-box">
					{% for i in 1..5 %}
						{% if rating < i %}<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>{% else %}<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>{% endif %}
					{% endfor %}
					</div>
				</div>
			</div>
			{% endif %}
		
			{% if price %}
			{#========= Product - Price ========= #}
			<div class="product_page_price price" itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">
				{% if not special %}
			        <span class="price-new"><span itemprop="price" id="price-old">{{ price }}</span></span>
			     {% else %}
			        <span class="price-new"><span itemprop="price" id="price-special">{{ special }}</span></span>
				   <span class="price-old" id="price-old">{{ price }}</span>
			     {% endif %}
				
				 {% if tax %}
					<div class="price-tax"><span>{{ text_tax }}</span> {{ tax }}</div>
				{% endif %}
			
				{% if discounts %} 
					<ul class="list-unstyled	">
					{% for discount in discounts %} 
						<li>{{ discount.quantity }} {{ text_discount }} {{ discount.price }} </li>
					{% endfor %}
					</ul>
				{% endif %} 	 
			</div>
				
			{% endif %}
			
			<div class="box-link">
				<div class="add-to-links wish_comp">
					<ul class="blank">
						{% if product_video %}
			           	<li class="compare"> <a class="thumb-video" href="{{product_video}}"><i class="fa fa-youtube-play fa-lg"></i> </a> </li>
			        	{% endif %}

			        	{% if soconfig.get_settings('wishlist_status') %} 
						<li class="wishlist">
							<a onclick="wishlist.add({{ product_id }});"><i class="fa fa-heart"></i></a>
						</li>
						{% endif %}

						{% if soconfig.get_settings('compare_status') %} 
						<li class="compare">
							<a onclick="compare.add({{ product_id }});"><i class="fa fa-retweet"></i></a>
						</li>
						{% endif %}
					</ul>
				</div>
			</div>

			<div class="product-box-desc">
				<ul class="inner-box-desc">
					{% if manufacturer %}
						<li class="brand"><span>{{ text_manufacturer }} </span><a href="{{ manufacturers }}">{{ manufacturer }}</a></li>
					{% endif %}
					
					{% if reward %}
						<li class="reward"><span>{{ text_reward }}</span> {{ reward }}</li>
					{% endif %}
					
					<li class="stock"><span>{{ text_stock }}</span> <i class="fa fa-check-square-o"></i>{{ stock }}</li>	
				</ul>		
			</div>
			
			<div id="product">	
				{% if options %} 
				<div class="options-mobi clearfix">
				
				{% for option in options %}
					{% if option.type == 'select' %}
					<div class="form-group{% if option.required %} required {% 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 width50">
							<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 %}">
					  	<label class="control-label">{{ option.name }}</label>
						<div id="input-option{{ option.product_option_id }}">
							{% set radio_style 	 = soconfig.get_settings('radio_style') %}
							{% set radio_type 	 = radio_style ? ' radio-type-button':'' %}

							{% for option_value in option.product_option_value %} 
							{% set radio_image 	=  option_value.image ? 'option_image' : '' %} 
							{% set radio_price 	=  radio_style ? option_value.price_prefix ~ option_value.price : '' %} 
							
								<div class="radio {{ radio_image ~ radio_type }}">
									<label>							
										<input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
										<span class="option-content-box" data-title="{{ option_value.name}} {{ radio_price }}" data-toggle='tooltip'>
											{% if option_value.image %} 
												<img src="{{ option_value.image }} " alt="{{ option_value.name}}  {{radio_price}}" /> 
											{% endif %} 
											<span class="option-name">{{ option_value.name }} </span>
											{% if option_value.price  and  radio_style  != '1' %} ({{ option_value.price_prefix }} {{ option_value.price }} ){% endif %} 
										  
										</span>
									</label>
								</div>
							{% endfor %}	
							 
							{% if radio_style %} 
							<script type="text/javascript">
								 $(document).ready(function(){
									  $('#input-option{{ option.product_option_id }} ').on('click', 'span', function () {
										   $('#input-option{{ option.product_option_id }}  span').removeClass("active");
										   $(this).toggleClass("active");
									  });
								 });
							</script>
							{% endif %} 

						</div>
					</div>
					{% endif %}

					{% if option.type == 'checkbox' %}
					<div class="form-group{% if option.required %} required {% endif %}">
					  	<label class="control-label">{{ option.name }}</label>
					  	<div id="input-option{{ option.product_option_id }}">
							{% set radio_style 	 = soconfig.get_settings('radio_style') %}
							{% set radio_type 	 = radio_style ? ' radio-type-button':'' %}

							{% for option_value in option.product_option_value %} 
							{% set radio_image 	=  option_value.image ? 'option_image' : '' %} 
							{% set radio_price 	=  radio_style ? option_value.price_prefix ~ option_value.price : '' %} 
							
								<div class="checkbox  {{ radio_image ~ radio_type }}">
									<label>
										<input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" />
										<span class="option-content-box" data-title="{{ option_value.name}} {{ radio_price }}" data-toggle='tooltip'>
											{% if option_value.image %} 
												<img src="{{ option_value.image }} " alt="{{ option_value.name}}  {{radio_price}}" /> 
											{% endif %} 

											<span class="option-name">{{ option_value.name }} </span>
											{% if option_value.price  and  radio_style  != '1' %} 
												({{ option_value.price_prefix }} {{ option_value.price }} )
											{% endif %} 
										  
										</span>
									</label>
								</div>
							{% endfor %}	
							 
							{% if radio_style %} 
							<script type="text/javascript">
								 $(document).ready(function(){
									  $('#input-option{{ option.product_option_id }} ').on('click', 'span', function () {
										   $(this).toggleClass("active");
									  });
								 });
							</script>
							{% endif %} 

						</div>
					</div>
					{% endif %}

					{% if option.type == 'text' %}
					<div class="form-group{% if option.required %} required {% endif %}">
					  <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 %}">
					  <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 %}">
					  <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 %}">
					  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
					  <div class="input-group date">
						<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 %}">
					  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
					  <div class="input-group datetime">
						<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 %}">
						<label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
						<div class="input-group time">
						<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 %}
				


				<div class="box-cart clearfix">
					{% if recurrings %}
					<h3>{{ text_payment_recurring }}</h3>
					<div class="form-group required">
						<select name="recurring_id" class="form-control">
						<option value="">{{ text_select }}</option>
						{% for recurring in recurrings %}
						<option value="{{ recurring.recurring_id }}">{{ recurring.name }}</option>
						{% endfor %}
						</select>
					  <div class="help-block" id="recurring-description"></div>
					</div>
					{% endif %}
				  
					<div class="form-group box-info-product">
						<div class="option quantity">
							<div class="input-group quantity-control">
								  <span class="input-group-addon product_quantity_down fa fa-minus"></span>
								  <input class="form-control" type="text" name="quantity" value="{{ minimum }}" />
								  <input type="hidden" name="product_id" value="{{ product_id }}" />								  
								  <span class="input-group-addon product_quantity_up fa fa-plus"></span>
							</div>
						</div>
						<div class="detail-action">
							{# =========button Cart ======#}
							<div class="cart">
									<input type="button" value="{{ button_cart }}" data-loading-text="{{ text_loading }}" id="button-cart" class="btn btn-mega">
									
									<input type="button"  value="{{ text_buynow }}" data-loading-text="{{ text_loading }}" id="button-checkout" class="btn btn-checkout " />
							</div>
							
						</div>
					</div>

					<div class="clearfix"></div>
					{% if minimum > 1 %}
						<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_minimum }}</div>
					{% endif %}

					{% if soconfig.get_settings('product_page_button') and soconfig.get_settings('product_socialshare') %}
					<div class="form-group social-share clearfix">
						{{ soconfig.decode_entities( soconfig.get_settings('product_socialshare') ) }}
					</div>
					{% endif %}
					<!-- Go to www.addthis.com/dashboard to customize your tools -->
					<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-529be2200cc72db5"></script>

					{% if tags %}
					<div id="tab-tags" class="box-info-product">
				        {{ text_tags }}
				        {% for i in 0..tags|length %}
				        {% if i < (tags|length - 1) %} <a class="btn btn-primary btn-sm" href="{{ tags[i].href }}">{{ tags[i].tag }}</a>
				        {% else %} 
				        {% if tags[i] is not empty  %}
				        <a class="btn btn-primary btn-sm 22" href="{{ tags[i].href }}">{{ tags[i].tag }}</a> {% endif %}
				        {% endif %}
				        {% endfor %} 
				        
				     
					</div>
					{% endif %}


				</div>

			</div>
				
		</div>
		{#========== //Product Right ============#}

		<div class="content-product-midde clearfix">
			{#========== TAB BLOCK ============#}
			{% set tabs_position	= soconfig.get_settings('tabs_position')  %}
			{% set showmore			= soconfig.get_settings('product_enableshowmore')  %}
			{% if showmore %} {% set class_showmore = 'showdown' %}
			{% else %} {% set class_showmore = 'showup' %}
			{% endif %}
			<div class="producttab ">
				<div class="tabsslider col-xs-12">
					{#========= Tabs - Bottom horizontal =========#}
					<ul class="nav nav-tabs font-sn">
						<li class="active"><a data-toggle="tab" href="#tab-description">{{ tab_description }}</a></li>

			            {% if review_status %}
			           	 <li><a href="#tab-review" data-toggle="tab">{{ tab_review }}</a></li>
			            {% endif %}

			            {% if soconfig.get_settings('product_enableshipping') %}
						 <li><a href="#tab-contentshipping" data-toggle="tab">{{ tab_shipping}}</a></li>
						{% endif %}

						{% if product_tabtitle %}
			           	 <li><a href="#tab-customhtml" data-toggle="tab">{{ product_tabtitle}}</a></li>
			            {% endif %}

						
					</ul>

			
					<div class="tab-content col-xs-12">
						<div class="tab-pane active" id="tab-description">
							{% if attribute_groups %}
								<h3 class="product-property-title" > {{text_product_specifics}}</h3>
				              	<ul class="product-property-list util-clearfix">
					                {% for attribute_group in attribute_groups %}
					               
					                	
						                {% for attribute in attribute_group.attribute %}
						                <li class="property-item">
						                  <span class="propery-title">{{ attribute.name }}</span>
						                  <span class="propery-des">{{ attribute.text }}</span>
						                </li>
						                {% endfor %}
					                 	
					                {% endfor %}
				              	</ul>
				            {% endif %}

				            <h3 class="product-property-title" > {{text_product_description}}</h3>
				            <div id="collapse-description" class="desc-collapse {{class_showmore}}">
								{{ description }}
							</div>	

							{% if showmore %}
							<div class="button-toggle">
						         <a class="showmore" data-toggle="collapse" href="#" aria-expanded="false" aria-controls="collapse-footer">
						            <span class="toggle-more">{{ objlang.get('show_more') }} <i class="fa fa-angle-down"></i></span> 
						            <span class="toggle-less">{{ objlang.get('show_less') }} <i class="fa fa-angle-up"></i></span>           
								</a>        
							</div>
							{% endif %}

						</div>
						

			            {% if review_status %}
			            <div class="tab-pane" id="tab-review">
				            <form  id="form-review">
				                <div id="review"></div>
				                <h3 class="modtitle">{{ text_write }}</h3>
				                {% if review_guest %}
				                <div class="form-group required">
				                  
				                    <label class="control-label" for="input-name">{{ entry_name }}</label>
				                    <input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
				                 
				                </div>
				                <div class="form-group required">
				                  
				                    <label class="control-label" for="input-review">{{ entry_review }}</label>
				                    <textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
				                    <div class="help-block">{{ text_note }}</div>
				                
				                </div>
				                <div class="form-group required">
				                 
				                    <label class="control-label">{{ entry_rating }}</label>
				                    &nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
				                    <input type="radio" name="rating" value="1" />
				                    &nbsp;
				                    <input type="radio" name="rating" value="2" />
				                    &nbsp;
				                    <input type="radio" name="rating" value="3" />
				                    &nbsp;
				                    <input type="radio" name="rating" value="4" />
				                    &nbsp;
				                    <input type="radio" name="rating" value="5" />
				                    &nbsp;{{ entry_good }}
				                </div>
				                {{ captcha }}
				               
				                  <div class="form-group">
				                    <button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
				                  </div>
				               
				                {% else %}
				                {{ text_login }}
				                {% endif %}
				            </form>
			            </div>
			            {% endif %}

			            {% if soconfig.get_settings('product_enableshipping') and soconfig.get_settings('product_contentshipping') %}
							<div class="tab-pane" id="tab-contentshipping">
								{{ soconfig.decode_entities( soconfig.get_settings('product_contentshipping') ) }}
						</div>
						{% endif %}

						{% if product_tabtitle %}
						<div class="tab-pane " id="tab-customhtml">{{ product_tabcontent }}</div>
						{% endif %}
			           

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

		</div>

		{% if products %}
		<div class="content-product-bottom clearfix">
			{% include theme_directory~'/template/soconfig/related_product.twig' %}
		</div>
		{% endif %}

	</div> 

    	{# {{ content_bottom }} #}
    </div>
    {{ column_right }}
    </div>
</div>

<script type="text/javascript">
<!--
$('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
	$.ajax({
		url: 'index.php?route=product/product/getRecurringDescription',
		type: 'post',
		data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
		dataType: 'json',
		beforeSend: function() {
			$('#recurring-description').html('');
		},
		success: function(json) {
			$('.alert-dismissible, .text-danger').remove();

			if (json['success']) {
				$('#recurring-description').html(json['success']);
			}
		}
	});
});
//--></script>

<script type="text/javascript"><!--
$('#button-cart').on('click', function() {
	$.ajax({
		url: 'index.php?route=extension/soconfig/cart/add',
		type: 'post',
		data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
		dataType: 'json',
		beforeSend: function() {
			$('#button-cart').button('loading');
		},
		complete: function() {
			$('#button-cart').button('reset');
		},
		success: function(json) {
			$('.alert').remove();
			$('.text-danger').remove();
			$('.form-group').removeClass('has-error');
			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						var element = $('#input-option' + i.replace('_', '-'));
						
						if (element.parent().hasClass('input-group')) {
							element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
						} else {
							element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
						}
					}
				}
				
				if (json['error']['recurring']) {
					$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
				}
				if (json['error']['custom']) {
          $(".quantity-control").after('<div class="text-danger">' + json['error']['custom'] + '</div>');
        }
				// Highlight any found errors
				$('.text-danger').parent().addClass('has-error');
			}
			
			if (json['success']) {
			
				$('#wrapper').before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="fa fa-close close" data-dismiss="alert"></button></div>');
				$('#cart  .total-shopping-cart ').html(json['total'] );
				$('#cart > ul').load('index.php?route=common/cart/info ul li');
				$('.text-danger').remove();
				timer = setTimeout(function () {
					$('.alert').addClass('fadeOut');
				}, 4000);
			}
			
		
		},
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
	});
});

$('#button-checkout').on('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
		dataType: 'json',
		beforeSend: function() {
			$('#button-checkout').button('loading');
		},
		complete: function() {
			$('#button-checkout').button('reset');
		},
		success: function(json) {
			$('.alert').remove();
			$('.text-danger').remove();
			$('.form-group').removeClass('has-error');

			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						var element = $('#input-option' + i.replace('_', '-'));
 
						 {% if option_data %} 
						 if(ProductOptionId != undefined && ProductOptionId==i.replace('_', '-')){ 
						 $('.so-colorswatch-productpage-icons').after('<div class="text-danger">' + json['error']['option'][i] + '</div>'); 
						 } 
						 {% endif %} 
 
						
						if (element.parent().hasClass('input-group')) {
							element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
						} else {
							element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
						}
					}
				}
				
				if (json['error']['recurring']) {
					$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
				}
				if (json['error']['custom']) {
                  $(".quantity-control").after('<div class="text-danger">' + json['error']['custom'] + '</div>');
                }
				// Highlight any found errors
				$('.text-danger').parent().addClass('has-error');
			}

			if (json['success']) {
				$('.text-danger').remove();
				$('#cart  .total-shopping-cart ').html(json['total'] );
				 window.location.href = "index.php?route=checkout/checkout";
			}
		},
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
	});
});
//--></script> 

<script type="text/javascript"><!--
$('.date').datetimepicker({
	language: document.cookie.match(new RegExp('language=([^;]+)'))[1],
	pickTime: false
});

$('.datetime').datetimepicker({
	language: document.cookie.match(new RegExp('language=([^;]+)'))[1],
	pickDate: true,
	pickTime: true
});

$('.time').datetimepicker({
	language: document.cookie.match(new RegExp('language=([^;]+)'))[1],
	pickDate: false
});

$('button[id^=\'button-upload\']').on('click', function() {
	var node = this;

	$('#form-upload').remove();

	$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

	$('#form-upload input[name=\'file\']').trigger('click');

	if (typeof timer != 'undefined') {
		clearInterval(timer);
	}

	timer = setInterval(function() {
		if ($('#form-upload input[name=\'file\']').val() != '') {
			clearInterval(timer);

			$.ajax({
				url: 'index.php?route=tool/upload',
				type: 'post',
				dataType: 'json',
				data: new FormData($('#form-upload')[0]),
				cache: false,
				contentType: false,
				processData: false,
				beforeSend: function() {
					$(node).button('loading');
				},
				complete: function() {
					$(node).button('reset');
				},
				success: function(json) {
					$('.text-danger').remove();

					if (json['error']) {
						$(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
					}

					if (json['success']) {
						alert(json['success']);

						$(node).parent().find('input').val(json['code']);
					}
				},
				error: function(xhr, ajaxOptions, thrownError) {
					alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
				}
			});
		}
	}, 500);
});
//--></script> 
<script type="text/javascript"><!--
$('#review').delegate('.pagination a', 'click', function(e) {
    e.preventDefault();

    $('#review').fadeOut('slow');
    $('#review').load(this.href);
    $('#review').fadeIn('slow');
});

$('#review').load('index.php?route=product/product/review&product_id={{ product_id }}');

$('#button-review').on('click', function() {
	$.ajax({
		url: 'index.php?route=product/product/write&product_id={{ product_id }}',
		type: 'post',
		dataType: 'json',
		data: $("#form-review").serialize(),
		beforeSend: function() {
			$('#button-review').button('loading');
		},
		complete: function() {
			$('#button-review').button('reset');
		},
		success: function(json) {
			$('.alert-dismissible').remove();

			if (json['error']) {
				$('#review').after('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
			}

			if (json['success']) {
				$('#review').after('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

				$('input[name=\'name\']').val('');
				$('textarea[name=\'text\']').val('');
				$('input[name=\'rating\']:checked').prop('checked', false);
			}
		}
	});
});

//--></script>



<script type="text/javascript"><!--
	$(document).ready(function() {
	
		var zoomCollection = '.large-image img';
		$( zoomCollection ).elevateZoom({
			zoomType        :"none",
			lensSize    :'200',
			easing:true,
			
			gallery:'thumb-slider',
			cursor: 'pointer',
			galleryActiveClass: "active",
		});
		$(zoomCollection).bind('touchstart', function(){
		    $(zoomCollection).unbind('touchmove');
		});

		
		$("#thumb-slider .image-additional").each(function() {
			$(this).find("[data-index='0']").addClass('active');
		});
		
		$('.product-options li.radio').click(function(){
			$(this).addClass(function() {
				if($(this).hasClass("active")) return "";
				return "active";
			});
			
			$(this).siblings("li").removeClass("active");
			$(this).parent().find('.selected-option').html('<span class="label label-success">'+ $(this).find('img').data('original-title') +'</span>');
		})
		
		$('.thumb-video').magnificPopup({
		  type: 'iframe',
		  iframe: {
			patterns: {
			   youtube: {
				  index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
				  id: 'v=', // String that splits URL in a two parts, second part should be %id%
				  src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe. 
					},
				}
			}
		});
	
		
	});
//--></script>


<script type="text/javascript">
var ajax_price = function() {
	$.ajax({
		type: 'POST',
		url: 'index.php?route=extension/soconfig/liveprice/index',
		data: $('.product-detail input[type=\'text\'], .product-detail input[type=\'hidden\'], .product-detail input[type=\'radio\']:checked, .product-detail input[type=\'checkbox\']:checked, .product-detail select, .product-detail textarea'),
		dataType: 'json',
			success: function(json) {
			if (json.success) {
				change_price('#price-special', json.new_price.special);
				change_price('#price-tax', json.new_price.tax);
				change_price('#price-old', json.new_price.price);
			}
		}
	});
}

var change_price = function(id, new_price) {$(id).html(new_price);}
$('.product-detail input[type=\'text\'], .product-detail input[type=\'hidden\'], .product-detail input[type=\'radio\'], .product-detail input[type=\'checkbox\'], .product-detail select, .product-detail textarea, .product-detail input[name=\'quantity\']').on('change', function() {
	ajax_price();
});
</script>

{{ footer }}