<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)
import homeSlider from './homeSlider.vue'
const normal = async()=>{
        store.dispatch("SearchText", null)
        pageproducts.value = []
        pageParentProducts.value = []
        pageExtraCategories.value = []
    if(subCategory.value.length == 0){
        productLoader.value = true
        await axios.post('/api/setting-get').then(response => {
            axios.post('/api/home-page').then(response => {
                store.dispatch("Homepage",response.data)
                // store.dispatch("Products",response.data)
                response.data.subCategory.map((sub, index)=>{
                    HomepageSubcategory.value.push(sub)
                    if(index == 0){
                        sub.active = 1
                        currentCategory.value = sub.id
                        axios.post('/api/total-category-product/'+sub.id).then(response => {
                            CategoryTotalProducts.value = response.data.totalProducts
                        })
                        axios.post('/api/parent-category-check/'+sub.id).then(response => {
                            store.dispatch("Products",response.data)
                            response.data.subCategoryProduct.map((prod, index)=>{
                                pageproducts.value.push(prod)
                                pageParentProducts.value.push(response.data.categoryWiseProduct[index])
                                pageExtraCategories.value.push(response.data.extra_categories.data[index])
                            })
                            let count = ref(0)
                            categories.value.map((cat)=>{
                                if(cat.cat_id == sub.id){
                                    count.value++
                                }
                            })
                            CategoryProduct.value = count.value
                            NexturlPage.value = parseInt(CategoryProduct.value/10)+1
                            if(NexturlPage.value == 1){
                                NexturlPage.value = 2
                            }
                            productLoader.value = false
                        })
                    }
                })
            })
        })
    }else{
        subCategory.value.map((s)=>{
            HomepageSubcategory.value.push(s)
            if(s.active==1){
                currentCategory.value = s.id
            }
        })
        axios.post('/api/total-category-product/'+currentCategory.value).then(response => {
            CategoryTotalProducts.value = response.data.totalProducts
        })
        categories.value.map((cat)=>{
            if(cat.cat_id == currentCategory.value){
                products.value.map((prod, index)=>{
                    if(cat.product_id == prod.id){
                        pageproducts.value.push(prod)
                        pageParentProducts.value.push(parentProducts.value[index])
                        pageExtraCategories.value.push(categories.value[index])
                    }
                })
            }
        })
        let count = ref(0)
        categories.value.map((cat)=>{
            if(cat.cat_id == currentCategory.value){
                count.value++
            }
        })
        CategoryProduct.value = count.value
        NexturlPage.value = parseInt(CategoryProduct.value/10)+1
        if(NexturlPage.value == 1){
            NexturlPage.value = 2
        }
        productLoader.value = false
    }
}
onMounted(async () => {
    window.scrollTo(0, 0);
    normal()
    store.dispatch('mobileMenuHideShow', false)  
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
    store.dispatch('CartCompare','0px')
    store.dispatch('HeaderFooterOff',true)
})
let colorErrorMsg = ref()
let filtercheck = ref(false)
let categorycheck = ref([])
let pageExtraCategories = ref([])
let pageproducts = ref([])
let pageParentProducts = ref([])
let attributeColor = ref([])
const parentCatCheck = async(data)=>{
    pageproducts.value = []
    pageParentProducts.value = []
    pageExtraCategories.value = []
    axios.post('/api/total-category-product/'+data).then(response => {
        CategoryTotalProducts.value = response.data.totalProducts
    })
    let categoryCheck = ref(false)
    currentCategory.value = data
    categories.value.map((cat)=>{
        if(cat.cat_id == data){
            categoryCheck.value = true
            products.value.map((prod, index)=>{
                if(cat.product_id == prod.id){
                    pageproducts.value.push(prod)
                    pageParentProducts.value.push(parentProducts.value[index])
                    pageExtraCategories.value.push(categories.value[index])
                }
            })
        }
    })
    if(categoryCheck.value == false){
        productLoader.value = true
        axios.post('/api/parent-category-check/'+data).then(response => {
            store.dispatch("Products",response.data)
            response.data.subCategoryProduct.map((prod, index)=>{
                pageproducts.value.push(prod)
                pageParentProducts.value.push(response.data.categoryWiseProduct[index])
                pageExtraCategories.value.push(response.data.extra_categories.data[index])
            })
            let count = ref(0)
            categories.value.map((cat)=>{
                if(cat.cat_id == data){
                    count.value++
                }
            })
            CategoryProduct.value = count.value
            productLoader.value = false
        })
        
    }
    if(categoryCheck.value == true){
        let count = ref(0)
        categories.value.map((cat)=>{
            if(cat.cat_id == data){
                count.value++
            }
        })
        CategoryProduct.value = count.value
    }
    subCategory.value.map((sub, index)=>{
        sub.active = 0
        if(sub.id == data){
            sub.active = 1
            parentCategory.value.map((parentcat, parentIndex)=>{
                if(index == parentIndex){
                    Homepageparentcategory.value = parentcat
                }
            })
        }
    })
    
    NexturlPage.value = parseInt(CategoryProduct.value/10)+1
    if(NexturlPage.value == 1){
        NexturlPage.value = 2
    }
}
const categoryProductCheck = async(id) => {
    colorErrorMsg.value = ''
    let checkStateCategory = ref(true)
    categorycheck.value.map((val)=>{
        if(categories.value.length > 0){
            let catCheck = ref(true)
            categories.value.map((catID)=>{
                if(catID.cat_id == val){
                    catCheck.value = false
                    checkStateCategory.value = false
                }
            })
            if(catCheck.value == true){
                productLoader.value = true
                axios.post('api/categoryWiseProduct/'+val).then(response => {
                store.dispatch("Products",response.data)
                productLoader.value = false
                // pageExtraCategories.value = []
                // pageproducts.value = []
                // pageParentProducts.value = []
                    response.data.subCategoryProduct.map((prod, index)=>{
                        pageproducts.value.push(prod)
                        pageParentProducts.value.push(response.data.categoryWiseProduct[index])
                        pageExtraCategories.value.push(response.data.extra_categories[index])
                    })
                })
            }
        }else{
            productLoader.value = true
            axios.post('api/categoryWiseProduct/'+val).then(response => {
                store.dispatch("Products",response.data)
                productLoader.value = false
                pageExtraCategories.value = []
                pageproducts.value = []
                pageParentProducts.value = []
                response.data.subCategoryProduct.map((prod, index)=>{
                    pageproducts.value.push(prod)
                    pageParentProducts.value.push(response.data.categoryWiseProduct[index])
                    pageExtraCategories.value.push(response.data.extra_categories[index])
                })
            })  
        }
    })
    if(checkStateCategory.value == false){
        productLoader.value = true
        pageExtraCategories.value = []
        pageproducts.value = []
        pageParentProducts.value = []
        categorycheck.value.map((val)=>{
            categories.value.map((prod, index, farr)=>{
                if(prod.cat_id == val){
                    pageExtraCategories.value.push(prod)
                    pageproducts.value.push(products.value[index])
                    pageParentProducts.value.push(parentProducts.value[index])
                }
                productLoader.value = false
            }) 
        })
    }
    

}
const filterClick = async()=>{
    filtercheck.value = !filtercheck.value
}
const mouseOver = async(parentId, image, prodIndex)=>{
    productLoader.value = true
    pageParentProducts.value[prodIndex].map((parentProduct)=>{
        parentProduct.default_product = 0
        if(parentId == parentProduct.id){
            singleLoadingProductId.value = parentProduct.parent_id
            parentProduct.default_product = 1  
            pageproducts.value[prodIndex].image = parentProduct.image
            pageproducts.value[prodIndex].name = parentProduct.product_name
        }
        productLoader.value = false
        singleLoadingProductId.value = ''
    })
}
const colorFilter = async(id)=>{
    if(categorycheck.value.length == 0){
        colorErrorMsg.value = 'Please Select your Category!'
    }else{
        pageExtraCategories.value = []
        pageproducts.value = []
        colors.value.map((col, index)=>{
            if(col.id == id){
                store.dispatch("colorChanges", id)
            }
            if(col.active == 1){
                pageParentProducts.value.map((p)=>{
                    if(p.length > 0){
                        p.map((parentProduct)=>{
                            if(parentProduct.product_attribute == col.name){
                                pageproducts.value.push(parentProduct)
                            }
                        })
                    }
                })
            }
        })
    }
}
let loadMoreWork = ref(false)
const moreProducts = async(url)=>{
    if(loadMoreWork.value == false){
        
        loadMoreWork.value = true
        axios.post(url).then(response => {
            CategoryTotalProducts.value = response.data.totalProducts
            store.dispatch("Products",response.data)
            productLoader.value = false
            response.data.subCategoryProduct.map((prod, index)=>{
                pageproducts.value.push(prod)
                pageParentProducts.value.push(response.data.categoryWiseProduct[index])
                pageExtraCategories.value.push(response.data.extra_categories[index])
            })
            let count = ref(0)
            categories.value.map((cat)=>{
                if(cat.cat_id == currentCategory.value){
                    count.value++
                }
            })
            CategoryProduct.value = count.value
            loadMoreWork.value = false
        })
        NexturlPage.value++
    }
        
}
</script>
<template>
<main class="main">
    <div class="container-fluid">
        <!-- <homeSlider></homeSlider> -->
        <div class="product-top-section">
            <div class="row">
                <div class="col-md-4">backpack/business-backpack</div>
                <div class="col-md-4 text-center"></div>
                <div class="col-md-4 text-right" style="display:flex; justify-content: right; align-items: center;">
                    <select class="ml-1">
                        <option value="">Samples</option>
                        <option value="">ASC</option>
                        <option value="">DESC</option>
                    </select>
                    <select class="ml-1">
                        <option value="">Price Low-High</option>
                        <option value="">Price High-Low</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="products-container mt-1">
            <div class="row">
                <div class="col-md-2" >
                    <ul style="background-color: #000; color:#fff;padding-left:20px;padding-right:0">
                        <li class="main-ul-category">Backpack</li>
                        <ul class="sub-ul-category">
                            <li>My Name is Hasan </li>
                            <li>Best Backpack</li>
                        </ul>
                        <li class="main-ul-category">Backpack</li>
                        <ul class="sub-ul-category">
                            <li>My Name is Hasan </li>
                        </ul>
                        <li class="main-ul-category">Backpack</li>
                        <ul class="sub-ul-category">
                            <li>My Name is Hasan </li>
                        </ul>
                        <li class="main-ul-category">Backpack</li>
                        <ul class="sub-ul-category">
                            <li>My Name is Hasan </li>
                        </ul>
                        <li class="main-ul-category">Backpack</li>
                        <ul class="sub-ul-category">
                            <li>My Name is Hasan </li>
                        </ul>
                        <li class="main-ul-category">Backpack</li>
                        <ul class="sub-ul-category">
                            <li>My Name is Hasan </li>
                        </ul>
                        <li class="main-ul-category">Backpack</li>
                        <ul class="sub-ul-category">
                            <li>My Name is Hasan </li>
                        </ul>
                        <li class="main-ul-category">Backpack</li>
                        <ul class="sub-ul-category">
                            <li>My Name is Hasan </li>
                        </ul>
                            
                    </ul>
                </div>
                <div class="col-md-10">
                    <div class="homepageLoader">
                
            </div>
            <div class="all-product">
                <div class="product-item accessories lighting sale" style="width:25%; flex: 0 0 25%; max-width: 25%;" v-for="ddf in 12">
                        <div class="product product-4">
                            <div class="row" style="position:absolute;top:5px; left:5px;z-index: 3; width:100%">
                                <div class="col-6"><span style="padding:2px 8px; font-size:12px; color:#fff; background-color: red;">NEW</span></div>
                                <div class="col-6 text-right text-black">SKU-W011</div>
                            </div>
                            <router-link to="#">
                                <figure class="product-media">
                                    <a>
                                        <img src="https://gotwin.com.bd/public/storage/images/product_thumbnail_img/1712387984Laptop%20Sleeve%20GotWin%204.webp" class="product-image">
                                    </a>
                                </figure><!-- End .product-media -->
                            </router-link>
                            <div class="product-body">
                                <h3 class="product-title">My Best Bags</h3>
                                <h3 class="product-title text-center text-success" style="font-size:12px">Minimum Order : <span style="color:#cecece;">100 Pcs</span></h3>
                                <div class="product-price text-center"><span class="text-black" style="font-weight:500; color :#000;">Price :</span>
                                    <span class="new-price-n text-danger ml-2">৳ 1220 - ৳ 1420</span>
                                </div><!-- End .product-price -->
                                <div class="action-button" style="padding:0 10px;">
                                    <div class="row">
                                        <div class="col-md-6 add-to-cart"><span style="padding:2px 5px;font-size:13px;border:1px solid #000; border-radius:5px; text-align:center; font-weight: 500;">Compare</span></div>
                                        <div class="col-md-6 text-right"><span style="padding:2px 5px; text-align:center; background:#000; color:#fff; border-radius:5px;">Get Quote</span></div>
                                    </div>
                                    
                                </div>
                            </div><!-- End .product-body -->
                        </div><!-- End .product -->
                </div><!-- End .product-item -->
            </div>
                </div>
            </div>
            
            
        </div><!-- End .products-container -->
        <div class="product-top-section">
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4 text-center"><span style="padding: 0 10px; border-bottom:1px solid #000; font-size: 25px; font-weight: 400">Hot Selling</span></div>
            </div>
        </div>
        <div class="products-container">
            <div class="all-product">
                <div class="product-item accessories lighting sale" style="width:20%; flex: 0 0 20%; max-width: 20%;" v-for="ddf in 12">
                        <div class="product product-4">
                            <div class="row" style="position:absolute;top:5px; left:5px;z-index: 3; width:100%">
                                <div class="col-6"><span style="padding:2px 8px; font-size:12px; color:#fff; background-color: red;">NEW</span></div>
                                <div class="col-6 text-right text-black">SKU-W011</div>
                            </div>
                            <router-link to="#">
                                <figure class="product-media">
                                    <a>
                                        <img src="https://gotwin.com.bd/public/storage/images/product_thumbnail_img/1712387984Laptop%20Sleeve%20GotWin%204.webp" class="product-image">
                                    </a>
                                </figure><!-- End .product-media -->
                            </router-link>
                            <div class="product-body">
                                <h3 class="product-title">My Best Bags</h3>
                                <h3 class="product-title text-center text-success" style="font-size:12px">Minimum Order : <span style="color:#cecece;">100 Pcs</span></h3>
                                <div class="product-price text-center"><span class="text-black" style="font-weight:500; color :#000;">Price :</span>
                                    <span class="new-price-n text-danger ml-2">৳ 1220 - ৳ 1420</span>
                                </div><!-- End .product-price -->
                                <div class="action-button" style="padding:0 10px;">
                                    <div class="row">
                                        <div class="col-md-6 add-to-cart"><span style="padding:2px 5px;font-size:13px;border:1px solid #000; border-radius:5px; text-align:center; font-weight: 500;">Compare</span></div>
                                        <div class="col-md-6 text-right"><span style="padding:2px 5px; text-align:center; background:#000; color:#fff; border-radius:5px;">Get Quote</span></div>
                                    </div>
                                    
                                </div>
                            </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="CategoryTotalProducts > CategoryProduct">
        <a @click="moreProducts('https://admindemo1.softwarelagbe.com/api/parent-category-check/'+currentCategory+'?page='+NexturlPage)" class="btn btn-outline-dark-3 btn-more"><span v-if="!loadMoreWork">more products</span>
            <div class="spinner-border" role="status"  v-if="loadMoreWork">
                <span class="sr-only">Loading...</span>
            </div>
        </a>
    </div><!-- End .more-container -->
</main><!-- End .main -->
</template>
<style scoped>
.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
}

.cart-dropdown .cart-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;
    margin-left: .2rem;
    margin-top: .1rem;
    color: #fff;
    background-color: v-bind(setting.color);
}
.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: 16px;
    color: v-bind(setting.color);
    font-weight:500;
}
.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{
    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: 1px solid transparent;
    border-radius: 10px;
    margin:10px;
    padding-bottom:10px;
}
.product:hover{
    border: 1px solid v-bind(setting.color)
}
.main-ul-category{
    position: relative;
    border-bottom: 1px solid #4b4848;
}
.main-ul-category li{

}
.main-ul-category:before{
    position:absolute;
    content:'';
    width: 6px;
    height: 2px;
    background: #4b4848;
    top:12px;
    right: 15px;
    transform: rotate(45deg);
}
.main-ul-category:after{
    position:absolute;
    content:'';
    width: 6px;
    height: 2px;
    background: #4b4848;
    top:12px;
    right: 19px;
    transform: rotate(135deg);
}
.sub-ul-category li{
    margin-left:30px;
    border-bottom: 1px solid #4b4848;
}
ul li{
    font-size: 14px;
}
.all-product{
    margin-top:-10px;
}
</style>