<?php

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

use Elementor\Group_Control_Box_Shadow;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Border;
use Elementor\Repeater;
use Motiox\Elementor\Motiox_Base_Widgets;
use Elementor\Utils;

class Motiox_Elementor_Image_Vertical extends Motiox_Base_Widgets {
    public function get_name() {
        return 'motiox-image-vertical';
    }

    /**
     * Get widget title.
     *
     * Retrieve testimonial widget title.
     *
     * @return string Widget title.
     * @since  1.0.0
     * @access public
     *
     */
    public function get_title() {
        return esc_html__('Motiox Image Vertical', 'motiox');
    }

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

    public function get_script_depends() {
        return ['motiox-elementor-image-vertical'];
    }

    public function get_categories() {
        return array('motiox-addons');
    }


    /**
     * Register testimonial 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(
            'section_image',
            [
                'label' => esc_html__('Image', 'motiox'),
            ]
        );
        $repeater = new Repeater();
        $repeater->add_control(
            'image_vertical',
            [
                'label'      => esc_html__('Choose Image', 'motiox'),
                'default'    => [
                    'url' => Elementor\Utils::get_placeholder_image_src(),
                ],
                'type'       => Controls_Manager::MEDIA,
                'show_label' => false,
            ]
        );
        $repeater->add_control(
            'image_name',
            [
                'label'   => esc_html__('Name', 'motiox'),
                'default' => 'Morgan Maxwell',
                'type'    => Controls_Manager::TEXT,
            ]
        );

        $repeater->add_control(
            'image_job',
            [
                'label'   => esc_html__('Job', 'motiox'),
                'default' => 'CEO & Founder',
                'type'    => Controls_Manager::TEXT,
            ]
        );
        $repeater->add_control(
            'image_link',
            [
                'label'       => esc_html__('Link to', 'motiox'),
                'type'        => Controls_Manager::URL,
                'dynamic'     => [
                    'active' => true,
                ],
                'placeholder' => esc_html__('https://your-link.com', 'motiox'),
            ]
        );
        $this->add_control(
            'image_team',
            [
                'label'       => esc_html__('Items', 'motiox'),
                'type'        => Controls_Manager::REPEATER,
                'fields'      => $repeater->get_controls(),
                'title_field' => '{{{ image_name }}}',
            ]
        );
        $this->add_group_control(
            Group_Control_Image_Size::get_type(),
            [
                'name'      => 'image_vertical', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `testimonial_image_size` and `testimonial_image_custom_dimension`.
                'default'   => 'full',
                'separator' => 'none',
            ]
        );
        $this->end_controls_section();
        $this->start_controls_section(
            'section_style_image_vertical_wrapper',
            [
                'label' => esc_html__('Wrapper', 'motiox'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'image_vertical_background_color',
            [
                'label'     => esc_html__('Background Color', 'motiox'),
                'type'      => Controls_Manager::COLOR,
                'default'   => '',
                'selectors' => [
                    '{{WRAPPER}} .elementor-image-team-item' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'        => 'image_vertical_border',
                'placeholder' => '1px',
                'default'     => '1px',
                'selector'    => '{{WRAPPER}} .elementor-image-team-wrapper',
                'separator'   => 'before',
            ]
        );
        $this->add_responsive_control(
            'image_vertical_border_radius',
            [
                'label'      => esc_html__('Border Radius', 'motiox'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .elementor-image-team-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_responsive_control(
            'image_vertical_wrapper_padding_inner',
            [
                'label'      => esc_html__('Padding', 'motiox'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .team-list .team-wrapper-main .team-content .team-flex' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'image_vertical_wrapper_margin',
            [
                'label'      => esc_html__('Margin', 'motiox'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .elementor-image-team-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();
        $this->start_controls_section(
            'section_style_vertical_image',
            [
                'label' => esc_html__('Image', 'motiox'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_responsive_control(
            'vertical_width_img',
            [
                'label'      => esc_html__('Width', 'motiox'),
                'type'       => Controls_Manager::SLIDER,
                'range'      => [
                    'px' => [
                        'min' => 10,
                        'max' => 500,
                    ],
                    'vw' => [
                        'min' => 1,
                        'max' => 100,
                    ],
                ],
                'size_units' => ['px', '%', 'vw'],
                'selectors'  => [
                    '{{WRAPPER}} .team-list .team-wrapper-main .image-interaction .image-25vw'           => 'width: {{SIZE}}{{UNIT}}',
                ],
            ]
        );

        $this->add_responsive_control(
            'vertical_height_img',
            [
                'label'      => esc_html__('Height', 'motiox'),
                'type'       => Controls_Manager::SLIDER,
                'range'      => [
                    'px' => [
                        'min' => 10,
                        'max' => 500,
                    ],
                    'vh' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default'    => [
                    'unit' => '%',
                ],
                'size_units' => ['px', 'vh', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .team-list .team-wrapper-main .image-interaction .image-25vw ' => 'padding-bottom: {{SIZE}}{{UNIT}}',
                ],
            ]
        );
        $this->add_responsive_control(
            'vertical_left_img',
            [
                'label'      => esc_html__('Position', 'motiox'),
                'type'       => Controls_Manager::SLIDER,
                'range'      => [
                    'px' => [
                        'min' => 10,
                        'max' => 500,
                    ],
                    'vh' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default'    => [
                    'unit' => '%',
                ],
                'size_units' => ['%', 'px', 'vh'],
                'selectors'  => [
                    '{{WRAPPER}} .team-list .team-wrapper-main .image-interaction .image-25vw ' => 'left: {{SIZE}}{{UNIT}}',
                ],
            ]
        );
        $this->end_controls_section();
        $this->start_controls_section(
            'section_style_image_vertical',
            [
                'label' => esc_html__('Content', 'motiox'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'image_team_name',
            [
                'type'      => Controls_Manager::HEADING,
                'label'     => esc_html__('Name', 'motiox'),
                'separator' => 'before',
            ]
        );
        $this->add_control(
            'name_image_vertical_color',
            [
                'label'     => esc_html__('Color', 'motiox'),
                'type'      => Controls_Manager::COLOR,
                'default'   => '',
                'selectors' => [
                    '{{WRAPPER}} .team-list .team-wrapper-main .team-content .team-flex .team-job-name .team-name' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .team-list .team-wrapper-main .team-content .team-flex .team-job-name .team-name a' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'name_image_vertical__typography',
                'selector' => '{{WRAPPER}} .team-list .team-wrapper-main .team-content .team-flex .team-job-name .team-name',
            ]
        );
        $this->add_control(
            'job_image_vertical',
            [
                'type'      => Controls_Manager::HEADING,
                'label'     => esc_html__('Job', 'motiox'),
                'separator' => 'before',
            ]
        );
        $this->add_responsive_control(
            'image_vertical_width_job',
            [
                'label'      => esc_html__('Width', 'motiox'),
                'type'       => Controls_Manager::SLIDER,
                'range'      => [
                    'px' => [
                        'min' => 10,
                        'max' => 500,
                    ],
                    'vw' => [
                        'min' => 1,
                        'max' => 100,
                    ],
                ],
                'size_units' => ['px', '%', 'vw'],
                'selectors'  => [
                    '{{WRAPPER}} .team-list .team-wrapper-main .team-content .team-flex .team-job-name .team-job'           => 'width: {{SIZE}}{{UNIT}}',
                ],
            ]
        );
        $this->add_control(
            'job_image_vertical_color',
            [
                'label'     => esc_html__('Color', 'motiox'),
                'type'      => Controls_Manager::COLOR,
                'default'   => '',
                'selectors' => [
                    '{{WRAPPER}} .team-list .team-wrapper-main .team-content .team-flex .team-job-name .team-job' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'job_image_vertical__typography',
                'selector' => '{{WRAPPER}} .team-list .team-wrapper-main .team-content .team-flex .team-job-name .team-job',
            ]
        );
        $this->end_controls_section();

    }
    protected function render() {
        $settings = $this->get_settings_for_display();
        if (!empty($settings['image_team']) && is_array($settings['image_team'])) {
            $this->add_render_attribute('wrapper', 'class', 'elementor-image-team-wrapper team-list empty');
            // Item
            $this->add_render_attribute('item', 'class', 'elementor-image-team-item team-wrapper-main');
            ?>
            <div <?php $this->print_render_attribute_string('wrapper'); // WPCS: XSS ok. ?>>
                <?php foreach ($settings['image_team'] as $item): ?>
                       <div <?php $this->print_render_attribute_string('item'); // WPCS: XSS ok. ?>>
                           <div class="team-content">
                               <div class="team-flex for-services">
                                   <div class="team-job-name">
                                       <div class="team-job">
                                           <div class="job-hover"><?php echo esc_html($item['image_job']); ?></div>
                                           <div class="job"><?php echo esc_html($item['image_job']); ?></div>
                                       </div>
                                       <div class="team-name">
                                           <?php
                                           $item_name_html = $item['image_name'];
                                           if (!empty($item['link']['url'])) :
                                               $item_name_html = '<a href="' . esc_url($item['link']['url']) . '">' . esc_html($item_name_html) . '</a>';
                                           endif;
                                           printf($item_name_html);
                                           ?>
                                       </div>
                                   </div>
                               </div>
                           </div>
                           <div class="image-interaction left-sticky">
                               <div class="image-25vw">
                                   <?php
                                   if ( isset( $item['image_vertical'] ) && ! empty( $item['image_vertical']['url'] ) ) {
                                       $image_url = $item['image_vertical']['url'];
                                       echo '<img src="' . esc_url( $image_url ) . '" alt="" class= "image-absolute">';
                                   }
                                   ?>
                               </div>
                           </div>
                       </div>
                <?php endforeach; ?>
            </div>
            <?php
        }
    }
}
$widgets_manager->register(new Motiox_Elementor_Image_Vertical());