<script setup>
import { ref, onMounted, computed } from 'vue'
import { useStore } from "vuex";
const store = useStore();
let subCategory = computed(() => store.state.subCategory)
let parentCategory = computed(() => store.state.parentCategory)
let colors = computed(() => store.state.colors)
let categories = computed(() => store.state.extra_categories)
let products = computed(() => store.state.products)
let parentProducts = computed(() => store.state.parentProducts)
let setting = computed(() => store.state.settings)
let HomepageSubcategory = ref([])
let Homepageparentcategory = ref([])
let productLoader = ref(false)
let singleLoadingProductId = ref()
let currentCategory = ref()
let CategoryProduct = ref(0)
let NexturlPage = ref()
let CategoryTotalProducts = ref(0)
// New Page Work
let loadMoreWork = ref(false)
let CurrentProduct = ref([])
let next_page_url = ref()
let parentProduct = ref([])
const normal = async()=>{
    productLoader.value = true
    await axios.post('/api/setting-get').then(response => {
        axios.post('/api/shop-page').then(response => {
            productLoader.value = false
            CurrentProduct.value = response.data.data.data
            parentProduct.value = response.data.parentProduct
            next_page_url.value = response.data.data.next_page_url
        })
    })
}
onMounted(async () => {
    window.scrollTo(0, 0);
    normal()
    store.dispatch('mobileMenuHideShow', false)  
    store.dispatch("SearchText", null)
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
    store.dispatch('CartCompare','0px')
    store.dispatch('HeaderFooterOff',true)
})

const mouseOver = async(parentId, image, prodIndex)=>{
    productLoader.value = true
    parentProduct.value[prodIndex].map((parentProduct)=>{
        parentProduct.default_product = 0
        if(parentId == parentProduct.id){
            parentProduct.default_product = 1  
            CurrentProduct.value[prodIndex].image = parentProduct.image
            CurrentProduct.value[prodIndex].name = parentProduct.product_name
        }
        productLoader.value = false
    })
}
const MoreProduct = async(url)=>{
    loadMoreWork.value = true
    axios.post(url).then(response => {
        loadMoreWork.value = false
        response.data.data.data.map((prod, index)=>{
            CurrentProduct.value.push(prod)
            parentProduct.value.push(response.data.parentProduct[index])
        })
        next_page_url.value = response.data.data.next_page_url
    })
}
</script>
<template>
<main class="main">
    <div class="page-header text-center">
        <div class="container-fluid">
            <h1 class="page-title">Shop<span><br>Products</span></h1>
        </div><!-- End .container -->
    </div><!-- End .page-header -->
    <nav aria-label="breadcrumb" class="breadcrumb-nav">
        <div class="container-fluid">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><router-link to="/">Home</router-link></li>
                <li class="breadcrumb-item active" aria-current="page">Shop</li>
            </ol>
        </div><!-- End .container -->
    </nav><!-- End .breadcrumb-nav -->
    <div class="container-fluid">

        <div class="products-container">
            <div class="homepageLoader" v-if="productLoader">
                <div class="product-item accessories lighting sale col-6 col-md-4 col-lg-3">
                    <div class="product product-4">
                        <figure class="product-media">
                            <a></a>
                        </figure><!-- End .product-media -->
                        <div class="product-body">
                            <h3 class="product-title"><span class="product-name"></span></h3><!-- End .product-title -->
                            <div class="product-price">
                            </div><!-- End .product-price -->
                            <div class="product-action">
                               
                            </div><!-- End .product-action -->
                        </div><!-- End .product-body -->
                    </div><!-- End .product -->
                </div><!-- End .product-item -->
                <div class="product-item accessories lighting sale col-6 col-md-4 col-lg-3">
                    <div class="product product-4">
                        <figure class="product-media">
                            <a></a>
                        </figure><!-- End .product-media -->
                        <div class="product-body">
                            <h3 class="product-title"><span class="product-name"></span></h3><!-- End .product-title -->
                            <div class="product-price">
                                <span class="new-price"><span class="product-price"></span></span>
                            </div><!-- End .product-price -->
                            <div class="product-action">
                            </div><!-- End .product-action -->
                        </div><!-- End .product-body -->
                    </div><!-- End .product -->
                </div><!-- End .product-item -->
                <div class="product-item accessories lighting sale col-6 col-md-4 col-lg-3">
                    <div class="product product-4">
                        <figure class="product-media">
                            <a></a>
                        </figure><!-- End .product-media -->

                        <div class="product-body">
                            <h3 class="product-title"><span class="product-name"></span></h3><!-- End .product-title -->
                            <div class="product-price">
                                <span class="new-price"><span class="product-price"></span></span>
                            </div><!-- End .product-price -->
                        </div><!-- End .product-body -->
                    </div><!-- End .product -->
                </div><!-- End .product-item -->
                <div class="product-item accessories lighting sale col-6 col-md-4 col-lg-3">
                    <div class="product product-4">
                        <figure class="product-media">
                            <a></a>
                        </figure><!-- End .product-media -->

                        <div class="product-body">
                            <h3 class="product-title"><span class="product-name"></span></h3><!-- End .product-title -->
                            <div class="product-price">
                                <span class="new-price"><span class="product-price"></span></span>
                            </div><!-- End .product-price -->
                            <div class="product-action">
                            </div><!-- End .product-action -->
                        </div><!-- End .product-body -->
                    </div><!-- End .product -->
                </div><!-- End .product-item -->
            </div>
            <div class="all-product" v-if="!productLoader">
                <div class="product-item accessories lighting sale col-6 col-md-4 col-lg-3" v-for="(product, index) in CurrentProduct">
                        <div class="product product-4">
                            <router-link :to="'/product-details/'+product.product_code+'/'+product.product_name">
                                <figure class="product-media">
                                    <a>
                                        <img :src="setting.frontend_img_url+'/storage/image/product/'+product.image" :alt="product.product_name" class="product-image">
                                    </a>
                                </figure><!-- End .product-media -->
                            </router-link>

                            <div class="product-body">
                                <h3 class="product-title"><router-link :to="'/product-details/'+product.product_code+'/'+product.product_name">{{product.product_name}}, {{product.id}}</router-link></h3><!-- End .product-title -->
                                <div class="product-price">
                                    <span class="new-price-n"> ৳ {{product.product_price}}</span>
                                    <!-- <span class="old-price" v-if="product.old_price">Was  ৳ {{product.old_price}}</span> -->
                                </div><!-- End .product-price -->
                                <div class="product-nav product-nav-dots">
                                    <a :style="'background:#'+parentprod.product_attribute" :class="{active: parentprod.default_product == 1 }"  @click="mouseOver(parentprod.id, parentprod.image, index)" v-for="parentprod in parentProduct[index]"><span class="sr-only">Color name</span></a>
                                    <!-- <a href="#" style="background: #a48264;"><span class="sr-only">Color name</span></a> -->
                                </div><!-- End .product-nav -->
                                <router-link :to="'/product-details/'+product.product_code+'/'+product.product_name">
                                    <div class="quick-view-btn">
                                        <div class="btn quick-view">Quick View</div>
                                    </div>
                                    
                                </router-link>
                            </div><!-- End .product-body -->
                        </div><!-- End .product -->
                </div><!-- End .product-item -->
            </div>
        </div><!-- End .products-container -->
    </div><!-- End .container -->
    <div class="more-container text-center mt-0 mb-7" v-if="next_page_url !== null && CurrentProduct.length > 0">
        <a @click="MoreProduct(next_page_url)" class="btn btn-outline-dark-3 btn-more"><span v-if="loadMoreWork == false">more products</span>
            <div class="spinner-border" role="status" v-if="loadMoreWork == true">
                <span class="sr-only">Loading...</span>
            </div>
        </a>
    </div><!-- End .more-container -->
</main><!-- End .main -->
</template>
<style>
.btn-more{
    cursor: pointer
}
.products-container{
    position:relative;
}
.more-container{
    cursor: pointer;
}
.homepageLoader .product-item .product-media, .single-product-loader .product-media{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;

}
.homepageLoader .product-item .product-media a, .single-product-loader .product-media a{
    width: 100%;
    height: 100%;
    background: #e9edf1;
    background: linear-gradient(90deg, #e9edf1 7%, #eff2f4 12%, #e9edf1 37%);
    background-size: 200% 100%;
    animation: 1.5s shimmer linear infinite;
}
.product.product-4 .product-nav{
    flex-wrap:wrap
}
@keyframes shimmer {
    to {
        background-position-x: -150%;
    }
}
.homepageLoader .product-body{
    min-height:80px;
}
.homepageLoader .product-title{
    width: 100%;
    height: 25px;
    background: #e9edf1;
    background: linear-gradient(90deg, #e9edf1 7%, #eff2f4 12%, #e9edf1 100%);
    background-size: 200% 100%;
    animation: 1.5s textshimmer linear infinite;
}
@keyframes textshimmer {
    to {
        background-position-x: -150%;
    }
}
.homepageLoader .product-price{
    width: 100%;
    height: 25px;
    background: #e9edf1;
    background: linear-gradient(90deg, #e9edf1 7%, #eff2f4 12%, #e9edf1 100%);
    background-size: 200% 100%;
    animation: 1.5s priceshimmer linear infinite;
}
@keyframes priceshimmer {
    to {
        background-position-x: -150%;
    }
}
.widget.color{
    position:relative;
}
.colorErrorMsg{
    position: absolute;
    top: 35px;
}
.product-nav-dots{
    height:15px;
}

.product-nav-dots a{
    border: 2px solid #ccc;
}
.product-nav-dots a.active{
    border: 2px solid #39f;
}
.homepageLoader .product{
    padding:0!important
}


.nav-filter .active a {
    color: v-bind(setting.color)!important;
    border-bottom-color: v-bind(setting.color)!important;
}
a {
    text-decoration: none;
    transition: color 0.3s ease
}
a:hover,
a:focus {
    /* color: #c4782c!important; */
    text-decoration: none
}
.new-price-n{
    font-size: 20px;
    color: v-bind(setting.color);
    font-weight:600;
}
.btn.quick-view{
    margin-top:20px;
    background-color: v-bind(setting.color);
    padding: 5px;
    border-radius:10px;
    color: #fff;
}
.quick-view-btn{
    display: flex;
    justify-content: center;
}
.product-title a:hover,
.product-title a:focus {
    color: v-bind(setting.color)
}
.product{
    padding: 5px;
    box-sizing: border-box;
    transition: 0.3s;
    border: 1px solid transparent;
    border-radius: 5px;
}
.product:hover{
    border: 1px solid v-bind(setting.color)
}
.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: v-bind(setting.color);
}
</style>