<?php

//namespace Elementor;

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

use Elementor\Group_Control_Image_Size;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Group_Control_Typography;

class Motiox_Elementor_Timeline extends Elementor\Widget_Base {

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

    public function get_title() {
        return esc_html__('Motiox Timeline', 'motiox');
    }

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

    public function get_script_depends() {
        return array('motiox-elementor-timeline');
    }

    protected function _register_controls() {

        $this->start_controls_section(
            'section_general',
            [
                'label' => esc_html__('General', 'motiox'),
                'tab'   => Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'number_year',
            [
                'label'       => esc_html__('Number', 'motiox'),
                'type'        => Controls_Manager::TEXT,
                'placeholder' => esc_html__('Number...', 'motiox'),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'title',
            [
                'label'       => esc_html__('Title & Content', 'motiox'),
                'type'        => Controls_Manager::TEXT,
                'default'     => esc_html__('Timeline Title', 'motiox'),
                'label_block' => true,
            ]


        );
        $repeater->add_control(
            'content',

            [
                'label'      => esc_html__('Content', 'motiox'),
                'type'       => Controls_Manager::WYSIWYG,
                'default'    => esc_html__('If you remember the very first time you have met with the person you love or your friend, it would be nice to let the person know that you still remember that very moment.', 'motiox'),
                'show_label' => false,
            ]
        );
        $this->add_control(
            'timeline_list',
            [
                'label'       => esc_html__('Timeline Items', 'motiox'),
                'type'        => Controls_Manager::REPEATER,
                'fields'      => $repeater->get_controls(),
                'default'     => [
                    [
                        'number_year' => esc_html__('01', 'motiox'),
                        'title'       => esc_html__('Timeline #1', 'motiox'),
                        'content'     => esc_html__('If you remember the very first time you have met with the person you love or your friend, it would be nice to let the person know that you still remember that very moment.', 'motiox'),
                    ],
                    [
                        'number_year' => esc_html__('02', 'motiox'),
                        'title'       => esc_html__('Timeline #2', 'motiox'),
                        'content'     => esc_html__('If you remember the very first time you have met with the person you love or your friend, it would be nice to let the person know that you still remember that very moment.', 'motiox'),

                    ],
                    [
                        'number_year' => esc_html__('03', 'motiox'),
                        'title'       => esc_html__('Timeline #3', 'motiox'),
                        'content'     => esc_html__('If you remember the very first time you have met with the person you love or your friend, it would be nice to let the person know that you still remember that very moment.', 'motiox'),
                    ],
                ],
                'title_field' => '{{{ title }}}',

            ]
        );

        $this->end_controls_section();


        $this->start_controls_section(
            'number_style',
            [
                'label' => esc_html__('Number', 'motiox'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );


        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'number_typography',
                'selector' => '{{WRAPPER}} .elementor-timeline-wrapper .content-wrap .number-wrap .inner .number',
            ]
        );

        $this->add_responsive_control(
            'timeline_margin',
            [
                'label'      => esc_html__('Margin', 'motiox'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .elementor-timeline-wrapper .item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'title_style',
            [
                'label' => esc_html__('Title', 'motiox'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'title',
            [
                'label'     => esc_html__('Title', 'motiox'),
                'type'      => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_control(
            'title_color',
            [
                'label'     => esc_html__('Title Color', 'motiox'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .title' => 'color: {{VALUE}};',
                ],

            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'title_typography',
                'selector' => '{{WRAPPER}} .title',
            ]
        );
        $this->add_responsive_control(
            'title_spacing_item',
            [
                'label'      => esc_html__('Spacing', 'motiox'),
                'type'       => Controls_Manager::SLIDER,
                'range'      => [
                    'px' => [
                        'min' => 0,
                        'max' => 200,
                    ],
                ],
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();

        $this->start_controls_section(
            'content_style',
            [
                'label' => esc_html__('Content', 'motiox'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'content_color',
            [
                'label'     => esc_html__('Color', 'motiox'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .description' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'content_typography',
                'selector' => '{{WRAPPER}} .description',
            ]
        );
        $this->end_controls_section();
    }


    protected function render() {
        $settings = $this->get_settings_for_display();
        $number            = 0;
        ?>
        <div class="elementor-timeline-wrapper">
            <span class="default-line"></span>
            <span class="draw-line" style="height: 517px;"></span>
            <?php foreach ($settings['timeline_list'] as $item):
                $number++;
                ?>
                <div class="item">
                    <div class="content-wrap">
                        <div class="inner">
                            <div class="number-wrap">
                                <div class="inner">
                                    <span class="number"><?php echo sprintf("%02d", $number) ?></span>
                                </div>
                            </div>
                            <div class="content">
                                <?php printf('<h3 class="title">%s</h3><div class="description">%s</div>', $item['title'], $item['content']); ?>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <?php
    }
}

$widgets_manager->register_widget_type(new Motiox_Elementor_Timeline());