{#
****************************************************** 
 * @package SO Framework for Opencart 3.x
 * @author  http://www.opencartworks.com
 * @license GNU General Public License
 * @copyright(C) 2008-2017 opencartworks.com. All rights reserved.
 ******************************************************
#}
{{header}}

<div class="product-detail">
    <div id="product-quick" class="product-info">
        <div class="product-view row">
            <div class="left-content-product ">
                {#======Img Gallery Block=====#}
                <div class="content-product-left class-honizol  col-sm-5">
                    {% set values = images|merge({'popup' : popup,'thumb': thumb}) %}
                    {% if images %}
                        <div class="contentslider contentslider--default" data-rtl="no" data-autoplay="no"  data-delay="4" data-speed="0.6" data-margin="0"  data-items_column1="1" data-items_column2="1"  data-items_column3="1" data-items_column4="" data-arrows="no" data-pagination="yes" data-lazyload="yes" data-loop="no" data-hoverpause="yes">
                            {% for image in images %} 
                                <a  class="img" title="{{ heading_title }} ">
                                    <img src="{{ image.popup }}" title="{{ heading_title }} " alt="{{ heading_title }} " />
                                </a>
                            {% endfor %} 
                        </div>
                    {% endif %}
                    
                    <div class="box-label">
                        {#===== New Label==============#}
                        {% if day_number_boolean %} 
                            <span class="label-product label-new">{{ objlang.get('text_new')}} </span>
                        {% endif %} 
                        
                        {#=======Discount Label======= #}
                        
                        {% if price  and  special  %} 
                            <span class="label-product label-sale">
                                 {{ discount }}
                            </span>
                        {% endif %} 
                      
                    </div> 
                </div>
                
                {#======Product info Block=====#}
                <div class="content-product-right col-sm-7">
                    <div class="title-product">
                        <h1>{{ heading_title }} </h1>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            {#Review ------------ #}
                            <div class="box-review">
                               <div class="ratings">
                                    <div class="rating-box">
                                    {% for i in 1..5 %}
                                    {% if product.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>
                                <span class="reviews_button"  >{{ reviews }} </span> 
                            </div>
                            
                            
                            {# Product Price ------- #}
                            {% if 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>
                        <div class="col-sm-6 col-xs-12">
                            <div class="product-box-desc">
                                {% if manufacturer %} 
                                        <div class="brand"><span>{{ text_manufacturer }} </span><a href="{{ manufacturers }} ">{{ manufacturer }} </a></div>
                                {% endif %} 
                                
                                {% if model %} 
                                    <div class="model"><span>{{ text_model }} </span> {{ model }} </div>
                                {% endif %} 
                                
                                {% if points %} 
                                    <div class="reward"><span>{{ text_points }} </span> {{ points }} </div>
                                {% endif %} 
                                <div class="stock"><span>{{ text_stock }} </span> <i class="fa fa-check-square-o"></i> {{ stock }} </div>           
                            </div>
                        </div>
                    </div>
                    
                    <div class="short_description form-group">
                        <h3>{{ objlang.get('text_overview') }}</h3>
                        {{ description_short|striptags|raw }}                       
                    </div>
                    
                    {% if options %} 
                    <div id="product">  
                        <!--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 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="add-to-links ">                     
                                <div class="wishlist wish_comp">
                                    <a onclick="wishlist.add({{ product_id }});"><i class="fa fa-heart-o"></i></a>
                                </div>
                                <div class="cart">
                                    <input type="button"  value="{{ button_cart }}" data-loading-text="{{ text_loading }}" id="button-cart" class="btn btn-mega btn-lg " />
                                </div>

                                <div class="compare wish_comp">
                                    <a onclick="compare.add({{ product_id }});"><i class="fa fa-retweet"></i></a>
                                </div>
                                <div class="detail wish_comp hidden">
                                    <a href="{{ our_url.link('product/product','product_id='~product_id) }}"  target="_top" ><i class="fa fa-chevron-right"></i> </a>
                                </div>                          
                        </div>
                    </div>
                    
                    {% if minimum > 1 %}
                        <div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_minimum }}</div>
                    {% endif %}
                    
                </div>
                
            </div>
        </div>
        
    </div>
</div>

<style type="text/css">
    body{background:none;}
    #wrapper{box-shadow:none;background:#fff;}
    #wrapper > *:not(.product-detail){display: none;}
    #wrapper .product-view{margin:0;}
</style>


<script type="text/javascript">
    $(document).ready(function() {
        $('.product-options li').click(function(){
            $(this).addClass(function() {
                if($(this).hasClass("active")) return "";
                return "active";
            });
            
            $(this).siblings("li").removeClass("active");
            $('.product-options .selected-option').html('<span class="label label-success">'+ $(this).find('img').data('original-title') +'</span>');
        })
        
    });
            
</script>

<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, .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-quick input[type=\'text\'], #product-quick input[type=\'hidden\'], #product-quick input[type=\'radio\']:checked, #product-quick input[type=\'checkbox\']:checked, #product-quick select, #product-quick textarea'),
        dataType: 'json',
        beforeSend: function() {
            $('#button-cart').button('loading');
        },
        complete: function() {
            $('#button-cart').button('reset');
        },
        success: function(json) {
            parent.$('.alert').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']) {
                parent.$('#content').parent().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>');
                parent.$('#cart  .total-shopping-cart ').html(json['total'] );
                parent.$('#cart > ul').load('index.php?route=common/cart/info ul li');
                parent.$('.text-danger').remove();
                timer = setTimeout(function () {
                    parent.$('.alert').addClass('fadeOut');
                }, 4000);
            }
            
        
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

var wishlist = {
    'add': function(product_id) {
        $.ajax({
            url: 'index.php?route=extension/soconfig/wishlist/add',
            type: 'post',
            data: 'product_id=' + product_id,
            dataType: 'json',
            
            success: function(json) {
                parent.$('.alert').remove();
                if (json['redirect']) {
                    location = json['redirect'];
                }
                if (json['success']) {
                    parent.$('#content').parent().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>');
                }
                if (json['info']) {
                    parent.$('#content').parent().before('<div class="alert alert-info"><i class="fa fa-info-circle"></i> ' + json['info'] + '<button type="button" class="fa fa-close close"></button></div>');
                }
                parent.$('#wishlist-total').html(json['total']);
                parent.$('#wishlist-total').attr('title', json['total']);
                timer = setTimeout(function() {
                    parent.$('.alert').addClass('fadeOut');
                }, 4000);
            },
        });
    }
}

var compare = {
    'add': function(product_id) {
        $.ajax({
            url: 'index.php?route=extension/soconfig/compare/add',
            type: 'post',
            data: 'product_id=' + product_id,
            dataType: 'json',
            
            success: function(json) {
                parent.$('.alert').remove();
                if (json['info']) {
                   parent. $('#content').parent().before('<div class="alert alert-info"><i class="fa fa-info-circle"></i>  ' + json['info'] + '<button type="button" class="fa fa-close close"></button></div>');
                }
                if (json['success']) {
                    parent.$('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i>' + json['success'] + '<button type="button" class="fa fa-close close"></button></div>');
                    if (json['warning']) {
                        parent.$('.alert').append('<div class="alert alert-warning"><i class="fa fa-exclamation-circle"></i> ' + json['warning'] + '<button type="button" class="fa fa-close close"></button></div>');
                    }
                    parent.$('#compare-total').attr('data-original-title', json['total']);
                    parent.$('#compare-total').html('<span>' + json['total'] + '</span>');
                }
                timer = setTimeout(function() {
                    parent.$('.alert').addClass('fadeOut');
                }, 4000);
            },
        });
    }
    
}
//--></script> 
<script type="text/javascript"><!--
$('.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>');
})

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

$('.datetime').datetimepicker({
    pickDate: true,
    pickTime: true
});

$('.time').datetimepicker({
    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').attr('value', json['code']);
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }
    }, 500);
});
//--></script> 

<script type="text/javascript">
var ajax_price = function() {
    $.ajax({
        type: 'POST',
        url: 'index.php?route=extension/soconfig/liveprice/index',
        data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info 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-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\'], .product-info input[type=\'checkbox\'], .product-info select, .product-info textarea, .product-info input[name=\'quantity\']').on('change', function() {
    ajax_price();
});
</script>