<?php


use Elementor\Widget_Base;
use Elementor\Controls_Manager;

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


class Digikalabrandscarouselkaveh extends Widget_Base
{

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

    public function get_title()
    {
        return esc_html__('Digikala Brands Carousel Element', 'kavehTheme');
    }

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

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

    protected function register_controls()
    {

        $this->start_controls_section(
            'content1digikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Element Content', 'kavehTheme'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new \Elementor\Repeater();
        $repeater->add_control(
            'imgdigikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Image', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'devices' => ['desktop', 'tablet', 'mobile'],
            ]
        );

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

            ]
        );
        $this->add_control(
            'listdigikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Images', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'linkdigikalabrandscarouselkaveh' => esc_html__('#', 'kavehTheme'),
                    ],
                ]
            ]

        );
        $this->end_controls_section();
        $this->start_controls_section(
            'content2digikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Title Content', 'kavehTheme'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control(
            'buttonicodigikalabrandscarouselkaveh',
            [
              'label' => esc_html__( 'Icon', 'kavehTheme' ),
              'type' => \Elementor\Controls_Manager::ICONS,
              'skin' => 'inline',
              'exclude_inline_options' => [ 'svg' ],
              'default' => [
                'value' => 'icon-stars',
              ],
            ]
          ); 
        $this->add_control(
            'titledigikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Title', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Most Popular Brands', 'kavehTheme'),

            ]
        );
        $this->add_control(
            'tagheadingdigikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Title Tag', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'H2',
                'options' => [
                    'H1' => esc_html__('H1', 'kavehTheme'),
                    'H2' => esc_html__('H2', 'kavehTheme'),
                    'H3' => esc_html__('H3', 'kavehTheme'),
                    'H4' => esc_html__('H4', 'kavehTheme'),
                    'H5' => esc_html__('H5', 'kavehTheme'),
                    'H6' => esc_html__('H6', 'kavehTheme'),
                    'p' => esc_html__('p', 'kavehTheme'),
                    'div' => esc_html__('div', 'kavehTheme'),
                    'span' => esc_html__('span', 'kavehTheme'),
                ],
            ]
        );
        $this->end_controls_section();
        $this->start_controls_section(
            'style1_digikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Title Style', 'kavehTheme'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'titlecolordigikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Title Color', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#080a38',
                'selectors' => [
                    '{{WRAPPER}} .brands-kala-title' => 'color: {{VALUE}} !important;',
                ],
            ]
        );
        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'title_digikalabrandscarouselkaveh',
                'label' => esc_html__('Title Typography', 'kavehTheme'),
                'selector' => '{{WRAPPER}} .brands-kala-title',
            ]
        );
        $this->add_control(
            'iconcolordigikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Icon Color', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#f9bc00',
                'selectors' => [
                    '{{WRAPPER}} .brands-kala-title i' => 'color: {{VALUE}} !important;',
                ],
            ]
        );
        $this->add_control(
            'iconsizedigikalabrandscarouselkaveh',
            [
              'label' => esc_html__( 'Icon Size', 'kavehTheme' ),
              'type' => \Elementor\Controls_Manager::SLIDER,
              'size_units' => [ 'px' ],
              'range' => [
                'px' => [
                  'min' => 0,
                  'max' => 300,
                  'step' => 1,
                ],
              ],
              'selectors' => [
                '{{WRAPPER}} .brands-kala-title i' => 'font-size: {{SIZE}}{{UNIT}};',
              ],
            ]
          );
        $this->end_controls_section();
        $this->start_controls_section(
            'style2_digikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Box Style', 'kavehTheme'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'borderboxdigikalabrandscarouselkaveh',
                'selector' => '{{WRAPPER}} .brands-kala-wrapper'
            ]
        );
        $this->add_control(
            'boxradiusdigikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Border Radius', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'selectors' => [
                    '{{WRAPPER}} .brands-kala-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();
        $this->start_controls_section(
            'style3_digikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Carousel Arrows Style', 'kavehTheme'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'arrowscolordigikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Carousel Arrows Background Color', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next' => 'background-color: {{VALUE}} !important;',
                    '{{WRAPPER}}  .swiper-button-prev' => 'background-color: {{VALUE}} !important;',
                ],
            ]
        );
        $this->add_control(
            'arrowscoloricondigikalabrandscarouselkaveh',
            [
                'label' => esc_html__('Carousel Arrows Icon Color', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#3f4064',
                'selectors' => [
                    '{{WRAPPER}} .swiper-button-next::after' => 'color: {{VALUE}} !important;',
                    '{{WRAPPER}} .swiper-button-prev::after' => 'color: {{VALUE}} !important;',
                ]
            ]
        );

        $this->add_control(
            'title1_options',
            [
                'label' => esc_html__('Previous Arrow Border', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'borderarrowprevdigikalabrandscarouselkaveh',
                'selector' => '{{WRAPPER}} .swiper-button-prev'
            ]
        );

        $this->add_control(
            'title2_options',
            [
                'label' => esc_html__('Next Arrow Border', 'kavehTheme'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'borderarrownextdigikalabrandscarouselkaveh',
                'selector' => '{{WRAPPER}} .swiper-button-next'
            ]
        );
        $this->end_controls_section();

    }

    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $clsid = $this->get_id();
        ?>
        <!-- Start Brands -->
        <section class="brands-kala">
            <div class="container">
                <div class="brands-kala-wrapper py-4">
                    <<?php echo esc_attr($settings['tagheadingdigikalabrandscarouselkaveh']); ?>
                    class="brands-kala-title d-flex align-items-center justify-content-center">
                    <i class="<?php echo  esc_html($settings['buttonicodigikalabrandscarouselkaveh']['value']); ?>"></i>
                    <?php echo esc_html($settings['titledigikalabrandscarouselkaveh']); ?>
                </<?php echo esc_attr($settings['tagheadingdigikalabrandscarouselkaveh']); ?>>
                <!-- Start Carousel -->
                <div class="swiper swiper-brands-kala overflow-hidden position-relative swiper-kala" data-swiper='{"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"spaceBetween":0,"breakpoints":{"320":{"slidesPerView":2},"400":{"slidesPerView":3},"500":{"slidesPerView":4},"576":{"slidesPerView":5},"768":{"slidesPerView":7},"992":{"slidesPerView":9}}}'>
                    <div class="swiper-wrapper">
                        <?php if ($settings['listdigikalabrandscarouselkaveh']) : ?>
                            <?php foreach ($settings['listdigikalabrandscarouselkaveh'] as $item) : ?>
                                <!-- Start Slide -->
                                <div class="swiper-slide h-auto">
                                    <a href="<?php echo esc_url($item['linkdigikalabrandscarouselkaveh']); ?>"
                                       class="d-flex align-items-center justify-content-center h-100 py-1 px-3">
                                        <img src="<?php echo esc_url($item['imgdigikalabrandscarouselkaveh']['url']); ?>"
                                             alt="<?php echo esc_attr(\Elementor\Control_Media::get_image_alt($item['imgdigikalabrandscarouselkaveh'])); ?>"
                                             width="110"
                                             height="110" class="d-block mx-auto">
                                    </a>
                                </div>
                                <!-- End Slide -->
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                    <!-- Start Button -->
                    <div class="swiper-button-next d-flex align-items-center justify-content-center rounded-circle bg-white">
                    </div>
                    <div class="swiper-button-prev d-flex align-items-center justify-content-center rounded-circle bg-white">
                    </div>
                    <!-- End Button -->
                </div>
                <!-- End Carousel -->
            </div>
            </div>
        </section>
        <!-- End Brands -->
                                
        <?php
    }

}
