<link href="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/jquery/datetimepicker/moment/moment.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/jquery/datetimepicker/moment/moment-with-locales.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
        <div id="content" class="product-quickview">
            <div class="row">
					 <div class="col-sm-6 block-1 owl-style2"> 
						{% if thumb %}
							<div class="thumbnails">
								<a class="thumbnail" title="{{ heading_title }}">
									<img data-zoom-image="{{ popup }}" src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />
								</a>
							</div>			
							{% if images %}
								<div id="gallery_02" class="thumbnails-additional owl-carousel owl-theme">
									<a style="display: none" href="#" class="thumbnail current-additional" data-image="{{ thumb }}" data-zoom-image="{{ popup }}"  title="{{ heading_title }}">
										<img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />
									</a>
									{% for image in images %}
									<a style="display: none" href="#" class="thumbnail" data-image="{{ image.thumb }}" data-zoom-image="{{ image.popup }}" title="{{ heading_title }}">
										<img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />
									</a>
									{% endfor %}
								</div>
							{% endif %}
						{% endif %}
					</div><!-- block-1 -->
					<div class="col-sm-6 block-2">
						<h1 class="product-name">{{ heading_title }}</h1>
						  {% if review_status %}
							<div class="ratings">
								<div class="rating-box">
								{% for i in 0..5 %}
									{% if rating == i %}
									{% set class_r = "rating"~i %}
									<div class="{{ class_r }}">rating</div>
									{% endif %}
								{% endfor %}
								</div>
								<a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">{{ reviews }}</a> / <a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">{{ text_write }}</a>
							</div>												            
						{% endif %}
						  {% if price %}
						  <ul class="list-unstyled">
							{% if not special %}
							<li class="price">
							  <span>{{ price }}</span>
							</li>
							{% else %}
							<li class="price"><span class="price-old">{{ price }}</span><span class="price-new">{{ special }}</span></li>
							{% endif %}
							{% if tax %}
							<li>{{ text_tax }} {{ tax }}</li>
							{% endif %}
							{% if points %}
							<li>{{ text_points }} {{ points }}</li>
							{% endif %}
							{% if discounts %}
							<li>
							  <hr>
							</li>
							{% for discount in discounts %}
							<li>{{ discount.quantity }}{{ text_discount }}{{ discount.price }}</li>
							{% endfor %}
							{% endif %}
						  </ul>
						  {% endif %}
						  <ul class="list-unstyled">
							{% if manufacturer %}
							<li>{{ text_manufacturer }} <a href="{{ manufacturers }}"><span class="ex-text">{{ manufacturer }}</span></a></li>
							{% endif %}
							<li>{{ text_model }} <span class="ex-text">{{ model }}</span></li>
							{% if reward %}
							<li>{{ text_reward }} <span class="ex-text">{{ reward }}</span></li>
							{% endif %}
							<li>{{ text_stock }} <span class="ex-text">{{ stock }}</span></li>
						  </ul>
						<p class="short-des">
							{{ short_description }}
						</p>
						<div id="product"> 
							{% if options %}
							<div class="option-container">
							<h3>{{ text_option }}</h3>
							{% 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">
										<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 }}"> 
										{% 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 %}" class="img-thumbnail" /> {% endif %}                  
													{{ option_value.name }}
													{% if option_value.price %}
														({{ option_value.price_prefix }}{{ option_value.price }})
													{% endif %}
												</label>
											</div>
										{% endfor %}
										</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 }}">
										{% 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 %}" class="img-thumbnail" /> {% endif %}
													{{ option_value.name }}
													{% if option_value.price %}
														({{ option_value.price_prefix }}{{ option_value.price }})
													{% endif %}
												</label>
											</div>
										{% endfor %}
										</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 %}
							{% if recurrings %}
							<hr>
							<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">
								<div class="quantity-actions">
									<label class="control-label" for="input-quantity">{{ entry_qty }}</label>
									<div class="quantity-box">
										<input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control" />
										<input type="button" id="plus" value="&#43;" class="form-control"/>
										<input type="button" id="minus" value="-" class="form-control" />					
									</div>
									<input type="hidden" name="product_id" value="{{ product_id }}" /><button class="btn-wishlist" type="button" title="{{ button_wishlist }}" onclick="addWishlist('{{ product_id }}');">{{ button_wishlist }}</button>
									<button class="btn-compare" type="button" title="{{ button_compare }}" onclick="addCompare('{{ product_id }}');">{{ button_compare }}</button>          
								</div>
								<button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn">{{ button_cart }}</button>
							</div>
							{% if minimum > 1 %}
							<div class="clearfix"></div>
							<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_minimum }}</div>
							{% endif %}
						</div><!-- #product -->
						{% if tags %}
							<p>{{ text_tags }}
								{% for i in 0..tags|length %}
									{% if i < (tags|length - 1) %} <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a>,
									{% else %} <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a> {% endif %}
								{% endfor %} </p>
						{% endif %}
					</div><!-- block-2 -->                    
            </div>            
        </div>
<script type="text/javascript"><!--
    $('.product-quickview select[name=\'recurring_id\'], .product-quickview input[name="quantity"]').change(function(){
        $.ajax({
            url: 'index.php?route=product/product/getRecurringDescription',
            type: 'post',
            data: $('.product-quickview input[name=\'product_id\'], .product-quickview input[name=\'quantity\'], .product-quickview select[name=\'recurring_id\']'),
            dataType: 'json',
            beforeSend: function() {
                $('.product-quickview #recurring-description').html('');
            },
            success: function(json) {
                $('.alert-dismissible, .text-danger').remove();

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

                if (json['error']) {
                    if (json['error']['option']) {
                        for (i in json['error']['option']) {
                            var element = $('.product-quickview #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']) {
                        $('.product-quickview select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
                    }

                    // Highlight any found errors
                    $('.text-danger').parent().addClass('has-error');
                }

                if (json['success']) {
                    $('#quickview-content').prepend('<div class="alert alert-success alert-dismissible">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

                    $('#cart > button').html('<i class="ion-bag"></i><span id="cart-total">' + json['total'] + '</span>');

                    $('#quickview-content').animate({ scrollTop: 0 }, 'slow');

                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            },
            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
    });

    $('.product-quickview 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>');

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

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

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

                $.ajax({
                    url: 'index.php?route=tool/upload',
                    type: 'post',
                    dataType: 'json',
                    data: new FormData($('.product-quickview #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"><!--   
    function addWishlist(product_id) {
        $.ajax({
            url: 'index.php?route=account/wishlist/add',
            type: 'post',
            data: 'product_id=' + product_id,
            dataType: 'json',
            success: function(json) {
                $('.alert-dismissible').remove();

                if (json['redirect']) {
                    location = json['redirect'];
                }

                if (json['success']) {
                    $('#quickview-content').prepend('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                }

                $('#wishlist-total span').html(json['total']);
                $('#wishlist-total').attr('title', json['total']);

                $('#quickview-content').animate({ scrollTop: 0 }, 'slow');
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    }
    
    function addCompare(product_id) {
        $.ajax({
            url: 'index.php?route=product/compare/add',
            type: 'post',
            data: 'product_id=' + product_id,
            dataType: 'json',
            success: function(json) {
                $('.alert-dismissible').remove();

                if (json['success']) {
                    $('#quickview-content').prepend('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');

                    $('#compare-total').html(json['total']);

                    $('#quickview-content').animate({ scrollTop: 0 }, 'slow');
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    }
	
	var thumbnails_owl = $('.product-quickview .thumbnails-additional');	
	thumbnails_owl.on('initialize.owl.carousel initialized.owl.carousel ' +
		'initialize.owl.carousel initialize.owl.carousel ',
		function(e) {
		  $(".product-quickview #gallery_02 .thumbnail").show();
		});
	thumbnails_owl.owlCarousel({
		items: 4,
		nav: true,
		dots: false,
		navSpeed: 1000,
		margin: 20,
		navText : ['<i class="ion-chevron-left"></i>','<i class="ion-chevron-right"></i>'],				
	});	
	$(".product-quickview .thumbnails img").elevateZoom({
		zoomType : "window",
		cursor: "crosshair",
		gallery:'gallery_02', 
		galleryActiveClass: "active", 
		imageCrossfade: true,
		responsive: true,
		zoomWindowOffetx: 0,
		zoomWindowOffety: 0,
	});
	var thumbnails_additional = $('.product-quickview .thumbnails-additional .thumbnail');
	thumbnails_additional.each(function(){
		$(this).click(function(){
			thumbnails_additional.removeClass('current-additional');
			$(this).addClass('current-additional');
		});
	});
	var minimum_qv = {{ minimum }};
	$(".product-quickview #input-quantity").change(function(){
		if ($(this).val() < minimum) {
		  alert("Minimum Quantity: "+minimum);
		  $(".product-quickview #input-quantity").val(minimum);
		}
	});
	  // increase number of product
	function minus_qv(minimum){
		var currentval = parseInt($(".product-quickview #input-quantity").val());
		$(".product-quickview #input-quantity").val(currentval-1);
		if($(".product-quickview #input-quantity").val() <= 0 || $(".product-quickview #input-quantity").val() < minimum){
		  alert("Minimum Quantity: "+minimum);
		  $(".product-quickview #input-quantity").val(minimum);
		}
	  };
	  // decrease of product
	function plus_qv(){
		var currentval = parseInt($(".product-quickview #input-quantity").val());
		$(".product-quickview #input-quantity").val(currentval+1);
	};
	$('.product-quickview #minus').click(function(){
		minus_qv(minimum);
	});
	$('.product-quickview #plus').click(function(){
		plus_qv();
	});
//--></script>
