<script setup>
import { ref, onMounted, computed } from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const store = useStore();
const route = useRouter();
let setting = computed(() => store.state.settings)
let productLoader = ref(false)
let urlCat = ref(route.currentRoute.value.params.categoryProduct)

// New Page Work
let loadMoreWork = ref(false)
let CurrentProduct = ref([])
let next_page_url = ref()
let parentProduct = ref([])
let currentCategory = ref([])
let category = ref([])
let type = ref('')
const normal = async()=>{
    productLoader.value = true
    await axios.post('/api/setting-get').then(response => {
        axios.post('/api/category-product/'+urlCat.value).then(response => {
            productLoader.value = false
            if(response.data.type == 'category'){
                type.value = 'category'
                currentCategory.value = response.data.currentCategory
                category.value = response.data.category
            }else if(response.data.type == 'product'){
                type.value = 'product'
                CurrentProduct.value = response.data.product
                next_page_url.value = response.data.catProduct.next_page_url
                parentProduct.value = response.data.parentProduct
                currentCategory.value = response.data.currentCategory
            }
        })
    })
}
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.product.map((prod, index)=>{
            CurrentProduct.value.push(prod)
            parentProduct.value.push(response.data.parentProduct[index])
        })
        next_page_url.value = response.data.catProduct.next_page_url
    })
}
const Categoryget = async(cat)=>{
    productLoader.value = true
    axios.post('/api/category-product/'+cat).then(response => {
        productLoader.value = false
        if(response.data.type == 'category'){
            type.value = 'category'
            currentCategory.value = response.data.currentCategory
            category.value = response.data.category
        }else if(response.data.type == 'product'){
            type.value = 'product'
            CurrentProduct.value = response.data.product
            next_page_url.value = response.data.catProduct.next_page_url
            parentProduct.value = response.data.parentProduct
            currentCategory.value = response.data.currentCategory
        }
        productLoader.value = false
    })
}
</script>
<template>
<main class="main">
    <div class="container-fluid" v-if="currentCategory.icon_image">
        <div class="page-header text-center page-banner" :style="{'background-image': 'url(' + setting.frontend_img_url+'/storage/image/category/banner/' + currentCategory.icon_image+')'}" v-if="setting.frontend_img_url">
            
        </div><!-- End .page-header -->
    </div>
    <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" aria-current="page">Category</li>
                <li class="breadcrumb-item active" aria-current="page">{{currentCategory.category_name}}</li>
            </ol>
        </div><!-- End .container -->
    </nav><!-- End .breadcrumb-nav -->
    <div class="container-fluid">
        <div class="cat-blocks-container" v-if="type == 'category' && !productLoader">
            <div class="row" style="width:100%">
                <div class="col-6 col-md-4 col-lg-3" v-for="cat in category">
                    <router-link @click="Categoryget(cat.category_name)" :to="cat.slug" class="cat-block">
                        <figure>
                            <span>
                                <img :src="setting.frontend_img_url+'/storage/image/category/'+cat.banner_image" :alt="cat.category_name">
                            </span>
                        </figure>
                        <h3 class="cat-block-title">{{cat.category_name}}</h3><!-- End .cat-block-title -->
                    </router-link>
                </div><!-- End .col-6 col-md-4 col-lg-3 -->
            </div><!-- End .row -->
        </div><!-- End .cat-blocks-container -->
        <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="type == 'product' && !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);
}
.cat-block-title{
    color: #666666;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 0;
    transition: color .35s ease;
}
.cat-blocks-container{
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.cat-blocks-container img{
    min-height: 160px;
}
.cat-blocks-container a{
    text-align: center;
}
.cat-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
    background-color: #fff;
    border-radius: .4rem;
    transition: box-shadow .35s ease;
    min-height: 160px;
    padding-bottom: 1.5rem;
}
.cat-block:hover {
    box-shadow: 1px 5px 10px rgba(0,0,0,0.08);
}
.cat-block figure {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 124px;
    margin: 0;
    margin-bottom: 10px;
}
.cat-block figure span {
    position: relative;
}
.cat-block img {
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.35s ease;
    display: block;
    max-width: 100%;
    height: auto;
}
.page-header{
    min-height: 300px;
}
</style>