<?php

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

use Elementor\Controls_Manager;
use Elementor\Repeater;
use Motiox\Elementor\Motiox_Base_Widgets;
use Elementor\Group_Control_Image_Size;

class Motiox_Widget_Cirle_Animation extends Motiox_Base_Widgets {

    public function get_name() {
        return 'motiox-circle-animation';
    }

    public function get_title() {
        return __('Motiox Circle Animation', 'motiox');
    }
    public function get_script_depends() {
        return ['motiox-elementor-circle-animation'];
    }
    public function get_icon() {
        return 'eicon-icon-box';
    }

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


    protected function register_controls() {
        $this->start_controls_section(
            'section_image_animation',
            [
                'label' => esc_html__('Circle Animation', 'motiox'),
            ]
        );
        $repeater = new Repeater();
        $repeater->add_control(
            'arround_image',
            [
                'label'      => esc_html__('Choose Image', 'motiox'),
                'default'    => [
                    'url' => Elementor\Utils::get_placeholder_image_src(),
                ],
                'type'       => Controls_Manager::MEDIA,
                'show_label' => false,
            ]
        );

        $repeater->add_responsive_control(
            'vertical_left_img',
            [
                'label'      => esc_html__('Left', 'motiox'),
                'type'       => Controls_Manager::SLIDER,
                'range'      => [
                    'px' => [
                        'min' => 10,
                        'max' => 500,
                    ],
                    'vh' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'size_units' => ['%', 'px', 'vh'],
                'selectors'  => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}.circle-two .circle-two-item' => 'left: {{SIZE}}{{UNIT}} !important',
                ],
            ]
        );
        $repeater->add_responsive_control(
            'vertical_right_img',
            [
                'label'      => esc_html__('Right', 'motiox'),
                'type'       => Controls_Manager::SLIDER,
                'range'      => [
                    'px' => [
                        'min' => 10,
                        'max' => 500,
                    ],
                    'vh' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'size_units' => ['%', 'px', 'vh'],
                'selectors'  => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}.circle-two .circle-two-item' => 'right: {{SIZE}}{{UNIT}} !important',
                ],
            ]
        );

        $repeater->add_responsive_control(
            'vertical_top_img',
            [
                'label'      => esc_html__('Top', 'motiox'),
                'type'       => Controls_Manager::SLIDER,
                'range'      => [
                    'px' => [
                        'min' => 10,
                        'max' => 500,
                    ],
                    'vh' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],

                'size_units' => ['%', 'px', 'vh'],
                'selectors'  => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}.circle-two .circle-two-item' => 'top: {{SIZE}}{{UNIT}} !important',
                ],
            ]
        );
        $repeater->add_responsive_control(
            'vertical_bottom_img',
            [
                'label'      => esc_html__('Bottom', 'motiox'),
                'type'       => Controls_Manager::SLIDER,
                'range'      => [
                    'px' => [
                        'min' => 10,
                        'max' => 500,
                    ],
                    'vh' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],

                'size_units' => ['%', 'px', 'vh'],
                'selectors'  => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}.circle-two .circle-two-item' => 'bottom: {{SIZE}}{{UNIT}} !important',
                ],
            ]
        );


        $this->add_control(
            'circlebox',
            [
                'label'       => esc_html__('Items', 'motiox'),
                'type'        => Controls_Manager::REPEATER,
                'fields'      => $repeater->get_controls(),
                'max_items'   => 4,
            ]
        );

        $this->add_group_control(
            Group_Control_Image_Size::get_type(),
            [
                'name'      => 'arround_image',
                'default'   => 'full',
                'separator' => 'none',
            ]
        );
        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
            $this->add_render_attribute('wrapper', 'class', 'elementor-circlebox-item-wrapper');
            $this->add_render_attribute('container', 'class', 'circle-one');
            // Item
            $this->add_render_attribute('inner', 'class', 'circle-two');
            $this->add_render_attribute('item', 'class', 'circle-two-item');
            //$this->add_render_attribute('details', 'class', 'details');
            ?>
            <div <?php $this->print_render_attribute_string('wrapper'); // WPCS: XSS ok. ?>>

                 <div <?php $this->print_render_attribute_string('container'); ?>>

                 </div>

                <div <?php $this->print_render_attribute_string('inner'); ?>>
                    <?php foreach ($settings['circlebox'] as $index => $circlebox):
                        $team_image_style = '';

                        $left = !empty($circlebox['vertical_left_img']['size']) && !empty($circlebox['vertical_left_img']['unit'])
                            ? $circlebox['vertical_left_img']['size'] . $circlebox['vertical_left_img']['unit']
                            : '';
                        $right = !empty($circlebox['vertical_right_img']['size']) && !empty($circlebox['vertical_right_img']['unit'])
                            ? $circlebox['vertical_right_img']['size'] . $circlebox['vertical_right_img']['unit']
                            : '';
                        $top = !empty($circlebox['vertical_top_img']['size']) && !empty($circlebox['vertical_top_img']['unit'])
                            ? $circlebox['vertical_top_img']['size'] . $circlebox['vertical_top_img']['unit']
                            : '';
                        $bottom = !empty($circlebox['vertical_bottom_img']['size']) && !empty($circlebox['vertical_bottom_img']['unit'])
                            ? $circlebox['vertical_bottom_img']['size'] . $circlebox['vertical_bottom_img']['unit']
                            : '';
                        if ($left) {
                            $team_image_style .= 'left: ' . $left . '; ';
                        }
                        if ($right) {
                            $team_image_style .= 'right: ' . $right . '; ';
                        }
                        if ($top) {
                            $team_image_style .= 'top: ' . $top . '; ';
                        }
                        if ($bottom) {
                            $team_image_style .= 'bottom: ' . $bottom . '; ';
                        }

                        if ($team_image_style) {
                            $this->add_render_attribute('team_image_' . $index, 'style', $team_image_style);
                        } else {
                            $this->remove_render_attribute('team_image_' . $index, 'style');
                        }
                        ?>
                        <div <?php $this->print_render_attribute_string('item'); ?>  <?php $this->print_render_attribute_string('team_image_' . $index); ?>>
                                <?php $this->render_image($settings, $circlebox); ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>

            <?php
        }

    private function render_image($settings, $circlebox) {
        if (!empty($circlebox['arround_image']['url'])) :
            ?>
                <?php
                $circlebox['arround_image_size']             = $settings['arround_image_size'];
                $circlebox['arround_image_custom_dimension'] = $settings['arround_image_custom_dimension'];
                echo Group_Control_Image_Size::get_attachment_image_html($circlebox, 'arround_image');
                ?>
        <?php
        endif;
    }


}
$widgets_manager->register(new Motiox_Widget_Cirle_Animation());