<?php

namespace iKreateThemeElements\Modules\ImageFlipster\Widgets;

// Elementor Classes
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Core\Schemes\Color;
use Elementor\Group_Control_Image_Size;
use Elementor\Utils;
use Elementor\Repeater;

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

class ImageFlipster extends Widget_Base {

    /** Widget Name */
    public function get_name() {
        return 'ikreateThemes-image-flipster';
    }

    /** Widget Title */
    public function get_title() {
        return esc_html__('Image Flipster Carousel', 'business-roy');
    }

    /** Icon */
    public function get_icon() {
        return 'eicon-slider-album';
    }

    public function get_keywords() {
		return [ 'image', 'flipster', 'gallery','photos' ];
	}

	public function get_script_depends() {
		return [ 'imagesloaded' ];
	}

    /** Category */
    public function get_categories() {
        return ['ikreateThemes-elements'];
    }

    /** Controls */
    protected function register_controls() {

        $this->start_controls_section(
            'section_settings', [
                'label' => esc_html__('Layouts', 'business-roy'),
            ]
        );

            $this->add_control(
                'layout', [
                    'label' => esc_html__('Layout', 'business-roy'),
                    'type' => Controls_Manager::SELECT,
                    'label_block' => true,
                    'default' => 'carousel',
                    'options' => [
                        'carousel' => esc_html__('Carousel', 'business-roy'),
                        'coverflow' => esc_html__('Coverflow', 'business-roy')
                    ],
                ]
            );

            $this->add_group_control(
                Group_Control_Image_Size::get_type(), [
                    'name' => 'thumb',
                    'exclude' => ['custom'],
                    'include' => [],
                    'default' => 'full',
                    'separator' => 'after'
                ]
            );

            $this->add_responsive_control(
                'image_height', [
                    'label' => esc_html__('Image Height', 'business-roy'),
                    'type' => Controls_Manager::NUMBER,
                    'min' => 50,
                    'max' => 1000,
                    'step' => 1,
                    'default' => 500,
                ]
            );

            $this->add_responsive_control(
                'image_width', [
                    'label' => esc_html__('Image Width', 'business-roy'),
                    'type' => Controls_Manager::NUMBER,
                    'min' => 50,
                    'max' => 1000,
                    'step' => 1,
                    'default' => 490,
                ]
            );

            $this->add_control(
                'image_stretch', [
                    'label' => esc_html__('Image Stretch', 'business-roy'),
                    'type' => Controls_Manager::SELECT,
                    'label_block' => true,
                    'default' => 'ikthemes-image-stretch-yes',
                    'options' => [
                        'ikthemes-image-stretch-yes' => esc_html__('Yes', 'business-roy'),
                        'ikthemes-image-stretch-no' => esc_html__('No', 'business-roy')
                    ],
                ]
            );

            $this->add_control(
                'image_bg', [
                    'label' => esc_html__('Background', 'business-roy'),
                    'type' => Controls_Manager::COLOR,
                    'condition' => [
                        'image_stretch' => 'ikthemes-image-stretch-no',
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .ikthemes-image-flipster-carousel .ikthemes-image-slide .flip-content' => 'background-color: {{VALUE}}',
                    ],
                ]
            );

            $this->add_control(
                'enable_nav', [
                    'label' => esc_html__('Navigation Buttons', 'business-roy'),
                    'type' => Controls_Manager::SWITCHER,
                    'label_on' => esc_html__('Yes', 'business-roy'),
                    'label_off' => esc_html__('No', 'business-roy'),
                    'return_value' => 'yes',
                    'default' => 'yes',
                    'separator' => 'before'
                ]
            );

            $this->add_control(
                'nav_position', [
                    'label' => esc_html__('Position', 'business-roy'),
                    'type' => Controls_Manager::SELECT,
                    'label_block' => true,
                    'default' => 'ikthemes-nav-side',
                    'options' => [
                        'ikthemes-nav-bottom' => esc_html__('Bottom Center', 'business-roy'),
                        'ikthemes-nav-side' => esc_html__('Middle Side Ways', 'business-roy')
                    ],
                    'condition' => [
                        'enable_nav' => 'yes',
                    ],
                ]
            );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_content', [
                'label' => esc_html__('Content', 'business-roy'),
            ]
        );

            $repeater = new Repeater();

            $repeater->add_control(
                'title', [
                    'label' => esc_html__('Logo Title', 'business-roy'),
                    'type' => Controls_Manager::TEXT,
                    'label_block' => true,
                    'default' => esc_html__('FlipSter Image', 'business-roy'),
                ]
            );

            $repeater->add_control(
                'image', [
                    'label' => esc_html__('Choose Image', 'business-roy'),
                    'type' => Controls_Manager::MEDIA,
                    'default' => [
                        'url' => Utils::get_placeholder_image_src(),
                    ],
                ]
            );

            $repeater->add_control(
                'logo_link', [
                    'label' => esc_html__('Link', 'business-roy'),
                    'type' => Controls_Manager::TEXT,
                    'label_block' => true,
                ]
            );

            $this->add_control(
                'slides',[
                    'label' => esc_html__( 'FlipSter Image List', 'business-roy' ),
                    'type' => Controls_Manager::REPEATER,
                    'show_label' => true,
                    'fields' => $repeater->get_controls(),
                    'default' => [
                        [
                            'image' => Utils::get_placeholder_image_src(),
                            'title' => esc_html__( 'FlipSter Image One', 'business-roy' ),
                            'logo_link' => '#',
                            'link_new_tab' => 'yes',
                        ],
                        [
                            'image' => Utils::get_placeholder_image_src(),
                            'title' => esc_html__( 'FlipSter Image Two', 'business-roy' ),
                            'logo_link' => '#',
                            'link_new_tab' => 'yes',
                        ],
                        [
                            'image' => Utils::get_placeholder_image_src(),
                            'title' => esc_html__( 'FlipSter Image Three', 'business-roy' ),
                            'logo_link' => '#',
                            'link_new_tab' => 'yes',
                        ],
                        [
                            'image' => Utils::get_placeholder_image_src(),
                            'title' => esc_html__( 'FlipSter Image Four', 'business-roy' ),
                            'logo_link' => '#',
                            'link_new_tab' => 'yes',
                        ],
                        [
                            'image' => Utils::get_placeholder_image_src(),
                            'title' => esc_html__( 'FlipSter Image Five', 'business-roy' ),
                            'logo_link' => '#',
                            'link_new_tab' => 'yes',
                        ],
                        [
                            'image' => Utils::get_placeholder_image_src(),
                            'title' => esc_html__( 'FlipSter Image Six', 'business-roy' ),
                            'logo_link' => '#',
                            'link_new_tab' => 'yes',
                        ]
                    ],
                    'title_field' => '{{{ title }}}',
                ]
            );

            $this->add_control(
                'link_new_tab', [
                    'label' => esc_html__('Open Link in New Tab', 'business-roy'),
                    'type' => Controls_Manager::SWITCHER,
                    'label_on' => esc_html__('Yes', 'business-roy'),
                    'label_off' => esc_html__('No', 'business-roy'),
                    'return_value' => 'yes',
                    'default' => 'yes',
                ]
            );

        $this->end_controls_section();


        $this->start_controls_section(
            'navigation_style', [
                'label' => esc_html__('Navigation Button', 'business-roy'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

            $this->start_controls_tabs( 'navigation_tabs' );

                $this->start_controls_tab(
                    'normal_tab', [
                        'label' => esc_html__('Normal', 'business-roy'),
                    ]
                );

                    $this->add_control(
                        'navigation_bg_color', [
                            'label' => esc_html__('Background Color', 'business-roy'),
                            'type' => Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .ikthemes-image-flipster-carousel .flipto-nav a' => 'background-color: {{VALUE}}',
                            ],
                        ]
                    );

                    $this->add_control(
                        'arrow_color', [
                            'label' => esc_html__('Color', 'business-roy'),
                            'type' => Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .ikthemes-image-flipster-carousel .flipto-nav a' => 'color: {{VALUE}}',
                            ],
                        ]
                    );

                $this->end_controls_tab();

                $this->start_controls_tab(
                    'active_tab', [
                        'label' => esc_html__('Hover', 'business-roy'),
                    ]
                );

                    $this->add_control(
                        'navigation_bg_color_hover', [
                            'label' => esc_html__('Background Color', 'business-roy'),
                            'type' => Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .ikthemes-image-flipster-carousel .flipto-nav a:hover' => 'background-color: {{VALUE}}',
                            ],
                        ]
                    );

                    $this->add_control(
                        'arrow_color_hover', [
                            'label' => esc_html__('Color', 'business-roy'),
                            'type' => Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .ikthemes-image-flipster-carousel .flipto-nav a:hover' => 'color: {{VALUE}}',
                            ],
                        ]
                    );

                $this->end_controls_tab();

            $this->end_controls_tabs();

        $this->end_controls_section();
    }


    /** Render Layout */
    protected function render() {

        $settings = $this->get_settings_for_display();
        $style = array();
        $target = $settings['link_new_tab'] ? '_blank' : '_self';
        $style[] = ($settings['image_height']) ? 'height:' . $settings['image_height'] . 'px' : '';
        $style[] = ($settings['image_width']) ? 'width:' . $settings['image_width'] . 'px' : '';
        $nav_class = $settings['enable_nav'] == 'yes' ? '' : 'ikthemes-disable-nav';

        $this->add_render_attribute('wrapper', [
                'class' => ['ikthemes-image-flipster-carousel', esc_attr($settings['image_stretch']), esc_attr($settings['nav_position']), esc_attr($nav_class)],
                'data-style' => $settings['layout'],
            ]
        );
        ?>
        <div <?php echo $this->get_render_attribute_string('wrapper'); ?>>
            <?php
                if ($settings['slides']) {

                    echo '<div class="ikthemes-flipster">';

                        foreach ($settings['slides'] as $item) {

                            $image_url = Group_Control_Image_Size::get_attachment_image_src($item['image']['id'], 'thumb', $settings);
                            if (!$image_url) {
                                $image_url = Utils::get_placeholder_image_src();
                            }
                            $image_html = '<img src="' . esc_attr($image_url) . '" alt="' . esc_attr(\Elementor\Control_Media::get_image_alt($item['image'])) . '" />';

                            echo '<div class="ikthemes-image-slide" style="' . implode(';', $style) . '">';
                            
                                if (!empty($item['logo_link'])) { ?>
                                    <a href="<?php echo esc_url($item['logo_link']) ?>" target="<?php echo esc_attr($target) ?>">
                                        <?php echo $image_html; ?>
                                    </a>
                                <?php } else {

                                echo $image_html;
                            }
                            
                            echo '</div>';
                        }

                    echo '</div>';
                }
            ?>
        </div>
        <?php
    }
}