<script setup>
import { ref, onMounted, computed} from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import ProductCard from './layouts/productView.vue'
const route = useRouter();
import Header from './layouts/header.vue'
import Footer from './layouts/footer.vue'
const store = useStore();

let loader = computed(()=>store.state.loader)
let setting = computed(()=>store.state.settings)
let LeftSidebar = computed(()=>store.state.mobileMenuHideShow)
let LeftCategorySidebar = computed(()=>store.state.LeftCategorySidebar)
let HolesaleBagauthToken = computed(() => store.state.UserLogged)
let HolesaleBagauthTokens = ref(localStorage.getItem('HolesaleBagauthToken'))
let SubNavClose = computed(() => store.state.SubNavClose)
let cartSum = computed(() => store.state.cartSum)
let cart = computed(() => store.state.cart)
let compare = computed(() => store.state.compare)
let rightSidebar = computed(()=>store.state.rightSidebar)
let rightCompare = computed(()=>store.state.rightCompare)
let CartCompare = computed(()=>store.state.CartCompare)

if(!localStorage.getItem('HolesaleBagauthToken')){
    if(!localStorage.getItem('defaultToken')){
        localStorage.setItem('defaultToken',Math.random().toString(36).slice(2))
    }
}
const normal = async()=>{
    await axios.post('/setting-get').then(response => {
        console.log(response.data)
        store.dispatch('Setting', response.data.setting)
        if(localStorage.getItem('HolesaleBagauthToken') && response.data.auth == true){
            let HolesaleBagauthTokenId = localStorage.getItem('HolesaleBagauthToken').split('|')[0]
            store.dispatch('cartItem',HolesaleBagauthTokenId)
            store.dispatch('UserLogged', true)
        }else{
            localStorage.removeItem('HolesaleBagauthToken')
            store.dispatch('cartItem',localStorage.getItem('defaultToken'))
            store.dispatch('UserLogged', false)
        }

    })
}
onMounted(async () => {
    window.scrollTo(0, 0);
    normal()
    // CartStockMinOrder()
    store.dispatch('rightCompare', false)
    // if (window.dataLayer) {
    //     window.dataLayer.push({
    //     event: 'page View',
    //     productId: 343,
    //     category: 343,
    //     price: 343
    //     });
    //     console.log('Product view event pushed to dataLayer');
    // }
})
const mobileMenuHideShow = async()=>{    
    // if(LeftSidebar.value == true){
    //     store.dispatch('mobileMenuHideShow', false)
    // }else if(LeftSidebar.value == false){
    //     store.dispatch('mobileMenuHideShow', true)
    // }
    store.dispatch('mobileMenuHideShow', false)
    store.dispatch('LeftCategorySidebar', false)    
}
const Logout = async()=>{
    let HolesaleBagauthTokenId = localStorage.getItem('HolesaleBagauthToken').split('|')[0]
    store.dispatch('Loader', true)
    axios.post('/api/logout/'+HolesaleBagauthTokenId).then(response =>{
        route.push('/')
        store.dispatch('Loader', false)
        localStorage.removeItem('HolesaleBagauthToken')
        store.dispatch('UserLogged', false)
    })
}
const closecart = async=>{
    store.dispatch('rightSidebar', false)
}
const closeCompare = async=>{
    store.dispatch('rightCompare', false)
}
const RemoveCart = async(id)=>{
    store.dispatch('cartRemove', id)
    store.dispatch('CouponCheck', localStorage.getItem('coupon_type'))
}
const loadProduct = async(productCode, ProductName)=>{
    window.location.href = '/product-details/'+productCode+'/'+ProductName;
}
const RightSidebar = async()=>{
    store.dispatch('rightSidebar', true)
}
let defaultToken = ref('')
let MinOrder = ref([])
let Product = ref([])
let ProductImage = ref([])
let ProductSpecification = ref([])
let productName = ref([])
let CartCompareLoader = ref(false)
const RightCompare = async()=>{
    CartCompareLoader.value = true
    if(localStorage.getItem('defaultToken')){
        defaultToken.value = localStorage.getItem('defaultToken')
    }else{
        defaultToken.value = localStorage.getItem('HolesaleBagauthToken').split('|')[0]
    }
    axios.post('/api/all-compare-get/'+defaultToken.value).then(response =>{
        if(response.data.success ==false){
            CartCompareLoader.value = false
            return    
        }
        CartCompareLoader.value = false
        MinOrder.value = response.data.minOrder
        Product.value = response.data.product
        // ProductImage.value = response.data.productImage
        ProductImage.value = []
        response.data.productImage.map((t)=>{
            if(t.image){
                let NewUpdate = {
                    'name':t.image,
                }
                ProductImage.value.push(NewUpdate)
            }else{
                let NewUpdate = {
                    'name':t.name,
                }
                ProductImage.value.push(NewUpdate)
            }
            
        })
        ProductSpecification.value = response.data.productSpecification
        productName.value = response.data.productName
    })
    store.dispatch('rightCompare', true)
}
const DeleteCompare = async(iindex)=>{
    Product.value.map((p, index,  farr)=>{
        if(index == iindex){
            farr.splice(index, 1)
            axios.post('/api/deleteCompare/'+compare.value[iindex].id).then(response =>{
                store.dispatch('DeleteCompare', index)
            })
        }
    })
}

let hot_products = computed(() => store.state.hot_product)
let currentASC = ref('ASC')
let currentHighLow = ref('default')
let MainNav = computed(() => store.state.MainNav)
let subNavData = computed(() => store.state.subNavData)
const mainCategoryProduct = async(id)=>{
    store.dispatch('CategoryLoader', true)
    MainNav.value.map((p, index)=>{
        if(id == p.id){
            MainNav.value[index].category_active = 1
            MainNav.value[index].active = 1
            store.dispatch('categorySlug',p.slug)
        }
    })
    await axios.post('/api/check-main-category-product/'+id+'/'+currentASC.value+'/'+currentHighLow.value).then(response => {
        store.dispatch('CategoryLoader', false)
        let categoryProduct = response.data.data.data
        let categoryImage = response.data.ProdutImage
        let NextPageUrl = response.data.data.next_page_url
        store.dispatch('CurrentCategoryProductImage', [categoryProduct, categoryImage, NextPageUrl])
        // console.log(response.data.data.next_page_url)
        // ProductNextPage.value = response.data.data.next_page_url
    })
    if(hot_products.value.length == 0){
        await axios.post('/api/hot-selling-product').then(response => {
            let product = response.data
            store.dispatch('hotProducts',product)
        })
    }
}
const ActiveMainNav = async(id)=>{
    store.dispatch('LeftCategorySidebar', false)
    MainNav.value.map((p,mindex)=>{
        MainNav.value[mindex].category_active = 0
        MainNav.value[mindex].active = 0
    })
    MainNav.value.map((p, index)=>{
        if(id == p.id){
            MainNav.value[index].category_active = 1
            MainNav.value[index].active = 1
            if(subNavData.value[index].length == 0){
                route.push('/category/'+p.slug)
                mainCategoryProduct(MainNav.value[index].id)
            }
        }
    })
}
const DeleteCart = async(id)=>{
    store.dispatch("CartDelete",id)
    axios.post('/api/delete-cart-item/'+id).then(response => {
    }) 
}
let CartStockMinOrderCheck = ref(false)
let CartMinimumStockOrder = ref([])
const CartStockMinOrder = async()=>{
    cart.value.map((p)=>{
        let NewUpdate = {
            'stock':0,
            'min_order':0,
        }
        CartMinimumStockOrder.value.push(NewUpdate)
    })
    cart.value.map((p, index)=>{
        axios.post('/api/cart-quantity-check/'+p.product_code).then(response => {
            CartMinimumStockOrder.value[index].min_order = parseInt(response.data.productMinOrder.min_order)
            CartMinimumStockOrder.value[index].stock = parseInt(response.data.product.stock)
        })
    })
    CartStockMinOrderCheck.value = true
}
let UpdateCartQuantity = async(quantity, id)=>{
    axios.post('/api/cart-quantity-update/'+quantity+'/'+id).then(response => {
    })  
}
let QuantityIncrease = async(qty, index)=>{
    if(CartStockMinOrderCheck.value == false && cart.value.length != CartMinimumStockOrder.value.length){
        CartStockMinOrder()
        cart.value.map((p, indexx)=>{
            if(indexx == index){
                p.quantity = parseInt(qty) + parseInt(1)
                UpdateCartQuantity(p.quantity, p.id)
                p.total_price = parseInt(p.quantity) * parseFloat(p.product_price)
            }
        })
        return
    }
    cart.value.map((p, indexx)=>{
        if(indexx == index){
            if(qty < CartMinimumStockOrder.value[index].stock){
                p.quantity = parseInt(qty) + parseInt(1)
                UpdateCartQuantity(p.quantity, p.id)
                p.total_price = parseInt(p.quantity) * parseFloat(p.product_price)
            }
        }
    })
}
let QuantityDecrease = async(qty, index)=>{
    if(CartStockMinOrderCheck.value == false){
        CartStockMinOrder()
    }
    cart.value.map((p, indexx)=>{
        if(indexx == index){
            if(qty > CartMinimumStockOrder.value[index].min_order){
                p.quantity = parseInt(qty) - parseInt(1)
                UpdateCartQuantity(p.quantity, p.id)
                p.total_price = parseInt(p.quantity) * parseFloat(p.product_price)
            }
        }
    })
}
const ProductQuantityCheck = async(index)=>{
    cart.value.map((p, indexx)=>{
        if(indexx == index){
            if(CartStockMinOrderCheck.value == true){
                if(p.quantity > CartMinimumStockOrder.value[index].stock){
                    p.quantity = parseInt(CartMinimumStockOrder.value[index].stock)
                }
                if(p.quantity < CartMinimumStockOrder.value[index].min_order){
                    p.quantity = parseInt(CartMinimumStockOrder.value[index].min_order)
                }
                p.total_price = parseInt(p.quantity) * parseFloat(p.product_price)
                UpdateCartQuantity(p.quantity, p.id)
                return
            }
            axios.post('/api/cart-quantity-check/'+p.product_code).then(response => {
                if(p.quantity > response.data.product.stock){
                    p.quantity = parseInt(response.data.product.stock)
                }
                if(p.quantity < response.data.productMinOrder.min_order){
                    p.quantity = parseInt(response.data.productMinOrder.min_order)
                }
                UpdateCartQuantity(p.quantity, p.id)
                p.total_price = parseInt(p.quantity) * parseFloat(p.product_price)
            })
        }
    })
}
let ReadyProductIndex = ref()
const ReadyProductIndexEnter = async(index)=>{
    ReadyProductIndex.value = index
}
const ReadyProductIndexLeave = async(index)=>{
    ReadyProductIndex.value = null
}
const PageCheck = async(k)=>{
    route.push(k)
}
const slugify = (text) => {
  return text
    .toString()
    .toLowerCase()
    .trim()
    .replace(/\s+/g, '-')
    .replace(/[^\w\-]+/g, '')
    .replace(/\-\-+/g, '-');
}
const ShopNowCompare = async(index)=>{
    closeCompare()
    Product.value.map((p, indexd)=>{
        if(index ==indexd){
            console.log(compare.value[index].product_code)
            axios.post('/api/product-code-check/'+compare.value[index].product_code).then(response => {
                console.log(response.data)
                route.push('/products/'+response.data.code+'/'+slugify(productName.value[index].product_name))
            })
        }
    })
}
let loginActive = ref(false)
</script>
<template>
    <div class="page-wrapper">
        <Header></Header>
        <router-view></router-view>
        <div class="loading" v-show="loader">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <!-- <div class="loading" v-show="loader"><h1>Loading . . .</h1></div> -->
        <Footer></Footer>
    </div><!-- End .page-wrapper -->
    <div class="mobile-menu-container" :style="[LeftSidebar==true  ? 'visibility: visible; right: 0;' : 'visibility: hidden;right: -280px;' ]">
        <div class="mobile-menu-wrapper">
            <span class="mobile-menu-close" @click="mobileMenuHideShow"><i class="icon-close" style="color:#4F4F4F"></i></span>
            <nav class="mobile-nav">
                <ul style="color:#1a1a1a;padding-right:0;margin-top:20px;">
                    <li @click="PageCheck('/')" class="main-mobile-li" style="padding:10px 20px; font-size:16px;cursor:pointer; border-bottom: 1px solid #e7e7e7;color:#1a1a1a;font-weight:400">
                        Home
                    </li>
                    <li @click="PageCheck('/samples')" class="main-mobile-li" style="padding:10px 20px; font-size:16px;cursor:pointer; border-bottom: 1px solid #e7e7e7;color:#1a1a1a;font-weight:400">
                        Samples
                    </li>
                    <li @click="PageCheck('/in-stock')" class="main-mobile-li" style="padding:10px 20px; font-size:16px;cursor:pointer; border-bottom: 1px solid #e7e7e7;color:#1a1a1a;font-weight:400">
                        In Stock
                    </li>
                    <li @click="PageCheck('/contact-us')" class="main-mobile-li" style="padding:10px 20px; font-size:16px;cursor:pointer; border-bottom: 1px solid #e7e7e7;color:#1a1a1a;font-weight:400">
                        About Us
                    </li>
                    <li @click="PageCheck('/contact-us')" class="main-mobile-li" style="padding:10px 20px; font-size:16px;cursor:pointer; border-bottom: 1px solid #e7e7e7;color:#1a1a1a;font-weight:400">
                        Contact Us
                    </li>
                    <li :class="{'active':loginActive == true  && SubNavClose == true}" v-if="!HolesaleBagauthTokens" @click="PageCheck('/login')" class="main-mobile-li" style="padding:10px 20px; font-size:16px;cursor:pointer; border-bottom: 1px solid #e7e7e7;color:#1a1a1a;font-weight:400">
                        Login
                    </li>
                    <li :class="{'active':loginActive == true  && SubNavClose == true}" v-if="!HolesaleBagauthTokens" @click="PageCheck('/register')" class="main-mobile-li" style="padding:10px 20px; font-size:16px;cursor:pointer; border-bottom: 1px solid #e7e7e7;color:#1a1a1a;font-weight:400">
                        Register
                    </li>
                    <li :class="{'active':loginActive == true  && SubNavClose == true}" v-if="HolesaleBagauthTokens" @click="PageCheck('/user/dashboard')" class="main-mobile-li" style="padding:10px 20px; font-size:16px;cursor:pointer; border-bottom: 1px solid #e7e7e7;color:#1a1a1a;font-weight:400">
                        Dashboard
                    </li>
                </ul>
            </nav><!-- End .mobile-nav -->

            <div class="social-icons">
                <ul class="d-flex" style="justify-content: flex-end;">
                    <li><a style="cursor:pointer;margin:40px;text-align:center" href="https://www.facebook.com/wholesalebagbd" target="_blank"><img style="width:25px; height:25px" v-lazy="'/facebook.webp'"></a></li>
                    <li><a style="cursor:pointer;margin:40px;text-align:center" href="https://www.linkedin.com/wholesale-bag-bd" target="_blank"><img style="width:25px; height:25px" v-lazy="'/linkedin.png'"></a></li>
                    <li><a style="cursor:pointer;margin:40px;text-align:center" href="https://www.youtube.com/@wholesalebagbd" target="_blank"><img style="width:25px; height:25px" v-lazy="'/youtube.png'"></a></li>
                    <li><a style="cursor:pointer;margin:40px;text-align:center" href="https://www.instagram.com/wholesalebagbd" target="_blank"><img style="width:25px; height:25px" v-lazy="'/instagram.png'"></a></li>
                </ul>
            </div><!-- End .social-icons -->
            <div class="contact-address-sidebar mt-3">
                <div class="address">
                    <p style="font-size:16px; font-weight:500; color:#1a1a1a;text-align:center">Contact Here</p>
                    <p style="font-size:14px; font-weight:400; color:#888888;text-align:center">+8801919921771, 8801791873136<br>info@wholesalebagbd.com<br>427/17-D, JHAWCHAR HAZARIBAGH,<br>DHAKA-1209.</p>
                </div>
            </div>
        </div><!-- End .mobile-menu-wrapper -->
    </div><!-- End .mobile-menu-container -->
    <div class="mobile-menu-container" :style="[LeftCategorySidebar==true  ? 'visibility: visible; left: 0;' : 'visibility: hidden;left: -280px;' ]">
        <div class="mobile-menu-wrapper">
            <span class="mobile-menu-close" @click="mobileMenuHideShow"><i class="icon-close" style="color:#4F4F4F"></i></span>
            <nav class="mobile-nav">
                <p class="text-center" style="color:#888888; font-weight: 600;">All Categories</p>
                <ul style="color:#1a1a1a;padding-right:0;margin-top:20px;">
                    <li class="main-mobile-li" style="padding:10px 20px; font-size:16px;cursor:pointer; border-bottom: 1px solid #e7e7e7;color:#1a1a1a;font-weight:400" v-for="(mainnav, index) in MainNav" @click="ActiveMainNav(mainnav.id)" :class="{'ase' : subNavData[index].length > 0,'active':mainnav.active == 1}">{{mainnav.category_name}}
                        <ul v-show="mainnav.category_active == 1">
                            <li v-for="subnav in subNavData[index]"><router-link :to="'/category/'+mainnav.slug+'/'+subnav.slug">{{subnav.category_name}}</router-link></li>
                        </ul>
                    </li>
                </ul>
            </nav><!-- End .mobile-nav -->
        </div><!-- End .mobile-menu-wrapper -->
    </div><!-- End .mobile-menu-container -->
    <div class="sidebar-right" :style="[rightSidebar==true  ? 'visibility: visible; right: 0;' : 'visibility: hidden;right: -585px;' ]">
        <div class="cart-header mt-2">
            <!-- <div class="cart"><i class="icon-shopping-cart"></i></div>
            <div class="itemCount">{{cart.length}} Items</div> -->
                <div class="itemCount">Your Cart ({{cart.length}})</div>
            <div class="closeCartButton" @click="closecart"><button style="color:#000!important">&#x2715;</button></div>
        </div>
        <div class="dropdown-menu-custom">
            <div class="dropdown-cart-products">
                <div class="no-cart" v-if="cart.length == 0">
                    <div class="no-cart-all text-center">
                        <div class="iamge" style="display: flex; justify-content: center;align-items: center;">
                            <img :src="'/empty-cart.png'" style="width:150px;">
                        </div>
                        <h4>Oh, No! Your cart is empty</h4>
                        <p>It Looks like you have not added anything to your cart. Go Ahead & vist our products to add to cart</p>
                        <div style="margin-top:10px;font-size: 10px; text-align:center;"><span style="background-color: #28aae2!important; color:#fff; padding: 5px 10px">
                            <router-link :to="'/'" style="color :#fff!important;text-decoration: none;" >Go To Home</router-link>
                        </span></div>
                    </div>
                </div>
                <div class="product" v-for="(Cart,index) in cart">
                    <div class="product-cart-details">
                        <div class="row">
                            <div class="col-3" style="display: flex;justify-content: center;align-items: center">
                                <img style="width:100%" :src="setting.frontend_img_url+'/storage/image/product/'+Cart.product_image" :alt="Cart.product_name">
                            </div>
                            <div class="col-9">
                                <div class="product-name">{{Cart.product_name.substring(0,25)}} <span v-if="Cart.product_name.length > 25">...</span></div>
                                <div class="productid" style="font-size:16px"><span style="font-size:16px; font-weight:500">SKU : </span>{{ Cart.product_code }}</div>
                                <div class="product-variant" style="font-size:16px" v-if="Cart.product_color"><span style="font-size:16px; font-weight:500">Variant : </span> {{ Cart.product_color }}</div>
                                <div class="size" v-if="Cart.product_size" style="font-size:16px"> <span style="font-size:16px; font-weight:500">Size : </span> {{ Cart.product_size }}</div>
                                <div class="total-price-quantity" style="display:flex">
                                    <div class="total-price">{{ Cart.total_price }}৳</div>
                                    <div class="quantity no-highlight">
                                        <div class="total-quantity d-flex" style="width:100px;background:#F1F9FE;border-radius:30px;justify-content: space-between;">
                                            <span @click="QuantityDecrease(Cart.quantity,index)" class="col-md-3 default-color" style="padding:0px 10px; cursor:pointer; display: flex;justify-content: center;font-size:25px;">-</span> 
                                            <span class="col-md-6" style="padding:5px 20px; display: flex;justify-content: center;align-items: center;font-size:20px;position:relative;"><input @change="ProductQuantityCheck(index)" type="text" style="background:#F1F9FE;;width:100%;height:100%;position:absolute; text-align:center;border:none" v-model="Cart.quantity"></span>
                                            <span @click="QuantityIncrease(Cart.quantity, index)" class="col-md-3 default-color" style="position:relative;padding:0px 10px; cursor:pointer; display: flex;justify-content: center; font-size:25px;right:10px">+
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span style="position:absolute; top:10px;right:0;cursor:pointer" @click="DeleteCart(Cart.id)">
                                <svg xmlns="http://www.w3.org/2000/svg" 
                                    width="24" height="24" 
                                    fill="red" 
                                    viewBox="0 0 24 24">
                                <path d="M3 6h18v2H3V6zm2 3h14v13a2 2 0 01-2 2H7a2 2 0 01-2-2V9zm5 3v7h2v-7H10zm4 0v7h2v-7h-2zM9 4V3a1 1 0 011-1h4a1 1 0 011 1v1h5v2H4V4h5z"/>
                                </svg>

                            </span>
                        </div>
                    </div><!-- End .product-cart-details -->
                    <!-- <a @click="RemoveCart(Cart.id)" class="cart btn-remove" title="Remove Product"><i class="icon-close"></i></a> -->
                </div><!-- End .product -->
            </div><!-- End .cart-product -->
            <div class="dropdown-cart-total">
                <span>Sub Total</span>
                <span class="cart-total-price"><span v-if="cartSum">{{cartSum}}৳</span><span v-else>0৳</span></span>
            </div><!-- End .dropdown-cart-total -->
            <p style="font-size: 12px; padding-left: 10px; color:#000;">Shipping and Discount Calculated At Checkout.</p>
            <div class="dropdown-cart-action mt-1">
                <router-link to="/checkout" class="button text-center"><span>Go To Checkout</span></router-link>
            </div><!-- End .dropdown-cart-total -->
        </div><!-- End .dropdown-menu -->
    </div><!-- End .mobile-menu-container -->
    <div class="sidebar-right compare" :style="[rightCompare==true  ? 'visibility: visible; left: 50%;' : 'visibility: hidden;left: -100%;' ]">
        <div class="dropdown-menu-custom" style="padding: 20px;">
            <div class="cancel-compare" style="position:absolute; right: 10px;top:10px; font-size: 18px; color:#000;cursor:pointer;" @click="closeCompare()">&#x2715;</div>
            <h3 class="text-center">Compare</h3>
            <div class="compare-cart-no-product" v-if="Product.length == 0 && !CartCompareLoader">
                <div class="no-cart-all text-center">
                    <div class="iamge" style="display: flex; justify-content: center;align-items: center;">
                        <img :src="'/no_compare.png'" style="width:150px;">
                    </div>
                    <h5>Oh, No! Your Compare is empty</h5>
                    <div style="margin-top:10px;font-size: 10px; text-align:center;"><span style="background-color: #28aae2; color:#fff; padding: 5px 10px">
                        <router-link :to="'/'" style="color :#fff!important;text-decoration: none;">Go To Home</router-link>
                    </span></div>
                </div>
            </div>
            <div class="products-container">
                <div class="product-scroll-wrapper">
                    <div class="product-card" v-for="(product, index) in Product" v-if="!CartCompareLoader">
                        <div class="product product-4">
                            <div class="row" style="position:absolute;top:5px; left:5px;z-index: 3; width:100%;text-align:right">
                                <div class="col-12"><span @click="DeleteCompare(index)" style="cursor:pointer; padding:5px; color : #1a1a1a;border-radius:5px;font-weight: 400;font-size:17px">&#x2715;</span></div>
                            </div>
                            <a @click="ShopNowCompare(index)" style="cursor:pointer">
                                <figure class="product-media" style="border:1px solid #e7e7e7; padding: 20px;border-radius:12px">
                                    <a>
                                        <img style="z-index:0;height:auto!important" v-if="ProductImage[index]" v-lazy="setting.frontend_img_url+'/storage/image/product/'+ProductImage[index].name" class="product-image">
                                    </a>
                                </figure><!-- End .product-media -->
                            </a>
                            <div class="product-body">
                                <h3 class="product-name cursor-pointer" style="height:40px;font-size:18px;overflow:hidden"><a style="font-weight:500" @click="ShopNowCompare(index)">{{productName[index].product_name.substring(0,50)}} <span v-if="productName[index].product_name.length > 50">...</span></a></h3>
                                <h3 class="text-left left-square font6d14px position-relative" style="padding-left:10px;">SKU-{{compare[index].product_code}}</h3>
                                <h3 class="text-left left-square font6d14px position-relative" style="padding-left:10px;">Minimum Order : {{MinOrder[index].min_order}} pcs</h3>
                                <div class="text-center" style="font-size:18px;color:#26A9E0;font-weight:500">Price : {{product.lowest_price}}৳ - {{product.highest_price}}৳  </div>
                                <div class="action-button mt-2 no-highlight">
                                    <div class="shop-now-btn"><span
                                        style="padding:5px 5px;font-size:13px;border-radius:5px; text-align:center; font-weight: 500;"><a @click="ShopNowCompare(index)" style="cursor:pointer">Shop Now</a></span></div>
                                    <div class="get-quote-btn"><span
                                        style="padding:5px 5px;font-size:13px;border-radius:5px; text-align:center; font-weight: 500;"><router-link :to="'/quote-form/'+compare[index].product_code">Qet Quote</router-link></span></div>
                                    <!-- <div class="text-right add-to-cart"><span style="padding:5px 5px; font-weight:500; text-align:center;border:1px solid #000; background:#fff; color:#fff; border-radius:5px;"><router-link :to="'/quote-form/'+product.code" style="color:#000">Get Quote</router-link></span></div> -->
                                </div>
                            </div><!-- End .product-body -->
                        </div><!-- End .product -->
                        <div class="product-attribute text-left" style="font-size:14px; font-weight:500; margin-bottom:10px;">Attribute</div>
                        <table class="specification-table" style="width:100%; text-align:center; border:1px solid #D1D1D1; border-radius:10px;" border="1" cellspacing="0">
                            <thead>
                                <tr class="table-border-active">
                                    <th>ITEM</th>
                                    <th>VALUE</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr :class="{'table-border-active' : (index%2) == 1}" v-for="(lead, index) in ProductSpecification[index]">
                                    <td>{{lead.name}}</td>
                                    <td>{{lead.value}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div><!-- End .products-container -->
            
        </div><!-- End .dropdown-menu -->
    </div><!-- End .mobile-menu-container -->
    <div @click="RightSidebar()" class="checkout-icon-home shopping-bag hover-style">
        <div class="image"><img style="width:30px;height:30px;" :src="'/shopping_bag.png'"></div>
        <p>{{cart.length}} items</p>
    </div>
    <div @click="RightCompare()" class="checkout-icon-home compare hover-style">
        <div class="image"><img style="width:30px;height:30px;" :src="'/compare.png'"></div>
        <p>{{compare.length}} items</p>
    </div>
</template>
<style scoped>
.table-border-active{
    background:#F1F9FE;
    color:1a1a1a;
}
.shop-now-btn .shop-hover-effect a{
    color:#000;
}
.shop-now-btn span{
    border:1px solid v-bind(setting.color);
    background:v-bind(setting.color)!important;
}
.shop-now-btn span a{
    color:#fff;
}
.get-quote-btn span{
    background:#fff;
    border:1px solid #b0b0b0;
    transition:0.4s;
}
.get-quote-btn span a{
    color:#000;
}
a{
    text-decoration: none!important;
}
.compare .product-scroll-wrapper {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  scroll-behavior: smooth;
  padding: 10px;
}

.compare .product-scroll-wrapper::-webkit-scrollbar {
  height: 8px;
}

.compare .product-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.compare .product-card {
  flex: 0 0 auto;
  width: 340px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  text-align: center;
}
.dropdown-cart-action a{
    width: 100%;padding:15px; background:v-bind(setting.color)!important; color:#fff;border-radius:6px;margin:0 10px;
}
.dropdown-menu-custom{
    /* border: 1px solid #b0b0b0!important; */
    /* margin: 20px!important; */
    border-radius: 6px!important;
    overflow:hidden
}

.total-price-quantity{
    display:flex;
    justify-content: space-between;
}
.total-price-quantity .total-price{
    font-weight:500;
    font-size:22px;
    color: v-bind(setting.color);
}
.checkout-icon-home{
    position: fixed;
    right:v-bind(CartCompare);
    top: 50%;
    transform:translateY(-50%);
    border:1px solid #28aae2;
    background-color: #fff;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.checkout-icon-home .image{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:5px;
}
.checkout-icon-home p{
    white-space: nowrap;
    background-color: #28aae2;
    color:#fff;
    padding: 5px 10px;
}
.checkout-icon-home.shopping-bag{
    margin-top:-45px;
}
.checkout-icon-home.compare{
    margin-top:45px;
}
.page-wrapper{
    position: relative;
}
.loading {
    width: 100%;
    height: 100vh;
    background: #000;
    position: fixed;
    opacity: 0.8;
    z-index: 11111111111111111111111111111111111;
    display: flex;
    justify-content: center;
    align-items:center
}
.loading div {
    width: 20px;
    height: 20px;
    margin: 2rem 0.3rem;
    background: #ccc;
    border-radius: 50%;
    animation: 0.9s bounce infinite alternate;


  }
.loading div:nth-child(2){
    animation-delay: 0.3s
}
.loading div:nth-child(3){
    animation-delay: 0.6s
}
@keyframes bounce {
  to {
    opacity: 0.3;
    transform: translate3d(0, -1rem, 0);
  }
}
/* Custom CSS */
.mobile-menu-container{
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1001;
    background-color: #fff;
    width: 100%;
    max-width: 280px;
    overflow-y: scroll;
    box-shadow: 0.1rem 0 0.6rem 0 rgba(51, 51, 51, 0.5);
    will-change: transform;
    font-size: 1.2rem;
    line-height: 1.5;
    transition: all 0.4s ease;
    z-index: 34342344;
}

.mobile-menu li a:hover,
.mobile-menu li a:focus {
    color: v-bind(setting.color);
    text-decoration: none;
    outline: none !important
}

.mobile-menu li.open>a,
.mobile-menu li.active>a {
    color: v-bind(setting.color);
}
.router-link-active.router-link-exact-active{
    color: v-bind(setting.color);
}
.main-mobile-li:hover{
    background-color: v-bind(setting.color);;
}
.sidebar-right .router-link-active.router-link-exact-active{
    color: #000!important;
}
.sidebar-right{
    visibility: hidden;
    width: 585px;
    height: 85vh;
    position: fixed;
    right: -585px;
    top: calc(50% + 50px);
    z-index: 34342344;
    background-color: #fff;
    box-shadow: 0.1rem 0 0.6rem 0 rgba(51, 51, 51, 0.5);
    will-change: transform;
    font-size: 1.2rem;
    line-height: 1.5;
    transition: all 0.8s ease;
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
    transform:translateY(-50%);
    border-radius: 6px 0 0 6px;
    overflow: hidden;
}
.sidebar-right.compare{
    top: 50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 1100px;
    height: 90vh;
    overflow-y: scroll;
    overflow-x: scroll;
}
.btn-outline-primary-2:hover,
.btn-outline-primary-2:focus,
.btn-outline-primary-2.focus,
.btn-outline-primary-2:not(:disabled):not(.disabled):active,
.btn-outline-primary-2:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary-2.dropdown-toggle {
    color: #fff;
    background-color: v-bind(setting.color);
    border-color: v-bind(setting.color);
    box-shadow: none
}
.btn-outline-primary-2 {
    color: v-bind(setting.color);
    background-color: transparent;
    background-image: none;
    border-color: v-bind(setting.color);
    box-shadow: none
}
.cart-header{
    display: flex;
    width: 100%;
    font-size: 15px;
    color: #000;
    /* background-color: #ccc; */
    height: 40px;
    box-sizing: border-box;
    padding: 0 0 0 20px;
    position: relative;
}
.cart-header .cart{
    font-size: 30px;
}
.cart-header .itemCount{
    font-size: 20px;
    font-weight: 600;
    margin-top: 5px;
    margin-left: 0px
}
.cart-header .closeCartButton{
    padding: 2px 5px;
    position: absolute;
    right: 10px;
    top:50%;
    transform:translateY(-50%);
}
.cart-header .closeCartButton button{
    background:#fff;
    border:none;
    font-weight:800;
}
.dropdown-cart-products{
    padding: 0;
    height: calc(96vh - 300px);
    position: relative;
    overflow-y: scroll;
}
.dropdown-cart-products .product{
    margin:0!important;
    padding:10px;
    display: flex;
}
.dropdown-cart-products .product img{
    border: 1px solid #b0b0b0;
    border-radius:6px;
}
.dropdown-cart-total{
    padding: 10px 10px;
    margin-bottom: 0;
    border-top:1px solid #000;
}
.product-cart-details{
    width: 100%;
    display: flex;
    align-items: center;
}
.product-image-container{
    width: 25%;
}
.cart.btn-remove{
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.product-image-container .product-image{
    height: auto;
}

.dropdown-cart-action .btn {
    font-size: 1.3rem;
    min-width: 50%;
    padding-top: .75rem;
    padding-bottom: .75rem;
    border: none;
    color: #000;
    background-color: #e1e1e1;
}
.btn-primary.view-cart{
    border-right: 1px solid #fff;
}
.get-quote-btn span a{
    color:#000;
}
.get-quote-btn span:hover, .shop-now-btn span:hover{
    background:#F1F9FE!important;
    border: 1px solid #b0b0b0!important;
}
.shop-now-btn span:hover a{
    color: #000!important;
}
.btn-primary.view-cart:hover, .btn-primary.checkout:hover{
    background: v-bind(setting.color);
    color : #fff;
}
.social-icon:hover,
.social-icon:focus {
    color: v-bind(setting.color);
    border-color: v-bind(setting.color);
    background-color: transparent
}
.compare.product-item{
    max-width:33.3%!important;
    width:33.3%!important;
}
.no-cart{
    font-size: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: calc(100% - 20px);
    height: 100%;
}
.icon-shopping-bag{
    display: flex;
    justify-content: center;
    align-items: center;

}
::-webkit-scrollbar {
    width: 4px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
    background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
    background: #888;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
    background: #555;
    }
@media screen and (max-width: 992px) {

}
.product{
    /* box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */
    box-sizing: border-box;
    transition: 0.3s;
    border-top: 1px solid #ccc;
    margin:10px;
    padding-bottom:10px;
}
.product:first-child{
    border-top: 1px solid #fff;
}
.product-name{
    text-align: justify;
}
input:focus {
  outline: none;
  box-shadow: none;
  border-color: inherit;
}
@media screen and (max-width: 992px) {
    .checkout-icon-home.shopping-bag{
        bottom:10px!important;
        top:calc(100% - 30px)!important;
        right:50%;
        transform: translateX(-2%);
    }
    .checkout-icon-home.compare{
        bottom:10px!important;
        top:calc(100% - 119px)!important;
        right:50%;
        transform: translateX(100%);
    }
    .sidebar-right.compare{
        width:90%!important
    }
    .sidebar-right.compare .product-item{
        width:100%!important;
        max-width:100%!important
    }
    
}
@media screen and (max-width: 768px) {
    .checkout-icon-home.shopping-bag{
        top:calc(100% - 15px)!important;
    }
    .checkout-icon-home.compare{
        bottom:10px!important;
        top:calc(100% - 105px)!important;
        right:50%;
        transform: translateX(100%);
    }
    .checkout-icon-home{
        width:60px!important;
        height:60px!important;
    }
    .checkout-icon-home .image img{
        width:20px!important;
        height:20px!important;

    }
    .checkout-icon-home p{
        font-size: 12px;
        padding: 3px 5px;
        position:absolute;
        bottom:0;
        width:100%
    }
    .product-cart-details .product-name{
        font-size:13px!important;
        font-weight:400;
    }    
    
    .product-cart-details .productid, .product-cart-details .productid span, .product-cart-details .product-variant, .product-cart-details .product-variant span,.product-cart-details .size, .product-cart-details .size span{
        font-size:12px!important;
    }
    .product-cart-details .total-price-quantity .total-price{
        font-size:14px!important
    }
    .product-cart-details .total-price-quantity input{
        font-size:14px!important
    }
}

</style>
