<?php
/**
 *
 * @package Slider Premium
 */
?>
<?php $showContent = get_theme_mod('slider_section_show_content', 'on'); ?>
<div class="slider_section" id="slider">
    <div class="owl-slider">
        <div id="carousel" class="owl-carousel">
            <?php
            $args = array( 'post_type' => 'slider', 'orderby'   => 'id', 'order' => 'DESC',);
            if(!empty($pageId)){
                $args['page_id'] = absint($pageId);
                
            }
            $text = '';
            $query = new WP_Query($args);
            if($query->have_posts()){
                while($query->have_posts()) : $query->the_post(); 
                
                if( get_theme_mod('slider_areaOpacity',true) ) {
                    $slider_areaOpacity = 'opacity:'.esc_attr(get_theme_mod('slider_areaOpacity')).';';
                }
                if( get_theme_mod('slider_Tfontsize',true) ) {
                    $slider_Tfontsize = 'font-size:'.esc_attr(get_theme_mod('slider_Tfontsize')).';';
                }

                $pageLink = '';
                $slider_btn_link = get_post_meta($post->ID,'slider_btn_link',false);
                $sliderBtnTxt = get_post_meta($post->ID,'sliderBtnTxt',false);
                if(!empty($slider_btn_link) && is_array($slider_btn_link)){
                    $pageLink = esc_url(get_permalink($slider_btn_link[0]));
                }
                if(!empty($sliderBtnTxt) && is_array($sliderBtnTxt)){
                    $pageLinkTxt = $sliderBtnTxt[0];
                }else{
                    $pageLinkTxt = 'Read More';
                }

                $pgLink2 = '';
                $slider_btn2_link = get_post_meta($post->ID,'slider_btn2_link',false);
                $sliderBtn2Txt = get_post_meta($post->ID,'sliderBtn2Txt',false);
                if(!empty($slider_btn2_link) && is_array($slider_btn2_link)){
                    $pgLink2 = esc_url(get_permalink($slider_btn2_link[0]));
                }
                if(!empty($sliderBtn2Txt) && is_array($slider_btn2_link)){
                    $pgLkTxt2 = $sliderBtn2Txt[0];
                }else{
                    $pgLkTxt2 = 'Explore Our Service';
                }

            ?>
            <?php
                $cl_txt = get_theme_mod('cl_txt', '141+ happy clients');
            ?>
            <div class="item">
                <div class="imbx " data-wow-duration="1s">
                    <?php 
                        if(has_post_thumbnail()){
                            $total_slider_image = wp_get_attachment_image_src(get_post_thumbnail_id(),'full');  
                            echo '<img class="slide-mainimg" alt="'. esc_html(get_the_title()) .'" src="'.esc_url($total_slider_image[0]).'">';
                    }?>
                    <div class="overlay"></div>
                    <?php  if($showContent == 'on'){   ?>
                    <div class="slider_content " data-wow-duration="1s">
                        <?php if( get_theme_mod('slstar_button_display','show' ) == 'show') :?>
                        <div class="imabx">
                            <?php
                                $slider_images = [
                                    'sl_img1' => '/images/team.jpg',
                                    'sl_img2' => '/images/team.jpg',
                                    'sl_img3' => '/images/team.jpg',
                                    'sl_img4' => '/images/team.jpg',
                                    'sl_img5' => '/images/team.jpg'
                                ];

                                $i = 1;
                                foreach ($slider_images as $key => $default_img) {
                                    $img_url = get_theme_mod($key);
                                    $img_src = !empty($img_url) ? esc_url($img_url) : get_template_directory_uri() . $default_img;
                                    echo '<div class="slimg' . $i . ' slimg">';
                                    echo '<img alt="' . esc_attr(get_the_title()) . '" src="' . $img_src . '" class="img-responsive secondry-bg-img" />';
                                    echo '</div>';
                                    $i++;
                                }
                            ?>
                        </div>                 
                        <div class="ratingbx">
                            <?php $rating = get_theme_mod('default_star_rating', '5'); ?>
                            <div class="rating-container">
                                <div class="rating-display">
                                    <?php for ($i = 1; $i <= 5; $i++) : ?>
                                        <i class="fa fa-star<?php echo ($i <= $rating) ? '' : '-o'; ?>"></i>
                                    <?php endfor; ?>
                                </div>
                                <div class="cltxt"> <?php echo ($cl_txt); ?></div>
                            </div>
                        </div>
                        <?php endif ?>
                        <div class="clearfix"></div>

                        <div class="title" data-wow-duration="1s"> <?php echo (get_the_title()); ?> </div>
                        <div class="sub-title ">  <?php echo (get_the_content()); ?> </div>   
                        <div class="slide-btna ">
                            <?php if(!empty($pageLinkTxt  )){ ?>
                            <div class="btn1">  
                                <a href="<?php echo $pageLink; ?>">
                                    <div class="txtinn">
                                        <?php echo($pageLinkTxt); ?> 
                                    </div>
                                    <div class="ainc"> 
                                        <i class="fa-solid fa-arrow-right"></i> 
                                    </div>
                                </a>
                            </div>
                            <?php }?>
                            <?php if(!empty($pgLkTxt2 )){ ?>
                            <div class="btn2"> 
                                <a href="<?php echo $pgLink2; ?>">
                                    <div class="txtinn">
                                       <?php echo($pgLkTxt2); ?> 
                                   </div>
                                </a> 
                            </div>
                            <?php }?>
                        </div>              
                    </div>
                    <?php }?>
                </div>
            </div>
            <?php
                endwhile;
            }else{ 
                for($i=0;$i<6;$i++){?>
            <div class="item">
                <div class="imbx " data-wow-duration="1s">
                    <?php echo '<img class="slide-mainimg" alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/slider.jpg">';?>
                    <div class="overlay"></div>
                    <?php if($showContent == 'on'){?>     
                    <div class="slider_content" data-wow-duration="1s">      
                        <div class="imabx">
                            <div class="slimg1 slimg">
                                <img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" /> 
                            </div>
                            <div class="slimg2 slimg">
                                <img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" /> 
                            </div>
                            <div class="slimg3 slimg">
                                <img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" /> 
                            </div>
                            <div class="slimg4 slimg">
                                <img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" /> 
                            </div>
                            <div class="slimg5 slimg">
                                <img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" />  
                            </div>
                        </div>
                        <div class="ratingbx">
                            <?php $rating = get_theme_mod('default_star_rating', '3'); ?>
                            <div class="rating-container">
                                <div class="rating-display">
                                    <?php for ($i = 1; $i <= 5; $i++) : ?>
                                        <i class="fa fa-star<?php echo ($i <= $rating) ? '' : '-o'; ?>"></i>
                                    <?php endfor; ?>
                                </div>
                            </div>
                            <div class="cltxt"> 141+ happy clients </div>
                        </div>        
                        <div class="clearfix"></div>

                       <div class="title " data-wow-duration="1s">Your Home with Clean Solar Energy </div>
                       <div class="sub-title ">
                           Trusted solar solutions to reduce your carbon footprint and save on energy bills.
                       </div>
                        <div class="slide-btna ">
                            <div class="btn1">
                                <a href="#">
                                    <div class="txtinn">
                                       <?php _e( 'Book A Call' , 'luzuk-premium' ); ?> 
                                   </div>
                                   <div class="ainc"> 
                                        <i class="fa-solid fa-arrow-right"></i> 
                                    </div>
                                </a>
                            </div>
                            <div class="btn2">
                                <a href="#">
                                    <div class="txtinn">
                                       <?php _e( 'Explore Our Service ' , 'luzuk-premium' ); ?>
                                   </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <?php }?>    
                </div>
            </div>
                <?php }
            }?>
        </div>
    </div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Example rating value: change this to 3, 4, 4.5 etc.
    const customRating = 4;  // You can make this dynamic

    // Use `querySelector` to find input with matching value
    const starInput = document.querySelector(
      `input[name="rating"][value="${customRating}"]`
    );
    if (starInput) {
      starInput.checked = true;
    }
  });
</script>
<script>
  const customRating = <?php echo get_theme_mod('custom_rating', 3); ?>;
</script>
<script>
        $(document).ready(function() {
          $('.slider_section .owl-carousel').owlCarousel({
            refreshClass: 'owl-refresh',
            autoplayTimeout:9000,
            loop: true,
            margin: 30,
            autoHeight: true,
            autoWidth: false,
            autoplay: true,
            animateOut: 'lightSpeedOut',
            //animateIn: 'zoomIn',
            navText: [
                    '<i class="fa fa-caret-left"></i> ',
                    '<i class="fa fa-caret-right" ></i>'
                ],
            responsiveClass: true,

            responsive: {
              0: {
                items: 1,
                nav: true,
                margin: 40
              },
              600: {
                items:1,
                nav: true,
                margin: 50
              },
              1000: {
                items:1,
                nav: true,
                loop: true,
                margin: 100
              }
            }
          })
        })

</script>
