{{ header }}
<!-- BREADCRUMB AREA START -->
<!-- <div class="ltn__breadcrumb-area ltn__breadcrumb-area-2
        ltn__breadcrumb-color-white bg-overlay-theme-black-90 bg-image" data-bg="{{ base }}catalog/view/theme/vb/img/banner/B1.png">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ltn__breadcrumb-inner
                        ltn__breadcrumb-inner-2
                        justify-content-between">
                    <div class="section-title-area
                            ltn__section-title-2">
                        <h6 class="section-subtitle
                            ltn__secondary-color">// Welcome to
                            v Believers</h6>
                        <h1 class="section-title
                                white-color">Product
                            Details</h1>
                        <div class="ltn__breadcrumb-list">
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li><a href="{{shop}}">Shop</a></li>
                                <li>{{ heading_title }}</li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div> -->
<!-- BREADCRUMB AREA END -->

<!-- SHOP DETAILS AREA START -->
<div class="ltn__shop-details-area pb-85 mt-50">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="ltn__shop-details-inner">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="ltn__shop-details-img-gallery mb-0">
                                <div class="ltn__shop-details-large-img">
                                	{% for key,image in images %}
										<div class="single-large-img">
	                                        <a href="{{image.popup}}" data-rel="lightcase:myCollection">
	                                            <img src="{{image.popup}}" alt="{{ heading_title }}">
	                                        </a>
	                                    </div>
									{% endfor %}
                                </div>
                                <div class="ltn__shop-details-small-img slick-arrow-2 mb-0">
                                	{% for key,image in images %}
	                                    <div class="single-small-img">
	                                        <img style="width:110px !important;" src="{{image.thumb}}" alt="{{ heading_title }}">
	                                    </div>
									{% endfor %}
                                    <!-- <div class="single-small-img">
                                        <div class="ltn__video-img">
                                            <img src="img/product/pa1.png" alt="video popup bg image">
                                            <a class="ltn__video-icon-2 ltn__video-icon-2-small ltn__video-icon-2-border----"
                                                href="https://www.youtube.com/embed/LjCzPp-MK48?autoplay=1&amp;showinfo=0"
                                                data-rel="lightcase:myCollection">
                                                <i class="fa fa-play"></i>
                                            </a>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="modal-product-info shop-details-info pl-0" id="product">
                                <h4 class="mt-15  mb-0 product-title">{{ heading_title }}</h4>
                                <div class="product-ratting p-0">
                                    <ul>
                                        
                                        {% for i in 1..5 %}
	                                        {% if rating > i %} 
	                                            <li><i class="fas fa-star"></i></li>
	                                        {% elseif rating > (i-1) and rating < (i) %}
	                                            <li><i class="fas fa-star-half-alt"></i></li>
	                                        {% else %}   
	                                            <li><i class="far fa-star"></i></li>
	                                        {% endif %} 
	                                    {% endfor %}
	                                    <li class="review-total"> <a href="javascript:void(0);" onclick="scrollToDiv();$('a[href=\'#liton_tab_details_1_2\']').trigger('click'); element.scrollIntoView(); return false;"> ( {{ reviews }} )</a></li>
                                    </ul>
                                </div>
                                <div class="product-box-desc">
									<div class="inner-box-desc">

										{% if manufacturer %}
									      <!--   <div class="brand" itemprop="brand" itemscope itemtype="http://schema.org/Brand">
									        <span style="width: 150px;display: inline-block;">{{ text_manufacturer }} </span><a href="{{ manufacturers }}" itemprop="url"><span itemprop="name">{{ manufacturer }} </span></a></div> -->
										{% endif %}
										
										{% if model %}
											<!-- <div class="model"><span style="width: 150px;display: inline-block;">{{ text_model }} </span> {{ model }}</div> -->
										{% endif %}
										
										{% if reward %}
											<!-- <div class="reward"><span style="width: 150px;display: inline-block;">{{ text_reward }}</span> {{ reward }}</div> -->
										{% endif %}
										
										{% if business_point %}
											<!-- <div class="reward"><span style="width: 150px;display: inline-block;">{{ text_business_point }}</span> {{ business_point }}</div> -->
										{% endif %}
										
										<div class="stock"><span style="margin-top: 0px;font-size: 16px;display: inline-block;">{{ text_stock }} <!-- <i class="fa fa-check-square-o"></i>  -->{{ stock }}</span></div>	
									</div>	

								<!-- 	<div class="inner-box-viewed ">
										<span style="width: 150px;display: inline-block;">{{ text_viewed }}</span> <i class="fa fa-eye" ></i> {{ viewed }}
									</div>	 -->
									
									
								</div>

                                
                                <div class="row">
                                    <div class="col-12">
                                    					

								{% if discounts %} 
									<ul class="list-unstyled text-success">
									{% for discount in discounts %} 
										<li><strong class="spn">{{ discount.quantity }} {{ text_discount }} {{ discount.price }}</strong> </li>
									{% endfor %}
									</ul>
								{% endif %}
								<div class="ltn__product-details-menu-3">
                                    <ul>
                                        <li class="mt-1 mb-2">
                                            <p class="text-dark quantity-text varient-label">Quantity</p>
                                            <div class="cart-plus-minus">
                                                <input type="text" value="01" name="quantity" class="quantity-control cart-plus-minus-box">
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                    					{% if options %} 
										{% for option in options %}
											{% if option.type == 'select' %}
												{% if option.product_option_value is not empty %}
													<div class=" d-flex flex-column mb-2 form-group{% if option.required %} required {% endif %}">
														<label class="control-label m-0 varient-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-select sel {{ option.name }} form-control width50">
														{% 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 %}
											{% 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 %}
										{% endif %}
                                    </div>
                                </div>
                                <!-- <p class="mt-30">Tax included. Free Shipping Above ₹499.
                                    <img src="https://cdn.shopify.com/s/files/1/0577/6162/8330/files/image_49.svg?v=1661333803"
                                        style=" font-size: 14px; border-radius: 42px;  width: 28px;">
                                </p> -->
                               
								<input type="hidden" name="product_id" value="{{ product_id }}" />
								<div class="product-property-wrapper">
                                	{% if attribute_groups %}
										<p class="product-property-title" > {{text_product_specifics}}</p>
						              	<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 %}

										 {% if price %}
									{#========= Product - Price ========= #}
									<div class="product_page_price price mt-3 mb-2" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
										{% if not special %}
											<span class="price-new spn">
												<span class="text-dark" itemprop="price" content="{{ price_value }}" id="price-old">{{ price }}</span>
												<meta itemprop="priceCurrency" content="{{currency}}" />
											</span>

										{% else %}
										
											<span class="price-new spn">
												<span class="text-dark" itemprop="price" content="{{special_value}}" id="price-special">{{ special }}</span>
												<meta itemprop="priceCurrency" content="{{currency}}" />
											</span>
										   <span class="price-old spn" id="price-old"> 
												{{ price }}
										   </span>
										   
										{% endif %}
										
										{% if special and soconfig.get_settings('discount_status')   %} 
										{#=======Discount Label======= #}
										<span class="label-product label-sale">
											 {{ discount }}
										</span>
										{% endif %} 

										{% if tax %}
											<div class="price-tax spn" style="display: none;"><span>{{ text_tax }}</span> <span id="price-tax"> {{ tax }} </span></div>
										{% endif %}
									 
									</div>
								{% endif %}
                                </div>
                               
                                <div class="ltn__product-details-menu-3">
                                    <ul>

                                        <li>
                                            <a href="#" class="theme-btn-1 btn btn-effect-1" style="padding: 10px 20px;font-size: 16px;" title="Add to Cart"
                                                data-toggle="modal" data-loading-text="Loading..." data-target="#" id="button-cart">
<!--                                                 <i class="fas fa-shopping-cart"></i>
 -->                                                <span>Add To Cart</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="theme-btn-1 btn btn-effect-1" style="background-color: #C15B27;padding: 10px 32px;font-size: 16px;" title="Add to Cart" data-loading-text="Loading..." id="button-checkout">
<!--                                                 <i class="fa fa-shopping-bag" aria-hidden="true"></i>
 -->                                                <span>Buy Now</span>
                                            </a>
                                        </li>


                                    </ul>
                                </div>

								 <div class="modal-product-meta
                                        ltn__product-details-menu-1">
                                    <ul>
                                        <li>
                                            <strong>Delivery:</strong>
                                            <span>
                                                <i class="fa fa-truck me-2"
                                                    aria-hidden="true"></i>&nbsp;&nbsp;Products
                                                are usually delivered in 7-10 days.

                                            </span>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- Shop Tab Start -->
                <div class="ltn__shop-details-tab-inner
                        ltn__shop-details-tab-inner-2">
                    <div class="ltn__shop-details-tab-menu">
                        <div class="nav">
                            <a class="active show" data-toggle="tab"
                                href="#liton_tab_details_1_1">Description</a>
                            <a data-toggle="tab" href="#liton_tab_details_1_2" id="reviews">Reviews</a>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade active show" id="liton_tab_details_1_1">
                            <div class="ltn__shop-details-tab-content-inner">
					            <!-- <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>
                        </div>
                        <div class="tab-pane fade" id="liton_tab_details_1_2">
                            <div class="ltn__shop-details-tab-content-inner">
                                <h4 class="title-2">Customer Reviews</h4>
                                <div class="product-ratting">
                                    <ul>
                                        <li class="review-total"> <a href="javascript:void(0);" onclick="scrollToDiv();$('a[href=\'#liton_tab_details_1_2\']').trigger('click'); element.scrollIntoView(); return false;"> ( {{ reviews }} )</a></li>
                                        {% for i in 1..5 %}
	                                        {% if rating > i %} 
	                                            <li><i class="fas fa-star"></i></li>
	                                        {% elseif rating > (i-1) and rating < (i) %}
	                                            <li><i class="fas fa-star-half-alt"></i></li>
	                                        {% else %}   
	                                            <li><i class="far fa-star"></i></li>
	                                        {% endif %} 
	                                    {% endfor %}
                                    </ul>
                                </div>
                                <hr>
                                <!-- comment-area -->
                                <div class="ltn__comment-area mb-30">
                                    <div class="ltn__comment-inner">
                                        <ul>
                                            <!-- <li>
                                                <div class="ltn__comment-item
                                                        clearfix">
                                                    <div class="ltn__commenter-img">
                                                        <img src="img/testimonial/1.jpg" alt="Image">
                                                    </div>
                                                    <div class="ltn__commenter-comment">
                                                        <h6><a href="#">Adam
                                                                Smit</a></h6>
                                                        <div class="product-ratting">
                                                            <ul>
                                                                <li><a href="#"><i class="fas
                                                                                fa-star"></i></a></li>
                                                                <li><a href="#"><i class="fas
                                                                                fa-star"></i></a></li>
                                                                <li><a href="#"><i class="fas
                                                                                fa-star"></i></a></li>
                                                                <li><a href="#"><i class="fas
                                                                                fa-star-half-alt"></i></a></li>
                                                                <li><a href="#"><i class="far
                                                                                fa-star"></i></a></li>
                                                            </ul>
                                                        </div>
                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing
                                                            elit. Magni voluptate quo id dolore illum veritatis
                                                            repudiandae quas at dignissimos iure, illo iste enim
                                                            sunt asperiores mollitia porro minima possimus
                                                        </p>
                                                        <span class="ltn__comment-reply-btn">September
                                                            3, 2020</span>
                                                    </div>
                                                </div>
                                            </li> -->
                                        </ul>
                                    </div>
                                </div>
                                <!-- comment-reply -->
                                <div class="ltn__comment-reply-area
                                        ltn__form-box mb-30">
                                    <form action="#">
                                        <h4 class="title-2">Add a
                                            Review</h4>
                                        <div class="mb-30">
                                            <div class="add-a-review">
                                                <h6>Your Ratings:</h6>
                                                <div class="product-ratting">
                                                    <ul>
                                                        <li><a href="#"><i class="fas
                                                                        fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fas
                                                                        fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fas
                                                                        fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fas
                                                                        fa-star-half-alt"></i></a></li>
                                                        <li><a href="#"><i class="far
                                                                        fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-item
                                                input-item-textarea
                                                ltn__custom-icon">
                                            <textarea placeholder="Type
                                                    your comments...."></textarea>
                                        </div>
                                        <div class="input-item
                                                input-item-name
                                                ltn__custom-icon">
                                            <input type="text" placeholder="Type
                                                    your name....">
                                        </div>
                                        <div class="input-item
                                                input-item-email
                                                ltn__custom-icon">
                                            <input type="email" placeholder="Type
                                                    your email....">
                                        </div>
                                        <div class="input-item
                                                input-item-website
                                                ltn__custom-icon">
                                            <input type="text" name="website" placeholder="Type
                                                    your website....">
                                        </div>
                                        <label class="mb-0"><input type="checkbox" name="agree"> Save
                                            my name, email, and
                                            website in this browser
                                            for the next time I
                                            comment.</label>
                                        <div class="btn-wrapper">
                                            <button class="btn
                                                    theme-btn-1
                                                    btn-effect-1
                                                    text-uppercase" type="submit">Submit</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Shop Tab End -->
            </div>
        </div>
    </div>
</div>
<!-- SHOP DETAILS AREA END -->

<!-- PRODUCT SLIDER AREA START -->
{% if products and soconfig.get_settings('related_status') %}
<div class="ltn__product-slider-area ltn__product-gutter pb-70">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title-area
                        ltn__section-title-2">
                    <!-- <h6 class="section-subtitle
                            ltn__secondary-color">// Herbal</h6> -->
                    <h3 class="section-title">Related Products</h3>
                </div>
            </div>
        </div>
        <div class="row ltn__related-product-slider-one-active
                slick-arrow-1">
            <!-- ltn__product-item -->
            {% for product in products %} 
            <div class="col-lg-12">
                <div class="ltn__product-item ltn__product-item-3
                        text-center">
                    <div class="product-img">
                        <a href="product-details.html"><img src="{{ product.thumb }}" alt="#"></a>
                        <div class="product-badge">
                            <ul>
                                <li class="sale-badge">New</li>
                            </ul>
                        </div>
                                                    </div>
                    <div class="product-info">
                        <div class="product-ratting">
                            <ul>
                                <li><a href="#"><i class="fas
                                                fa-star"></i></a></li>
                                <li><a href="#"><i class="fas
                                                fa-star"></i></a></li>
                                <li><a href="#"><i class="fas
                                                fa-star"></i></a></li>
                                <li><a href="#"><i class="fas
                                                fa-star-half-alt"></i></a></li>
                                <li><a href="#"><i class="far
                                                fa-star"></i></a></li>
                            </ul>
                        </div>
                        <h2 class="product-title"><a href="product-details.html">{{ product.name }}</a></h2>
                        {% if product.price %} 
							<div class="product-price">
								{% if not product.special %} 
									<span>{{ product.price }}</span>
								{% else %}   
									<span>{{ product.special }} </span> <del>{{ product.price }} </del>
								{% endif %} 
							</div>
						{% endif %} 
                        
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
<!-- PRODUCT SLIDER AREA END -->
{% endif %}

<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"><!--
var isProcessing = false;

$('#button-cart').on('click', function(event) {
	if (isProcessing) {
      event.preventDefault();
      return false;
    }

	$.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() {
			isProcessing = true;
			$('#button-cart').attr("disabled", true).find("span").html("Loading...");
			$('#button-cart').button('loading');
		},
		complete: function() {
			isProcessing = false;
			$('#button-cart').attr("disabled", false).find("span").html("ADD TO CART");
			$('#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" style="position: absolute;font-size: 12px;">' + json['error']['option'][i] + '</div>');
						} else {
							element.after('<div class="text-danger" style="position: absolute;font-size: 12px;">' + json['error']['option'][i] + '</div>');
						}
					}
				}
				
				if (json['error']['recurring']) {
					$('select[name=\'recurring_id\']').after('<div class="text-danger" style="position: absolute;font-size: 12px;">' + json['error']['recurring'] + '</div>');
				}
				if (json['error']['custom']) {
		          $(".quantity-control").after('<div class="text-danger" style="position: absolute;font-size: 12px;">' + json['error']['custom'] + '</div>');
		        }
				// Highlight any found errors
				$('.text-danger').parent().addClass('has-error');
			}
			
			if (json['success']) {
				$('.text-danger').remove();
				/*Leader custom code*/
				$('#previewModal').modal('show'); 
				$('#previewModal .modal-body').load('index.php?route=extension/soconfig/cart/info&product_id='+ {{ product_id }});
				/*End Leader custom code*/
				$('#cart  .total-shopping-cart ').html(json['total'] );
				$('#cart > ul').load('index.php?route=common/cart/info ul li');
				
				
				$('.so-groups-sticky .popup-mycart .popup-content').load('index.php?route=extension/module/so_tools/info .popup-content .cart-header');
			}
			
		
		},
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
	});
});


$('#button-checkout').on('click', function() {
	if (isProcessing) {
      event.preventDefault();
      return false;
    }
	$.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() {
			isProcessing = true;
			$('#button-checkout').attr("disabled", true).find("span").html("Loading...");
			$('#button-checkout').button('loading');
		},
		complete: function() {
			isProcessing = false;
			$('#button-checkout').attr("disabled", false).find("span").html("Buy Now");
			$('#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" style="position: absolute;font-size: 12px;">' + json['error']['option'][i] + '</div>'); 
						 } 
						 {% endif %} 
 
						
						if (element.parent().hasClass('input-group')) {
							element.parent().after('<div class="text-danger" style="position: absolute;font-size: 12px;">' + json['error']['option'][i] + '</div>');
						} else {
							element.after('<div class="text-danger" style="position: absolute;font-size: 12px;">' + json['error']['option'][i] + '</div>');
						}
					}
				}
				
				if (json['error']['recurring']) {
					$('select[name=\'recurring_id\']').after('<div class="text-danger" style="position: absolute;font-size: 12px;">' + json['error']['recurring'] + '</div>');
				}
				if (json['error']['custom']) {
		          $(".quantity-control").after('<div class="text-danger" style="position: absolute;font-size: 12px;">' + 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() {
		
		// Initialize the sticky scrolling on an item 
		sidebar_sticky = '{{sidebar_sticky}}';
		
		if(sidebar_sticky=='left'){
			$(".left_column").stick_in_parent({
			    offset_top: 10,
			    bottoming   : true
			});
		}else if (sidebar_sticky=='right'){
			$(".right_column").stick_in_parent({
			    offset_top: 10,
			    bottoming   : true
			});
		}else if (sidebar_sticky=='all'){
			$(".content-aside").stick_in_parent({
			    offset_top: 10,
			    bottoming   : true
			});
		}
		

		$("#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();
});

function scrollToDiv() {
  var element = document.getElementById("reviews");
  element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
}
</script>

{{ footer }}