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

class AddonNest_Slider_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'addonnest-slider';
    }

    public function get_title() {
        return __( 'AddonNest Slider', 'addonnest' );
    }

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

    public function get_categories() {
        return [ 'addonnest-elementor' ];
    }

    protected function _register_controls() {
        $this->start_controls_section(
            'section_slides',
            [
                'label' => __( 'Slides', 'addonnest' ),
            ]
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'slide_image',
            [
                'label' => __( 'Slide Image', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater->add_control(
            'content_position',
            [
                'label' => __( 'Content Position', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'center',
                'options' => [
                    'left' => __( 'Left', 'addonnest' ),
                    'center' => __( 'Center', 'addonnest' ),
                    'right' => __( 'Right', 'addonnest' ),
                ],
            ]
        );

        $repeater->add_control(
            'top_title',
            [
                'label' => __( 'Top Title', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __( 'Welcome to Shareat restaurant', 'addonnest' ),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'title',
            [
                'label' => __( 'Title', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __( 'Let Enjoy The Rhym Of Fooday Dishes', 'addonnest' ),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'button_text',
            [
                'label' => __( 'Button Text', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __( 'Our menu', 'addonnest' ),
            ]
        );

        $repeater->add_control(
            'button_url',
            [
                'label' => __( 'Button URL', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::URL,
                'placeholder' => __( 'https://your-link.com', 'addonnest' ),
                'default' => [
                    'url' => '#',
                ],
            ]
        );

        $repeater->add_control(
            'button_style',
            [
                'label' => __( 'Button Style', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'light',
                'options' => [
                    'light' => __( 'Light', 'addonnest' ),
                    'success' => __( 'Success', 'addonnest' ),
                ],
            ]
        );

        $this->add_control(
            'slides',
            [
                'label' => __( 'Slides', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'top_title' => __( 'Welcome to Shareat restaurant', 'addonnest' ),
                        'title' => __( 'Let Enjoy The Rhym Of Fooday Dishes', 'addonnest' ),
                        'button_text' => __( 'Our menu', 'addonnest' ),
                    ],
                    [
                        'top_title' => __( 'Wish you have good food at our restaurant', 'addonnest' ),
                        'title' => __( 'Experience the food', 'addonnest' ),
                        'button_text' => __( 'Order Now', 'addonnest' ),
                        'button_style' => 'success',
                        'content_position' => 'right',
                    ],
                ],
                'title_field' => '{{{ title }}}',
            ]
        );

        $this->add_control(
            'show_dots',
            [
                'label' => __( 'Show Dots Navigation', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'default' => 'yes',
                'label_on' => __( 'Show', 'addonnest' ),
                'label_off' => __( 'Hide', 'addonnest' ),
            ]
        );

        $this->add_control(
            'show_arrow',
            [
                'label' => __( 'Show Arrow Navigation', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'default' => 'yes',
                'label_on' => __( 'Show', 'addonnest' ),
                'label_off' => __( 'Hide', 'addonnest' ),
            ]
        );

        $this->add_control(
            'autoplay',
            [
                'label' => __( 'Autoplay', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'default' => 'yes',
                'label_on' => __( 'Yes', 'addonnest' ),
                'label_off' => __( 'No', 'addonnest' ),
            ]
        );

        $this->add_control(
            'autoplay_speed',
            [
                'label' => __( 'Autoplay Speed (ms)', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 5000,
                'condition' => [
                    'autoplay' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'animation_speed',
            [
                'label' => __( 'Animation Speed (ms)', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 500,
            ]
        );

        $this->end_controls_section();

        // Style Tab
        $this->start_controls_section(
            'section_slider_style',
            [
                'label' => __( 'Slider', 'addonnest' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'slide_height',
            [
                'label' => __( 'Height', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 100,
                        'max' => 1000,
                    ],
                    'vh' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 600,
                    'unit' => 'px',
                ],
                'tablet_default' => [
                    'unit' => 'px',
                    'size' => 400,
                ],
                'mobile_default' => [
                    'unit' => 'px',
                    'size' => 300,
                ],
                'size_units' => [ 'px', 'vh' ],
                'selectors' => [
                    '{{WRAPPER}} .addonnest_banner__slider' => 'height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .addonnest_banner__slider .slick-initialized .slick-slide' => 'height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .animated' => 'animation-fill-mode: both !important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'background_overlay',
            [
                'label' => __( 'Background Overlay', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .slide__content--headings' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'image_opacity',
            [
                'label' => esc_html__( 'Opacity', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'max' => 1,
                        'min' => 0.10,
                        'step' => 0.01,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .slide .slide__img::before' => 'opacity: {{SIZE}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Content Style
        $this->start_controls_section(
            'section_content_style',
            [
                'label' => __( 'Content', 'addonnest' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'content_background',
            [
                'label' => __( 'Content Background', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .slide__content--headings' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'content_padding',
            [
                'label' => __( 'Content Padding', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .slide__content--headings' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'heading_top_title',
            [
                'label' => __( 'Top Title', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'top_title_color',
            [
                'label' => __( 'Color', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .top-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'top_title_typography',
                'selector' => '{{WRAPPER}} .top-title',
            ]
        );

        $this->add_responsive_control(
            'heading_title',
            [
                'label' => __( 'Title', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'title_color',
            [
                'label' => __( 'Color', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .addonnest_banner__slider .slide__content .title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography',
                'selector' => '{{WRAPPER}} .addonnest_banner__slider .slide__content .title',
            ]
        );

        $this->add_responsive_control(
            'title_margin',
            [
                'label' => __( 'Margin', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .addonnest_banner__slider .slide__content .title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Button Style
        $this->start_controls_section(
            'section_button_style',
            [
                'label' => __( 'Button', 'addonnest' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'button_typography',
                'selector' => '{{WRAPPER}} .button-custom',
            ]
        );

        $this->start_controls_tabs( 'button_tabs' );

        $this->start_controls_tab(
            'button_normal',
            [
                'label' => __( 'Normal', 'addonnest' ),
            ]
        );

        $this->add_responsive_control(
            'button_text_color',
            [
                'label' => __( 'Text Color', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .button-custom' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'button_background_color',
            [
                'label' => __( 'Background Color', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .button-custom' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'button_hover',
            [
                'label' => __( 'Hover', 'addonnest' ),
            ]
        );

        $this->add_responsive_control(
            'button_hover_text_color',
            [
                'label' => __( 'Text Color', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .button-custom:hover' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'button_hover_background_color',
            [
                'label' => __( 'Background Color', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .button-custom:hover' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_responsive_control(
            'button_border_radius',
            [
                'label' => __( 'Border Radius', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .button-custom' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'button_padding',
            [
                'label' => __( 'Padding', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .button-custom' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Arrow Style
        $this->start_controls_section(
            'section_arrow_style',
            [
                'label' => __( 'Arrow', 'addonnest' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_arrow' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'arrow_color',
            [
                'label' => __( 'Arrow Color', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .addonnest_banner__slider .slick-nav:before,' => 'border-color: {{VALUE}};',
                    '{{WRAPPER}} .addonnest_banner__slider .slick-nav:after' => 'border-color: {{VALUE}};',
                    '{{WRAPPER}} .addonnest_banner__slider .slick-nav i:before' => 'background: {{VALUE}};',
                    '{{WRAPPER}} .addonnest_banner__slider .slick-nav i:after' => 'background: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'arrow_hover_color',
            [
                'label' => __( 'Arrow Hover Color', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .addonnest_banner__slider .slick-nav:hover:before,' => 'border-color: {{VALUE}};',
                    '{{WRAPPER}} .addonnest_banner__slider .slick-nav:hover:after' => 'border-color: {{VALUE}};',
                    '{{WRAPPER}} .addonnest_banner__slider .slick-nav:hover i:before' => 'background: {{VALUE}};',
                    '{{WRAPPER}} .addonnest_banner__slider .slick-nav:hover i:after' => 'background: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Dots Style
        $this->start_controls_section(
            'section_dots_style',
            [
                'label' => __( 'Dots', 'addonnest' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_dots' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'dots_color',
            [
                'label' => __( 'Color', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .slider .slick-dots li button:before' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'dots_active_color',
            [
                'label' => __( 'Active Color', 'addonnest' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .slider .slick-dots li.slick-active button:before' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();

        if (empty($settings['slides'])) {
            return;
        }

        $this->add_render_attribute('slider', [
            'class' => 'slider',
            'data-autoplay' => $settings['autoplay'],
            'data-autoplay-speed' => $settings['autoplay_speed'],
            'data-animation-speed' => $settings['animation_speed'],
            'data-show-arrow' => $settings['show_arrow'],
            'data-show-dots' => $settings['show_dots'],
        ]);

        if ('yes' === $settings['show_dots']) {
            $this->add_render_attribute('slider', 'class', 'stick-dots');
        }
        ?>
        <section class="addonnest_banner__slider">
            <div
                <?php
                // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
                echo $this->get_render_attribute_string('slider'); ?>>
                <?php foreach ($settings['slides'] as $index => $slide) :
                    $slide_content_class = 'slide__content';
                    $slide_content_class .= ' slide__content__' . $slide['content_position'];
                    $slide_content_class .= ($index === 0) ? ' slick-active' : '';

                    $button_class = 'btn button-custom';
                    $button_class .= ' ' . ('success' === $slide['button_style'] ? 'btn-success' : 'btn-light');
                    $button_class .= ' ' . ('success' === $slide['button_style'] ? 'text-white' : '');

                    $heading_class = 'slide__content--headings';
                    $heading_class .= ' text-' . $slide['content_position'];
                    ?>
                    <div class="slide">
                        <div class="slide__img">
                            <?php echo wp_kses_post(\Elementor\Group_Control_Image_Size::get_attachment_image_html($slide, 'slide_image')); ?>
                        </div>
                        <div class="<?php echo esc_attr($slide_content_class); ?>">
                            <div class="<?php echo esc_attr($heading_class); ?>">
                                <?php if ($slide['top_title']) : ?>
                                    <p class="animated top-title" data-animation-in="fadeInUp" data-delay-in="0.3">
                                        <?php echo wp_kses_post($slide['top_title']); ?>
                                    </p>
                                <?php endif; ?>

                                <?php if ($slide['title']) : ?>
                                    <h2 class="animated title" data-animation-in="fadeInUp">
                                        <?php echo wp_kses_post($slide['title']); ?>
                                    </h2>
                                <?php endif; ?>

                                <?php if ($slide['button_text']) : ?>
                                    <a
                                        href="<?php echo esc_url($slide['button_url']['url']); ?>"
                                        class="<?php echo esc_attr($button_class); ?> animated"
                                        data-animation-in="fadeInUp">
                                        <?php echo wp_kses_post($slide['button_text']); ?>
                                    </a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </section>
        <?php
    }

    protected function _content_template() {
        ?>
        <#
        if ( settings.slides.length ) {
            var sliderClasses = 'slider';

            if ( 'yes' === settings.show_dots ) {
                sliderClasses += ' stick-dots';
            }
            #>
            <section class="addonnest_banner__slider">
                <div
                    class="{{ sliderClasses }}"
                    data-autoplay="{{ settings.autoplay }}"
                    data-autoplay-speed="{{ settings.autoplay_speed }}"
                    data-animation-speed="{{ settings.animation_speed }}"
                    data-show-dots="{{ settings.show_dots }}"
                    data-show-arrow="{{ settings.show_arrow }}">

                    <# _.each( settings.slides, function( slide ) {
                        var slideContentClass = 'slide__content';
                        slideContentClass += ' slide__content__' + slide.content_position;

                        var buttonClass = 'btn button-custom';
                        buttonClass += ' ' + ( 'success' === slide.button_style ? 'btn-success' : 'btn-light' );
                        buttonClass += ' ' + ( 'success' === slide.button_style ? 'text-white' : '' );

                        var headingClass = 'slide__content--headings';
                        headingClass += ' text-' + slide.content_position;

                        var image = {
                            id: slide.slide_image.id,
                            url: slide.slide_image.url,
                            size: settings.image_size,
                            dimension: settings.image_custom_dimension,
                            model: view.getEditModel()
                        };

                        var image_url = elementor.imagesManager.getImageUrl( image );
                        #>
                        <div class="slide">
                            <div class="slide__img">
                                <img
                                    src="{{ image_url }}"
                                    alt=""
                                    data-lazy="{{ image_url }}"
                                    class="full-image animated"
                                    data-animation-in="zoomInImage" />
                            </div>
                            <div class="{{ slideContentClass }}">
                                <div class="{{ headingClass }}">
                                    <# if ( slide.top_title ) { #>
                                        <p class="animated top-title" data-animation-in="fadeInUp" data-delay-in="0.3">{{ slide.top_title }}</p>
                                    <# } #>

                                    <# if ( slide.title ) { #>
                                        <h2 class="animated title" data-animation-in="fadeInUp">{{ slide.title }}</h2>
                                    <# } #>

                                    <# if ( slide.button_text ) { #>
                                        <a href="{{ slide.button_url.url }}" class="{{ buttonClass }} animated" data-animation-in="fadeInUp">
                                            {{ slide.button_text }}
                                        </a>
                                    <# } #>
                                </div>
                            </div>
                        </div>
                    <# } ); #>
                </div>
            </section>
        <# } #>
        <?php
    }
}

\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new AddonNest_Slider_Widget() );