<?php
if (!defined('ABSPATH')) {
    exit;
}

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

    public function get_title()
    {
        return esc_html__('Custom Slider', 'elementor-list-widget');
    }

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

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

    public function get_keywords()
    {
        return ['list', 'slider', 'custom', 'smo'];
    }

    protected function register_controls()
    {
        //content
        $this->start_controls_section(
            'section_content',
            [
                'label' => esc_html__('Content', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control(
			'title_main',
			[
				'label' => esc_html__('Title', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => 'text',
			]
		);
        $this->add_control(
            'slider_list',
            [
                'label' => esc_html__('List Item', 'textdomain'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => [
                    [
                        'name' => 'image',
                        'label' => esc_html__('Image', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::MEDIA,
                        'media_types' => ['image', 'video'],
                        'default' => [
                            'url' => \Elementor\Utils::get_placeholder_image_src(),
                        ],
                    ],
                    [
                        'name' => 'sub_title',
                        'label' => esc_html__('Top Title', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::TEXTAREA,
				        'rows' => 5,
                        'default' => '',
                    ],
                    [
                        'name' => 'sub_title_color',
                        'label' => esc_html__('Top Title Color', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::COLOR,
                        'default' => '#FFFFFF',
                    ],
                    [
                        'name' => 'title',
                        'label' => esc_html__('Title', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::TEXTAREA,
                        'rows' => 5,
                        'default' => '',
                    ],
                    [
                        'name' => 'title_color',
                        'label' => esc_html__('Title Color', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::COLOR,
                        'default' => '#FFFFFF',
                    ],
                    [
                        'name' => 'link',
                        'label' => esc_html__('Link', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::URL,
                        'options' => ['url', 'is_external', 'nofollow'],
                        'default' => [
                            'url' => '',
                            'is_external' => false,
                            'nofollow' => false,
                            'custom_attributes' => '',
                        ],
                        'label_block' => true,
                    ],
                ],
                'title_field' => '{{{ sub_title }}}',
            ]
        );
        $this->end_controls_section();


        // Setting silder PC

        $this->start_controls_section(
            'section_slider',
            [
                'label' => esc_html__('Slider PC (>1024px) ', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]

        );
        $this->add_control(
            'box_height',
            [
                'label' => esc_html__('Height', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => 471,
            ]
        );
        $this->add_control(
            'box_width',
            [
                'label' => esc_html__('Width', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => 353,
            ]
        );
        
        $this->add_control(
            'display_team',
            [
                'label' => esc_html__('Display', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => '3.5',
            ]
        );
        $this->add_control(
            'space_between',
            [
                'label' => esc_html__('Space Between', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 100,
                'step' => 1,
                'default' => 14,
            ]
        );
        $this->add_control(
            'loop',
            [
                'label' => esc_html__('Loop', 'textdomain'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'textdomain'),
                'label_off' => esc_html__('No', 'textdomain'),
                'return_value' => 'yes',
                'default' => '',
            ]
        );
        $this->add_control(
            'pagination',
            [
                'label' => esc_html__('Pagination', 'textdomain'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'textdomain'),
                'label_off' => esc_html__('No', 'textdomain'),
                'return_value' => 'no',
                'default' => '',
            ]
        );
        $this->add_control(
            'navigation',
            [
                'label' => esc_html__('Navigation', 'textdomain'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'textdomain'),
                'label_off' => esc_html__('No', 'textdomain'),
                'return_value' => 'yes',
                'default' => '',
            ]
        );
        $this->end_controls_section();

        // Setting silder tablet
        $this->start_controls_section(
            'section_slider_tl',
            [
                'label' => esc_html__('Slider Tablet (768px - 1024px)', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]

        );
        $this->add_control(
            'box_height_tl',
            [
                'label' => esc_html__('Height', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '425',
            ]
        );
        $this->add_control(
            'box_width_tl',
            [
                'label' => esc_html__('Width', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '318',
            ]
        );
        
        $this->add_control(
            'display_team_tl',
            [
                'label' => esc_html__('Display', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => '3.2',
            ]
        );
        $this->add_control(
            'space_between_tl',
            [
                'label' => esc_html__('Space Between', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 100,
                'step' => 1,
                'default' => 14,
            ]
        );
        $this->end_controls_section();

        //Setting silder MB
        $this->start_controls_section(
            'section_slider_mb',
            [
                'label' => esc_html__('Slider Mobile (< 768px)', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]

        );
        $this->add_control(
            'box_height_mb',
            [
                'label' => esc_html__('Height', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '320',
            ]
        );
        $this->add_control(
            'box_width_mb',
            [
                'label' => esc_html__('Width', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '240',
            ]
        );
        
        $this->add_control(
            'display_team_mb',
            [
                'label' => esc_html__('Display', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => '1.5',
            ]
        );
        $this->add_control(
            'space_between_mb',
            [
                'label' => esc_html__('Space Between', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 100,
                'step' => 1,
                'default' => 14,
            ]
        );
        $this->end_controls_section();



        // Style

        $this->start_controls_section(
			'style_name',
			[
				'label' => esc_html__( 'Style Title', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
        $this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'title_typography',
				'selector' => '{{WRAPPER}} .slider-title',
			]
		);
        
        $this->end_controls_section();


        $this->start_controls_section(
			'style_slider_title',
			[
				'label' => esc_html__( 'Style Slider', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
        $this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'slider_title_typography',
				'selector' => '{{WRAPPER}} .title',
			]
		);
		$this->end_controls_section();
		
		
		$this->start_controls_section(
			'style_slider_subtitle',
			[
				'label' => esc_html__( 'Style Slider Subtitle', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
        $this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'slider_subtitle_typography',
				'selector' => '{{WRAPPER}} .sub-title',
			]
		);

		$this->end_controls_section();
    }

    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $title_main = $settings['title_main'];
        
        $slider_list = $settings['slider_list'];
        $box_height = $settings['box_height'];
        $box_width = $settings['box_width'];
        $display_team = $settings['display_team'];
        $loop = $settings['loop'] === 'yes' ? 'true' : 'false';
        $navigation  = $settings['navigation'];
        $pagination = $settings['pagination'];
        $space_between = $settings['space_between'];

        $box_height_mb = $settings['box_height_mb'];
        $box_width_mb = $settings['box_width_mb'];
        $display_team_mb = $settings['display_team_mb'];
        $space_between_mb = $settings['space_between_mb'];

        $box_height_tl = $settings['box_height_tl'];
        $box_width_tl = $settings['box_width_tl'];
        $display_team_tl = $settings['display_team_tl'];
        $space_between_tl = $settings['space_between_tl'];

        // Generate a random string
        $unique_id = uniqid();
        $class_unique = 'slider-item'.$unique_id;
        ob_start();
        ?>
        <!-- PC -->
        <div class="smo-slider-section">
            <div class="smo-title-container">
                <div class="smo-title-box">
                    <?php if(!empty($title_main)): ?>
                        <h2 class="slider-title"><?php echo $title_main?></h2>
                    <?php endif; ?>
                    <?php if($navigation == "yes"):?>
                        <div class="slider-navigation">
                            <div class="navigation-next  navigation-next-<?php echo $unique_id; ?>">
                                <svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2929 27.2572C15.9024 26.8666 15.9024 26.2335 16.2929 25.8429L21.5858 20.55L16.2929 15.2571C15.9024 14.8666 15.9024 14.2334 16.2929 13.8429C16.6834 13.4524 17.3166 13.4524 17.7071 13.8429L23.7071 19.8429C23.8946 20.0305 24 20.2848 24 20.55C24 20.8152 23.8946 21.0696 23.7071 21.2571L17.7071 27.2572C17.3166 27.6477 16.6834 27.6477 16.2929 27.2572Z" fill="#080808" fill-opacity="0.8"/>
                                </svg>
                            </div>
                            <div class="navigation-prev navigation-prev-<?php echo $unique_id; ?>">
                                <svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.7071 13.8429C24.0976 14.2335 24.0976 14.8666 23.7071 15.2572L18.4142 20.5501L23.7071 25.8429C24.0976 26.2334 24.0976 26.8666 23.7071 27.2571C23.3166 27.6476 22.6834 27.6476 22.2929 27.2571L16.2929 21.2572C16.1054 21.0696 16 20.8153 16 20.5501C16 20.2848 16.1054 20.0305 16.2929 19.843L22.2929 13.8429C22.6834 13.4524 23.3166 13.4524 23.7071 13.8429Z" fill="#080808" fill-opacity="0.8"/>
                                </svg>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="smo-slider-container">
                <div class="smo-slider smo-slider-<?php echo $unique_id; ?> swiper">
                    <div class="swiper-wrapper">
                        <?php foreach ($slider_list as $key => $team):
                            $image = $team['image']['url'];
                            $title = $team['title'];
                            $title_color = $team['title_color'];
                            $sub_title = $team['sub_title'];
                            $sub_title_color = $team['sub_title_color'];
                            $link = $team['link'];
                            $tags = !empty($link['url'])?'a':'div';
                            $href = !empty($link['url'])?'href="'.$link['url'].'"':'';
                            $target = !empty($link['url']) && $link['is_external'] ? 'target="_blank"' : '';
                            $nofollow = !empty($link['url']) && $link['nofollow'] ? 'rel="nofollow"' : '';

                            $is_video = preg_match('/\.(mp4|webm|ogg)$/i', $image);
                            ?>
                            <div class="swiper-slide slider-item <?php echo $class_unique ?>">
                                <<?php echo $tags ?> class="item-box" style="background: url(<?php echo (!$is_video)?esc_url($image):'' ?>) center/cover no-repeat;" <?php echo $href ?> <?php echo $target ?> <?php echo $nofollow ?>>
                                    <?php if ($is_video): ?>
                                        <video class="background-media" autoplay loop muted playsinline>
                                            <source src="<?php echo esc_url($image) ?>" type="video/mp4">
                                        </video>
                                    <?php endif; ?>
                                    <div class="slider-infor">
                                        <?php if(!empty($sub_title)): ?>
                                            <p class="sub-title" style="color: <?php echo $sub_title_color ?>">
                                                <?php echo $sub_title ?>
                                            </p>
                                        <?php endif; ?>

                                        <?php if(!empty($title)): ?>
                                        <h3 class="title" style="color: <?php echo $title_color ?>">
                                            <?php echo $title ?>
                                        </h3>
                                        <?php endif; ?>
                                        
                                    </div>
                                </<?php echo $tags ?>>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <?php if($pagination == "yes"):?>
                        <div class="swiper-pagination slider-pagination"></div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <style>
            .smo-slider-section <?php echo '.'.$class_unique ?>{
                aspect-ratio: <?php echo $box_width?>/<?php echo $box_height?>;
                max-width: <?php echo $box_width?>px;
            }
            @media(max-width: 1024px){
                .smo-slider-section <?php echo '.'.$class_unique ?>{
                    aspect-ratio: <?php echo $box_width_tl?>/<?php echo $box_height_tl?>;
                    max-width: <?php echo $box_width_tl?>px;
                }
            }
            @media(max-width: 767px){
                .smo-slider-section <?php echo '.'.$class_unique ?>{
                    aspect-ratio: <?php echo $box_width_mb?>/<?php echo $box_height_mb?>;
					max-width: <?php echo $box_width_mb?>px;
                }
            }
        </style>

        <script>
            (function ($) {
                $(document).ready(function () {
                    var swiper = new Swiper(".smo-slider-<?php echo $unique_id; ?>", {
                        slidesPerView: <?php echo $display_team; ?>,
                        spaceBetween: <?php echo $space_between; ?>,
                        loop: <?php echo $loop; ?>,
                        centeredSlides: false,
						speed: 600,
                        breakpoints: {
                            0: {
                                slidesPerView: <?php echo $display_team_mb; ?>,
                                spaceBetween: <?php echo $space_between_mb; ?>,
                            },
                            768: {
                                slidesPerView: <?php echo $display_team_tl; ?>,
                                spaceBetween: <?php echo $space_between_tl; ?>,
                            },
                            1025: {
                                slidesPerView: <?php echo $display_team; ?>,
                                spaceBetween: <?php echo $space_between; ?>,
                            }
                        },
                        pagination: {
                            el: ".slider-pagination",
                        },
                        navigation: {
                            nextEl: ".navigation-next-<?php echo $unique_id; ?>",
                            prevEl: ".navigation-prev-<?php echo $unique_id; ?>",
                        },
// 						direction: 'horizontal',
// 						mousewheel: true,
// 						effect: 'slide'
                    });
                });
            })(jQuery)
        </script>
        <?php
        echo ob_get_clean();
    }
}