Vue.component('product', {
template: `
<div class="product" v-bind:class="{ 'full_width': full_width }">


    <div id="actions" style="z-index: 5000">
        <button type="button" class="btn btn-outline-secondary" v-on:click="quickViewThis(product)"><i
                    class="fas fa-eye"></i> Quick look</button>

        <button type="button" class="btn btn-outline-secondary" v-if="product.max_order_quantity < 1"
                onclick="return false;">
            Out of stock
        </button>
        <button type="button" class="btn btn-outline-secondary" v-on:click="addToCartThis(product)" v-if="product.max_order_quantity > 0"><i
                    class="fas fa-cart-plus"></i> Add to cart
        </button>

        <a class="btn btn-success" target="_blank"
           :href="'https://wa.me/97339177075?text=product+'+product.id"><i
                    class="fab fa-whatsapp" style="color:green"></i></a>



    </div>

    <a v-bind:href="href_url">
 

        <div id="img_container" style="position: relative">

        <span v-if="show_discount" class="badge badge-pill badge-danger"
              style="position: absolute">
            -{{discount_percentage}}%
            </span>

            <img id="image"
                 v-lazy="product.thumb_url"/>
        </div>

        <div id="bottom">
            <div id="title">{{product.name_en}}</div>


            <div id="price">
                <span v-if="show_discount"><s>{{ product.original_price }} {{ product.currency }}</s></span>
                {{ product.price }} {{ product.currency }}

            </div>
            <div id="description">Sold by: <a
                        :href="'https://feehla.com/en/'+product.vendor.username">{{product.vendor.name_en}}</a>
            </div>
            <div id="add_to_cart">
                <button type="button" class="btn btn-outline-secondary" v-if="product.max_order_quantity < 1"
                        onclick="return false;">
                    Out of stock
                </button>
                <button type="button" class="btn btn-outline-secondary" v-if="product.max_order_quantity > 0"
                        v-on:click="addToCartThis(product);$event.preventDefault();">
                    <i class="fas fa-cart-plus"></i>
                    Add to cart
                </button>
                <a class="btn btn-outline-secondary" target="_blank"
                   :href="'https://wa.me/97339177075?text=product'+product.id"><i
                            class="fab fa-whatsapp" style="color:green"></i></a>

                <button type="button" class="btn btn-outline-secondary only_desktop"
                        v-on:click="quickViewThis(product);$event.preventDefault()"><i
                            class="fas fa-eye"></i></button>

            </div>

        </div>
    </a>
</div>


`,
props: ['product', 'site_url', 'full_width'],
data: function () {
return {
'discount_percentage': Math.round(100 - ((this.product.price / this.product.original_price) * 100)),
'href_url': this.site_url + '/product/' + this.product.id + '/' + this.product.name_en.replace(/\//g, '').replace('&', '').replace('%', ''),
'show_discount': false
}

},
watch: {
product: {
handler: function (newVal, oldVal) {
this.href_url = this.site_url + '/product/' + this.product.id + '/' + this.product.name_en.replace('/', '').replace(/\//g, '').replace('&', '').replace('%', '');
var calculatedStuff = Math.round(100 - ((this.product.price / this.product.original_price) * 100));
this.discount_percentage = calculatedStuff;

if(Number(this.product.price) < Number(this.product.original_price)) {
this.show_discount = true;
} else {
this.show_discount = false;
}
}
}
},
methods: {
addToCartThis: function (product) {
addToCart(product);
},
quickViewThis: function (product) {
quickView(product);
}
},
created: function() {
if(Number(this.product.price) < Number(this.product.original_price)) {
this.show_discount = true;
} else {
this.show_discount = false;
}
}
});