<?php

/***all categories */
$getCategories = $wpdb->get_results("SELECT category_id,category_name,category_icon,category_url FROM grp_product_category where category_status='1' order by category_add_date desc");

?>

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@6.4.15/swiper-bundle.min.css">

<style>
    .popular-service-swiper.swiper-container {
        width: 100%;
        background: #ffffff;
        padding: 10px 0;
    }

    .popular-service-swiper .swiper-wrapper {
        height: auto;
        justify-content: center;
    }

    .popular-service-swiper .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fc6615;
        padding: 20px 50px;
        border-radius: 10px;
        width: auto !important;
    }

    .popular-service-swiper .swiper-slide h4 {
        margin: 0;
        font-size: 14px;
        color: #ffffff;
        padding-top: 10px;
    }

    .popular-service-swiper .swiper-slide i {
        font-size: 30px;
        color: #ffffff;
    }
</style>

<!-- Swiper -->
<div class="swiper-container popular-service-swiper">
    <div class="swiper-wrapper">
        <?php foreach ($getCategories as $c) { ?>
            <div class="swiper-slide">
                <a href="services?c=<?php echo $c->category_url; ?>" target="_blank">
                    <i class="fa <?php echo $c->category_icon; ?>"></i>
                    <h4><?php echo $c->category_name; ?></h4>
                </a>
            </div>
        <?php } ?>
    </div>
</div>

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper@6.4.15/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 7,

        breakpoints: {
            320: {
                slidesPerView: 2,
                spaceBetweenSlides: 30
            }
        }
    });
</script>