<?php

namespace THINKAIPLUGIN\Element;

use Elementor\Controls_Manager;
use Elementor\Controls_Stack;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Repeater;
use Elementor\Widget_Base;
use Elementor\Utils;
use Elementor\Group_Control_Text_Shadow;
use \Elementor\Group_Control_Box_Shadow;
use \Elementor\Group_Control_Background;
use \Elementor\Group_Control_Image_Size;
use Elementor\Plugin;

/**
 * Elementor button widget.
 * Elementor widget that displays a button with the ability to control every
 * aspect of the button design.
 *
 * @since 1.0.0
 */
class Clients_Carousel extends Widget_Base
{

    /**
     * Get widget name.
     * Retrieve button widget name.
     *
     * @since  1.0.0
     * @access public
     * @return string Widget name.
     */
    public function get_name()
    {
        return 'thinkai_clients_Carousel';
    }

    /**
     * Get widget title.
     * Retrieve button widget title.
     *
     * @since  1.0.0
     * @access public
     * @return string Widget title.
     */
    public function get_title()
    {
        return esc_html__('Thinkai Clients Carousel', 'thinkai');
    }

    /**
     * Get widget icon.
     * Retrieve button widget icon.
     *
     * @since  1.0.0
     * @access public
     * @return string Widget icon.
     */
    public function get_icon()
    {
        return 'eicon-banner';
    }

    /**
     * Get widget categories.
     * Retrieve the list of categories the button widget belongs to.
     * Used to determine where to display the widget in the editor.
     *
     * @since  2.0.0
     * @access public
     * @return array Widget categories.
     */
    public function get_categories()
    {
        return [ 'thinkai' ];
    }
	
	public function get_script_depends() {
		wp_register_script( 'clients-script', YT_URL . 'assets/js/feature-carousel.js', [ 'elementor-frontend' ], '1.0.0', true );
		return [ 'clients-script' ];
	}
	
    /**
     * Register button widget controls.
     * Adds different input fields to allow the user to change and customize the widget settings.
     *
     * @since  1.0.0
     * @access protected
     */
    protected function register_controls()
    {
        $this->start_controls_section(
            'clients_carousel',
            [
                'label' => esc_html__('Thinkai Clients Carousel', 'thinkai'),
            ]
        );
		//Layout
		$this->add_control(
			'layout_control',
			[
				'label'   => esc_html__( 'Layout Style', 'thinkai' ),
				'label_block' => true,
				'type'    => Controls_Manager::SELECT,
				'default' => '1',
				'options' => array(
					'1' => esc_html__( 'Style One ', 'thinkai'),
					'2' => esc_html__( 'Style Two ', 'thinkai'),
					'3' => esc_html__( 'Style Three ', 'thinkai'),
				),
			]
		);	
		
		//Title
		$this->add_control(
			'title',
			[
				'label'       => __( 'Title', 'thinkai' ),
				'label_block' => true,
				'type'        => Controls_Manager::TEXTAREA,
				'dynamic'     => [
					'active' => true,
				],
				'placeholder' => __( 'Enter your Title', 'thinkai' ),
			]
		);
		
		//Our Feature Table		
		$repeater = new Repeater();		
		$repeater->add_control(
            'client_img',
            [
				'label' => __('Client Image', 'thinkai'),
				'type' => Controls_Manager::MEDIA,
				'default' => ['url' => Utils::get_placeholder_image_src(),],
			]
        );
		$repeater->add_control(
            'client_link',
            [
                  'label' => __('External Url', 'thinkai'),
                  'type' => Controls_Manager::URL,
                  'placeholder' => __('https://your-link.com', 'plugin-domain'),
                  'show_external' => true,
                  'default' => [
                    'url' => '',
                    'is_external' => true,
                    'nofollow' => true,
                  ],
			  ]
        );
		$this->add_control(
			'clients',
			[
				'label'                 => __('Add Clients Item', 'thinkai'),
				'type'                  => Controls_Manager::REPEATER,
				'fields'                => $repeater->get_controls(),
				'condition'   => [ 
					'layout_control' => ['1','2'] 
				]
			]
		);		
        $this->end_controls_section();
		
		//Title Style		
		$this->start_controls_section(
			'title_style',
			[
				'label' => esc_html__( 'Title Style Settings', 'thinkai' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);		
		$this->add_responsive_control(
            'title__margin',
            [
                'label'      => esc_html__( 'Margin', 'thinkai' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .te-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'separator'  => 'before',
            ]
        );		
        $this->add_responsive_control(
            'title_padding',
            [
                'label'      => esc_html__( 'Padding', 'thinkai' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'selectors'  => [
                    '{{WRAPPER}} .te-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'separator'  => 'before',
            ]
        );		
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'title_bgtype',
				'label' => __( 'Background', 'thinkai' ),
				'types' => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .partner-style2 .title-box .inner',				
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'title_border_type',
				'selector' => 
					'{{WRAPPER}} .te-title',				
				'separator' => 'before',
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'title_border_box_shadow',
				'selector' => 
					'{{WRAPPER}} .te-title',				
				'separator' => 'before',
			]
		);
		$this->add_control(
			'title_border_radius',
			[
				'label' => esc_html__('Border Radius', 'thinkai'),
				'type' => Controls_Manager::DIMENSIONS,
				'separator' => 'before',
				'size_units' => ['px'],
				'selectors' => [
					'{{WRAPPER}} .te-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);	
		$this->add_control(
			'title_color',
			[
				'label' => esc_html__( 'Text Color', 'thinkai' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .te-title' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .te-title a' => 'color: {{VALUE}} !important;',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'title_typography',
				'label' => __('Typography', 'thinkai'),
				'selector' => '{{WRAPPER}} .te-title',
			]
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name' => 'title_text_shadow',
				'selector' => '{{WRAPPER}} .te-title',
			]
		);
		$this->end_controls_section();
		
		
	}

    /**
     * Render button widget output on the frontend.
     * Written in PHP and used to generate the final HTML.
     *
     * @since  1.0.0
     * @access protected
     */
    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $allowed_tags = wp_kses_allowed_html('post'); 
	?>
	
    <?php 
		if($settings['layout_control'] == '2') : 
	?>
    	
    <!--Start Partner style3-->
    <section class="partner-style2 partner-style2--style3 p-0 m-0">
        <div class="auto-container">
            <?php if($settings['title']){ ?>
            <div class="title-box text-center">
                <div class="inner">
                    <h3 class="te-title"><?php echo wp_kses($settings['title'], true); ?></h3>
                </div>
            </div>
            <?php } ?>
            <div class="partner-style2__inner">
                <div class="owl-carousel owl-theme thm-owl__carousel partner-carousel" data-owl-options='{
                    "loop": true,
                    "autoplay": true,
                    "margin": 0,
                    "nav": false,
                    "dots": false,
                    "smartSpeed": 500,
                    "autoplayTimeout": 10000,
                    "navText": ["<span class=\"fa fa-angle-left\"></span>","<span class=\"fa fa-angle-right\"></span>"],
                    "responsive": {

                            "0": {
                                "items": 1
                            },

                            "550": {
                                "items": 2
                            },
                            "768": {
                                "items": 3
                            },
                            "992": {
                                "items": 4
                            },
                            "1300": {
                                "items": 5
                            },
                            "1700": {
                                "items": 6
                            }
                        }
                    }'>

                    <?php foreach ($settings['clients'] as $item):?>
                    <!--Start Single Partner Logo Box-->
                    <div class="single-partner-logo-box-style2">
                        <a href="<?php echo esc_url($item['client_link']['url']); ?>"><img src="<?php echo esc_url(wp_get_attachment_url($item['client_img']['id'])); ?>" alt="<?php bloginfo( 'name' ); ?>"></a>
                    </div>
                    <!--End Single Partner Logo Box-->
                    <?php endforeach; ?>
                    
                </div>
            </div>
        </div>
    </section>
    <!--End Partner style3-->
    
    <?php else:	?>
    
    <!--Start Partner style2-->
    <section class="partner-style2 p-0 m-0">
        <div class="auto-container">
            <?php if($settings['title']){ ?>
            <div class="title-box text-center">
                <div class="inner">
                    <h3><?php echo wp_kses($settings['title'], true); ?></h3>
                </div>
            </div>
            <?php } ?>
            
            <div class="partner-style2__inner">
                <div class="owl-carousel owl-theme thm-owl__carousel partner-carousel" data-owl-options='{
                    "loop": true,
                    "autoplay": true,
                    "margin": 0,
                    "nav": false,
                    "dots": false,
                    "smartSpeed": 500,
                    "autoplayTimeout": 10000,
                    "navText": ["<span class=\"fa fa-angle-left\"></span>","<span class=\"fa fa-angle-right\"></span>"],
                    "responsive": {
                            "0": {
                                "items": 1
                            },
                            "550": {
                                "items": 2
                            },
                            "768": {
                                "items": 3
                            },
                            "992": {
                                "items": 4
                            },
                            "1300": {
                                "items": 5
                            },
                            "1700": {
                                "items": 6
                            }
                        }
                    }'>
					<?php foreach ($settings['clients'] as $item):?>
                    <!--Start Single Partner Logo Box-->
                    <div class="single-partner-logo-box-style2">
                        <a href="<?php echo esc_url($item['client_link']['url']); ?>"><img src="<?php echo esc_url(wp_get_attachment_url($item['client_img']['id'])); ?>" alt="<?php bloginfo( 'name' ); ?>"></a>
                    </div>
                    <!--End Single Partner Logo Box-->
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </section>
    <!--End Partner style2-->
    <?php endif; ?>             
    <?php
    }
}