<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

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

class kavehwoocommerceimages extends \Elementor\Widget_Base
{
  public function get_name()
  {
    return 'kavehwoocommerceimages';
  }

  public function get_title()
  {
    return esc_html__('Single Product Image Gallery Element', 'kavehTheme');
  }

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

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

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

    $this->add_control(
      'style_kavehwoocommerceimages',
      [
        'label' => esc_html__('Layout', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'one',
        'options' => [
          'one' => esc_html__('First Layout', 'kavehTheme'),
          'two' => esc_html__('Second Layout', 'kavehTheme'),
          'three' => esc_html__('Third Layout', 'kavehTheme'),
          'four' => esc_html__('Fourth Layout', 'kavehTheme'),
          'five' => esc_html__('Fifth Layout', 'kavehTheme'),
        ],
      ]
    );

    $this->end_controls_section();


    //////////////////////////////////////////// style one ///////////////////////////////////////
    $this->start_controls_section(
      'style1_kavehwoocommerceimages',
      [
        'label' => esc_html__('Interactive Icons Box', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'one',
        ],
      ]
    );

    $this->add_control(
      'bgcolorbox_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-icons' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'iconcolorbox_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Sharing Icons Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-icons li' => 'color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddingbox_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-icons' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbox_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-icons' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadow_one_kavehwoocommerceimages',
        'label' => esc_html__('Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .detail-product-icons',
      ]
    );
    $this->end_controls_section();
    $this->start_controls_section(
      'style2_kavehwoocommerceimages',
      [
        'label' => esc_html__('Main Image Box Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'one',
        ],
      ]
    );

    $this->add_control(
      'bgcolorboximgorg_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Main Image Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-info .gallery-image-origin' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddingboximgorg_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-info .gallery-image-origin' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusboximgorg_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-info .gallery-image-origin' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->end_controls_section();
    $this->start_controls_section(
      'style3_kavehwoocommerceimages',
      [
        'label' => esc_html__('Images Box Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'one',
        ],
      ]
    );

    $this->add_control(
      'bgcolorboximgs_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Images Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-info .gallery-image-item' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddingboximgs_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Images Box Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-info .gallery-image-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusboximgs_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Images Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-info .gallery-image-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusimgs_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Images Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-info .gallery-image-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->end_controls_section();
    $this->start_controls_section(
      'style4_kavehwoocommerceimages',
      [
        'label' => esc_html__('Main Box Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'one',
        ],
      ]
    );

    $this->add_control(
      'bgcolorboxorg_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Main Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-info .gallery-image' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddingboxorg_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Images Box Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-info .gallery-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusboxorg_one_kavehwoocommerceimages',
      [
        'label' => esc_html__('Images Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-info .gallery-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );
    $this->end_controls_section();


    //////////////////////////////////////////// style two ///////////////////////////////////////

    $this->start_controls_section(
      'style1_layout2_kavehwoocommerceimages',
      [
        'label' => esc_html__('Interactive Icons Box', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'two',
        ],
      ]
    );

    $this->add_control(
      'bgcolorbox_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .icons' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'iconcolorbox_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Sharing Icons Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .icons li' => 'color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddingbox_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .icons' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbox_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .icons' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadow_two_kavehwoocommerceimages',
        'label' => esc_html__('Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .detail-product-two .gallery .icons',
      ]
    );



    $this->add_control(
      'hr',
      [
        'type' => \Elementor\Controls_Manager::DIVIDER,
      ]
    );


    $this->add_control(
      'iconcolorbox2_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Rating Count Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .rate' => 'color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'bgcolorbox2_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Rating Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .rate' => 'background-color: {{VALUE}} !important',
        ],
      ]
    );

    $this->add_control(
      'boxsizewidth_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Rating Box Width', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 500,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .rate' => 'width: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'boxsizeheight_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Rating Box Height', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 500,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .rate' => 'height: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbox2_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Rating Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .rate' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadow2_two_kavehwoocommerceimages',
        'label' => esc_html__('Rating Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .detail-product-two .gallery .rate',
      ]
    );



    $this->add_control(
      'hr2',
      [
        'type' => \Elementor\Controls_Manager::DIVIDER,
      ]
    );



    $this->add_control(
      'iconcolorbox3-1_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Discount Percentage Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .offer' => 'color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'iconcolorbox3-2_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Discount Title Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .offer span' => 'color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'bgcolorbox3_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Discount Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .offer' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddingbox3_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Discount Box Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .offer' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbox3_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Discount Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .offer' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadow3_two_kavehwoocommerceimages',
        'label' => esc_html__('Discount Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .detail-product-two .gallery .offer',
      ]
    );

    $this->end_controls_section();
    $this->start_controls_section(
      'style2_layout2_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'two',
        ],
      ]
    );

    $this->add_control(
      'boxsizewidth2_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Width', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => '%',
        'range' => [
          '%' => [
            'min' => 1,
            'max' => 100,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .origin-image img' => 'width: {{SIZE}}% !important;',
        ],
      ]
    );

    $this->add_control(
      'boxsizeheight2_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Height', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 400,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .origin-image img' => 'height: {{SIZE}}{{UNIT}} !important;',
        ],
      ]
    );

    $this->add_control(
      'bgcolorboximgorg_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .origin-image img' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'coloriconbig_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Zoom Icon Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .origin-image .zoom' => 'color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddingbgboximgorg_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .origin-image img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbgboximgorg_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-two .gallery .origin-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );


    $this->end_controls_section();
    $this->start_controls_section(
      'style3_layout2_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'two',
        ],
      ]
    );

    $this->add_control(
      'bgcolorgalleryimg_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .swiper-gallery-product-two' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'bordercolorgalleryimg_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Border Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .swiper-gallery-product-two' => 'border: 1px solid {{VALUE}}',
          '{{WRAPPER}} .swiper-gallery-product-two .swiper-slide:not(:last-child) .gallery-product-two-item' => 'border-left: 1px solid {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'bgcoloricongalleryimg_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Gallery Icon Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .swiper-gallery-product-two .swiper-button-next, .swiper-gallery-product-two .swiper-button-prev, .swiper-gallery-product-three .swiper-button-next, .swiper-gallery-product-three .swiper-button-prev' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'coloricongalleryimg_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Icon Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after' => 'color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'boxicongallerysizewidth_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Gallery Icon Box Width', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 100,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .swiper-gallery-product-two .swiper-button-next, .swiper-gallery-product-two .swiper-button-prev, .swiper-gallery-product-three .swiper-button-next, .swiper-gallery-product-three .swiper-button-prev' => 'width: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'boxicongallerysizeheight_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Gallery Icon Box Height', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 100,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .swiper-gallery-product-two .swiper-button-next, .swiper-gallery-product-two .swiper-button-prev, .swiper-gallery-product-three .swiper-button-next, .swiper-gallery-product-three .swiper-button-prev' => 'height: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'boxgallerysizeheight_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Height', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 400,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .swiper-gallery-product-two' => 'height: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusgalleryimg_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .swiper-gallery-product-two' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusicongalleryimg_two_kavehwoocommerceimages',
      [
        'label' => esc_html__('Gallery Icon Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .swiper-gallery-product-two .swiper-button-next, .swiper-gallery-product-two .swiper-button-prev, .swiper-gallery-product-three .swiper-button-next, .swiper-gallery-product-three .swiper-button-prev' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadowcoloricongalleryimg_two_kavehwoocommerceimages',
        'label' => esc_html__('Gallery Icon Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .swiper-gallery-product-two .swiper-button-next, .swiper-gallery-product-two .swiper-button-prev, .swiper-gallery-product-three .swiper-button-next, .swiper-gallery-product-three .swiper-button-prev',
      ]
    );

    $this->end_controls_section();



    //////////////////////////////////////////// style three ///////////////////////////////////////             

    $this->start_controls_section(
      'style1_layout3_kavehwoocommerceimages',
      [
        'label' => esc_html__('Interactive Icons Box', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'three',
        ],
      ]
    );

    $this->add_control(
      'bgcolorboxsmall3-2_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Small Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .icons-detail-product>button' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'iconcolorboxsmall3-2_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Small Box Icon Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .icons-detail-product>button' => 'color: {{VALUE}} !important',
        ],
      ]
    );

    $this->add_control(
      'boxsmallsizewidth_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Small Icon Box Width', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 100,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .icons-detail-product>button' => 'width: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'boxsmallsizeheight_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Small Icon Box Height', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 200,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .icons-detail-product>button' => 'height: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusboxsmall_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .icons-detail-product>button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadowboxsmall_three_kavehwoocommerceimages',
        'label' => esc_html__('Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .icons-detail-product>button',
      ]
    );

    $this->add_control(
      'hr3',
      [
        'type' => \Elementor\Controls_Manager::DIVIDER,
      ]
    );

    $this->add_control(
      'bgcolorbox3-1_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Icons Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .icons-detail-product ul' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'iconcolorbox3-2_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Sharing Icons Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .icons-detail-product ul li' => 'color: {{VALUE}} !important',
        ],
      ]
    );

    $this->add_control(
      'boxsizewidth_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Width', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 100,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .icons-detail-product ul' => 'width: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'boxsizeheight_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Height', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 200,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .icons-detail-product ul' => 'height: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbox3-1_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .icons-detail-product ul' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadow3-1_three_kavehwoocommerceimages',
        'label' => esc_html__('Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .icons-detail-product ul',
      ]
    );

    $this->end_controls_section();
    $this->start_controls_section(
      'style2_layout3_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'three',
        ],
      ]
    );

    $this->add_control(
      'boxsizewidth2_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Width', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => '%',
        'range' => [
          '%' => [
            'min' => 1,
            'max' => 100,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-origin .swiper' => 'width: {{SIZE}}% !important;',
        ],
      ]
    );

    $this->add_control(
      'boxsizeheight2_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Height', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 600,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-origin .swiper' => 'height: {{SIZE}}{{UNIT}} !important;',
        ],
      ]
    );

    $this->add_control(
      'bgcolorboximgorg_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-origin .swiper' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddingbgboximgorg_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-origin .swiper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbgboximgorg_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-origin .swiper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );



    $this->end_controls_section();
    $this->start_controls_section(
      'style3_layout3_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'three',
        ],
      ]
    );

    $this->add_control(
      'bgcolorgalleryimg_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-items' => 'background: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddinggalleryimg_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-items' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusgalleryimg_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-items' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadowcoloricongalleryimg_three_kavehwoocommerceimages',
        'label' => esc_html__('Gallery Icon Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .detail-product-four-gallery-items',
      ]
    );

    $this->add_control(
      'hr4',
      [
        'type' => \Elementor\Controls_Manager::DIVIDER,
      ]
    );

    $this->add_control(
      'bgcolorgalleryimgbox_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Images Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-items .item' => 'background-color: {{VALUE}} !important',
        ],
      ]
    );

    $this->add_control(
      'paddinggalleryimgbox_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Images Box Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-items .item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusgalleryimgbox_three_kavehwoocommerceimages',
      [
        'label' => esc_html__('Images Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-four-gallery-items .item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
          '{{WRAPPER}} .detail-product-four-gallery-items .item.has-items::before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadowcoloricongalleryimgbox_three_kavehwoocommerceimages',
        'label' => esc_html__('Images Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .detail-product-four-gallery-items .item',
      ]
    );

    $this->end_controls_section();





    //////////////////////////////////////////// style four ///////////////////////////////////////      


    $this->start_controls_section(
      'style1_layout4_kavehwoocommerceimages',
      [
        'label' => esc_html__('Interactive Icons Box', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'four',
        ],
      ]
    );

    $this->add_control(
      'iconcolorbox_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Sharing Icons Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__origin ul li' => 'color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'iconfontbox_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Sharing Icons Size', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
          'px' => [
            'min' => 0,
            'max' => 50,
            'step' => 1,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__origin ul li' => 'font-size: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->end_controls_section();
    $this->start_controls_section(
      'style2_layout4_kavehwoocommerceimages',
      [
        'label' => esc_html__('Special Sale Box', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'four',
        ],
      ]
    );

    $this->add_control(
      'colortitlevipsell_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Special Sale Title Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__special__selling__title' => 'color: {{VALUE}}',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Typography::get_type(),
      [
        'name' => 'typotitlevipsell_four_kavehwoocommerceimages',
        'label' => esc_html__('Title Typography', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .detail-product-five__special__selling__title',
      ]
    );

    $this->add_control(
      'bgcolorboxvipsell_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Special Sale Box Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__special__selling' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddingbox_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Special Sale Box Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__special__selling' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbox_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Special Sale Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__special__selling' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadow_four_kavehwoocommerceimages',
        'label' => esc_html__('Special Sale Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .detail-product-five__special__selling',
      ]
    );

    $this->end_controls_section();
    $this->start_controls_section(
      'style3_layout4_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'four',
        ],
      ]
    );

    $this->add_control(
      'boxsizewidth2_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Width', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => '%',
        'range' => [
          '%' => [
            'min' => 1,
            'max' => 100,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__origin img' => 'width: {{SIZE}}% !important;',
        ],
      ]
    );

    $this->add_control(
      'boxsizeheight2_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Height', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 100,
            'max' => 500,
            'step' => 20,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__origin img' => 'height: {{SIZE}}{{UNIT}} !important;',
        ],
      ]
    );

    $this->add_control(
      'bgcolorboximgorg_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__origin img' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddingbgboximgorg_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__origin img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbgboximgorg_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__origin img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );


    $this->end_controls_section();
    $this->start_controls_section(
      'style4_layout4_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'four',
        ],
      ]
    );

    $this->add_control(
      'bgcolorgalleryimg_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__images li' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'bordercolorgalleryimg_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Border Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__images li' => 'border: 1px solid {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddinggalleryimg_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__images li' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusgalleryimg_four_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-five__gallery__images li' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadowcoloricongalleryimg_four_kavehwoocommerceimages',
        'label' => esc_html__('Image Gallery Icon Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .detail-product-five__gallery__images li',
      ]
    );
    $this->end_controls_section();



    //////////////////////////////////////////// style five ///////////////////////////////////////            


    $this->start_controls_section(
      'style1_layout5_kavehwoocommerceimages',
      [
        'label' => esc_html__('Interactive Icons Box', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'five',
        ],
      ]
    );

    $this->add_control(
      'iconcolorbox_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Box Sharing Icons Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__icons li' => 'color: {{VALUE}} !important',
        ],
      ]
    );

    $this->add_control(
      'iconfontbox_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Sharing Icons Size', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
          'px' => [
            'min' => 0,
            'max' => 50,
            'step' => 1,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__icons li' => 'font-size: {{SIZE}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'more_options',
      [
        'label' => esc_html__('Zoom Button', 'textdomain'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
      ]
    );

    $this->add_control(
      'coloriconzoom_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Zoom Icon Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__icons li.zoom' => 'color: {{VALUE}} !important',
        ],
      ]
    );

    $this->add_control(
      'bgcolorboxvipsell_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Zoom Icon Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__icons li.zoom' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'boxsizewidth2_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Zoom Icon Width', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => '%',
        'range' => [
          '%' => [
            'min' => 1,
            'max' => 100,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__icons li.zoom' => 'width: {{SIZE}}% !important;',
        ],
      ]
    );

    $this->add_control(
      'boxsizeheight2_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Zoom Icon Height', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'unit' => 'px',
        'range' => [
          'px' => [
            'min' => 1,
            'max' => 100,
          ],
        ],
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__icons li.zoom' => 'height: {{SIZE}}{{UNIT}} !important;',
        ],
      ]
    );

    $this->add_control(
      'borderradiusboxiconzoom_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Zoom Icon Box Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__icons li.zoom' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
        ],
      ]
    );

    $this->end_controls_section();
    $this->start_controls_section(
      'style2_layout5_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'five',
        ],
      ]
    );

    $this->add_control(
      'bgcolorboximgorg_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__gallery' => 'background-color: {{VALUE}} !important',
        ],
      ]
    );

    $this->add_control(
      'bgcolorbackboximgorg_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
      ]
    );

    $this->add_control(
      'bordercolorboximgorg_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Background Border Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__gallery' => 'border:1px solid {{VALUE}} !important',
        ],
      ]
    );

    $this->add_control(
      'paddingbgboximgorg_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__gallery' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbgboximgorg_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__gallery' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->add_control(
      'borderradiusbgboximgorg2_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Featured Image Background Border Radius', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info::before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

    $this->end_controls_section();
    $this->start_controls_section(
      'style3_layout5_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Style', 'kavehTheme'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
          'style_kavehwoocommerceimages' => 'five',
        ],
      ]
    );

    $this->add_control(
      'bgcolorgalleryimg_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Image Gallery Background Color', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__gallery .small__images .swiper-slide img' => 'background-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'paddinggalleryimg_five_kavehwoocommerceimages',
      [
        'label' => esc_html__('Gallery Box Padding', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'selectors' => [
          '{{WRAPPER}} .detail-product-six__info__gallery .small__images .swiper-slide img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
      ]
    );

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

    $this->add_group_control(
      \Elementor\Group_Control_Box_Shadow::get_type(),
      [
        'name' => 'boxshadowcoloricongalleryimg_five_kavehwoocommerceimages',
        'label' => esc_html__('Gallery Box Shadow', 'kavehTheme'),
        'selector' => '{{WRAPPER}} .detail-product-six__info__gallery .small__images .swiper-slide img',
      ]
    );
    $this->end_controls_section();
  }





  protected function render()
  {
    $settings = $this->get_settings_for_display();
    $clsid = $this->get_id();
    $options = kaveh_get_options();
    if (!class_exists('WooCommerce')) {
      return;
    }
    if (\Elementor\Plugin::$instance->editor->is_edit_mode()) {
    } else {



      // In site display mode (when not in editor)
      global $product;
      $product_id = get_queried_object_id();
      if (!is_a($product, 'WC_Product')) {
        $product = wc_get_product($product_id);
      }
      if (!$product) {
        return; // Exit if product not found
      }

      $product_gallery = get_post_meta($product_id, '_product_image_gallery', true);
      $post_thumbnail_id = get_post_thumbnail_id($product_id);
      $columns = apply_filters('woocommerce_product_thumbnails_columns', 4);

      $wrapper_classes = apply_filters(
        'woocommerce_single_product_image_gallery_classes',
        array(
          'woocommerce-product-gallery',
          'woocommerce-product-gallery--' . ($post_thumbnail_id ? 'with-images' : 'without-images'),
          'woocommerce-product-gallery--columns-' . absint($columns),
          'images',
        )
      );
      if ($product_id) {
        $product_gallery = explode(',', $product_gallery); // Separating IDs
        if ($settings['style_kavehwoocommerceimages'] === 'one') { ?>
          <div class="detail-product-info">
            <div class="gallery-image position-relative">
              <!-- Start Gallery Image Origin -->
              <div class="gallery-image-origin d-flex align-items-center justify-content-center">
                <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($product_id), 'single-post-thumbnail'); ?>
                <div class="<?php echo esc_attr(implode(' ', array_map('sanitize_html_class', $wrapper_classes))); ?>"
                  data-columns="<?php echo esc_attr($columns); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
                  <div class="woocommerce-product-gallery__wrapper">
                    <?php
                    if ($post_thumbnail_id) {
                      $html = wc_get_gallery_image_html($post_thumbnail_id, true);
                    } else {
                      $html = '<div class="woocommerce-product-gallery__image--placeholder">';
                      $html .= sprintf('<img src="%s" alt="%s" class="wp-post-image" />', esc_url(wc_placeholder_img_src('woocommerce_single')), esc_html__('Awaiting product image', 'kavehTheme'));
                      $html .= '</div>';
                    }

                    echo apply_filters('woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id);
                    ?>
                  </div>
                </div>
              </div>
              <!-- End Gallery Image Origin -->


              <!-- Start Gallery Image Items -->
              <div class="swiper gallery-image-items overflow-hidden"
                data-swiper='{"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"breakpoints":{"0":{"slidesPerView":3,"spaceBetween":10},"768":{"slidesPerView":3,"spaceBetween":20}}}'>
                <div class="swiper-wrapper">

                  <?php
                  if ($product_gallery) {
                    foreach ($product_gallery as $attachment_id) {
                  ?>

                      <div class="swiper-slide">
                        <div class="gallery-image-item" data-bs-toggle="modal" data-bs-target="#modal-gallery">
                          <img src="<?php echo wp_get_attachment_url($attachment_id); ?>" alt="product" />
                        </div>
                      </div>
                  <?php
                    }
                  }

                  ?>
                  <div class="swiper-slide">
                    <div class="gallery-image-item" data-bs-toggle="modal" data-bs-target="#modal-gallery">
                      <?php
                      $thumbnail_id = $product->get_image_id(); // Get the attachment ID of the product thumbnail
                      $thumbnail_url = wp_get_attachment_url($thumbnail_id);
                      ?>
                      <img src="<?php echo $thumbnail_url; ?>" alt="product" />
                    </div>
                  </div>

                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
              </div>
              <!-- End Gallery Image Items -->

              <?php if ($product->is_on_sale()): ?>
                <div class="detail-product-offer">
                  <?php
                  $offer_percentage = kavehWoo::showofferpercentage($product);
                  echo esc_html($offer_percentage);
                  ?>
                </div>
              <?php endif; ?>

              <!-- Start Icons -->
              <ul class="detail-product-icons">
                <?php if ($options['kaveh_compare_system'] === '1'): ?>
                  <li data-bs-toggle="tooltip" title="<?php esc_attr_e('Compare', 'kavehTheme'); ?>" data-bs-placement="left">
                    <?php echo do_shortcode('[compare_button background_color="transparent" id=' . get_the_ID() . ' style="icon_only" class=""]'); ?>
                  </li>
                <?php endif; ?>

                <li data-bs-toggle="tooltip" title="Share" data-bs-placement="left">
                  <i class="isax isax-share5" data-bs-toggle="modal" data-bs-target="#exampleModal"></i>
                </li>
                <?php if ($options['kaveh_wishlist_system'] === '1'): ?>

                  <li data-bs-toggle="tooltip" title="Add to Favorites" data-bs-placement="left">
                    <?php echo do_shortcode('[wlm_button]'); ?>
                  </li>
                <?php endif; ?>

              </ul>
              <!-- End Icons -->

            </div>
          </div>
        <?php
        } elseif ($settings['style_kavehwoocommerceimages'] === 'two') { ?>
          <div class="detail-product-two">
            <div class="gallery position-relative">
              <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($product_id), 'single-post-thumbnail'); ?>
              <div
                class="<?php echo esc_attr(implode(' ', array_map('sanitize_html_class', $wrapper_classes))); ?> origin-image position-relative"
                data-columns="<?php echo esc_attr($columns); ?>">
                <img src="<?php echo $image[0]; ?>" alt="product" id="origin-image" data-modal-gallery="show" />
                <button type="button" class="zoom" data-modal-gallery="show">
                  <i class="icon-arrow-zoom"></i>
                </button>
              </div>

              <div class="gallery-product-two position-relative mx-auto w-100">
                <div class="swiper swiper-gallery-product-two overflow-hidden"
                  data-swiper='{"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"breakpoints":{"0":{"slidesPerView":3,"spaceBetween":10},"768":{"slidesPerView":3,"spaceBetween":20}}}'>
                  <div class="swiper-wrapper">

                    <?php
                    // Display gallery images
                    foreach ($product_gallery as $attachment_id) {
                      $image_url = wp_get_attachment_url($attachment_id);
                    ?>
                      <!-- Start Slide -->
                      <div class="swiper-slide">
                        <div class="gallery-product-two-item d-flex align-items-center h-100">
                          <img src="<?php echo esc_url($image_url); ?>" alt="product" class="mx-auto w-100"
                            data-gallery="origin-image" />
                        </div>
                      </div>
                      <!-- End Slide -->
                    <?php
                    }
                    ?>
                    <div class="swiper-slide">
                      <div class="gallery-product-two-item d-flex align-items-center h-100">
                        <?php
                        $thumbnail_id = $product->get_image_id(); // Get the attachment ID of the product thumbnail
                        $thumbnail_url = wp_get_attachment_url($thumbnail_id);
                        ?>
                        <img src="<?php echo $thumbnail_url; ?>" alt="product" class="mx-auto w-100"
                          data-gallery="origin-image" />
                      </div>
                    </div>

                  </div>
                  <div class="swiper-button-next"></div>
                  <div class="swiper-button-prev"></div>
                </div>
              </div>
              <!-- End Gallery Image Items -->
              <!-- Start Icons -->
              <ul class="icons">
                <?php if ($options['kaveh_compare_system'] === '1'): ?>

                  <li data-bs-toggle="tooltip" title="<?php esc_attr_e('Compare', 'kavehTheme'); ?>" data-bs-placement="left">
                    <?php echo do_shortcode('[compare_button id=' . get_the_ID() . ' background_color="transparent" style="icon_only" class=""]'); ?>
                  </li>
                <?php endif; ?>

                <li data-bs-toggle="tooltip" title="Share" data-bs-placement="left">
                  <i class="isax isax-share5" data-bs-toggle="modal" data-bs-target="#exampleModal"></i>
                </li>
                <?php if ($options['kaveh_wishlist_system'] === '1'): ?>

                  <li data-bs-toggle="tooltip" title="Add to Favorites" data-bs-placement="left">
                    <?php echo do_shortcode('[wlm_button]'); ?>
                  </li>
                <?php endif; ?>

              </ul>
              <!-- End Icons -->
              <div class="rate">
                <i class="icon-star d-block"></i>
                <?php
                // Display product rating
                $rating = $product->get_average_rating();
                echo esc_html($rating);
                ?>
              </div>
              <?php if ($product->is_on_sale()): ?>
                <div class="offer">
                  <?php
                  $percentage = kavehWoo::showofferpercentage($product);
                  echo $percentage . "%";
                  ?>
                  <span class="fw-light d-block"> Discount </span>
                </div>
              <?php endif; ?>

            </div>
          </div>

        <?php


        } elseif ($settings['style_kavehwoocommerceimages'] === 'three') { ?>
          <div class="detail-product-four-gallery">
            <div class="detail-product-four-gallery-origin position-relative">
              <!-- Start Carousel -->
              <div class="swiper swiper-detail-product-four-gallery">
                <div class="swiper-wrapper">
                  <?php
                  // Display featured product image
                  $post_thumbnail_id = get_post_thumbnail_id($product_id);
                  if ($post_thumbnail_id) {
                    $thumbnail_url = wp_get_attachment_url($post_thumbnail_id);
                    echo '<div class="swiper-slide h-auto">
                          <div id="img-container">
                            <img src="' . esc_url($thumbnail_url) . '" alt="product" width="451" height="474" class="w-100 d-block h-100">
                          </div>
                        </div>';
                  }

                  // Display product gallery images
                  $product_gallery = $product->get_gallery_image_ids();
                  if ($product_gallery) {
                    foreach ($product_gallery as $attachment_id) {
                      $image_url = wp_get_attachment_url($attachment_id);
                      echo '<div class="swiper-slide h-auto">
                            <img src="' . esc_url($image_url) . '" alt="product" width="451" height="474" class="w-100 d-block h-100">
                          </div>';
                    }
                  }
                  ?>
                </div>
                <!-- Start Button -->
                <div class="swiper-button-next d-flex d-lg-none align-items-center justify-content-center rounded-pill end-0">
                </div>
                <div class="swiper-button-prev d-flex d-lg-none align-items-center justify-content-center rounded-pill start-0">
                </div>
                <!-- End Button -->
              </div>
              <!-- End Carousel -->

              <div class="icons-detail-product position-absolute d-none d-lg-block">
                <button type="button"
                  class="d-flex align-items-center justify-content-center rounded-circle text-white mx-auto mb-2"
                  aria-label="show icons"> .... </button>
                <ul class="d-flex flex-column align-items-center gap-4">
                  <?php if ($options['kaveh_compare_system'] === '1'): ?>

                    <li class="text-white" data-bs-toggle="tooltip" title="<?php esc_attr_e('Compare', 'kavehTheme'); ?>" data-bs-placement="right">
                      <?php echo do_shortcode('[compare_button id=' . get_the_ID() . ' background_color="transparent" style="icon_only" class=""]'); ?>


                    </li>
                  <?php endif; ?>

                  <li class="text-white" data-bs-toggle="tooltip" title="Share" data-bs-placement="right">
                    <i class="isax isax-share5" data-bs-toggle="modal" data-bs-target="#exampleModal"></i>
                  </li>
                  <?php if ($options['kaveh_wishlist_system'] === '1'): ?>

                    <li class="text-white" data-bs-toggle="tooltip" title="Add to Favorites" data-bs-placement="right">
                      <?php echo do_shortcode('[wlm_button]'); ?>
                    </li>
                  <?php endif; ?>

                </ul>
              </div>
            </div>

            <div class="detail-product-four-gallery-items position-relative d-none d-lg-flex justify-content-between gap-2">
              <?php
              // Display small gallery images
              if ($product_gallery) {
                $gallery_count = count($product_gallery); // Count number of images
                $images_to_display = array_slice($product_gallery, 0, 5); // Display maximum 5 images

                foreach ($images_to_display as $index => $attachment_id) {
                  $image_url = wp_get_attachment_url($attachment_id);
                  // Add "has-items" class to the fifth image if total images are 5 or more
                  $extra_class = ($index === 4 && $gallery_count >= 5) ? 'has-items position-relative' : '';
                  echo '<div class="item bg-white ' . esc_attr($extra_class) . '" data-bs-toggle="modal" data-bs-target="#modal-gallery">
                        <img src="' . esc_url($image_url) . '" alt="product" width="37" height="33">
                      </div>';
                }
              }
              ?>
            </div>
          </div>
        <?php
        } elseif ($settings['style_kavehwoocommerceimages'] === 'four') { ?>
          <div class="d-flex flex-column-reverse flex-lg-column">


            <!-- Start Special Selling -->
            <?php
            // Check if the product has a discount
            if ($product->is_on_sale()) {
            ?>
              <!-- Start Special Selling -->
              <div
                class="detail-product-five__special__selling d-flex align-items-center justify-content-between position-relative">
                <div class="detail-product-five__special__selling__title"><?php esc_html_e('Special Sale', 'kavehTheme'); ?></div>
              </div>
              <!-- End Special Selling -->
            <?php
            }
            ?>
            <!-- End Special Selling -->

            <!-- Start Gallery -->
            <div class="detail-product-five__gallery">
              <!-- Start Large Image Desktop -->
              <div class="detail-product-five__gallery__origin position-relative d-none d-lg-block">
                <?php
                // Display featured product image
                $post_thumbnail_id = get_post_thumbnail_id($product_id);
                if ($post_thumbnail_id) {
                  $thumbnail_url = wp_get_attachment_url($post_thumbnail_id);
                  echo '<img src="' . esc_url($thumbnail_url) . '" alt="product" width="650" height="650" class="d-block w-100" data-bs-toggle="modal" data-bs-target="#modal-gallery">';
                }
                ?>
                <ul class="position-absolute top-0 start-0 d-flex flex-column gap-3">
                  <?php if ($options['kaveh_wishlist_system'] === '1'): ?>
                    <li data-bs-toggle="tooltip" title="Add to Favorites" data-bs-placement="right">
                      <?php echo do_shortcode('[wlm_button]'); ?>
                    </li>
                  <?php endif; ?>
                  <li data-bs-toggle="tooltip" title="Share" data-bs-placement="right">
                    <i class="isax isax-share5" data-bs-toggle="modal" data-bs-target="#exampleModal"></i>
                  </li>
                  <?php if ($options['kaveh_compare_system'] === '1'): ?>
                    <li data-bs-toggle="tooltip" title="<?php esc_attr_e('Compare', 'kavehTheme'); ?>" data-bs-placement="right">
                      <?php echo do_shortcode('[compare_button id=' . get_the_ID() . '  background_color="transparent" style="icon_only" class=""]'); ?>
                    </li>
                  <?php endif; ?>
                </ul>
              </div>
              <!-- End Large Image Desktop -->

              <!-- Start Large Image Mobile -->
              <div class="detail-product-five__gallery__origin__sm position-relative d-lg-none">
                <div class="swiper swiper-gallery-product-five" data-bs-toggle="modal" data-bs-target="#modal-gallery">
                  <div class="swiper-wrapper">
                    <?php
                    // Display maximum 6 product gallery images
                    $product_gallery = $product->get_gallery_image_ids();
                    if ($product_gallery) {
                      $gallery_images = array_slice($product_gallery, 0, 6);
                      foreach ($gallery_images as $attachment_id) {
                        $image_url = wp_get_attachment_url($attachment_id);
                        echo '<div class="swiper-slide">
                      <img src="' . esc_url($image_url) . '" alt="product" width="650" height="650" class="d-block w-100">
                    </div>';
                      }
                    }
                    ?>
                  </div>
                  <!-- Start Pagination -->
                  <div class="swiper-pagination"></div>
                  <!-- End Pagination -->
                </div>
              </div>
              <!-- End Large Image Mobile -->

              <!-- Start Thumbnail Images -->
              <ul class="detail-product-five__gallery__images d-none d-lg-flex align-items-center">
                <?php
                if ($product_gallery) {
                  $gallery_count = count($product_gallery);
                  $gallery_images = array_slice($product_gallery, 0, 6); // Limit to 6 images

                  foreach ($gallery_images as $index => $attachment_id) {
                    $image_url = wp_get_attachment_url($attachment_id);

                    // Add overlay to the sixth image
                    $extra_html = ($index === 5 && $gallery_count >= 6)
                      ? '<span class="more-images position-absolute top-50 start-50 translate-middle">...</span>'
                      : '';

                    // Generate HTML code for each image
                    echo '<li class="' . ($index === 5 && $gallery_count >= 6 ? 'position-relative' : '') . '" data-bs-toggle="modal" data-bs-target="#modal-gallery">';
                    echo '<img src="' . esc_url($image_url) . '" alt="product" width="72" height="72" class="d-block">';
                    echo $extra_html; // Insert 3 dots for the sixth image
                    echo '</li>';
                  }
                }
                ?>
              </ul>

              <!-- End Thumbnail Images -->
            </div>
            <!-- End Gallery -->
          </div>


        <?php
        } elseif ($settings['style_kavehwoocommerceimages'] === 'five') { ?>
          <div class="detail-product-six__info position-relative">
            <div class="detail-product-six__info__gallery bg-white position-relative">
              <!-- Start Large Images -->
              <div
                class="swiper swiper-detail-product-six_images overflow-hidden position-relative d-flex align-items-center justify-content-center"
                data-swiper='{
                  "slidesPerView": 1,
                  "spaceBetween": 0,
                  "thumbs": {
                    "swiper": ".swiper-detail-product-six_images__sm"
                  },
                  "pagination": {
                    "el": ".swiper-pagination",
                    "type": "bullets",
                    "clickable": true,
                    "dynamicBullets": true
                  }
                }'>
                <div class="swiper-wrapper">
                  <?php
                  // Display featured image
                  $thumbnail_id = get_post_thumbnail_id($product->get_id());
                  $thumbnail_url = wp_get_attachment_url($thumbnail_id);
                  if ($thumbnail_url) {
                  ?>
                    <!-- Start Slide -->
                    <div class="swiper-slide">
                      <img src="<?php echo esc_url($thumbnail_url); ?>" alt="product" width="404" height="404"
                        class="d-block w-100" data-bs-toggle="modal" data-bs-target="#modal-gallery">
                    </div>
                    <!-- End Slide -->
                  <?php
                  }

                  // Get product gallery images
                  $gallery_images = $product->get_gallery_image_ids();
                  foreach ($gallery_images as $attachment_id) {
                    $image_url = wp_get_attachment_url($attachment_id);
                  ?>
                    <!-- Start Slide -->
                    <div class="swiper-slide">
                      <img src="<?php echo esc_url($image_url); ?>" alt="product" width="404" height="404" class="d-block w-100"
                        data-bs-toggle="modal" data-bs-target="#modal-gallery">
                    </div>
                    <!-- End Slide -->
                  <?php } ?>
                </div>
                <div class="swiper-pagination d-lg-none"></div>
              </div>
              <!-- End Large Images -->

              <!-- Start Small Images -->
              <div
                class="swiper swiper-detail-product-six_images__sm overflow-hidden w-100 mx-auto small__images position-absolute bottom-0 end-50 d-none d-lg-block"
                data-swiper='{
                  "slidesPerView": 3,
                  "spaceBetween": 10
                }'>
                <div class="swiper-wrapper overflow-hidden">
                  <?php
                  // Display featured image in small gallery
                  if ($thumbnail_url) {
                  ?>
                    <!-- Start Slide -->
                    <div class="swiper-slide">
                      <img src="<?php echo esc_url($thumbnail_url); ?>" alt="product" width="306" height="236" class="d-block">
                    </div>
                    <!-- End Slide -->
                  <?php
                  }

                  // Display gallery images in small gallery
                  foreach ($gallery_images as $attachment_id) {
                    $image_url = wp_get_attachment_url($attachment_id);
                  ?>
                    <!-- Start Slide -->
                    <div class="swiper-slide">
                      <img src="<?php echo esc_url($image_url); ?>" alt="product" width="306" height="236" class="d-block">
                    </div>
                    <!-- End Slide -->
                  <?php } ?>
                </div>
              </div>
              <!-- End Small Images -->

              <!-- Start Icons -->
              <ul
                class="detail-product-six__info__icons d-none d-lg-flex align-items-center justify-content-center flex-column position-absolute gap-3">
                <?php if ($options['kaveh_compare_system'] === '1'): ?>

                  <li class="text-black" data-bs-toggle="tooltip" title="<?php esc_attr_e('Compare', 'kavehTheme'); ?>" data-bs-placement="right">
                    <?php echo do_shortcode('[compare_button id=' . get_the_ID() . ' background_color="transparent" style="icon_only" class=""]'); ?>


                  </li>
                <?php endif; ?>

                <li class="text-black" data-bs-toggle="tooltip" title="<?php echo esc_attr__('Share', 'kavehTheme'); ?>" data-bs-placement="right">
                  <i class="isax isax-share5" data-bs-toggle="modal" data-bs-target="#exampleModal"></i>
                </li>
                <li class="text-black" data-bs-toggle="tooltip" title="<?php esc_attr_e('Video', 'kavehTheme'); ?>" data-bs-placement="right">
                  <i class="fa fa-play-circle lh-1"></i>
                </li>
                <?php if ($options['kaveh_wishlist_system'] === '1'): ?>

                  <li class="text-black" data-bs-toggle="tooltip" title="<?php echo esc_attr__('Add to Favorites', 'kavehTheme'); ?>" data-bs-placement="right">
                    <?php echo do_shortcode('[wlm_button]'); ?>

                  </li>
                <?php endif; ?>

                <li class="zoom text-black rounded-circle d-flex align-items-center justify-content-center"
                  data-modal-gallery="show">
                  <i class="icon-arrow-zoom lh-1"></i>
                </li>
              </ul>
              <!-- End Icons -->
            </div>
          </div>
      <?php
        }
      }
      ?>

      <!-- End Gallery Image -->
      <?php do_action('kaveh_single_modal_gallery'); ?>
<?php
    }
  }
}
