<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import { useStore } from "vuex";
const store = useStore();
import { useRouter } from "vue-router";
import ProductCard from '../layouts/productView.vue'
const route = useRouter();
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 cart = ref(computed(() => store.state.cart))
let cartSum = computed(() => store.state.cartSum)
let hot_products = computed(() => store.state.hot_product)
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)
let defaultToken = ref('')
let CartMinimumStock = ref([])
let CartMinimumOrder = ref([])
let PaymentMethod = ref('cod')
let ProductWeight = ref([])
let AuthTokenId = localStorage.getItem('HolesaleBagauthToken').split('|')[0]
let form = reactive({
    'customer_phone_no':'',
    'customer_name':'',
    'company_name':'',
    'email':'',
    'delivery_type':'',
    'address':'',
    'note':'',
    'shipping':0,
    'image':'',
    'fileName':'',
    'logoimage':'',
    'logofileName':'',
    'printbagYes':'No',
    'print_type':'',
    'logo_color_qty':'',
    'print_size':'',
    'many_place_single_bags':'',
    'method':PaymentMethod.value
})
let currentRlkd = ref(route.currentRoute.value)
const normal = async()=>{
        store.dispatch("SearchText", null)
        pageproducts.value = []
        pageParentProducts.value = []
        pageExtraCategories.value = []
        if(localStorage.getItem('defaultToken')){
            defaultToken.value = localStorage.getItem('defaultToken')
        }else{
            defaultToken.value = localStorage.getItem('HolesaleBagauthToken').split('|')[0]
        }
        if(cart.value.length == 0){
            route.push('/')
            return
        }
        store.dispatch('Loader',true)
        axios.post('/api/checkout-page/'+defaultToken.value).then(response => {
            if(response.data.user){
                form.customer_name = response.data.user.name
                form.company_name = response.data.user.company_name
                form.customer_phone_no = response.data.user.phone
                form.email = response.data.user.email
                form.address = response.data.user.address
            }
            store.dispatch('Loader',false)
            CartMinimumOrder.value = response.data.CartMinimumOrder
            CartMinimumStock.value = response.data.CartMinimumStock
            ProductWeight.value = response.data.productWeight
        })
        if(hot_products.value.length == 0){
            await axios.post('/api/hot-selling-product').then(response => {
                let product = response.data
                store.dispatch('hotProducts',product)
            })
        }
}
const CalculateShipping = async()=>{


}
onMounted(async () => {
    window.scrollTo(0, 0);
    normal()
    CalculateAutomaticShipping()
    store.dispatch('mobileMenuHideShow', false)
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
    store.dispatch('CartCompare','-74px')
    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++
    }       
}
let check = ref(false)
let UpdateCartQuantity = async(quantity, id)=>{
    axios.post('api/cart-quantity-update/'+quantity+'/'+id).then(response => {
    })  
}
const ProductIncrease = async(qty, index)=>{
    
    check.value = false
    let catId = ref('')
    let ProductPrice = ref('')
    cart.value.map((c, cindex)=>{
        if(parseInt(c.quantity) >= parseInt(CartMinimumStock.value[index].stock)  && cindex == index){
            check.value = true
        }
        if(cindex == index){
            catId.value = c.id
            ProductPrice.value = c.product_price
        }
    })
    if(check.value == false){
        let quantity = parseInt(qty)+ 1;
        store.dispatch("CartQuantity",[quantity, index])
        let TotalPrice = ref(parseFloat(ProductPrice.value)+parseFloat(cartSum.value))
        store.dispatch('CartSumAdd',[catId, TotalPrice.value])
        CalculateShipping()
        UpdateCartQuantity(quantity, catId.value)
    }
}
const InputQuantity = async(qty, index)=>{
    check.value = false
    let catId = ref('')
    let ProductPrice = ref(0)
    let quantity = parseInt(qty);
    cart.value.map((c, cindex)=>{
        if(parseInt(c.quantity) >= parseInt(CartMinimumStock.value[index].stock)  && cindex == index){
            c.quantity = CartMinimumStock.value[index].stock
            quantity = CartMinimumStock.value[index].stock
        }
        if(parseInt(c.quantity) <= parseInt(CartMinimumOrder.value[index].min_order) && cindex == index){
            quantity = CartMinimumOrder.value[index].min_order
        }
        if(cindex == index){
            catId.value = c.id
            c.total_price = parseInt(quantity)*c.product_price
        }
        ProductPrice.value = parseFloat(ProductPrice.value) + parseFloat(c.total_price)
    })
    store.dispatch("CartQuantity",[quantity, index])
    let TotalPrice = ref(parseFloat(ProductPrice.value))
    console.log(TotalPrice.value)
    store.dispatch('CartSumAdd',[catId, TotalPrice.value])
    UpdateCartQuantity(quantity, catId.value)
    CalculateShipping()
}
const ProductDecrease = async(qty, index)=>{
    check.value = false
    let catId = ref('')
    let ProductPrice = ref('')
    cart.value.map((c, cindex)=>{
        if(parseInt(c.quantity) <= parseInt(CartMinimumOrder.value[index].min_order) && cindex == index){
            check.value = true
        }
        if(cindex == index){
            catId.value = c.id
            ProductPrice.value = c.product_price
        }
    })
    if(check.value == false){
        let quantity = parseInt(qty) - 1;
        store.dispatch("CartQuantity",[quantity, index])
        let TotalPrice = ref(parseFloat(cartSum.value) - parseFloat(ProductPrice.value))
        store.dispatch('CartSumAdd',[catId, TotalPrice.value])
        UpdateCartQuantity(quantity, catId.value)
        CalculateShipping()
    }
}
const DeleteCart = async(id)=>{
    store.dispatch("CartDelete",id)
    axios.post('api/delete-cart-item/'+id).then(response => {
    })
}
const changePaymentMethod = async(m)=>{
    PaymentMethod.value = m
}
let PopupOrder = ref()
const AddOrderCheckout = async()=>{
    // store.dispatch('Loader',true)
    axios.post('/api/add-order-checkout/'+defaultToken.value, form).then(response => {
        console.log(response.data)
        store.dispatch('Loader',false)
        OrderPopup.value = true
        // route.push('/order-success/'+response.data.order.id)
        PopupOrder.value = response.data.order
        console.log(response.data.order)
        store.dispatch('cartNull')
            // Data Layer Trigger
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: "order_purchase",
            ecommerce: {
            items: [{
                customer_phone_no: form.customer_phone_no || "",
                customer_name: form.customer_name || "",
                company_name: form.company_name || "",
                email: form.email || "",
                address: form.address || "",
                sub_amount: response.data.order.sub_amount || "",
                discount_amount: response.data.order.discount_amount || "",
                shipping_charge: response.data.order.shipping_charge || "",
                vat: response.data.order.vat || "",
                total_amount: response.data.order.total_amount || "",
            }]
            }
        });
    })
}
let UploadFileName = ref('')
const ChangeCoverPhoto = async(event)=>{
    let file = event.target.files[0];
    let reader = new FileReader();
    let image = ref()
    reader.onload = (e)=>{
        UploadFileName.value = file.name
        form.image = e.target.result
        form.fileName = file.name
    }
    reader.readAsDataURL(file);
    // Upload System
    
}
let OrderPopup = ref(false)
let ChangeUploadLogoFIleName = ref('')
const ChangeUploadLogo = async(event)=>{
    let file = event.target.files[0];
    let reader = new FileReader();
    let image = ref()
    reader.onload = (e)=>{
        ChangeUploadLogoFIleName.value = file.name
        form.logoimage = e.target.result
        form.logofileName = file.name
    }
    reader.readAsDataURL(file);
    // Upload System
    
}
const ClosePopup = async()=>{
    OrderPopup.value = false
}
const DataLayerSend = async()=>{
    // Data Layer Trigger
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        event: "checkout_page",
        ecommerce: {
        items: [{
            customer_phone_no: form.customer_phone_no || "",
            customer_name: form.customer_name || "",
            company_name: form.company_name || "",
            email: form.email || "",
            address: form.address || "",
        }]
        }
    });
}
// let addressLatitudeLongitude = reactive({
//     'latitude':'',
//     'longitude':'',
//     'AuthTokenId':AuthTokenId,
// })

const CalculateAutomaticShipping = async()=>{
    axios.post('api/automatic-shipping/'+AuthTokenId).then(response => {
        form.shipping = response.data.amount
    })
}
</script>
<template>
<main class="main">
    <div class="container">
        <div class="modal-overlay" v-if="OrderPopup">
            <div class="modal-box" style="max-width:868px!important" >
                <div class="modal-header">
                    <div class="moadal-header-content"></div>
                    <div class="modal-close" style="font-size:30px;color:#d1d1d1" @click="ClosePopup">&times;</div>
                </div>
                <div class="modal-conten">
                    <div class="modal-body text-center">
                        <svg width="188" height="116" viewBox="0 0 188 116" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="97" cy="54" r="54" fill="#E2F2FC"/>
                        <circle cx="97" cy="54" r="43" fill="#26A9E0"/>
                        <path d="M90.7362 71.0989L75 55.3627L78.934 51.4287L90.7362 63.2308L116.066 37.9011L120 41.8351L90.7362 71.0989Z" fill="white"/>
                        <circle cx="156" cy="108" r="5.1" stroke="#26A9E0" stroke-width="1.8"/>
                        <circle cx="56" cy="112" r="4" fill="#26A9E0"/>
                        <circle cx="71" cy="7" r="6.25" stroke="#26A9E0" stroke-width="1.5"/>
                        <path d="M182.286 37.7143H178.714C178.512 37.7143 178.342 37.6457 178.206 37.5086C178.069 37.3714 178 37.2019 178 37C178 36.7981 178.068 36.6286 178.206 36.4914C178.343 36.3543 178.513 36.2857 178.714 36.2857H182.286V32.7143C182.286 32.5119 182.354 32.3424 182.491 32.2057C182.629 32.0691 182.798 32.0005 183 32C183.202 31.9995 183.372 32.0681 183.509 32.2057C183.647 32.3433 183.715 32.5129 183.714 32.7143V36.2857H187.286C187.488 36.2857 187.658 36.3543 187.795 36.4914C187.932 36.6286 188 36.7981 188 37C188 37.2019 187.931 37.3717 187.794 37.5093C187.658 37.6469 187.488 37.7152 187.286 37.7143H183.714V41.2857C183.714 41.4881 183.646 41.6579 183.509 41.795C183.371 41.9321 183.202 42.0005 183 42C182.798 41.9995 182.629 41.931 182.491 41.7943C182.354 41.6576 182.286 41.4881 182.286 41.2857V37.7143Z" fill="#26A9E0"/>
                        <path d="M9.74973 70.0778L3.92953 71.8062C3.59971 71.9042 3.29026 71.8745 3.00117 71.7171C2.71208 71.5598 2.51829 71.3167 2.4198 70.9879C2.32131 70.6591 2.35102 70.3496 2.50892 70.0595C2.66682 69.7694 2.9099 69.5756 3.23816 69.4782L9.05836 67.7497L7.32993 61.9295C7.23199 61.5997 7.26169 61.2903 7.41905 61.0012C7.5764 60.7121 7.81948 60.5183 8.14829 60.4198C8.47709 60.3213 8.78693 60.3509 9.07781 60.5086C9.36868 60.6662 9.56208 60.9094 9.65801 61.2382L11.3864 67.0584L17.2066 65.3299C17.5365 65.232 17.8463 65.2616 18.1362 65.4187C18.426 65.5758 18.6194 65.819 18.7164 66.1483C18.8133 66.4776 18.7837 66.7874 18.6276 67.0778C18.4715 67.3682 18.2283 67.5616 17.898 67.658L12.0778 69.3864L13.8062 75.2066C13.9042 75.5365 13.8746 75.8463 13.7175 76.1362C13.5603 76.426 13.3171 76.6194 12.9879 76.7164C12.6586 76.8133 12.3492 76.7836 12.0595 76.6273C11.7699 76.4709 11.5761 76.2278 11.4782 75.898L9.74973 70.0778Z" fill="#26A9E0"/>
                        </svg>
                        <h3 class="mt-3 headline" style="font-size:35px;color:#1a1a1a;font-weight:500">Congratulations</h3>
                        <svg width="242" height="2" viewBox="0 0 242 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 1H241" stroke="#D1D1D1" stroke-linecap="round"/>
                        </svg>
                        <p class="headline-bottom" style="color:#888888;font-size:20px;">Your Order has been placed</p>
                        <p class="popup-message mt-2" style="line-height:100%;letter-spacing:0;font-size:20px;font-weight:400;color:#5d5d5d;padding-right:30px;padding-left:30px">We’ve received your order. Order will be shipped within 5-7 business days.</p>
                        <p class="order-no-check mt-2" style="font-size:22px; font-weight:500;color:#1a1a1a">Your Order number is #{{PopupOrder.id}} <span style="border-left:1px solid #B0B0B0;padding-left:10px;">Date : {{PopupOrder.date_time}}</span></p>
                        <hr>
                        <h5 class="order-amount" style="font-size:24px; font-weight:500;color:#1a1a1a">Total Order Amount {{PopupOrder.total_amount}}৳</h5>

                    </div>
                    <div class="butto">
                        <div style="display:flex;justify-content:center;align-items:center">
                            <div style="width:200px;background:#26A9E0;padding:10px;font-size:18px;font-weight:500;color:#fff;text-align:center;border-radius:6px;height:56px;display:flex;justify-content:center;align-items:center;">Track Order</div>
                            <div style="width:200px;background:#fff;border:1px solid #B0B0B0;font-size:18px;font-weight:500;color:#3d3d3d;padding:10px;text-align:center;border-radius:6px;height:56px;display:flex;justify-content:center;align-items:center;margin-left:10px;">Track Order</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <homeSlider></homeSlider> -->
        <div class="checkout-section">
            <h3 class="text-black text-center mt-3">Checkout</h3>
            <form @submit.prevent="AddOrderCheckout" class="row">
                <div class="col-md-5 form-div" >
                        <div class="checkout-details" style="padding: 30px 15px; border:1px solid #e7e7e7;border-radius:12px">
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="name" style="margin:0 0 0;font-size:14px;color:#1a1a1a;font-weight:400">
                                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.36198 9.00015L6.47309 12H13.6953V9.00015H9.36198ZM7.23865 2.39298L0.695312 9.18764V12H3.40365L9.94698 5.20534L7.23865 2.39298ZM2.8042 10.5001H2.13976V9.81011L7.23865 4.50037L7.91753 5.20534L2.8042 10.5001ZM12.0414 3.03044C12.3231 2.73796 12.3231 2.25048 12.0414 1.973L10.3514 0.218084C10.2161 0.0784024 10.0331 0 9.84226 0C9.65146 0 9.46841 0.0784024 9.33309 0.218084L8.01142 1.59052L10.7198 4.40288L12.0414 3.03044Z" fill="#1A1A1A"/>
                                        </svg>
                                        <span style="margin-left:10px">Name</span></label>
                                    <div class="input-svg" style="position:relative">
                                        <input @change="DataLayerSend" type="text" placeholder="Your Name" style="font-size:12px;color:#B0B0B0;padding-left:10px;padding-top:25px; padding-bottom:25px;" id="name" v-model="form.customer_name" class="form-control" required>
                                    </div>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="contact_number" style="margin:0 0 0;font-size:14px;color:#1a1a1a;font-weight:400">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12.2557 10.0472L9.34449 10.6156C7.37779 9.62128 6.16327 8.4788 5.45633 6.69813L6.00067 3.75647L4.97208 1H2.32035C1.52293 1 0.895164 1.66383 1.01464 2.45801C1.31155 4.44025 2.18815 8.03506 4.74939 10.6156C7.43929 13.3258 11.314 14.5017 13.4461 14.9697C14.2697 15.1499 15 14.5032 15 13.6534V11.1007L12.2557 10.0472Z" stroke="#1A1A1A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        <span style="margin-left:10px">Contact Number</span></label>
                                    <div class="input-svg" style="position:relative">
                                        <input @change="DataLayerSend" type="tel" placeholder="eg:01*********" style="font-size:12px;color:#B0B0B0;padding-left:10px;padding-top:25px; padding-bottom:25px;" maxlength="11" id="contact_number" v-model="form.customer_phone_no" class="form-control" required>
                                    </div>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="email" style="margin:0 0 0;font-size:14px;color:#1a1a1a;font-weight:400">
                                        <svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M2.49512 0.0996094H16.8955C17.8329 0.0997135 18.5957 0.845429 18.5957 1.75V12.25C18.5957 13.1546 17.8329 13.9003 16.8955 13.9004H2.49512C1.55776 13.9003 0.794922 13.1546 0.794922 12.25V1.75C0.794922 0.845428 1.55776 0.0997128 2.49512 0.0996094ZM16.8438 3.41406L9.69531 7.75684L2.54688 3.41406L2.39551 3.32227V12.3496H16.9951V3.32227L16.8438 3.41406ZM2.44336 1.83594L9.64355 6.21094L9.69531 6.24219L9.74707 6.21094L16.9473 1.83594L17.2529 1.65039H2.1377L2.44336 1.83594Z" fill="#1A1A1A" stroke="white" stroke-width="0.2"/>
                                        </svg>
                                        <span style="margin-left:10px">Email</span></label>
                                    <div class="input-svg" style="position:relative">
                                        <input @change="DataLayerSend" type="email" placeholder="Your Email" style="font-size:12px;color:#B0B0B0;padding-left:10px;padding-top:25px; padding-bottom:25px;" id="email" v-model="form.email" class="form-control" required>
                                    </div>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="full_address" style="margin:0 0 0;font-size:14px;color:#1a1a1a;font-weight:400">
                                        <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M16.5 0H1.5C0.671875 0 0 0.671875 0 1.5V12.5C0 13.3281 0.671875 14 1.5 14H16.5C17.3281 14 18 13.3281 18 12.5V1.5C18 0.671875 17.3281 0 16.5 0ZM16.5 12.5H1.5V1.5H16.5V12.5ZM6.5 7C7.60313 7 8.5 6.10313 8.5 5C8.5 3.89687 7.60313 3 6.5 3C5.39687 3 4.5 3.89687 4.5 5C4.5 6.10313 5.39687 7 6.5 7ZM3.7 11H9.3C9.6875 11 10 10.7312 10 10.4V9.8C10 8.80625 9.05937 8 7.9 8C7.5625 8 7.31563 8.25 6.5 8.25C5.65938 8.25 5.45625 8 5.1 8C3.94062 8 3 8.80625 3 9.8V10.4C3 10.7312 3.3125 11 3.7 11ZM11.25 9H14.75C14.8875 9 15 8.8875 15 8.75V8.25C15 8.1125 14.8875 8 14.75 8H11.25C11.1125 8 11 8.1125 11 8.25V8.75C11 8.8875 11.1125 9 11.25 9ZM11.25 7H14.75C14.8875 7 15 6.8875 15 6.75V6.25C15 6.1125 14.8875 6 14.75 6H11.25C11.1125 6 11 6.1125 11 6.25V6.75C11 6.8875 11.1125 7 11.25 7ZM11.25 5H14.75C14.8875 5 15 4.8875 15 4.75V4.25C15 4.1125 14.8875 4 14.75 4H11.25C11.1125 4 11 4.1125 11 4.25V4.75C11 4.8875 11.1125 5 11.25 5Z" fill="#1A1A1A"/>
                                        </svg>
                                        <span style="margin-left:10px">Detail Address</span></label>
                                    <div class="input-svg" style="position:relative">
                                        <textarea @change="DataLayerSend" type="text" placeholder="Full Address" style="font-size:12px;color:#B0B0B0;padding-left:10px;padding-top:25px; padding-bottom:25px;" id="full_address" v-model="form.address" class="form-control"></textarea>
                                    </div>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="note" style="margin:0 0 0;font-size:14px;color:#1a1a1a;font-weight:400">
                                        <svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12.8227 1.5V3.2M8.57266 1.5V3.2M4.32266 1.5V3.2M5.17266 12.55H8.57266M5.17266 8.3H11.9727M1.34766 13.4V7.45C1.34766 5.0462 1.34766 3.84345 2.09481 3.09715C2.84111 2.35 4.04386 2.35 6.44766 2.35H10.6977C13.1015 2.35 14.3042 2.35 15.0505 3.09715C15.7977 3.84345 15.7977 5.0462 15.7977 7.45V10C15.7977 14.0069 15.7977 16.0104 14.5524 17.2548C13.3089 18.5 11.3054 18.5 7.29766 18.5H6.44766C4.04386 18.5 2.84111 18.5 2.09481 17.7529C1.34766 17.0066 1.34766 15.8038 1.34766 13.4Z" stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M15.7969 12.125C15.7969 12.4041 15.7419 12.6804 15.6351 12.9382C15.5283 13.196 15.3718 13.4303 15.1745 13.6276C14.9772 13.8249 14.7429 13.9815 14.4851 14.0882C14.2273 14.195 13.9509 14.25 13.6719 14.25C13.2469 14.25 12.7471 14.176 12.3348 14.2865C12.1546 14.3348 11.9903 14.4297 11.8584 14.5616C11.7265 14.6935 11.6317 14.8578 11.5834 15.038C11.4729 15.4502 11.5469 15.9509 11.5469 16.375C11.5469 16.9386 11.323 17.4791 10.9245 17.8776C10.526 18.2761 9.98546 18.5 9.42188 18.5" stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        <span style="margin-left:10px">Note</span></label>
                                    <div class="input-svg" style="position:relative">
                                        <textarea type="text" placeholder="Notes here..........." style="font-size:12px;color:#B0B0B0;padding-left:10px;padding-top:25px; padding-bottom:25px;" id="note" v-model="form.note" class="form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="payment-informatio mt-3" style="padding: 30px 15px; border:1px solid #e7e7e7;border-radius:12px">
                            <h5>Payment Information</h5>
                            <div class="form-group mb-0">
                                <input name="payment-information" value="cod" v-model="form.method" id="COD" type="radio">
                                <label for="COD" class="ml-2">Cash On Delivery</label>
                            </div>
                            <div class="form-group mb-0">
                                <input name="payment-information" value="bkash" v-model="form.method" id="bkash" type="radio">
                                <label for="bkash" class="ml-2">Bkash</label>
                            </div>
                        </div>
                        <div :class="form.printbagYes == 'Yes' ? 'col-md-12' : 'col-md-12'" style="padding-right:0;padding-left:0">
                    
                </div>
                </div>
                
                <div class="col-md-7 product-details" style="padding-left: 10px;">
                    <div class="product-iem" style="border:1px solid #E7E7E7;border-radius:12px;">
                        <h4 style="padding:10px;margin-bottom:0;padding-bottom:5px;">Selected Products</h4>
                        <div class="product-details" style="padding:10px;">
                            <table class="desktop-show product-details-checkout" style="width:100%;border-top:1px solid #e7e7e7;border-bottom:1px solid #fff;border-right:1px solid #fff; border-left:1px solid #fff; border-radius:10px;" border="1" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th colspan="2">Product</th>
                                        <th>SKU</th>
                                        <th>Size</th>
                                        <th style="width:100px;">Quantity</th>
                                        <th>Total Price</th>
                                        <th style="width:30px;"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(Cart, index) in cart">
                                        <td><img :src="setting.frontend_img_url+'/storage/image/product/'+Cart.product_image" style="width:55px; height:55px;border:1px solid #e7e7e7;border-radius:4px;padding:5px;"></td>
                                        <td class="product-name">{{Cart.product_name.substring(0,20)}}<br>
                                            <span v-if="Cart.product_color" class="product-color">{{Cart.product_color}}</span><br v-if="Cart.product_color"><span class="product-price">Per Pcs : {{Cart.product_price}}৳</span>
                                        </td>
                                        <td class="sku">{{Cart.product_code}}</td>
                                        <td class="text-left size"><span v-if="Cart.product_size">{{ Cart.product_size }}</span></td>
                                        <td>
                                            <div class="total-quantity no-highlight" style="display:flex;justify-content: space-between;align-items: center;">
                                                <span @click="ProductDecrease(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:0px; display: flex;justify-content: center;align-items: center;font-size:18px;color:#1A1A1A;position:relative"><input @change="InputQuantity(Cart.quantity,index)" type="text" style="width:100%;text-align:center;border:none" v-model="Cart.quantity"></span>
                                                <span @click="ProductIncrease(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;">+
                                                </span>
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            {{Cart.total_price}}৳
                                        </td>
                                        <td class="text-right">
                                            <span style="text-align:right;padding:2px 5px;padding-right:20px;cursor:pointer" @click="DeleteCart(Cart.id)">&#x2715;</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <ul class="mobile-show">
                                <li v-for="(Cart, index) in cart" style="border-top:1px solid #e7e7e7;padding-top:10px;padding-bottom:10px">
                                    <div class="product-top-li">
                                        <div class="product-top-sec">
                                            <div class="product-details d-flex">
                                                <div class="image"><img :src="setting.frontend_img_url+'/storage/image/product/'+Cart.product_image" style="width:55px; height:55px;border:1px solid #e7e7e7;border-radius:4px;padding:5px;"></div>
                                                <div class="details ml-3">
                                                    <div class="product-name" style="font-size:14px;">{{Cart.product_name.substring(0,40)}}</div>
                                                    <div class="product-variable-sku" style="font-size:12px; color:#b0b0b0;display:flex;justify-content:flex-start;">
                                                        <div v-if="Cart.product_color" class="product-color mr-3">{{Cart.product_color}}</div>
                                                        <div class="mr-3">Per Pcs : {{Cart.product_price}}৳</div>
                                                        <div>SKU : {{Cart.product_code}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="product-size" style="color:#000;font-weight:400;font-size:14px" v-if="Cart.product_size">Size : <span v-if="Cart.product_size"> {{ Cart.product_size }}</span></div>
                                            <div class="product-quantity d-flex" style="color:#000;font-weight:400;font-size:14px"> 
                                                <div class="total-quantity no-highlight" style="display:flex;justify-content: left;align-items: center;">
                                                    <span>Quantity :</span>
                                                    <span @click="ProductDecrease(Cart.quantity,index)" style="padding:0px 10px; cursor:pointer; display: flex;justify-content: center;font-size:25px;">-</span> 
                                                    <span class="" style="padding:0px; display: flex;justify-content: center;align-items: center;font-size:18px;color:#1A1A1A;position:relative"><input @change="InputQuantity(Cart.quantity,index)" type="text" style="width:50px;text-align:center;border:none" v-model="Cart.quantity"></span>
                                                    <span @click="ProductIncrease(Cart.quantity,index)" style="position:relative;padding:0px 10px; cursor:pointer; display: flex;justify-content: center; font-size:25px;">+
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="total-product-calculate" style="padding:10px;border-top:1px solid #e7e7e7">
                            <h4 class="order-summary">Order Summary</h4>
                            <p class="summary-details">Order amount may change for logo, shipping or any others</p>
                            <div class="item-sub">
                                <div class="row">
                                    <div class="col-5 name">Sub Total</div>
                                    <div class="col-7 text-right price"><strong>{{ parseFloat(cartSum).toFixed(2) }}  ৳</strong></div>
                                </div>
                            </div>
                            <div class="item-sub">
                                <div class="row">
                                    <div class="col-5 name">Shipping Charge</div>
                                    <div class="col-7 text-right price"><strong>{{ parseFloat(form.shipping).toFixed(2) }}  ৳</strong></div>
                                </div>
                            </div>
                            <div class="item-sub">
                                <div class="row">
                                    <div class="col-5 name">Total Bill</div>
                                    <div class="col-7 text-right price"><strong>{{ parseFloat((parseFloat(parseFloat(cartSum)+parseFloat(form.shipping)))).toFixed(2) }}  ৳</strong></div>
                                </div>
                            </div>
                            <div class="form-footer-submit mt-2" style="position:relative;">
                                <button>
                                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.1123 8.77666L9.94495 12.1103M19.7509 1.03264C19.8511 0.996256 19.959 0.990268 20.0622 1.01536C20.1655 1.04046 20.26 1.09562 20.3349 1.17456C20.4097 1.25349 20.462 1.353 20.4857 1.46172C20.5094 1.57044 20.5035 1.68399 20.4688 1.78938L14.2145 20.6022C14.177 20.7146 14.1084 20.8126 14.0174 20.8835C13.9264 20.9544 13.8172 20.9948 13.7041 20.9996C13.591 21.0044 13.4791 20.9733 13.383 20.9104C13.2869 20.8474 13.2109 20.7555 13.165 20.6466L9.76653 12.5992C9.70935 12.4654 9.60756 12.3583 9.48042 12.2981L1.83456 8.71999C1.7314 8.67152 1.64443 8.5916 1.58487 8.49056C1.52532 8.38953 1.49591 8.27202 1.50046 8.15321C1.505 8.03441 1.54329 7.91977 1.61038 7.8241C1.67747 7.72844 1.77026 7.65614 1.87679 7.61656L19.7509 1.03264Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg> Place Order
                                </button>
                            </div><!-- End .form-footer -->
                        </div>
                    </div>
                    
                </div>
            </form>
        </div>
        <div class="product-top-section mt-5 mb-1">
            <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 hot-product">
                <div class="product-item accessories lighting sale" v-for="(product, index) in hot_products.hot_products">
                    <ProductCard
                        :product="product"
                        :productImage="hot_products.hot_productImages[index]"
                        :setting="setting"
                        :index = "index"
                    />
                </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>
.mobile-show{
    display:none
}
tbody td, thead th{
    border:none;
    padding-top:5px;
    padding-bottom:5px;
}
tbody tr{
    border-right:none;
    border-left:none;
}
tbody tr{
    border-top: 1px solid #e7e7e7;
    padding-top:10px!important;
    padding-bottom:10px!important;
}
.product-details-checkout .product-name{
    font-size:14px!important;
    font-weight:500!important;
    line-height: 1.2;
    color:#1A1A1A;
}
.order-summary{
    font-size:24px;
    font-weight:500;
}
p.summary-details{
    font-size:14px;
    font-weight:400;
    margin-bottom:20px;
}
.product-details-checkout  .sku, .product-details-checkout  .size{
    font-size:14px;
    font-weight:500;
    color:#1A1A1A;
}
.product-details-checkout  .size span{
    background: #F1F9FE;
    padding:5px 10px;
    border-radius:5px
}
.product-details-checkout .product-name .product-color{
    font-size:12px!important;
    font-weight:400!important;
    line-height: 1.2;
    color:#b0b0b0;
}
.product-details-checkout .product-name .product-price{
    font-size:12px!important;
    font-weight:400!important;
    line-height: 1.2;
    color:v-bind(setting.color)!important;
}
.submit-button.mobile{
    display:none;
}
.cash-method div.active{
    border: 2px solid v-bind(setting.color)!important;
}
.item-sub{
    position:relative;
    padding-top:5px;
    border-bottom:1px solid #e7e7e7;
}
.item-sub:last-child{
    border-bottom:1px solid #fff;
}
.item-sub .name{
    color:#6d6d6d;
    font-size:16px;
    font-weight:400;
}
.item-sub .name{
    color:#1a1a1a1;
    font-size:16px;
    font-weight:400;
}
.item-sub .colon{
    position:absolute; 
    top:0;
    left: 300px;
}
.item-sub .amount{
    position:absolute; 
    top:0;
    right: 100px;
    font-weight:700;
}
.item{
    padding-top:5px;
    padding-bottom:5px;
}
.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;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.all-product{
    margin-top:-10px;
}
.form-footer-submit input, .form-footer-submit button{
    color:#fff;
    font-size:16px;
    font-weight: 500;
    width:100%;
    border:none;
    padding:12px;
    border-radius:6px;
    background-color: v-bind(setting.color)!important;
}
@media screen and (max-width: 765px) {
    .cart-view-image{
        width:300px!important;
        height:300px!important
    }
    .close-increse-decrese .close-icon{
        position:relative;
        top:calc(-100% - 10px)!important
    }
    .submit-button.mobile{
        display:block;
    }
    .submit-button.desktop{
        display:none;
    }
}
@media screen and (max-width: 765px) {
    .cart-view-image{
        width:300px!important;
        height:300px!important
    }
    .close-increse-decrese .close-icon{
        position:relative;
        top:calc(-100% - 10px)!important
    }
    .submit-button.mobile{
        display:block;
    }
    .submit-button.desktop{
        display:none;
    }
    .desktop-show{
        display:none;
    }
    .mobile-show{
        display:block
    }
    .col-md-7.product-details{
        margin-top:20px!important
    }
}
</style>