<?php
/**
 * Template part for displaying Featured Services Section
 *
 * @package computer-repair-solutions  
 */
$computer_repair_solutions_featured_services_section_maintaitle = computer_repair_solutions_get_option('featured_services_section_maintaitle');
$computer_repair_solutions_featured_services_section_subtitle = computer_repair_solutions_get_option('featured_services_section_subtitle');
$computer_repair_solutions_featured_services_section_text = computer_repair_solutions_get_option('featured_services_section_text');
$services_excerpt_mainpagelength = computer_repair_solutions_get_option('services_excerpt_mainpagelength');

// Fetch selected service pages from the Customizer using get_theme_mod().
$featured_services_posts = array_filter(
    array(
        get_theme_mod( 'featured_services_page_first' ),
        get_theme_mod( 'featured_services_page_sec' ),
        get_theme_mod( 'featured_services_page_third' ),
        get_theme_mod( 'featured_services_page_four' ),
        get_theme_mod( 'featured_services_page_five' ),
        get_theme_mod( 'featured_services_page_six' ),
        get_theme_mod( 'featured_services_page_seven' ),
        get_theme_mod( 'featured_services_page_eight' ),
    )
);
?>

<?php if (!get_theme_mod('computer_repair_solutions_enable_featured_services_section', true)) {
    return;
} ?>
<section id="featured-services">
    <div class="container">

        <!-- SECTION TITLE -->
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-9 col-md-12 col-sm-12">
                <div class="title-section p-2 text-center">

                    <h1 style="text-transform: <?php echo esc_attr(
                        get_theme_mod('featured_about_title_case', 'capitalize')
                    ); ?>;">
                        <?php echo esc_html($computer_repair_solutions_featured_services_section_maintaitle); ?>
                    </h1>

                    <h3 style="text-transform: <?php echo esc_attr(
                        get_theme_mod('featured_about_maintitle_case', 'capitalize')
                    ); ?>;">
                        <?php echo esc_html($computer_repair_solutions_featured_services_section_subtitle); ?>
                    </h3>

                    <p>
                        <?php echo esc_html($computer_repair_solutions_featured_services_section_text); ?>
                    </p>

                </div>
            </div>
        </div>

        <!-- SERVICES GRID -->

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

                <?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()):
                        $index = 0;

                        while ($query->have_posts()):
                            $query->the_post();
                            $index++;

                            $image = has_post_thumbnail()
                                ? wp_get_attachment_image_src(get_post_thumbnail_id(), 'large')
                                : array(get_template_directory_uri() . '/assets/images/no-images.jpg');

                            $image_height = esc_attr(
                                get_theme_mod('featured_services_post_image_height', '256')
                            );

                            $onload_effect = esc_attr(
                                get_theme_mod('computer_repair_solutions_featured_services_onload_effects', 'wow zoomIn')
                            );

                            $text_align = esc_attr(
                                get_theme_mod('featured_services_box_align', 'left')
                            );

                            $icon_class = get_theme_mod(
                                'featured_icon_services_' . $index,
                                'fa-solid fa-bolt'
                            );
                            ?>

                            <!-- SINGLE SERVICE -->
                            <div class="">

                                <article class="<?php echo esc_attr( $onload_effect ); ?>" data-wow-duration="2s">

                                    <a href="<?php echo esc_url( get_permalink() ); ?>" class="text-decoration-none">

                                        <div class="featured-service-item text-<?php echo esc_attr( $text_align ); ?>">

                                            <div class="entry-container position-relative">

                                                <!-- IMAGE -->
                                                <div class="service-image position-relative" style="
                                                    height: <?php echo esc_attr( $image_height ); ?>px;
                                                    background-image: url('<?php echo esc_url( $image[0] ); ?>');
                                                    background-size: cover;
                                                    background-position: center;
                                                ">

                                                    <!-- ICON -->
                                                    <div class="featured-icon position-absolute bottom-0 start-0 
                                                        d-flex align-items-center justify-content-center"
                                                        style="
                                                            border: 3px solid #fac100;
                                                            padding: .5rem;
                                                            margin: 1rem;
                                                            border-radius: .8rem;
                                                            width: 50px;
                                                            height: 46px;
                                                            z-index: 3;
                                                        ">

                                                        <i class="<?php echo esc_attr( $icon_class ); ?>"
                                                        style="font-size:22px;color:#fac100;"></i>

                                                    </div>

                                                    <!-- GRADIENT -->
                                                    <div class="position-absolute top-0 start-0 w-100 h-100"
                                                        style="background: linear-gradient(to top, rgba(0,0,0,.6), transparent); z-index: 1;">
                                                    </div>

                                                </div>

                                                <!-- CONTENT -->
                                                <div class="p-4 bg-white">

                                                    <h2 class="h5 fw-semibold text-dark mb-3">
                                                        <?php echo esc_html( get_the_title() ); ?>
                                                    </h2>

                                                    <div class="text-muted mb-3">
                                                        <?php
                                                        $excerpt = computer_repair_solutions_the_excerpt( $services_excerpt_mainpagelength );
                                                        echo wp_kses_post( wpautop( $excerpt ) );
                                                        ?>
                                                    </div>

                                                    <a href="<?php echo esc_url( get_permalink() ); ?>" class="fw-semibold text-primary">
                                                        <?php esc_html_e( 'Learn More', 'computer-repair-solutions' ); ?>
                                                        <i class="fa-solid fa-arrow-right ms-1"></i>
                                                    </a>

                                                </div>

                                            </div>

                                        </div>

                                    </a>

                                </article>

                            </div>

                        <?php endwhile;
                        wp_reset_postdata();
                    endif;
                endif;
                ?>

            </div>
        </div>
    </div>
</section>