<script setup>
import { ref, onMounted, computed } from 'vue'
import { useStore } from "vuex";
const store = useStore();
// import 'vue3-carousel/dist/carousel.css'
// import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

import { Swiper, SwiperSlide  } from 'swiper/vue'
import { Autoplay} from 'swiper/modules';

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 MainNav = computed(() => store.state.MainNav)
let setting = computed(() => store.state.settings)
let HomepageSubcategory = ref([])
let Homepageparentcategory = ref([])
let ReadyproductLoader = ref(false)
let SampleproductLoader = ref(false)
let singleLoadingProductId = ref()
let currentCategory = ref()
let CategoryProduct = ref(0)
let NexturlPage = ref()
let CategoryTotalProducts = ref(0)
let ReadyProducts = computed(() => store.state.ReadyProducts)
let ReadyProductImage = computed(() => store.state.ReadyProductImage)
let ReadyProductNextPage = computed(() => store.state.ReadyProductNextPage)
let SampleProducts = computed(() => store.state.SampleProducts)
let SampleProductImage = computed(() => store.state.SampleProductImage)
let SampleProductNextPage = computed(() => store.state.SampleProductNextPage)
let readyProductSortBy = ref('ASC')
let SampleProductSortBy = ref('ASC')
let Slider = computed(() => store.state.homeSlider)
const normal = async()=>{
    store.dispatch('SubNavClose', false)
    store.dispatch('searchNull')
    MainNav.value.map((p)=>{
        p.active = 0
        p.category_active = 0
    })
    if(Slider.value.length == 0){
        axios.post('https://wbbd.wholesalebagbd.com/api/slider-page-get/dkfhdjk').then(response => {
        store.dispatch('HomeSlider',response.data.data.data)
    })
    }
    if(ReadyProducts.value.length == 0){
        ReadyproductLoader.value = true
        axios.post('/api/home-page-ready/'+readyProductSortBy.value).then(response => {
            ReadyproductLoader.value = false
            // ReadyProducts.value = response.data.ReadyProducts.data
            // ReadyProductNextPage.value = response.data.ReadyProducts.next_page_url
            // ReadyProductImage.value = response.data.readyProductImage
            let ReadyProducts = response.data.ReadyProducts.data
            let ReadyProductNextPage = response.data.ReadyProducts.next_page_url
            let ReadyProductImage = response.data.readyProductImage
            store.dispatch('ReadyProductSection',[ReadyProducts,ReadyProductNextPage,ReadyProductImage])
        })
    }
    if(SampleProducts.value.length == 0){
        SampleproductLoader.value = true
        axios.post('/api/home-page-sample/'+SampleProductSortBy.value).then(response => {
            SampleproductLoader.value = false
            // SampleProducts.value = response.data.SampleProducts.data
            // SampleProductNextPage.value = response.data.SampleProducts.next_page_url
            // sampleProductImage.value = response.data.sampleProductImage
            let SampleProducts = response.data.SampleProducts.data
            let SampleProductNextPage = response.data.SampleProducts.next_page_url
            let SampleProductImage = response.data.sampleProductImage
            store.dispatch('SampleProductSection',[SampleProducts,SampleProductNextPage,SampleProductImage])
        })
    }
    
}
onMounted(async () => {
    window.scrollTo(0, 0);
    normal()
    store.dispatch('mobileMenuHideShow', false)  
    store.dispatch('rightSidebar', false)
    store.dispatch('CartCompare','0')
})
const readyProductSort = async(event)=>{
    ReadyproductLoader.value = true
    await axios.post('/api/home-page-ready/'+event.target.value).then(response => {
        ReadyproductLoader.value = false
        // store.dispatch("Homepage",response.data)
        // store.dispatch("Products",response.data)
        ReadyProducts.value = response.data.ReadyProducts.data
        ReadyProductNextPage.value = response.data.ReadyProducts.next_page_url
        ReadyProductImage.value = response.data.readyProductImage
    })
}
const sampleProductSort = async(event)=>{
    SampleproductLoader.value = true
    await axios.post('/api/home-page-sample/'+event.target.value).then(response => {
        SampleproductLoader.value = false
        SampleProducts.value = response.data.SampleProducts.data
        SampleProductNextPage.value = response.data.SampleProducts.next_page_url
        sampleProductImage.value = response.data.sampleProductImage
    })
}
const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true
}
let readyProductLoading = ref(false)
const LoadMoreReadyProduct = async(d)=>{
    if(readyProductLoading.value == true){
        return
    }
    readyProductLoading.value = true
    axios.post(d).then(response => {
        readyProductLoading.value = false
        response.data.ReadyProducts.data.map((data, index)=>{
            ReadyProducts.value.push(data)
            ReadyProductImage.value.push(response.data.readyProductImage[index])
        })
        console.log(response.data.ReadyProducts.next_page_url)
        // ReadyProductNextPage.value = response.data.ReadyProducts.next_page_url
        store.dispatch('ReadyProductNextPageUrl',response.data.ReadyProducts.next_page_url)
    })
}
let sampleProductLoading = ref(false)
const LoadMoreSampleProduct = async(d)=>{
    if(sampleProductLoading.value == true){
        return
    }
    sampleProductLoading.value = true
    axios.post(d).then(response => {
        sampleProductLoading.value = false
        response.data.SampleProducts.data.map((data, index)=>{
            SampleProducts.value.push(data)
            SampleProductImage.value.push(response.data.sampleProductImage[index])
        })
        // SampleProductNextPage.value = response.data.SampleProducts.next_page_url
        store.dispatch('SampleProductNextPageUrl',response.data.SampleProducts.next_page_url)
    })
}
const onSlideChange = () => {
    console.log('slide change');
};
</script>
<template>
<main class="main">
    <div class="container-fluid">
        <Swiper :loop="true" :modules="[Autoplay]" :autoplay='{
            "delay": 2500,
            "disableOnInteraction": false
            }'>
            <SwiperSlide v-for="(prodIm, index) in Slider">
                <img class="variable-product-image" v-if="setting" style="border:1px dotted #000;" v-lazy="setting.frontend_img_url+'/storage/image/slider/'+prodIm.image">
            </SwiperSlide>
        </Swiper>
        <div class="product-top-section">
            <div class="row">
                
        <h3 @click="NextProduct">Next</h3>
                <div class="col-md-4"></div>
                <div class="col-md-4 text-center pt-4"><span style="padding: 0 10px; border-bottom:1px solid #000; font-size: 25px; font-weight: 400">READY TO SHIP</span></div>
                <div class="col-md-4 text-right" style="display:flex; justify-content: right; align-items: center;">Sort By : 
                    <select @change="readyProductSort($event)" v-model="readyProductSortBy" class="ml-1">
                        <option value="ASC">Default</option>
                        <option value="ASC">ASC</option>
                        <option value="DESC">DESC</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="products-container" v-if="ReadyproductLoader">
            <div class="homepageLoader">
                <div class="product-item accessories lighting sale" v-for="prod in 10">
                    <div class="product product-4">
                        <figure class="product-media">
                            <a></a>
                        </figure><!-- End .product-media -->
                    </div><!-- End .product -->
                </div><!-- End .product-item -->
            </div>
        </div><!-- End .products-container -->
        <div class="products-container" v-if="!ReadyproductLoader">
            <div class="all-product">
                <div class="product-item accessories lighting sale" v-for="(product, index) in ReadyProducts">
                        <div class="product product-4">
                            <div class="row" style="position:absolute;top:5px; left:5px;z-index: 3; width:100%">
                                <div class="col-4">
                                    <!-- <span style="padding:2px 8px; font-size:12px; color:#fff; background-color: red;">NEW</span> -->
                                </div>
                                <div class="col-8 text-right text-black">SKU-{{product.code}}</div>
                            </div>
                            <router-link :to="'/products/'+product.code+'/'+product.product_name">
                                <figure class="product-media">
                                    <a>
                                        <!-- <span style="position:absolute;z-index:1; top:0; width: 100%; height:100%; background:red;"></span> -->
                                        <img style="z-index:0;height:auto!important" v-if="ReadyProductImage[index]" v-lazy="setting.frontend_img_url+'/storage/image/product/'+ReadyProductImage[index].name" class="product-image">
                                    </a>
                                </figure><!-- End .product-media -->
                            </router-link>
                            <div class="product-body">
                                <h3 class="product-title" style="height:60px"><router-link :to="'/products/'+product.code+'/'+product.product_name">{{product.product_name.substring(0,100)}} <span v-if="product.product_name.length > 100">...</span></router-link></h3>
                                <h3 class="product-title text-center text-success" style="font-size:12px">In Stock : <span style="color:#000;">{{product.stock}} Pcs</span></h3>
                                <div class="product-price text-center"><span class="text-black" style="font-weight:500; color :#000;">Price :</span>
                                    <!-- <span class="old-price ml-2">৳ 1420</span> -->
                                    <span class="new-price-n text-danger ml-2"> ৳ {{product.selling_price}}</span>
                                </div><!-- End .product-price -->
                                <div class="action-button" style="padding:0 10px;">
                                    <div class="row">
                                        <div class="col-md-5 add-to-cart"><span style="padding:2px 5px;font-size:13px;border:1px solid #000; border-radius:5px; text-align:center; font-weight: 500;"><router-link style="color:#000" :to="'/products/'+product.code+'/'+product.product_name">Details</router-link></span></div>
                                        <div class="col-md-7 text-right get-quote"><span style="padding:2px 5px; text-align:center; background:#000; color:#fff; border-radius:5px;"><router-link :to="'/quote-form/'+product.code" class="text-white">Get Quote</router-link></span></div>
                                    </div>
                                </div>
                            </div><!-- End .product-body -->
                        </div><!-- End .product -->
                </div><!-- End .product-item -->
            </div>
        </div><!-- End .products-container -->
        <div class="load-more-button text-center" v-if="ReadyProductNextPage"> 
            <span @click="LoadMoreReadyProduct(ReadyProductNextPage)" class="btn" style="cursor:pointer">
                <span v-if="!readyProductLoading">Load More</span>
                <div v-if="readyProductLoading" class="spinner-border" role="status">
                </div>
            </span>
        </div>
        <div class="product-top-section mt-5">
            <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">Samples</span></div>
                <div class="col-md-4 text-right" style="display:flex; justify-content: right; align-items: center;">Sort By : 
                    <select @change="sampleProductSort($event)" v-model="SampleProductSortBy" class="ml-1">
                        <option value="ASC">Default</option>
                        <option value="ASC">ASC</option>
                        <option value="DESC">DESC</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="products-container" v-if="SampleproductLoader">
            <div class="homepageLoader">
                <div class="product-item accessories lighting sale" v-for="prod in 10">
                    <div class="product product-4">
                        <figure class="product-media">
                            <a></a>
                        </figure><!-- End .product-media -->
                    </div><!-- End .product -->
                </div><!-- End .product-item -->
            </div>
        </div><!-- End .products-container -->
        <div class="products-container" v-if="!SampleproductLoader">
            <div class="all-product">
                <div class="product-item accessories lighting sale" v-for="(product, index) in SampleProducts">
                        <div class="product product-4">
                            <div class="row" style="position:absolute;top:5px; left:5px;z-index: 3; width:100%">
                                <div class="col-4">
                                    <!-- <span style="padding:2px 8px; font-size:12px; color:#fff; background-color: red;">NEW</span> -->
                                </div>
                                <div class="col-8 text-right text-black">SKU-{{product.code}}</div>
                            </div>
                            <router-link :to="'/products/'+product.code+'/'+product.product_name">
                                <figure class="product-media">
                                    <a>
                                        <!-- <span style="position:absolute;z-index:1; top:0; width: 100%; height:100%; background:red;"></span> -->
                                        <img style="z-index:0;height:auto!important" v-if="SampleProductImage[index]" v-lazy="setting.frontend_img_url+'/storage/image/product/'+SampleProductImage[index].name" class="product-image">
                                    </a>
                                </figure><!-- End .product-media -->
                            </router-link>
                            <div class="product-body">
                                <h3 class="product-title" style="height:60px"><router-link :to="'/products/'+product.code+'/'+product.product_name">{{product.product_name.substring(0,100)}} <span v-if="product.product_name.length > 100">...</span></router-link></h3>
                                <h3 class="product-title text-center text-success" style="font-size:12px">Minimum Order : <span style="color:#000;">{{product.min_order}} 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">৳ {{product.lowest_price}} - ৳ {{product.highest_price}}</span>
                                </div><!-- End .product-price -->
                                <div class="action-button" style="padding:0 10px;">
                                    <div class="row">
                                        <div class="col-md-5 add-to-cart"><span style="padding:2px 5px;font-size:13px;border:1px solid #000; border-radius:5px; text-align:center; font-weight: 500;"><router-link style="color:#000" :to="'/products/'+product.code+'/'+product.product_name">Details</router-link></span></div>
                                        <div class="col-md-7 text-right get-quote"><span style="padding:2px 5px; text-align:center; background:#000; color:#fff; border-radius:5px;"><router-link :to="'/quote-form/'+product.code" class="text-white">Get Quote</router-link></span></div>
                                    </div>
                                </div>
                            </div><!-- End .product-body -->
                        </div><!-- End .product -->
                </div><!-- End .product-item -->
            </div>
        </div><!-- End .products-container -->
        <div class="load-more-button pb-3 text-center" v-if="SampleProductNextPage"> 
            <span @click="LoadMoreSampleProduct(SampleProductNextPage)" class="btn" style="cursor:pointer">
                <span v-if="!sampleProductLoading">Load More</span>
                <div v-if="sampleProductLoading" class="spinner-border" role="status">
                </div>
            </span>
        </div>
    </div>
    <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-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;
}
.load-more-button span{
    background: v-bind(setting.color)!important;
    opacity:0.7;
    padding: 5px;
    border-radius:5px;
    color:#fff;
}
.load-more-button span:hover{
    opacity:1;
}
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)
}
.homepageLoader .product:hover{
    border: 1px solid #fff
}

</style>