<?php



use Elementor\Widget_Base;
use Elementor\Controls_Manager;

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


class Servicecarouselfirststkaveh extends Widget_Base{

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

  public function get_title(){
    return esc_html__( 'Service Carousel Style One', 'kavehTheme' );
  }

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

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

  protected function register_controls(){
    
    $this->start_controls_section(
        'contentservicecarouselfirststkaveh',
        [
          'label' => esc_html__( 'Element Content', 'kavehTheme' ),
                  'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
      );
      $this->add_control(
        'showtiservicecarouselfirststkaveh',
        [
          '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(
        'wigti2servicecarouselfirststkaveh',
        [
          'label' => esc_html__( 'Title', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::TEXT,
          'condition' => [
            'showtiservicecarouselfirststkaveh' => 'yes',
          ],
          'default' => 'User Contexts',
        ]
      );

      $this->add_control(
        'secendtitle',
        [
          'label' => esc_html__( 'Second Title', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::TEXT,
          'condition' => [
            'showtiservicecarouselfirststkaveh' => 'yes',
          ],
          'default' => 'context',
        ]
      );

      $this->add_control(
        'tagti1servicecarouselfirststkaveh',
        [
          'label' => esc_html__( 'Title Tag', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::SELECT,
          'default' => 'H3',
          'condition' => [
            'showtiservicecarouselfirststkaveh' => 'yes',
          ],
          '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 = new \Elementor\Repeater();
      $repeater->add_control(
        'imgcategorycarouselkaveh',
        [
          'label' => esc_html__( 'Background Image', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::MEDIA,
        ]
      );
      $repeater->add_control(
      'title1servicecarouselfirststkaveh',
      [
        'label' => esc_html__( 'Title', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => 'Back Pain',

      ]
    );
    $repeater->add_control(
      'tagheading1servicecarouselfirststkaveh',
      [
        '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(
      'p1servicecarouselfirststkaveh',
      [
        'label' => esc_html__( 'Description', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => 'Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry standard dummy text.',

      ]
    );

    $repeater->add_control(
      'shownumberCarouslService',
      [
        'label'        => esc_html__('Show Rating', 'kavehTheme'),
        'type'         => \Elementor\Controls_Manager::SWITCHER,
        'label_on'     => esc_html__('Yes', 'kavehTheme'),
        'label_off'    => esc_html__('No', 'kavehTheme'),
        'return_value' => 'yes',
        'default'      => 'yes',
      ]
    );    

    $repeater->add_control(
      'NumberCarouslService',
      [
        'label' => esc_html__('Rating Number', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::NUMBER,
        'condition' => [
          'shownumberCarouslService' => 'yes',
        ],
        'min' => 0,
        'max' => 5,
        'step' => 0.1,
        'default' => 4.5,
      ]
    );

    $repeater->add_control(
      'servicebgcolortbolcategorycarouseltwentyfivethstkaveh',
      [
        'label' => esc_html__( 'Background Color One', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::COLOR,
      ]
    );
    
    $repeater->add_control(
      'linkservicecarouselfirststkaveh',
      [
        'label' => esc_html__( 'Link', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => '#',
      ]
    );

    $this->add_control(
      'listservicecarouselfirststkaveh',
      [
        'label' => esc_html__( 'Categories', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::REPEATER,
        'fields' => $repeater->get_controls(),
      ]
    
    );
    $this->end_controls_section();



//////////////////////////// style //////////////////////////////    

$this->start_controls_section(
  'style_title_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Title and Subtitle Styling', 'kavehTheme'),
      'tab' => \Elementor\Controls_Manager::TAB_STYLE,
  ]
);

$this->add_control(
  'title_color',
  [
      'label' => esc_html__('Icon Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .title' => 'color: {{VALUE}}',
      ],
  ]
);
$this->add_group_control(
  \Elementor\Group_Control_Typography::get_type(),
  [
      'name' => 'Title_text_typography_categorycarouseltwentysixthstkaveh',
      'label' => esc_html__('Title Typography', 'kavehTheme'),
      'selector' => '{{WRAPPER}} .title',
  ]
);

$this->add_control(
  'sub_title_color',
  [
      'label' => esc_html__('Subtitle Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .sub-title' => 'color: {{VALUE}}',
      ],
  ]
);

$this->add_group_control(
  \Elementor\Group_Control_Typography::get_type(),
  [
      'name' => 'sub_Title_text_typography_categorycarouseltwentysixthstkaveh',
      'label' => esc_html__('Subtitle Typography', 'kavehTheme'),
      'selector' => '{{WRAPPER}} .sub-title',
  ]
);
$this->end_controls_section();

$this->start_controls_section(
  'style_box_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Box Styling', 'kavehTheme'),
      'tab' => \Elementor\Controls_Manager::TAB_STYLE,
  ]
);

$this->add_control(
  'circle_colornum_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Change Number Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .contex-users-item .rate' => 'color: {{VALUE}}',
      ],
  ]
);

$this->add_control(
  'circlebackgroundinline_colornum_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Change Circle Inside Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .contex-users-item .rate' => 'background-color: {{VALUE}}',
      ],
  ]
);

$this->add_control(
  'svgcirclebackgroundinline_colornum_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Change Circle Border Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .contex-users-item .rate svg circle' => 'stroke: {{VALUE}} !important',
      ],
  ]
);



$this->add_control(
  'Tile_box_color',
  [
      'label' => esc_html__('Icon Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .contex-users-item .content .title > *' => 'color: {{VALUE}}',
      ],
  ]
);

$this->add_group_control(
  \Elementor\Group_Control_Typography::get_type(),
  [
      'name' => 'titlebox_font_size',
      'label' => esc_html__('Title Typography', 'kavehTheme'),
      'selector' => '{{WRAPPER}} .contex-users-item .content .title > *',
  ]
);
$this->add_control(
  'description_color',
  [
      'label' => esc_html__('Description Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .description' => 'color: {{VALUE}}',
      ],
  ]
);
$this->add_group_control(
  \Elementor\Group_Control_Typography::get_type(),
  [
      'name' => 'description_font_size',
      'label' => esc_html__('Description Typography', 'kavehTheme'),
      'selector' => '{{WRAPPER}} .description',
  ]
);
$this->add_control(
  'backboxbackgroundcolor',
  [
      'label' => esc_html__('Change Description Box Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .contex-users-item .content::before' => 'background-color: {{VALUE}}',
      ],
  ]
    );

    $this->add_control(
      'borderradiousboxservicecarouselfirststkaveh',
      [
        'label' => esc_html__( 'Border Radius', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => [ 'px'],
        'selectors' => [ 
          '{{WRAPPER}} .contex-users-item .content::before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );
    $this->add_control(
			'marginboxservicecarouselfirststkaveh',
			[
				'label' => esc_html__( 'Box Margin', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px'],
				'selectors' => [
					'{{WRAPPER}} .contex-users-item .content::before' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
    $this->add_control(
			'paddingboxservicecarouselfirststkaveh',
			[
				'label' => esc_html__( 'Box Padding', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px'],
				'selectors' => [
					'{{WRAPPER}} .contex-users-item .content::before' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
    $this->add_control(
      'heightservicecarouselfirststkaveh',
      [
        'label' => esc_html__( 'Box Height', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => [ 'px' ],
        'range' => [
          'px' => [
            'min' => 0,
            'max' => 2000,
            'step' => 5,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}}  .contex-users-item .content::before' => 'height: {{SIZE}}{{UNIT}};',
        ],
      ]
    );
$this->end_controls_section();

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

// Controller for icon size
$this->add_control(
  'iconsizenchbcategorycarouseltwentythreethstkaveh',
  [
      'label' => esc_html__('Icon Size', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::SLIDER,
      'size_units' => ['px'],
      'range' => [
          'px' => [
              'min' => 0,
              'max' => 200,
              'step' => 1,
          ],
      ],
      'selectors' => [
          '{{WRAPPER}} .heading-bed .swiper-button-prev i' => 'font-size: {{SIZE}}{{UNIT}};',
          '{{WRAPPER}} .heading-bed .swiper-button-next i' => 'font-size: {{SIZE}}{{UNIT}};',
      ],
  ]
);


$this->add_control(
  'icon_color',
  [
      'label' => esc_html__('Icon Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .heading-bed .swiper-button-prev i' => 'color: {{VALUE}};',
          '{{WRAPPER}} .heading-bed .swiper-button-next i' => 'color: {{VALUE}};',
      ],
  ]
);


$this->add_control(
  'button_background',
  [
      'label' => esc_html__('Button Background', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .heading-bed .swiper-button-prev' => 'background-color: {{VALUE}};',
          '{{WRAPPER}} .heading-bed .swiper-button-next' => 'background-color: {{VALUE}};',
      ],
  ]
);


$this->add_control(
  'button_border_color',
  [
      'label' => esc_html__('Button Border Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .heading-bed .swiper-button-prev' => 'border-color: {{VALUE}};',
          '{{WRAPPER}} .heading-bed .swiper-button-next' => 'border-color: {{VALUE}};',
      ],
  ]
);


$this->add_control(
  'button_border_width',
  [
      'label' => esc_html__('Button Border Thickness', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::SLIDER,
      'size_units' => ['px'],
      'range' => [
          'px' => [
              'min' => 0,
              'max' => 10,
              'step' => 1,
          ],
      ],
      'selectors' => [
          '{{WRAPPER}} .heading-bed .swiper-button-prev' => 'border-width: {{SIZE}}{{UNIT}};',
          '{{WRAPPER}} .heading-bed .swiper-button-next' => 'border-width: {{SIZE}}{{UNIT}};',
      ],
  ]
);


$this->add_control(
  'button_border_radius',
  [
      'label' => esc_html__('Button Border Radius', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::SLIDER,
      'size_units' => ['px', '%'],
      'range' => [
          'px' => [
              'min' => 0,
              'max' => 100,
              'step' => 1,
          ],
          '%' => [
              'min' => 0,
              'max' => 100,
          ],
      ],
      'selectors' => [
          '{{WRAPPER}} .heading-bed .swiper-button-prev' => 'border-radius: {{SIZE}}{{UNIT}};',
          '{{WRAPPER}} .heading-bed .swiper-button-next' => 'border-radius: {{SIZE}}{{UNIT}};',
      ],
  ]
);

$this->end_controls_section();
        }
 

        protected function render() {
          $settings = $this->get_settings_for_display();
          $clsid = $this->get_id();
          ?>
          <div class="contex-users container">
              <!-- Start Heading -->
              <?php if ($settings['showtiservicecarouselfirststkaveh'] === 'yes') : ?>
                  <div class="heading-bed d-flex align-items-center justify-content-between gap-2 mb-4">
                      <div class="text d-flex align-items-center">
                          <svg width="41" height="33" viewBox="0 0 41 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <circle cx="25.5" cy="15.5" r="13.5" fill="white" stroke="url(#paint0_linear_0_5011)" stroke-width="4"></circle>
                              <circle opacity="0.1" cx="22.5" cy="17.5" r="15.5" fill="white"></circle>
                              <circle cx="15.5" cy="16.5" r="14.3" stroke="url(#paint1_linear_0_5011)" stroke-width="2.4"></circle>
                              <defs>
                                  <linearGradient id="paint0_linear_0_5011" x1="25.5" y1="0" x2="51.5" y2="31" gradientUnits="userSpaceOnUse">
                                      <stop stop-color="#0057FF"></stop>
                                      <stop offset="1" stop-color="#0057FF" stop-opacity="0"></stop>
                                  </linearGradient>
                                  <linearGradient id="paint1_linear_0_5011" x1="10" y1="3" x2="24.5" y2="26" gradientUnits="userSpaceOnUse">
                                      <stop stop-color="#FF8A01"></stop>
                                      <stop offset="1" stop-color="#FF8B01" stop-opacity="0"></stop>
                                  </linearGradient>
                              </defs>
                          </svg>
                          <div>
                              <<?php echo esc_attr($settings['tagti1servicecarouselfirststkaveh']); ?> class="title">
                                  <?php echo esc_html($settings['wigti2servicecarouselfirststkaveh']); ?>
                              </<?php echo esc_attr($settings['tagti1servicecarouselfirststkaveh']); ?>>
                                  <div class="sub-title"><?php echo esc_html($settings['secendtitle']); ?></div>
                          </div>
                      </div>
                  </div>
              <?php endif; ?>
              <!-- End Heading -->
  
              <!-- Start Carousel -->
              <div class="swiper swiper-contex-users swiper-visible swiper-visibled-mobile swiper-backface-hidden swiper-initialized swiper-horizontal swiper-pointer-events swiper-autoheight swiper-rtl swiper-watch-progress">
                  <div class="swiper-wrapper" id="swiper-wrapper-<?php echo esc_attr($clsid); ?>" aria-live="polite" style="height: 454px; transform: translate3d(0px, 0px, 0px);">
                    <?php $i=1; ?>
                      <?php foreach ($settings['listservicecarouselfirststkaveh'] as $item) : ?>
                          <div class="swiper-slide swiper-slide-visible swiper-slide-active" role="group" style="width: 306px; margin-left: 24px;">
                            <div class="contex-users-item ahsh<?php echo $i; ?> position-relative overflow-hidden d-flex flex-column h-100 elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
                              <a href="<?php echo esc_url($item['linkservicecarouselfirststkaveh']); ?>" class="stretched-link" aria-label="name link"></a>
                                  <?php if (isset($item['imgcategorycarouselkaveh']['url'])) : ?>
                                      <div class="bg position-absolute top-0 end-0 w-100 h-100" style="background-image: url('<?php echo esc_url($item['imgcategorycarouselkaveh']['url']); ?>');"></div>
                                  <?php endif; ?>

                                  <?php
                                  $rating = floatval($item['NumberCarouslService']);
                                  $max_rating = 5;
                                  $radius = 47.27;
                                  $circumference = 2 * M_PI * $radius;
                                  $progress = min($rating / $max_rating, 1) * $circumference;
                                  $offset = $circumference - $progress;
                                  ?>
                                  <?php if ($item['shownumberCarouslService'] === 'yes' && $rating): ?>
                                    <div class="rate d-flex align-items-center justify-content-center position-absolute rounded-circle">
                                        <?php echo number_format($rating, 1); ?>
                                        <svg class="position-absolute top-0 end-0" viewBox="0 0 100 100" width="52" height="52">
                                            <circle cx="50" cy="50" r="47.27" stroke="white" stroke-width="5" fill="none" opacity="0.39"></circle>
                                            <circle cx="50" cy="50" r="47.27"
                                              stroke="white"
                                              stroke-width="5"
                                              fill="none"
                                              stroke-dasharray="<?php echo round($circumference, 2); ?>"
                                              stroke-dashoffset="<?php echo round($offset, 2); ?>"
                                              style="transform: rotate(0deg); transform-origin: 50% 50%;">
                                            </circle>
                                        </svg>
                                    </div>
                                  <?php endif; ?>

                                  <div class="content position-relative d-flex flex-column h-100">
                                      <div class="title d-flex align-items-start gap-2 mb-2">
                                          <svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" fill="none" viewBox="0 0 23 22" class="mt-1">
                                              <path fill="#fff" fill-opacity=".4" stroke="#fff" stroke-width="2.5" d="m14.748 3.125 6.495 11.25c1.443 2.5-.361 5.625-3.248 5.625H5.005c-2.887 0-4.691-3.125-3.248-5.625l6.495-11.25c1.444-2.5 5.052-2.5 6.496 0Z"></path>
                                          </svg>
                                          <<?php echo esc_attr($item['tagheading1servicecarouselfirststkaveh']); ?> class="mb-0">
                                              <?php echo esc_html($item['title1servicecarouselfirststkaveh']); ?>
                                          </<?php echo esc_attr($item['tagheading1servicecarouselfirststkaveh']); ?>>
                                      </div>
                                      <p class="description"><?php echo esc_html($item['p1servicecarouselfirststkaveh']); ?></p>
                                  </div>
                              </div>
                          </div>
                          <style>
                                    .contex-users-item.ahsh<?php echo $i; ?>::before {
          background-image: linear-gradient(17.97deg, <?php echo  esc_html($item['servicebgcolortbolcategorycarouseltwentyfivethstkaveh']); ?> 14.34%, rgba(0, 84, 247, 0) 72.5%), linear-gradient(15.4deg, <?php echo  esc_html($item['servicebgcolortbolcategorycarouseltwentyfivethstkaveh']); ?>14, rgba(0, 0, 0, 0) 67.89%);
          }

                          </style>
                          <?php $i++; ?>
                      <?php endforeach; ?>
                  </div>
                  <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
              </div>
              <!-- End Carousel -->
          </div>
          <style>
          .categories-products-item .image img {
              object-fit: contain !important;
          }
          .categories-products-item .btn::before {
              background-size: contain !important;
          }
  
          </style>
          <?php
      }
  }
      
