<?php



use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if (!defined('ABSPATH')) exit; // Exit if accessed directly


class Slidersixteenteenkaveh extends Widget_Base{

  public function get_name(){
    return 'slidersixteenteenkaveh';
  }

  public function get_title(){
    return esc_html__( 'Slider Style Sixteen', 'kavehTheme' );
  }

  public function get_icon(){
    return 'eicon-archive-posts';
  }

  public function get_categories(){
    return ['kavehelements'];
  }

  protected function register_controls(){
    
    $this->start_controls_section(
        'contentslidersixteenteenkaveh',
        [
          'label' => esc_html__( 'Slider Content', 'kavehTheme' ),
                  'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
      );

      $repeater = new \Elementor\Repeater();

      $repeater->add_control(
        'backslidersixteenteenkaveh',
        [
          'label' => esc_html__( 'Choose Your Image', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::MEDIA,
          'default' => [
            'url' => \Elementor\Utils::get_placeholder_image_src(),
          ],
        ]
      );
      $repeater->add_control(
        'linkslidersixteenteenkaveh',
        [
            'label' => esc_html__( 'Slide Link', 'kavehTheme' ),
            'type' => \Elementor\Controls_Manager::TEXT,
            'default' => esc_html__( '#', 'kavehTheme' ),
    
        ]
    );
      $this->add_control(
        'slidesslidersixteenteenkaveh',
        [
          'label' => esc_html__( 'Slides', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::REPEATER,
          'fields' => $repeater->get_controls(),
          ],
      );
      $this->add_control(
        'bulletsslidersixteenteenkaveh',
        [
          'label' => esc_html__( 'Show Dots?', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::SWITCHER,
          'yes' => esc_html__( 'Yes', 'kavehTheme' ),
          'no' => esc_html__( 'No', 'kavehTheme' ),
          'return_value' => 'yes',
          'default' => 'yes',
        ]
      );
      $this->end_controls_section();

      $this->start_controls_section(
        'style1_slidersixteenteenkaveh',
        [
          'label' => esc_html__( 'Slider Style', 'kavehTheme' ),
          'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        ]
      );
      $this->add_control(
        'heightbgslidersixteenteenkaveh',
        [
          'label' => esc_html__( 'Slider Height', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::SLIDER,
          'size_units' => [ 'px' ],
          'range' => [
            'px' => [
              'min' => 0,
              'max' => 2000,
              'step' => 5,
            ],
            'devices' => [ 'desktop', 'tablet', 'mobile' ],
          ],
          'selectors' => [
            '{{WRAPPER}}  .swiper-slide' => 'height: {{SIZE}}{{UNIT}};',
          ],
        ]
      );
     

      $this->add_control(
        'borderradiusslidersixteenteenkaveh',
        [
          'label' => esc_html__( 'Slider Border Radius', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::DIMENSIONS,
          'size_units' => [ 'px' ],
          'selectors' => [
            '{{WRAPPER}} .swiper-slide img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
          ],
        ]
      );
      

      $this->add_control(
        'bgdotscolorslidersixteenteenkavehh',
        [
          'label' => esc_html__( 'Dots Background Color', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'condition' => [
            'bulletsslidersixteenteenkaveh' => 'yes',
        ],
          'selectors' => [
            '{{WRAPPER}} .swiper-books-slider .swiper-pagination-bullet-active' => 'background-color: {{VALUE}}',
          ],
        ]
      );
      $this->add_control(
        'dotscolorslidersixteenteenkavehh',
        [
          'label' => esc_html__( 'Left and Right Buttons Background Color', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'condition' => [
            'bulletsslidersixteenteenkaveh' => 'yes',
        ],
          'selectors' => [
            '{{WRAPPER}}   .swiper-books-slider .swiper-button-next, .swiper-books-slider .swiper-button-prev' => 'background-color: {{VALUE}}',
          ],
        ]
      );
    
      $this->add_control(
        'borderdotscolorslidersixteenteenkavehh',
        [
          'label' => esc_html__( 'Left and Right Icon Color', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'condition' => [
            'bulletsslidersixteenteenkaveh' => 'yes',
        ],
          'selectors' => [
            '{{WRAPPER}} .swiper-button-next, .swiper-books-slider .swiper-button-prev' => 'color {{VALUE}}',
          ],
        ]
      );
       $this->end_controls_section();

          
        }


        protected function render() {
          $settings = $this->get_settings_for_display();
          $clsid = $this->get_id();
          ?>
              <div class="swiper swiper-books-slider overflow-hidden position-relative h-100 swiper-fade">
                  <div class="swiper-wrapper">
                  <?php
                              if (!empty($settings['slidesslidersixteenteenkaveh'])) {
                                  foreach ($settings['slidesslidersixteenteenkaveh'] as $item) {
                                      ?>
                      <!-- Single Slide -->
                      <div class="swiper-slide swiper-slide-visible swiper-slide-active" data-swiper-slide-index="0">
                          <a href="<?php echo esc_url( $item['linkslidersixteenteenkaveh']);?>" class="d-block h-100">
                              <img src="<?php echo esc_url($item['backslidersixteenteenkaveh']['url']); ?>" alt="slider" width="821" height="430" class="d-block w-100 h-100">
                          </a>
                      </div>
                      <?php
                                  }
                                }
                                ?>
                      <!-- End Single Slide -->
                  </div>
                  <?php
                    if("yes"===$settings['bulletsslidersixteenteenkaveh']){?>
                  <div class="swiper-controller d-flex align-items-center position-absolute bottom-0">
                      <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide">
                          <i class="icon-angle-right-4 lh-1"></i>
                      </div>
                      <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
                      <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide">
                          <i class="icon-angle-left-4 lh-1"></i>
                      </div>
                  </div>
              </div>
              <?php } ?>
              <style>
                  .carousel-home-two-item img {
                      object-fit: cover !important;
                  }
              </style>
      
              <script>
                  function init<?php echo $clsid; ?>() {
                      new Swiper(".swiper-books-slider", {
                          slidesPerView: 1,
                          spaceBetween: 0,
                          pagination: {
                              el: ".swiper-pagination",
                              type: "bullets",
                              clickable: true,
                          },
                          autoplay: {
                              delay: 3000,
                          },
                          effect: "fade",
                          fadeEffect: {
                              crossFade: true,
                          },
                          loop: true,
                      });
                  }
      
                  if (window.Swiper) {
                      init<?php echo $clsid; ?>();
                  } else {
                      window.addEventListener("load", function() {
                          init<?php echo $clsid; ?>();
                      });
                  }
              </script>
          <?php
      }
    }
