<?php

if(get_theme_mod('banner_area_disable') != 'on' ){
  ?>
  <?php
      // width 
      $c_width = get_theme_mod('banner_c_width', 'container-fluid');

        if ($c_width === 'container') {
            $c_alignment = 'container';
        } elseif ($c_width === 'container-fluid') {
            $c_alignment = 'container-fluid';
        } else {
            $text_alignment = 'container'; // Default to 'container' if the setting is invalid
        }
  ?>   

  <div class="banner-area" id="banner" >
      <div class="<?php echo esc_attr($c_width); ?> pd-0">       
        <?php
            $showStatic = true;
            for( $i = 1; $i < 9; $i++ ){
              $banner_page_id = get_theme_mod('bann_page_txt'.$i); 
              if(!empty($banner_page_id)){
                $showStatic = false;
                break;
              }
            }
         ?> 
  
          <div class="banner-single-area">  
              <div class="owl-carousel owl-theme">
                <?php
                $cols = get_theme_mod('banner_npp_count', 5);
                $cols++;
                      // echo '$cold: '.$cols;
                switch($cols){
                  case 1:
                  $colCls = 'col-lg-12 col-md-12 col-sm-3 col-xs-12';
                  break;
                  case 2: 
                  $colCls = 'col-lg-6 col-md-3 col-sm-3 col-xs-12';
                  break;
                  case 3:
                  case 5:
                  case 6:
                  case 9:
                  case 11:
                  case 13:
                  case 15:
                  $colCls = 'col-lg-3 col-md-3 col-sm-3 col-xs-3 col-12';
                  break;
                  default: 
                  $colCls = 'col-lg-3 col-md-3 col-sm-3 col-xs-3 col-12';
                  break;
                }
                $icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
                ?>
          
                <?php
                for( $i = 1; $i <= $cols; $i++ ){
                  if($showStatic === false){
                    $banner_page_id = get_theme_mod('banner_page'.$i);
                    $bann_page_txt = get_theme_mod('bann_page_txt'.$i, 'INTERIOR DESIGN');
                   
                    $bann_page_txt = get_theme_mod('bann_page_txt'.$i);
                if($bann_page_txt){
                ?>

                    
                  <div class="item bann-item"> 
                      <div class="bann-bx">
                          <div class="sub_title"> <?php echo $bann_page_txt; ?> </div> 
                      </div>  
                  </div>
                  
                <?php
                      }
                          
                }else{?>
              
                    
                  <div class="item bann-item"> 
                      <div class="bann-bx">
                          <div class="sub_title"> INTERIOR DESIGN</div> 
                      </div>  
                  </div>
                <?php }
              }?>
            </div>
        </div>
      </div>
  </div> 
  <!-- banner Area Start -->
    <script>
        $(document).ready(function() {
          $('#banner .owl-carousel').owlCarousel({
            refreshClass: 'owl-refresh',
            autoplayTimeout:4000,
            loop: true,
            margin: 30,
            autoHeight: true,
            autoWidth: false,
            autoplay: true,
            // rtl:true,
            responsiveClass: true,
            responsive: {
              0: {
                items: 1,
                nav: true,
                margin: 10
              },
              400: {
                items: 2,
                nav: true,
                margin: 10
              },
              500: {
                items: 2,
                nav: true,
                margin: 10
              },
              991: {
                items:3,
                nav: true,
                margin: 10
              },
              1000: {
                items:4,
                nav: true,
                loop: true,
                margin: 20
              },

              1299: {
                items:6,
                nav: true,
                loop: true,
                margin: 10
              }
            }
          })
        })
    </script>
  
<?php } 