<?php



use Elementor\Widget_Base;
use Elementor\Controls_Manager;

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


class Categorycarouseltwentyeighthstkaveh extends Widget_Base{

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

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

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

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

  protected function register_controls(){
    
    $this->start_controls_section(
        'contentcategorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Element Content', 'kavehTheme' ),
                  'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
      );
      $this->add_control(
        'showticategorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Show Title', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::SWITCHER,
          'yes' => esc_html__( 'Yes', 'kavehTheme' ),
          'no' => esc_html__( 'No', 'kavehTheme' ),
          'return_value' => 'yes',
          'default' => 'yes',
        ]
      );
      $this->add_control(
        'fwigti2categorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Subtitle', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::TEXT,
          'condition' => [
            'showticategorycarouseltwentyeighthstkaveh' => 'yes',
          ],
          'default' => 'ShopX, ',
        ]
      );

      $this->add_control(
        'wigti2categorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Main Title', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::TEXT,
          'condition' => [
            'showticategorycarouseltwentyeighthstkaveh' => 'yes',
          ],
          'default' => 'ShopX Categories',
        ]
      );

      

      $repeater = new \Elementor\Repeater();
      $repeater->add_control(
        'img1categoryeightcarouselkaveh',
        [
          'label' => esc_html__( 'Background Image', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::MEDIA,
        ]
      );
      $repeater->add_control(
      'title1categorycarouseltwentyeighthstkaveh',
      [
        'label' => esc_html__( 'Title', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => 'Mobile Phone',

      ]
    );
    $repeater->add_control(
      'tagheading1categorycarouseltwentyeighthstkaveh',
      [
        'label' => esc_html__( 'Title Tag', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'div',
        '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(
      'linkcategorycarouseltwentyeighthstkaveh',
      [
        'label' => esc_html__( 'Link', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => '#',
      ]
    );

    $repeater->add_control(
      'numbercategorycarouseltwentyeighthstkaveh',
      [
        'label' => esc_html__( 'Number Inside Image', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => '243',
      ]
    );
    $repeater->add_control(
      'bgcolortbolcategorycarouseltwentyeighthstkaveh',
      [
        'label' => esc_html__( 'Background Color', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::COLOR,
      ]
    );
    $this->add_control(
      'listcategorycarouseltwentyeighthstkaveh',
      [
        'label' => esc_html__( 'Categories', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::REPEATER,
        'fields' => $repeater->get_controls(),
      ]
    
    );

    
       $this->end_controls_section();
       $this->start_controls_section(
        'content3categorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Carousel Settings', 'kavehTheme' ),
                  'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
      );
      $this->add_control(
        'productcolumncategorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Number of Category Columns on Desktop', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::NUMBER,
          'min' => 0,
          'max' => 8,
          'step' => 1,
          'default' => 3,
      
        ]
      );
      $this->add_control(
        'productcolumn2categorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Number of Category Columns on Tablet', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::NUMBER,
          'min' => 0,
          'max' => 5,
          'step' => 1,
          'default' => 2,
      
        ]
      );
      $this->add_control(
        'productcolumn3categorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Number of Category Columns on Mobile', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::NUMBER,
          'min' => 0,
          'max' => 5,
          'step' => .1,
          'default' => 1.4,
      
        ]
      );
       $this->end_controls_section();
       $this->start_controls_section(
        'stylet_categorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Title Style', 'kavehTheme' ),
          'tab' => \Elementor\Controls_Manager::TAB_STYLE,
          'condition' => [
            'showticategorycarouseltwentyeighthstkaveh' => 'yes',
          ],
        ]
      );
      $this->add_control(
        'ftextcolortcategorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Subtitle Color', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'selectors' => [
            '{{WRAPPER}} .categories-box-one-right .title' => 'color: {{VALUE}}',
          ],
        ]
      );
      $this->add_group_control(
        \Elementor\Group_Control_Typography::get_type(),
        [
          'name' => 'ftitletyt_categorycarouseltwentyeighthstkaveh',
          'label' => esc_html__( 'Subtitle Typography', 'kavehTheme' ),
          'selector' => '{{WRAPPER}} .categories-box-one-right .title',
        ]
      );
      $this->add_control(
        'textcolortcategorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Title Color', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'selectors' => [
            '{{WRAPPER}} .categories-box-one-right .title span' => 'color: {{VALUE}}',
          ],
        ]
      );
      $this->add_group_control(
        \Elementor\Group_Control_Typography::get_type(),
        [
          'name' => 'titletyt_categorycarouseltwentyeighthstkaveh',
          'label' => esc_html__( 'Title Typography', 'kavehTheme' ),
          'selector' => '{{WRAPPER}} .categories-box-one-right .title span',
        ]
      );
      $this->end_controls_section();
      $this->start_controls_section(
        'styleo_categorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Category Title Style', 'kavehTheme' ),
          'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        ]
      );
      $this->add_control(
        'befhead1tcategorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Title Color', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'selectors' => [
            '{{WRAPPER}} .categories-box-one-item .title' => 'color: {{VALUE}}',
          ],
        ]
      );
      $this->add_group_control(
        \Elementor\Group_Control_Typography::get_type(),
        [
          'name' => 'befhead1_categorycarouseltwentyeighthstkaveh',
          'label' => esc_html__( 'Title Typography', 'kavehTheme' ),
          'selector' => '{{WRAPPER}} .categories-box-one-item .title',
        ]
      );
      $this->end_controls_section();
      $this->start_controls_section(
        'style3_categorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Category Box Style', 'kavehTheme' ),
          'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        ]
      );

      $this->add_control(
        'backgroundcolorbox1tcategorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Box Background Change', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'selectors' => [
            '{{WRAPPER}} .categories-box-one-item .image' => 'background-color: {{VALUE}} !important',
          ],
        ]
      );


      $this->add_control(
        'hoverbackgroundcolorbox1tcategorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Border Color Change on Hover', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'selectors' => [
            '{{WRAPPER}} .categories-box-one-item .image::before' => 'border-color: {{VALUE}}',
          ],
        ]
      );


      $this->add_control(
        'borderradiustcategorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Box Border Radius', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::DIMENSIONS,
          'size_units' => [ 'px' ],
          'selectors' => [ 
            '{{WRAPPER}} .categories-box-one-item .image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
          ],
        ]
      );
      $this->add_control(
        'catimg1widthcategorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Category Image Width', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::SLIDER,
          'size_units' => [ 'px' ],
          'range' => [
            'px' => [
              'min' => 0,
              'max' => 1000,
              'step' => 1,
            ],
          ],
          'selectors' => [
            '{{WRAPPER}} .categories-box-one-item .image img' => 'width: {{SIZE}}{{UNIT}};',
          ],
        ]
      );
      $this->add_control(
        'catimg1height2categorycarouseltwentyeighthstkaveh',
        [
          'label' => esc_html__( 'Category Image Height', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::SLIDER,
          'size_units' => [ 'px' ],
          'range' => [
            'px' => [
              'min' => 0,
              'max' => 1000,
              'step' => 1,
            ],
          ],
          'selectors' => [
            '{{WRAPPER}} .categories-box-one-item .image img' => 'height: {{SIZE}}{{UNIT}};',
          ],
        ]
      );
      $this->end_controls_section();

        }
        protected function render(){
          $settings = $this->get_settings_for_display();
          $clsid = $this->get_id();
          ?>
<div class="container">
        <div class="categories-box-one d-flex align-items-center flex-column flex-sm-row overflow-hidden">
          <div class="categories-box-one-right position-relative flex-fill flex-grow-0 flex-shrink-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="112" height="97" fill="none" viewBox="0 0 112 97" class="position-absolute top-0 end-50">
              <g clip-path="url(#a_gradient)" opacity=".1">
                <path fill="color(display-p3 .5464 .7006 1)" d="M41.334 80.835H25.167v16.167h16.167V80.835Z"></path>
                <path fill="color(display-p3 .3456 .5681 1)" fill-rule="evenodd" d="M57.501 64.667H41.334V32.333h32.334v32.334H57.501Z" clip-rule="evenodd"></path>
                <path fill="color(display-p3 0 .34 1)" d="M25.167 64.667H9v16.168h16.167V64.667Z"></path>
                <path fill="color(display-p3 .5464 .7006 1)" d="M89.835 80.835H73.668v16.167h16.167V80.835Z"></path>
                <path fill="color(display-p3 0 .34 1)" fill-rule="evenodd" d="M73.668 64.667H41.334V32.335h32.334v32.332Zm16.167-16.163V32.333H73.668V16.167H41.334v16.166H25.167v32.334h16.167v16.168h32.334V64.667h16.167V48.504Z" clip-rule="evenodd"></path>
                <path fill="color(display-p3 0 .34 1)" d="M106 64.667H89.833v16.168H106V64.667Z"></path>
                <path fill="color(display-p3 .5464 .7006 1)" d="M41.334 0H25.167v16.167h16.167V0Z"></path>
                <path fill="color(display-p3 0 .34 1)" d="M25.167 16.167H9v16.168h16.167V16.167Z"></path>
                <path fill="color(display-p3 .5464 .7006 1)" d="M89.835 0H73.668v16.167h16.167V0Z"></path>
                <path fill="color(display-p3 0 .34 1)" d="M106 16.167H89.833v16.168H106V16.167Z"></path>
              </g>
              <circle cx="60.8" cy="35.8" r="1.8" fill="url(#b_gradient)" opacity=".2"></circle>
              <circle cx="109.8" cy="39.8" r="1.8" fill="color(display-p3 .8774 .8774 .8774)"></circle>
              <circle cx="100.8" cy="4.8" r="1.8" fill="color(display-p3 0 .34 1)"></circle>
              <circle cx="35.8" cy="32.8" r="1.8" fill="color(display-p3 0 .34 1)" opacity=".1"></circle>
              <circle cx="92.8" cy="35.8" r="1.8" fill="color(display-p3 0 .34 1)" opacity=".2"></circle>
              <circle cx="59.8" cy="5.8" r="1.8" fill="color(display-p3 0 .34 1)" opacity=".2"></circle>
              <circle cx="1.8" cy="30.8" r="1.8" fill="color(display-p3 1 .762 .1501)"></circle>
              <circle cx="25.8" cy="5.8" r="1.8" fill="color(display-p3 0 .34 1)" opacity=".07"></circle>
              <circle cx="64.8" cy="19.8" r="1.8" fill="color(display-p3 0 .34 1)" opacity=".07"></circle>
              <circle cx="33.8" cy="25.8" r="1.8" fill="color(display-p3 0 .34 1)" opacity=".07"></circle>
              <defs>
                <linearGradient id="b_gradient" x1="60.8" x2="60.8" y1="34" y2="37.6" gradientUnits="userSpaceOnUse">
                  <stop stop-color="color(display-p3 .2803 .769 .1563)"></stop>
                  <stop offset="1" stop-color="color(display-p3 .2803 .769 .1563)" stop-opacity=".61"></stop>
                </linearGradient>
                <clipPath id="a_gradient">
                  <path fill="#fff" d="M9 0h97v97H9z"></path>
                </clipPath>
              </defs>
            </svg> 
            
            <?php if (!empty($settings['showticategorycarouseltwentyeighthstkaveh']) && $settings['showticategorycarouseltwentyeighthstkaveh'] === 'yes') : ?>
            <div class="title d-flex flex-column align-items-center justify-content-center">
              <?php echo esc_html($settings['wigti2categorycarouseltwentyeighthstkaveh']); ?>
              <span><?php echo esc_html($settings['fwigti2categorycarouseltwentyeighthstkaveh']); ?></span>
            </div>
            <?php endif; ?>


            <a href="javascript:void(0)" class="more text-center d-block mx-auto">
              <i class="icon-arrow-left-6 lh-1"></i>
            </a>
            <div class="btns d-flex align-items-center justify-content-center">
              <div class="swiper-button-prev d-flex align-items-center justify-content-center rounded-circle position-relative top-0 start-0 bottom-0 end-0 m-0 swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-465c9116e571d924" aria-disabled="true">
                <i class="icon-angle-right-3"></i>
              </div>
              <div class="swiper-button-next d-flex align-items-center justify-content-center rounded-circle position-relative top-0 start-0 bottom-0 end-0 m-0" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-465c9116e571d924" aria-disabled="false">
                <i class="icon-angle-left-3"></i>
              </div>
            </div>
          </div>
          <div class="categories-box-one-left flex-grow-1">
            <!-- Start Carousel -->
            <div class="swiper swiper-categories-one swiper-visible swiper-visibled-mobile swiper-initialized swiper-horizontal swiper-pointer-events swiper-rtl swiper-watch-progress">
              <div class="swiper-wrapper" id="swiper-wrapper-465c9116e571d924" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
                <!-- Start Category -->
                <?php if (!empty($settings['listcategorycarouseltwentyeighthstkaveh'])) : ?>
              <?php 
              foreach ($settings['listcategorycarouseltwentyeighthstkaveh'] as $item) : ?>
                <div class="swiper-slide swiper-slide-visible swiper-slide-active" role="group" style="width: 119.625px; margin-left: 12px;">
                  <div class="categories-box-one-item h-full d-flex flex-column align-items-center position-relative">
                    <a href="<?php echo esc_url($item['linkcategorycarouseltwentyeighthstkaveh']); ?>" class="stretched-link" aria-label="name link"></a>
                    <div class="image mx-auto d-flex align-items-center justify-content-center bg-white position-relative">
                      <img src="<?php echo esc_url($item['img1categoryeightcarouselkaveh']['url']); ?>" alt="category" width="40" height="47">
                      <span class="position-absolute start-0 d-flex align-items-center justify-content-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="none" viewBox="0 0 26 26" class="position-absolute top-0 start-0 w-100 h-100">
                          <path fill="currentColor" stroke="#fff" stroke-width="1.4" d="m18.355 2.9.714.412c2.186 1.262 3.132 1.819 3.803 2.588A6.3 6.3 0 0 1 24.085 8c.33.967.34 2.064.34 4.588v.824c0 2.524-.01 3.621-.34 4.587a6.3 6.3 0 0 1-1.213 2.101c-.671.77-1.617 1.326-3.803 2.588l-.714.412c-2.186 1.262-3.14 1.803-4.142 2a6.298 6.298 0 0 1-2.426 0c-1.002-.197-1.956-.738-4.142-2l-.714-.412c-2.186-1.262-3.132-1.819-3.803-2.588A6.3 6.3 0 0 1 1.915 18c-.33-.967-.34-2.064-.34-4.588v-.824c0-2.524.01-3.621.34-4.587A6.3 6.3 0 0 1 3.128 5.9c.671-.77 1.617-1.326 3.803-2.588l.714-.412c2.186-1.262 3.14-1.803 4.142-2a6.3 6.3 0 0 1 2.426 0c1.002.197 1.956.738 4.142 2Z"></path>
                        </svg>
                        <?php echo esc_html($item['numbercategorycarouseltwentyeighthstkaveh']); ?>
                      </span>
                    </div>
                    <<?php echo esc_html($item['tagheading1categorycarouseltwentyeighthstkaveh']); ?> class="title overflow-hidden"><?php echo esc_html($item['title1categorycarouseltwentyeighthstkaveh']); ?></<?php echo esc_html($item['tagheading1categorycarouseltwentyeighthstkaveh']); ?>>
                  </div>
                </div>
                <?php endforeach; ?>
                <?php endif; ?>
                <!-- End Category -->
              </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
            <!-- End Carousel -->
          </div>
        </div>
      </div>
      <style>
        .categories-products-item .image img {
          object-fit: contain !important;
      }
      .categories-products-item .btn::before {
          background-size: contain !important;
      }
      </style>
      
          <?php
        }
      }
      
