{%set active_page = 'shopyo_ecommerce.shop.html'%}
{% extends "shop/base.html" %}
{% block pagehead %}
<style type="text/css">
.navbar {
    background-color: #5d3f3f !important;
}

.xzoom-gallery {
    margin-top: 10px
}

.xzoom {
    margin-top: 40px
}


#xzoom-default {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height: 300px;
     max-width:100%;
    margin-bottom: 10px;
     object-fit: cover;
}

.xzoom-thumbs img {
    border-radius: 10px;
}

.xzoom-container{
    width: 400px;
}

#product-description {
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 10px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(function() {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 500,
        values: [75, 300],
        slide: function(event, ui) {
            $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
        }
    });
    $("#amount").val("$" + $("#slider-range").slider("values", 0) +
        " - $" + $("#slider-range").slider("values", 1));
});
</script>
<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $('.xzoom, .xzoom-gallery').xzoom({ zoomWidth: 400, title: true, tint: '#333', Xoffset: 15 });
        $('.xzoom2, .xzoom-gallery2').xzoom({ position: '#xzoom2-id', tint: '#ffa200' });
        $('.xzoom3, .xzoom-gallery3').xzoom({ position: 'lens', lensShape: 'circle', sourceClass: 'xzoom-hidden' });
        $('.xzoom4, .xzoom-gallery4').xzoom({ tint: '#006699', Xoffset: 15 });
        $('.xzoom5, .xzoom-gallery5').xzoom({ tint: '#006699', Xoffset: 15 });
        //Integration with hammer.js
        var isTouchSupported = 'ontouchstart' in window;
        if (isTouchSupported) {
            //If touch device
            $('.xzoom, .xzoom2, .xzoom3, .xzoom4, .xzoom5').each(function() {
                var xzoom = $(this).data('xzoom');
                xzoom.eventunbind();
            });
            $('.xzoom, .xzoom2, .xzoom3').each(function() {
                var xzoom = $(this).data('xzoom');
                $(this).hammer().on("tap", function(event) {
                    event.pageX = event.gesture.center.pageX;
                    event.pageY = event.gesture.center.pageY;
                    var s = 1,
                        ls;
                    xzoom.eventmove = function(element) {
                        element.hammer().on('drag', function(event) {
                            event.pageX = event.gesture.center.pageX;
                            event.pageY = event.gesture.center.pageY;
                            xzoom.movezoom(event);
                            event.gesture.preventDefault();
                        });
                    }
                    xzoom.eventleave = function(element) {
                        element.hammer().on('tap', function(event) {
                            xzoom.closezoom();
                        });
                    }
                    xzoom.openzoom(event);
                });
            });
            $('.xzoom4').each(function() {
                var xzoom = $(this).data('xzoom');
                $(this).hammer().on("tap", function(event) {
                    event.pageX = event.gesture.center.pageX;
                    event.pageY = event.gesture.center.pageY;
                    var s = 1,
                        ls;
                    xzoom.eventmove = function(element) {
                        element.hammer().on('drag', function(event) {
                            event.pageX = event.gesture.center.pageX;
                            event.pageY = event.gesture.center.pageY;
                            xzoom.movezoom(event);
                            event.gesture.preventDefault();
                        });
                    }
                    var counter = 0;
                    xzoom.eventclick = function(element) {
                        element.hammer().on('tap', function() {
                            counter++;
                            if (counter == 1) setTimeout(openfancy, 300);
                            event.gesture.preventDefault();
                        });
                    }

                    function openfancy() {
                        if (counter == 2) {
                            xzoom.closezoom();
                            $.fancybox.open(xzoom.gallery().cgallery);
                        } else {
                            xzoom.closezoom();
                            HTML5
                        }
                        counter = 0;
                    }
                    xzoom.openzoom(event);
                });
            });
            $('.xzoom5').each(function() {
                var xzoom = $(this).data('xzoom');
                $(this).hammer().on("tap", function(event) {
                    event.pageX = event.gesture.center.pageX;
                    event.pageY = event.gesture.center.pageY;
                    var s = 1,
                        ls;
                    xzoom.eventmove = function(element) {
                        element.hammer().on('drag', function(event) {
                            event.pageX = event.gesture.center.pageX;
                            event.pageY = event.gesture.center.pageY;
                            xzoom.movezoom(event);
                            event.gesture.preventDefault();
                        });
                    }
                    var counter = 0;
                    xzoom.eventclick = function(element) {
                        element.hammer().on('tap', function() {
                            counter++;
                            if (counter == 1) setTimeout(openmagnific, 300);
                            event.gesture.preventDefault();
                        });
                    }

                    function openmagnific() {
                        if (counter == 2) {
                            xzoom.closezoom();
                            var gallery = xzoom.gallery().cgallery;
                            var i, images = new Array();
                            for (i in gallery) {
                                images[i] = { src: gallery[i] };
                            }
                            $.magnificPopup.open({ items: images, type: 'image', gallery: { enabled: true } });
                        } else {
                            xzoom.closezoom();
                        }
                        counter = 0;
                    }
                    xzoom.openzoom(event);
                });
            });
        } else {
            //If not touch device
            //Integration with fancybox plugin
            $('#xzoom-fancy').bind('click', function(event) {
                var xzoom = $(this).data('xzoom');
                xzoom.closezoom();
                $.fancybox.open(xzoom.gallery().cgallery, { padding: 0, helpers: { overlay: { locked: false } } });
                event.preventDefault();
            });
            //Integration with magnific popup plugin
            $('#xzoom-magnific').bind('click', function(event) {
                var xzoom = $(this).data('xzoom');
                xzoom.closezoom();
                var gallery = xzoom.gallery().cgallery;
                var i, images = new Array();
                for (i in gallery) {
                    images[i] = { src: gallery[i] };
                }
                $.magnificPopup.open({ items: images, type: 'image', gallery: { enabled: true } });
                event.preventDefault();
            });
        }
    });
})(jQuery);
</script>
{% endblock %}
{% block content %}
<div class="shop-spacer-1">
</div>
<nav aria-label="breadcrumb ">
    <ol class="breadcrumb bg-white">
        <li class="breadcrumb-item"><a href="{{ url_for('www.index') }}">Home</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('shopyo_ecommerce.shop.index') }}">Shop</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('shopyo_ecommerce.shop.category', category_name=product.subcategory.category.name) }}">{{ product.subcategory.category.name }}</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('shopyo_ecommerce.shop.subcategory', sub_id=product.subcategory.id) }}">{{ product.subcategory.name }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ product.name }}</li>
    </ol>
</nav>
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-sx-6">
            <div class="container">
                <script type="text/javascript" src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1565190285/Scripts/xzoom.min.js"></script>
                <link rel="stylesheet" type="text/css" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1565190284/Scripts/xzoom.css" media="all" />
                <div class="container d-flex justify-content-center">
                    <section id="default" class="padding-top0">
                        <div class="row">
                            <div class="large-5 column">
                                {%set filename_ = ''%}
                                {%if product.resources%}
                                  {%set filename_ = product.resources[0].filename%}
                                  {%set img_url = url_for('shopyo_ecommerce.resource.product_image', filename=filename_) %}
                                {%else%}
                                    {%set img_url = url_for('shopyo_ecommerce.resource.product_image', filename='default') %}
                                {%endif%}
                                <div class="xzoom-container card text-center" style="padding-left: 10px; padding-right: 10px; padding-top: 10px;">
                                    <img class="xzoom3" id="xzoom-default" src="{{ img_url }}"
                                    xoriginal="{{ img_url }}">

                                    <div class="xzoom-thumbs" id="slick-items">
                                        {%if product.resources%}
                                        {%for resource in product.resources%}
                                            {%set img_url = url_for('shopyo_ecommerce.resource.product_image', filename=resource.filename) %}
                                        <a href="{{img_url}}">
                                            <img class="xzoom-gallery3" width="80" height="80" src="{{img_url}}"
                                            xpreview="{{img_url}}">

                                        </a>
                                        {%endfor%}
                                        {%endif%}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-sx-6">
            <div class="container">
                <div class="card" id="product-description">
                    <div class="card-header bg-white text-center">
                        <h2>{{product.name}}</h2>
                    </div>
                    <div class="card-body">
                        <h3>{{get_currency_symbol()}} {{ product.selling_price }}</h3><br>
                        {{ product.description }}
                        <hr />
                        <p>in stock <span class="badge badge-dark">{{ product.in_stock }}</span><br>
                        </p>
                        <form action="{{ url_for('shopyo_ecommerce.shop.cart_add', product_barcode=product.barcode) }}" method="POST">
                            <label for="size">Choose a size:</label>
                            <select name="size" id="size">
                                {% for s in product.sizes %}
                                    <option value="{{s.name}}">{{ s.name }}</option>
                                {% endfor %}
                            </select><br>
                            <label for="color">Choose a color:</label>
                            <select name="color" id="color">
                                {% for c in product.colors %}
                                    <option value="{{c.name}}">{{ c.name }}</option>
                                {% endfor %}
                            </select>
                            <div class="row">
                                <div class="col-xs-2 col-md-4">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend" onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                                            <button type="button" class="btn btn-primary input-group-text">-</button>
                                        </div>
                                        <input class="form-control" aria-label="Amount (to the nearest )" min="0" max="{{ product.in_stock }}" name="quantity" value="1" type="number">
                                        <div class="input-group-append" onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                                            <button type="button" class="btn btn-primary input-group-text">+</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-4 col-md-4">
                                    <input type="hidden" name="barcode" value="{{ product.barcode }}">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <input type="submit" class="btn btn-primary" value="add to cart">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--
      <div class="input-group mb-3">
        <div class="input-group-prepend"
          onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
          <button class="btn btn-primary input-group-text">-</button>
        </div>
        <input class="form-control" aria-label="Amount (to the nearest dollar)" min="0" name="quantity" value="1" type="number">
        <div class="input-group-append"
          onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
          <button class="btn btn-primary input-group-text">+</button>
        </div>
      </div>
      -->


{% endblock %}