<?php
use Elementor\Widget_Base;
use Elementor\Controls_Manager;

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

class Cat__carousel__eighteenth extends Widget_Base
{

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

  public function get_title()
  {
    return esc_html__('Category Carousel Style Eighteenth', 'kavehTheme');
  }

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

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

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

    $repeater = new \Elementor\Repeater();
    $repeater->add_control(
      'Cat__loop__image',
      [
        'label' => esc_html__('Category Image', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::MEDIA,
        'default' => [
          'url' => \Elementor\Utils::get_placeholder_image_src(),
        ],
      ]
    );
    $repeater->add_control(
      'Cat__loop__title',
      [
        'label' => esc_html__('Title', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => esc_html__('iPhone Products', 'kavehTheme'),

      ]
    );
    $repeater->add_control(
      'Cat__loop__title__tag',
      [
        'label' => esc_html__('Title Tag', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'H2',
        'options' => [
          'H1' => esc_html__('H1', 'kavehTheme'),
          'H2' => esc_html__('H2', 'kavehTheme'),
          'H3' => esc_html__('H3', 'kavehTheme'),
          'H4' => esc_html__('H4', 'kavehTheme'),
          'H5' => esc_html__('H5', 'kavehTheme'),
          'H6' => esc_html__('H6', 'kavehTheme'),
          'p' => esc_html__('p', 'kavehTheme'),
          'div' => esc_html__('div', 'kavehTheme'),
          'span' => esc_html__('span', 'kavehTheme'),
        ],
      ]
    );
    $repeater->add_control(
      'Cat__loop__subtitle',
      [
        'label' => esc_html__('Subtitle', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => esc_html__('iPhone Products', 'kavehTheme'),

      ]
    );
    $repeater->add_control(
      'Cat__loop__link',
      [
        'label' => esc_html__('Button Link', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => '#',
      ]
    );

    $this->add_control(
      'Cat__loop',
      [
        'label' => esc_html__('Categories', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::REPEATER,
        'fields' => $repeater->get_controls(),
        'default' => [
          [
            'Cat__loop__title' => esc_html__('Title', 'kavehTheme'),
        'Cat__loop__subtitle' => esc_html__('Title', 'kavehTheme'),
        'Cat__loop__btn__title' => esc_html__('Button Title', 'kavehTheme'),
            'Cat__loop__link' => esc_html__('#', 'kavehTheme'),
          ],
        ]
      ]
    );

    $this->end_controls_section();

    $this->start_controls_section(
      'slider__style',
      [
        'label' => esc_html__('Slider Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
      ]
    );
    $this->add_control(
      'slider__image__Width',
      [
        'label' => esc_html__('Item Image Width', 'textdomain'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', '%', 'em', 'rem', 'custom'],
        'range' => [
          'px' => [
            'min' => 0,
            'max' => 1000,
            'step' => 5,
          ],
          '%' => [
            'min' => 0,
            'max' => 100,
          ],
        ],
        'default' => [
          'unit' => 'px',
          'size' => 100,
        ],
        'selectors' => [
          '{{WRAPPER}} .category-specials-three-item img' => 'width: {{SIZE}}{{UNIT}};',
        ],
      ]
    );
    $this->add_control(
      'slider__image__height',
      [
        'label' => esc_html__('Item Image Height', 'textdomain'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', '%', 'em', 'rem', 'custom'],
        'range' => [
          'px' => [
            'min' => 0,
            'max' => 1000,
            'step' => 5,
          ],
          '%' => [
            'min' => 0,
            'max' => 100,
          ],
        ],
        'default' => [
          'unit' => 'px',
          'size' => 100,
        ],
        'selectors' => [
          '{{WRAPPER}} .category-specials-three-item img' => 'height: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->end_controls_section();
    $this->start_controls_section(
      'content3categorycarouselseventeenthkaveh',
      [
        'label' => esc_html__('Carousel Settings', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
      ]
    );

    $this->add_control(
      'carousel__desktop__number',
      [
        'label' => esc_html__('Number of Category Columns on Desktop', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::NUMBER,
        'min' => 0,
        'max' => 8,
        'step' => 1,
        'default' => 7,

      ]
    );
    $this->add_control(
      'carousel__tablet__number',
      [
        'label' => esc_html__('Number of Category Columns on Tablet', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::NUMBER,
        'min' => 0,
        'max' => 5,
        'step' => 1,
        'default' => 3,

      ]
    );
    $this->add_control(
      'carousel__mobile__number',
      [
        'label' => esc_html__('Number of Category Columns on Mobile', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::NUMBER,
        'min' => 0,
        'max' => 5,
        'step' => 1,
        'default' => 2,

      ]
    );

    $this->end_controls_section();

  }

  protected function render()
  {
    $settings = $this->get_settings_for_display();
    $clsid = $this->get_id();
    ?>


<section class="category-specials-three overflow-hidden">
      <div class="container">
        <!-- Start Carousel -->
        <div class="swiper swiper-category-specials-three overflow-hidden" data-swiper='{"watchSlidesProgress":true,"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"breakpoints":{"320":{"slidesPerView":<?php echo esc_html($settings['carousel__mobile__number']); ?>,"spaceBetween":20},"500":{"slidesPerView":<?php echo esc_html($settings['carousel__tablet__number']); ?>,"spaceBetween":20},"768":{"slidesPerView":<?php echo esc_html($settings['carousel__tablet__number']); ?>,"spaceBetween":20},"992":{"slidesPerView":<?php echo esc_html($settings['carousel__desktop__number']); ?>,"spaceBetween":20},"1200":{"slidesPerView":<?php echo esc_html($settings['carousel__desktop__number']); ?>,"spaceBetween":30}}}'>
          <div class="swiper-wrapper">
          <?php
            if ($settings['Cat__loop']) {
              foreach ($settings['Cat__loop'] as $item) {
                ?>
            <!-- Start Slide -->
            <div class="swiper-slide">
              <div class="category-specials-three-item position-relative">
                <a href="<?php echo esc_html($item['Cat__loop__link']); ?>" class="stretched-link" aria-label="category"></a>
                <img src="<?php echo esc_url($item['Cat__loop__image']['url']); ?>" alt="category" width="101" height="101" class="d-block mx-auto">
                <<?php echo esc_attr($item['Cat__loop__title__tag']); ?> class="title text-center text-white mb-0">
                <?php echo esc_html($item['Cat__loop__title']); ?> 
                  <strong class="d-block"> <?php echo esc_html($item['Cat__loop__subtitle']); ?>  </strong>
                </<?php echo esc_attr($item['Cat__loop__title__tag']); ?>>
              </div>
            </div>
            <!-- End Slide -->
            <?php
              }
            }
            ?>
          </div>
        </div>
        <!-- End Carousel -->
      </div>
    </section>
           

    <?php
  }

}