<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import 'swiper/css/autoplay';
import 'swiper/css';
import { Swiper, SwiperSlide  } from 'swiper/vue'
import { Autoplay} from 'swiper/modules';
const store = useStore();
const route = useRouter();
let setting = computed(() => store.state.settings)
let HeaderFooterOff = computed(() => store.state.HeaderFooterOff)
const carouselConfig = {
  itemsToShow: 5,
  wrapAround: true
}
let Slider = ref([])
const normal = async()=>{
    axios.post('https://test.wholesalebagbd.com/api/our-clients-page-get/dkfhdjk').then(response => {
        console.log(response.data)
        Slider.value = response.data.data.data
    })
}
onMounted(async () => {
    normal()
})
const breakpoints = {
  0: {
    slidesPerView: 3,
  },
  500: {
    slidesPerView: 3,
  },
  768: {
    slidesPerView: 5,
  },
  1024: {
    slidesPerView: 7,
  }
}
</script>
<template>
<footer class="container footer footer-2" v-show="HeaderFooterOff">
    <div class="all-text">
        <div class="our-client-section" style="background:#F1F9FE;padding-bottom:20px;padding-top:20px">
            <div class="container">
                <h3 class="text-center mt-2">Our Clients</h3>
                    <div class="desktop-versiond">
                        <Swiper :loop="true"  :modules="[Autoplay]" :slides-per-view="5" :breakpoints="breakpoints" :autoplay='{
                            "delay": 3000,
                            "disableOnInteraction": false,
                            "pauseOnMouseEnter": true,
                            }'>
                            <SwiperSlide v-for="(prodIm, index) in Slider">
                                <div class="item" style="padding:10px; display: flex;justify-content: center;align-items: center;">
                                    <a :href="prodIm.url" target="_blank">
                                        <img class="variable-product-image" v-if="setting" :src="setting.frontend_img_url+'/storage/image/client/'+prodIm.image">
                                    </a>
                                </div>
                                
                            </SwiperSlide>
                        </Swiper>
                    </div>
            </div>
        </div>
        <div class="newsletter-section" style="margin-top:50px;">
            <div class="container">
                <div class="row">
                    <div class="col-md-7" style="padding-top:50px;padding-bottom:50px;">
                        <div class="left-top-text">
                            <h1 style="font-size:46px;">Subscribe To Our Newsletter For the Latest Updates</h1>
                            <p style="font-size:17px;color:#868686">Enter your email address below to get our newsletter notifications</p>
                        </div>
                        <div class="simple-text"></div>
                        <div class="input mt-3">
                            <div class="newsletter">
                                <div class="newsletter-button desktop">
                                    <!-- <span style="font-size:20px;color:#000;margin-right:10px;">Newsletter</span> -->
                                    <input id="newsletter" type="email" placeholder="yourgmail@gmail.com">
                                    <label for="newsletter">SUBSCRIBE</label>
                                </div>
                                <div class="newsletter-button text-right mobile">
                                    <!-- <span style="font-size:20px;color:#000;margin-right:10px;">Newsletter</span><br> -->
                                    <input id="newsletter3" type="email" placeholder="yourgmail@gmail.com">
                                    <label for="newsletter3" >SUBSCRIBE</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <img style="width:100%;height:100%" :src="'/newsletter.png'">
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom mt-3">
            <div class="row">
                <div class="col-md-3">
                    <div class="logo">
                        <router-link to="/" style="display: flex;justify-content: center;align-items: center;">
                            <img :src="'https://wbbd.wholesalebagbd.com/full%20_logo.png'" style="padding:0px 20px;margin-bottom:10px;width:100%; height: auto;max-width:300px">
                        </router-link>
                        <p style="line-height:1.3;text-align:justify">"Wholesale Bag BD" is a leading bag manufacturer and wholesaler in Bangladesh, specializing in delivery bags, school bags, laptop bags, travel bags, jute bags, non-woven bags, and leather goods, catering to diverse local and international markets with quality and variety"</p>
                    </div>
                </div>
                <div class="col-md-2 explore-links">
                    <h5 class="mt-2">Explore Links</h5>
                    <ul>
                        <li><router-link to="/">Home</router-link></li>
                        <li><router-link :to="'/samples'">Samples</router-link></li>
                        <li><router-link :to="'/in-stock'">In Stock</router-link></li>
                        <li><router-link :to="'/about-us'">About Us</router-link></li>
                        <li><router-link :to="'/contact-us'">Contact Us</router-link></li>
                    </ul>
                </div>
                <div class="col-md-2 pl-4">
                    <h5 class="mt-2">Social Links</h5>
                    <ul>
                        <li><a href="https://www.facebook.com/wholesalebagbd" target="_blank">Facebook</a></li>
                        <li><a href="https://www.linkedin.com/wholesale-bag-bd" target="_blank">Linkedin</a></li>
                        <li><a href="https://www.youtube.com/@wholesalebagbd" target="_blank">Youtube</a></li>
                        <li><a href="https://www.instagram.com/wholesalebagbd" target="_blank">Instagram</a></li>
                    </ul>
                </div>
                <div class="col-md-2 pl-4">
                    <h5 class="mt-2">Quick Links</h5>
                    <ul>
                        <li><router-link :to="'/quote-form'">Get Quote</router-link></li>
                        <li><router-link :to="'/terms-and-conditions'">Terms & Condition</router-link></li>
                        <li><router-link :to="'/privacy-policy'">Privacy Policy</router-link></li>
                        <li><router-link to="/">Shipping, Return & Replacement</router-link></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5 class="mt-2 our-contacts">Our Contacts</h5>
                    <ul>
                        <li style="padding-left:25px"><svg style="position:absolute;left:10px" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#868686" viewBox="0 0 24 24">
                                                    <path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.21 11.72 11.72 0 003.64.58 1 1 0 011 1v3.48a1 1 0 01-1 1A17 17 0 013 5a1 1 0 011-1h3.49a1 1 0 011 1 11.72 11.72 0 00.57 3.64 1 1 0 01-.25 1.08z"/>
                                                </svg> +8801919921771, 8801791873136</li>
                        <li style="padding-left:25px"><svg style="position:absolute;left:10px" 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="#868686" stroke="white" stroke-width="0.2"/>
                                        </svg> info@wholesalebagbd.com</li>
                        <li style="padding-left:25px"><svg style="position:absolute;left:10px" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#868686" viewBox="0 0 24 24">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 
                        0-2.5-1.12-2.5-2.5s1.12-2.5 
                        2.5-2.5 2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/>
                        </svg>
                        427/17-D, JHAWCHAR HAZARIBAGH, <br>DHAKA-1209.</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="payment-icon-image-copyright-section mb-8">
            <div class="row">
                <div class="col-md-8">
                    <img v-lazy="'/sslcommerz.PNG'">
                </div>
                <div class="col-md-4">
                    <ul class="d-flex" style="justify-content: flex-end;">
                        <li><a style="cursor:pointer;margin:40px;text-align:center" href="https://www.facebook.com/wholesalebagbd" target="_blank"><img style="width:25px; height:25px" v-lazy="'/facebook.webp'"></a></li>
                        <li><a style="cursor:pointer;margin:40px;text-align:center" href="https://www.linkedin.com/wholesale-bag-bd" target="_blank"><img style="width:25px; height:25px" v-lazy="'/linkedin.png'"></a></li>
                        <li><a style="cursor:pointer;margin:40px;text-align:center" href="https://www.youtube.com/@wholesalebagbd" target="_blank"><img style="width:25px; height:25px" v-lazy="'/youtube.png'"></a></li>
                        <li><a style="cursor:pointer;margin:40px;text-align:center" href="https://www.instagram.com/wholesalebagbd" target="_blank"><img style="width:25px; height:25px" v-lazy="'/instagram.png'"></a></li>
                    </ul>
                </div>
                <div class="col-md-12" style="display: flex;justify-content: center;align-items: center;">
                    <div class="copyright text-right" style="color:#868686;font-size:15px">© Wholesalebagbd All rights reserved 2025</div>
                </div>
            </div>
            
        </div>
    </div>
</footer><!-- End .footer -->
</template>
<style scoped>
.explore-links{
    padding-left:40px!important
}
ul li a, ul li{
    font-weight:400;
    color:#868686!important
}
ul li a:hover, ul li:hover{
    color:#000!important
}
.width20{
    width:20%!important;
}
.width15{
    width:15%!important;
}
.width25{
    width:25%!important;
}
.newsletter-button{
    display: flex;
}
.newsletter-button input{
    background: #f6f6f6;
    border:1px solid transparent!important;
    height:60px;
    width:calc(100% - 240px);
    padding:10px;
}
.newsletter-button label{
    padding: 5px 20px;
    background: #000;
    color: #fff;
    cursor: pointer;
    width: 238px;
    margin-left: -2px;
    height: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: v-bind(setting.color)!important;
}
.newsletter-button.mobile{
    visibility:hidden
}
input#newsletter{
    border:2px solid #000;
}
.footer a{
    color:#000;
}
.footer a:hover,
.footer a:focus {
    text-decoration: none;
    color: v-bind(setting.color);
}

@media screen and (max-width: 992px) {
    /* .footer.footer-2{
        display:none
    }   */
    .newsletter-button input{
        width:100%!important
    }
    .newsletter-button.desktop{
        visibility: hidden;
    }
    .newsletter-button.mobile{
        visibility: visible;
    }
    .newsletter-button label,.newsletter-button input{
        height:40px
    }
}
.mobile-version{
    display: none;
}
@media screen and (max-width: 500px) {
    .left-top-text {
        text-align: center;
    }
    .left-top-text h1{
        font-size: 24px!important;
        font-weight: 500;
    }
    .desktop-version{
        display: none;
    }
    .mobile-version{
        display: block;
    }
    .newsletter-section .mt-3{
        margin-top:0!important
    }
    .explore-links{
        padding-left:20px!important
    }
    .payment-icon-image-copyright-section ul{
        justify-content: center!important
    }
    .copyright.text-right{
        font-size:12px!important
    }
}
</style>