<script type="text/javascript" src="catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/moment/moment.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/moment/moment-with-locales.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<link href="catalog/view/javascript/jquery/magnific/magnific-popup.css" rel="stylesheet">
<link href="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
<div class="row">
    <div id="content" class="col-sm-12">
        <div id="main">
            <div class="bad-sub-pages-inner-content">
                <button type="button" class="close badquickview-close-btn" data-dismiss="modal">×</button>
                <div class="col-sm-6 badproduct-details-img-block">
                    <a class="thumbnail" href="{{ link }}" title="{{ heading_title }}"><img id="" src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" data-zoom-image="{{ thumb }}"></a>
                </div>
                <div class="col-sm-6 bad-wrapper-info badquickview-block-inner">
                    <h3 class="badproduct-title">{{ heading_title }}</h3>
                    <div class="badall-product-star-icon">
                        {% include 'organic_organix_101_theme/template/helpfile/productrating.twig' with {'rating': product.rating } %}
                    </div>
                    <ul class="list-unstyled bad-short-desc">
                        <li><span class="bad-product-label">Brand:</span><a href="{{ manufacturers }}" class="badproduct-brand"> {{ manufacturer }}</a></li>
                        <li><span class="bad-product-label">Product Code:</span> {{ model }}</li>
                        <li><span class="bad-product-label">Reward Points:</span> {{ reward }}</li>
                        <li><span class="bad-product-label">Availability:</span> {{ stock }}</li>
                    </ul>
                    {% if price %}
                    <ul class="list-unstyled badquickview-price">
                        {% if not special %}
                        <li>
                            <h2>{{ price }}</h2>
                        </li>
                        {% else %}
                        <li class="badprice-descount"><span style="text-decoration: line-through;">{{ price }}</span></li>
                        <li>
                            <h4>{{ special }}</h4>
                        </li>
                        {% endif %}
                        {% if tax %}
                        <li>{{ text_tax }} {{ tax }}</li>
                        {% endif %}
                        {% if points %}
                        <li>{{ text_points }} {{ points }}</li>
                        {% endif %}
                        {% if discounts %}
                        {% for discount in discounts %}
                        <li>{{ discount.quantity }}{{ text_discount }}{{ discount.price }}</li>
                        {% endfor %}
                        {% endif %}
                    </ul>
                    {% endif %}
                    <div id="product" class="badquickview-producat"> {% if options %}
                        <hr>
                        <h4>{{ text_option }}</h4>
                        {% 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 badquickview-producat-upload"><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 badquickview-calender" 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 badquickview-calender"><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 badquickview-calender"><i class="fa fa-calendar"></i></button>
                                </span></div>
                        </div>
                        {% endif %}
                        {% endfor %}
                        {% 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">
                            <label class="control-label" for="input-quantity">{{ entry_qty }}</label>
                            <input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control" />
                            <input type="hidden" name="product_id" value="{{ product_id }}" />
                            <br />
                            <button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn badall-theme-button">{{ button_cart }}</button>
                        </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>
</div>
<script type="text/javascript">
<!--
$('select[name=\'recurring_id\'], input[name="quantity"]').change(function() {
    $.ajax({
        url: 'index.php?route=product/product/getRecurringDescription',
        type: 'post',
        data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
        dataType: 'json',
        beforeSend: function() {
            $('#recurring-description').html('');
        },
        success: function(json) {
            $('.alert-dismissible, .text-danger').remove();

            if (json['success']) {
                $('#recurring-description').html(json['success']);
            }
        }
    });
});
//-->
</script>
<script type="text/javascript">
<!--
$('#button-cart').on('click', function() {
    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
        dataType: 'json',
        beforeSend: function() {
            $('#button-cart').button('loading');
        },
        complete: function() {
            $('#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 = $('#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>');
                }

                $('.text-danger').parent().addClass('has-error');
            }

            if (json['success']) {

                if (!!$.prototype.fancybox)
                    $.fancybox.open([{
                        type: 'inline',
                        autoScale: true,
                        minHeight: 30,
                        minWidth: "40%",
                        content: '<p class="fancybox-success"> ' + json['success'] + ' </p>'
                    }], {
                        padding: 0
                    });
                else
                    alert(full_notic);


                var re = new RegExp(/^\d+/);
                var m = re.exec(json['total']);

                setTimeout(function() {
                    $('.cart-total').html(m);
                }, 100);


                //$('html, body').animate({ scrollTop: 0 }, 'slow');

                $('#cartdropdwon > 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: 'en-gb',
    pickTime: false
});
$('.datetime').datetimepicker({
    language: 'en-gb',
    pickDate: true,
    pickTime: true
});
$('.time').datetimepicker({
    language: 'en-gb',
    pickDate: false
});
//-->
</script>
<script type="text/javascript">
<!--
$('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">
<!--
$(document).ready(function() {
    var magnific = $('.thumbnails').magnificPopup({
        type: 'image',
        delegate: 'a',
        gallery: {
            enabled: true
        }
    });
    magnific.off('click');
    magnific.on('click', function(e) {
        e.preventDefault();
    });
    magnific.on('dblclick', function() {
        magnific.magnificPopup('open')
    });
    $('.badcms-quickview-pagination-btn .bad-quickview-prev').click(function(e) {
        e.preventDefault();
        $('.bad-quickview-content-box .owl-nav .owl-prev').trigger('click');
    });
    $('.badcms-quickview-pagination-btn .bad-quickview-next').click(function(e) {
        e.preventDefault();
        $('.bad-quickview-content-box .owl-nav .owl-next').trigger('click');
    });
});

$('.thumbnail').click(function() {
    var href = $(this).attr('href');
    $('#img_zoom').attr('src', href);
    $('#img_zoom').attr('data-zoom-image', href);
});
//-->
</script>
</div>
</div>
</div>
</div>