<?php
/**
 * Template part for displaying Featured Services Section
 *
 * @package voltmaster-electrician  
 */
$voltmaster_electrician_featured_services_section_maintaitle = voltmaster_electrician_get_option('featured_services_section_maintaitle');
$voltmaster_electrician_featured_services_section_subtitle = voltmaster_electrician_get_option('featured_services_section_subtitle');
$voltmaster_electrician_featured_services_section_text = voltmaster_electrician_get_option('featured_services_section_text');
$services_excerpt_mainpagelength = voltmaster_electrician_get_option('services_excerpt_mainpagelength');

// Fetch only the 4 selected page IDs from the Customizer using get_theme_mod()
$featured_services_posts = array_filter(array(
    get_theme_mod('featured_services_page_1'),
    get_theme_mod('featured_services_page_2'),
    get_theme_mod('featured_services_page_3'),
    // get_theme_mod('featured_services_page_4'),


    get_theme_mod('featured_icon_services_1'),
    get_theme_mod('featured_icon_services_2'),
    get_theme_mod('featured_icon_services_3'),
));
?>

<?php if (!get_theme_mod('voltmasterelectrician_enable_featured_services_section', true)) {
    return;
} ?>

<section id="featured-services">
    <div class="container p-0">
        <div class="row py-4">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="entry-content3 text-center">
                    <h5><?php echo esc_html($voltmaster_electrician_featured_services_section_maintaitle); ?></h5>
                    <h6><?php echo esc_html($voltmaster_electrician_featured_services_section_subtitle); ?></h6>
                    <p><?php echo esc_html($voltmaster_electrician_featured_services_section_text); ?></p>
                </div>
            </div>
        </div>

        <div class="row py-4">
            <div
                class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 grid-cols-1 servicerightside gap-5">

                <?php
                if (!empty($featured_services_posts)):
                    $args = array(
                        'post_type' => 'page',
                        'post__in' => $featured_services_posts,
                        'posts_per_page' => count($featured_services_posts),
                        'orderby' => 'post__in',
                    );
                    $query = new WP_Query($args);

                    if ($query->have_posts()):
                        while ($query->have_posts()):
                            $query->the_post();
                            $image = has_post_thumbnail()
                                ? wp_get_attachment_image_src(get_post_thumbnail_id(), 'single-post-thumbnail')
                                : array(get_template_directory_uri() . '/assets/images/no-images.jpg');
                            $image_height = esc_attr(get_theme_mod('featured_services_post_image_height', '192'));
                            $onload_effect = esc_attr(get_theme_mod('voltmaster_electrician_featured_services_onload_effects', 'wow zoomIn'));
                            $text_align = strtolower(get_theme_mod('featured_services_box_align', 'Left'));

                       
// Determine current post index (1, 2, or 3)
static $index = 0;
$index++;
$icon_class = get_theme_mod('featured_icon_services_' . $index, 'fa-solid fa-bolt');

                            ?>
                            <article class="paddingdiv <?php echo $onload_effect; ?>" data-wow-duration="2s">
                                <a href="<?php the_permalink(); ?>">
                                    <div class="featured-service-item" style="text-align: <?php echo esc_attr($text_align); ?>;">
                                        <div class="entry-container relative">
                                            <?php if ($image): ?>
                                                <div class="img"
                                                    style="background-size: 100% 100%; background-image: url(<?php echo esc_url($image[0]); ?>); height: <?php echo $image_height; ?>px;">
                                                           <div class="featured-icon mb-3">
        <i class="<?php echo esc_attr($icon_class); ?>" style="font-size: 40px; color: #fac100;"></i>
    </div>
                                                </div>
                                            <?php endif; ?>
                                            <div class="p-6 text-center">
                                                <h2 class="text-xl font-semibold text-gray-900 mb-3">
                                                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                                </h2>
                                                <div class="text-gray-600 leading-relaxed">
                                                    <?php
                                                    $excerpt = voltmaster_electrician_the_excerpt($services_excerpt_mainpagelength);
                                                    echo wp_kses_post(wpautop($excerpt));
                                                    ?>
                                                </div>
                                            </div>
                                        </div><!-- .entry-container -->
                                    </div>
                                </a>
                            </article>

                        <?php endwhile;
                        wp_reset_postdata();
                    endif;
                endif;
                ?>
            </div>
        </div>
    </div>
</section>