<?php

namespace METOPLUGIN\Element;

use Elementor\Controls_Manager;
use Elementor\Controls_Stack;
use Elementor\Group_Control_Typography;
use Elementor\Scheme_Typography;
use Elementor\Scheme_Color;
use Elementor\Group_Control_Border;
use Elementor\Repeater;
use Elementor\Widget_Base;
use Elementor\Utils;
use Elementor\Group_Control_Text_Shadow;
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 Our_Clients 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 'meto_our_clients';
    }

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

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

    /**
     * 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 [ 'meto' ];
    }

    /**
     * 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(
            'our_clients',
            [
                'label' => esc_html__('Our Clients', 'meto'),
            ]
        );
        $this->add_control(
            'clients',
            [
				'type' => Controls_Manager::REPEATER,
				'seperator' => 'before',
				'fields' =>
					[
						[
							'name' => 'client_img',
							'label' => esc_html__('Client image', 'meto'),
							'type' => Controls_Manager::MEDIA,
							'default' => ['url' => Utils::get_placeholder_image_src(),],
						],
						[
							'name' => 'client_link',
							'label' => __('External Url', 'meto'),
							'type' => Controls_Manager::URL,
							'placeholder' => __('https://your-link.com', 'plugin-domain'),
							'show_external' => true,
							'default' => ['url' => '','is_external' => true,'nofollow' => true,],
						],
					],
			 ]
        );
        $this->add_control(
            'style_two',
            [
                    'label'   => esc_html__('Choose Different Style', 'meto'),
                    'type'    => Controls_Manager::SELECT,
                    'default' => 'one',
                    'options' => array(
                        'one' => esc_html__('Choose Style One', 'meto'),
                        'two'  => esc_html__('Choose Style Two', 'meto'),
						'three'  => esc_html__('Choose Style Three', 'meto'),
						'four'  => esc_html__('Choose Style Four', 'meto'),
                    ),
                ]
        );
        $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'); ?>

        <!-- Clients Section -->
        <section class="clients-section <?php if ($settings['style_two'] == 'two') { echo 'style-two'; } elseif ($settings['style_two'] == 'three') { echo 'new-style'; } elseif ($settings['style_two'] == 'four') { echo 'style-three'; } else { echo ''; } ?>">
            <div class="auto-container">
                
                <div class="sponsors-outer">
                    <!--Sponsors Carousel-->
                    <ul class="sponsors-carousel owl-carousel owl-theme">
                        <?php foreach ($settings['clients'] as $item):?>
                        <li class="slide-item"><figure class="image-box"><a href="<?php echo esc_url($item['client_link']['url']); ?>"><img src="<?php echo esc_url($item['client_img']['url']); ?>" alt="<?php esc_html_e('Awesome Image', 'meto'); ?>"></a></figure></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                
            </div>
        </section>
        <!-- End Clients Section -->
        
        <?php
    }
}