<?php
       
/*service*/
function serviceShortCode($pageId = null, $isCustomizer = false, $i = null) {

    ob_start();

    $args = array('post_type' => 'our-services');
    if (!empty($pageId)) {
        $args['page_id'] = absint($pageId);
    }
    $args['posts_per_page'] = -1;
    $colCls = '';
    // if($isCustomizer == true){
    $cols = get_theme_mod('service_npp_count',4);  
    $services_page_icon1 = get_theme_mod('services_page_icon1'.$i);
    ++$cols;
    switch ($cols) {
        case 1:
        $colCls = 'col-md-12 col-sm-12';
        break;
        case 2: 
        $colCls = 'col-md-6 col-sm-6';
        break;
        case 3:
        case 5:
        case 6:
        case 9:
        case 11:
        case 13:
        case 15:
        case 17:
        case 19:
        case 21:
        case 23:
        $colCls = 'col-md-4 col-sm-6';
        break;
        default: 
        $colCls = 'col-md-3 col-sm-6';
        break;
        }
    // }
        $text = '';
        $query = new WP_Query($args);
        if ($query->have_posts()):
            $postN = 0;

            while ($query->have_posts()) : $query->the_post();
                $luzuk_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'total-service-thumb');
                $post = get_post();

                $servicesNum = get_post_meta($post->ID, 'servicesNum', false);
                    $services_Num = !empty($servicesNum[0]) ? $servicesNum[0] : '';
                ?>

                <div class="<?php echo $colCls;?> single-service-bx wow zoomIn col-md-4">
                    <div serviceinn-match-height="groupName" class="single-service">
                        <div class="service-img">
                            <a href="<?php the_permalink(); ?>">
                           <?php
                                if (has_post_thumbnail()) {
                                    $image_url = $luzuk_image[0];
                                } else {
                                    $image_url = get_template_directory_uri() . '/images/services.jpg';
                                }
                            ?>                                                        
                                <img class="img-responsive" src="<?php echo esc_url($image_url); ?>" alt="<?php the_title(); ?>" />
                                    <div class="ovrly"></div>
                            </a>
                        </div>
                        <div class="serinnbx">
                            <div class="service-icon">
                                <a href="<?php the_permalink(); ?>">
                                    <i class="<?php echo $services_page_icon1; ?>"></i>
                                </a>   
                            </div>
                            <div class="num"><?php echo ($services_Num);  ?></div>
                            <a href="<?php the_permalink(); ?>">
                                <h4 class="post-title inner-area-title wow fadeInDown"><?php the_title(); ?></h4>
                            </a>
                            <p class="section-area-text">
                                <?php

                                if(has_excerpt()){
                                  echo get_the_excerpt();
                                 }else{
                                  echo luzuk_excerpt( get_the_content() , 80 );
                                 } 
                                ?>
                            </p>
                             <?php
                              $homepageservicesbutton = get_theme_mod('homepageservicesbutton', 'See More'); 
                            ?>
                            <?php if( get_theme_mod('homepageservices_button_display','show' ) == 'show') :
                                ?>  
                            <div class="serbtn">
                                <a href="<?php echo esc_url(get_permalink()); ?>" ><?php echo ($homepageservicesbutton );  ?> </a>
                            </div>
                            <?php endif ?>
                        </div>
                    </div>
      <script>
    var matchHeight = function () {
    
    function init() {
        eventListeners();
        matchHeight();
    }
    
    function eventListeners(){
        $(window).on('resize', function() {
            matchHeight();
        });
    }
    
    function matchHeight(){
        var groupName = $('[serviceinn-match-height]');
        var groupHeights = [];
        
        groupName.css('min-height', 'auto');
        
        groupName.each(function() {
            groupHeights.push($(this).outerHeight());
        });
        
        var maxHeight = Math.max.apply(null, groupHeights);
        groupName.css('min-height', maxHeight);
    };
    
    return {
        init: init
    };
    
} ();

$(document).ready(function() {
    matchHeight.init();
});
</script>

                </div>


                <?php
            endwhile;
            $text = ob_get_contents();
            ob_clean();
        endif;
        wp_reset_postdata();
        return $text;
    }

add_shortcode('SERVICES', 'serviceShortCode');