<?php
/**
 * Template part for displaying Slider Section
 *
 * @package computer-repair-solutions
 */

// Slider options
$computer_repair_solutions_data_slick_speed = absint(
    computer_repair_solutions_get_option( 'data_slick_speed' )
);

$computer_repair_solutions_data_slick = array(
    'slidesToShow'    => 1,
    'slidesToScroll' => 1,
    'infinite'       => (bool) computer_repair_solutions_get_option( 'data_slick_infinite' ),
    'dots'           => (bool) computer_repair_solutions_get_option( 'data_slick_dots' ),
    'autoplay'       => (bool) computer_repair_solutions_get_option( 'data_slick_autoplay' ),
    'draggable'      => (bool) computer_repair_solutions_get_option( 'data_slick_draggable' ),
    'fade'           => (bool) computer_repair_solutions_get_option( 'data_slick_fade' ),
    'speed'          => $computer_repair_solutions_data_slick_speed,
    'prevArrow'      => '.slick-prev',
    'nextArrow'      => '.slick-next',
);

$computer_repair_solutions_featured_slider_section_heading =
    computer_repair_solutions_get_option('featured_slider_section_heading');

$computer_repair_solutions_featured_slider_section_lifirst =
    computer_repair_solutions_get_option('featured_slider_section_lifirst');
$computer_repair_solutions_featured_slider_section_lisec =
    computer_repair_solutions_get_option('featured_slider_section_lisec');
$computer_repair_solutions_featured_slider_section_lithird =
    computer_repair_solutions_get_option('featured_slider_section_lithird');

// Posts
$slider_posts = [];
for ($i = 1; $i <= 4; $i++) {
    $selected_post = intval(get_theme_mod('select_post_slider' . $i));
    if ($selected_post && $selected_post !== 'page-none-selected') {
        $slider_posts[] = $selected_post;
    }
}

if (!empty($slider_posts)):
    $slider_query = new WP_Query([
        'post_type' => 'post',
        'post__in' => $slider_posts,
        'orderby' => 'post__in',
        'posts_per_page' => absint(get_theme_mod('number_of_featured_slider_items', 4)),
    ]);
    ?>

<div id="featured-slider" class="position-relative overflow-hidden" style="height: 800px;">

    <div class="slider-arrows position-absolute top-50 start-0 end-0 translate-middle-y d-flex justify-content-between px-4 z-3" style="pointer-events: none;">
        <button class="slick-prev d-flex align-items-center justify-content-center border-0 rounded-circle text-white shadow-sm" 
                style="pointer-events: auto; width: 50px; height: 50px; background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2) !important; transition: 0.3s;">
            <i class="fa-solid fa-chevron-left"></i>
        </button>

        <button class="slick-next d-flex align-items-center justify-content-center border-0 rounded-circle text-white shadow-sm" 
                style="pointer-events: auto; width: 50px; height: 50px; background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2) !important; transition: 0.3s;">
            <i class="fa-solid fa-chevron-right"></i>
        </button>
    </div>

    <div class="section-content h-100"
     data-slick='<?php echo esc_attr( wp_json_encode( $computer_repair_solutions_data_slick ) ); ?>'>


        <?php
        while ( $slider_query->have_posts() ) :
            $slider_query->the_post();
            if ( has_post_thumbnail() ) :
                $slide_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
				?>

                <article class="position-relative w-100 d-flex align-items-center" style="height: 800px;">

                    <div class="position-absolute top-0 start-0 w-100 h-100 z-0">
                        <img src="<?php echo esc_url( $slide_img[0] ); ?>" 
                             class="w-100 h-100 d-block" 
                             style="object-fit: cover; object-position: center;" 
                             alt="<?php echo esc_attr( get_the_title() ); ?>">
                        
                        <div class="position-absolute top-0 start-0 w-100 h-100" 
                             style="background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);">
                        </div>
                    </div>

                    <div class="container position-relative z-1">
                        <div class="row">
                            <div class="col-lg-8 col-xl-7">

                                <div class="d-inline-flex align-items-center px-4 py-2 rounded-pill mb-4" 
                                     style="background: rgba(0, 193, 212, 0.2); color: #00C1D4; border: 1px solid rgba(0, 193, 212, 0.3); font-size: 0.9rem; backdrop-filter: blur(5px);">
                                    <?php echo esc_html( $computer_repair_solutions_featured_slider_section_heading ); ?>
                                </div>

                                <h1 class="text-white fw-bold mb-4 display-3" style="line-height: 1.1; font-family: 'Poppins', sans-serif;">
                                    <?php the_title(); ?>
                                </h1>

                                <p class="text-white-50 fs-5 mb-4 mb-lg-3 opacity-90" style="max-width: 580px;">
                                    <?php echo esc_html( wp_strip_all_tags( computer_repair_solutions_the_excerpt( 25 ) ) ); ?>
                                </p>

                                <div class="d-flex flex-wrap gap-4 mb-4">
                                    <div class="d-flex align-items-center text-white">
                                        <i class="fa-regular fa-circle-check me-2 text-info fs-5"></i> 
                                        <span><?php echo esc_html( $computer_repair_solutions_featured_slider_section_lifirst ); ?></span>
                                    </div>
                                    <div class="d-flex align-items-center text-white">
                                        <i class="fa-regular fa-circle-check me-2 text-info fs-5"></i> 
                                        <span><?php echo esc_html( $computer_repair_solutions_featured_slider_section_lisec ); ?></span>
                                    </div>
                                    <div class="d-flex align-items-center text-white">
                                        <i class="fa-regular fa-circle-check me-2 text-info fs-5"></i> 
                                        <span><?php echo esc_html( $computer_repair_solutions_featured_slider_section_lithird ); ?></span>
                                    </div>
                                </div>

                                <div class="d-flex flex-wrap gap-3">
                                    <a href="#" class="btn btn-warning btn-lg px-5 py-2 fw-bold rounded-3" 
                                       style="background-color: #FFB300; border: none; color: #000; box-shadow: 0 10px 15px -3px rgba(255, 179, 0, 0.3);">
                                        <?php echo esc_html( get_theme_mod( 'computer_repair_solutions_buttonfirst_text', 'Call Now' ) ); ?>
                                    </a>

                                    <a href="#" class="btn btn-outline-light btn-lg px-5 py-2 fw-bold rounded-3" 
                                       style="background: rgba(255,255,255,0.05); backdrop-filter: blur(5px); border-width: 2px;">
                                        <?php echo esc_html( get_theme_mod( 'computer_repair_solutions_buttonsec_text', 'Get Free Quote' ) ); ?>
                                    </a>
                                </div>

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

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

<?php endif; ?>


       