<?php

namespace King_Addons;

use Elementor\Icons_Manager;
use Elementor\Widget_Base;
use Elementor\Utils;
use Elementor\Repeater;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Typography;
use WP_Query;

class Timeline extends Widget_Base
{
    


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

    public function get_title()
    {
        return esc_html__('Timeline Post/Story', 'king-addons');
    }

    public function get_icon()
    {
        return 'king-addons-icon king-addons-timeline';
    }

    public function get_categories()
    {
        return ['king-addons'];
    }

    public function get_keywords()
    {
        return ['king addons', 'king', 'addons', 'kingaddons', 'king-addons', 'post timeline', 'time',
            'line', 'story', 'telling', 'storytelling', 'content', 'grid', 'scroll', 'events', 'event',
            'blog', 'post', 'posts', 'timeline', 'posts timeline', 'story timeline', 'content timeline'];
    }

    public function get_script_depends()
    {

        return [
            'swiper',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-infinitescroll-infinitescroll',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-aos-aos',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-timeline-script'
        ];
    }

    public function get_style_depends()
    {
        return [
            'swiper',
            'e-swiper',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-button',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-general',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-timing',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-loading',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-aos-aos',
            KING_ADDONS_ASSETS_UNIQUE_KEY . '-timeline-style'
        ];
    }

    public function get_custom_help_url()
    {
        return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
    }

    /** @noinspection PhpMissingFieldTypeInspection */
    public $alt,
        $animation,
        $animation_class,
        $animation_loadmore_left,
        $animation_loadmore_right,
        $background_class,
        $background_image,
        $date_label_key,
        $description_key,
        $extra_label_key,
        $horizontal_inner_class,
        $horizontal_timeline_class,
        $image,
        $item_url_count,
        $my_query,
        $pagination_max_pages,
        $pagination_type,
        $show_readmore,
        $show_year_label,
        $slides_to_show,
        $src,
        $story_date_label,
        $story_extra_label,
        $swiper_class,
        $thumbnail_custom_dimension,
        $thumbnail_size,
        $timeline_description,
        $timeline_fill,
        $timeline_layout,
        $timeline_layout_wrapper,
        $timeline_story_title,
        $timeline_year,
        $title_key,
        $year_key;

    public function king_addons_aos_animation_array()
    {
        return [
            'none' => 'None',
            'fade' => 'Fade',
            'pro-fd' => 'Fade Down (Pro)',
            'pro-fdl' => 'Fade Down Left (Pro)',
            'pro-fdr' => 'Fade Down Right (Pro)',
            'pro-fl' => 'Fade Left (Pro)',
            'pro-fr' => 'Fade Right (Pro)',
            'pro-fu' => 'Fade Up (Pro)',
            'pro-ful' => 'Fade Up Left (Pro)',
            'pro-fur' => 'Fade Up Right (Pro)',
            'pro-fld' => 'Flip Down (Pro)',
            'pro-fll' => 'Flip Left (Pro)',
            'pro-flr' => 'Flip Right (Pro)',
            'pro-flu' => 'Flip Up (Pro)',
            'pro-sld' => 'Slide Down (Pro)',
            'pro-sll' => 'Slide Left (Pro)',
            'pro-slr' => 'Slide Right (Pro)',
            'pro-slu' => 'Slide Up (Pro)',
            'pro-zmi' => 'Zoom In (Pro)',
            'pro-zmid' => 'Zoom In Down (Pro)',
            'pro-zmil' => 'Zoom In Left (Pro)',
            'pro-zmir' => 'Zoom In Right (Pro)',
            'pro-zmiu' => 'Zoom In Up (Pro)',
            'pro-zmo' => 'Zoom Out (Pro)',
            'pro-zmod' => 'Zoom Out Down (Pro)',
            'pro-zmol' => 'Zoom Out Left (Pro)',
            'pro-zmor' => 'Zoom Out Right (Pro)',
            'pro-zmou' => 'Zoom Out Up (Pro)',
        ];
    }

    public function add_control_slides_to_show()
    {
        $this->add_control(
            'slides_to_show',
            [
                'label' => esc_html__('Slides To Show', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => '3',
                'max' => '4',
                'separator' => 'before',
                'render_type' => 'template',
                'condition' => [
                    'timeline_layout' => [
                        'horizontal',
                        'horizontal-bottom'
                    ],
                ]
            ]
        );
    }

    public function add_control_swiper_loop()
    {
        $this->add_control(
            'swiper_loop',
            [
                'label' => sprintf(__('Loop %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
                'type' => Controls_Manager::SWITCHER,
                'separator' => 'before',
                'classes' => 'king-addons-pro-control'
            ]
        );
    }

    public function add_control_group_autoplay()
    {
        $this->add_control(
            'swiper_autoplay',
            [
                'label' => sprintf(__('Autoplay %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
                'type' => Controls_Manager::SWITCHER,
                'separator' => 'before',
                'classes' => 'king-addons-pro-control'
            ]
        );
    }

    public function add_control_show_pagination()
    {
        $this->add_control(
            'show_pagination',
            [
                'label' => sprintf(__('Show Pagination %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
                'type' => Controls_Manager::SWITCHER,
                'separator' => 'before',
                'classes' => 'king-addons-pro-control'
            ]
        );
    }

    public function add_control_posts_per_page()
    {
        $this->add_control(
            'posts_per_page',
            [
                'label' => esc_html__('Posts Per Page', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'render_type' => 'template',
                'default' => 3,
                'max' => 4,
                'min' => 0,
                'label_block' => false,
            ]
        );
    }

    protected function register_controls()
    {

        $this->start_controls_section(
            'general_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Layout', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );


        $this->add_control(
            'timeline_content',
            [
                'label' => esc_html__('Timeline Content', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'custom',
                'options' => [
                    'custom' => esc_html__('Custom', 'king-addons'),
                    'dynamic' => esc_html__('Dynamic', 'king-addons')
                ],
                'render_type' => 'template',
            ]
        );

        $this->add_control(
            'timeline_layout',
            [
                'label' => esc_html__('Layout', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'centered',
                'options' => [
                    'centered' => esc_html__('Zig-Zag', 'king-addons'),
                    'one-sided' => esc_html__('Line Left', 'king-addons'),
                    'one-sided-left' => esc_html__('Line Right', 'king-addons'),
                    'horizontal-bottom' => esc_html__('Line Top - Carousel', 'king-addons'),
                    'horizontal' => esc_html__('Line Bottom - Carousel', 'king-addons'),
                ],
                'render_type' => 'template',
            ]
        );

        $this->add_control(
            'content_layout',
            [
                'label' => esc_html__('Media Position', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'image-top',
                'options' => [
                    'image-top' => esc_html__('Top', 'king-addons'),
                    'image-bottom' => esc_html__('Bottom', 'king-addons'),

                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Image_Size::get_type(),
            [
                'name' => 'king_addons_thumbnail_dynamic',
                'default' => 'full',
                'separator' => 'none',
                'condition' => [
                    'timeline_content' => 'dynamic'
                ]
            ]
        );

        $this->add_control(
            'date_format',
            [
                'label' => esc_html__('Date Format', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'F j, Y',
                'options' => [
                    'F j, Y' => esc_html(date('F j, Y')),
                    'Y-m-d' => esc_html(date('Y-m-d')),
                    'Y, M, D' => esc_html(date('Y, M, D')),
                    'm/d/Y' => esc_html(date('m/d/Y')),
                    'd/m/Y' => esc_html(date('d/m/Y')),
                    'j. F Y' => esc_html(date('j. F y'))
                ],
                'condition' => [
                    'timeline_content' => 'dynamic',
                ]
            ]
        );

        $this->add_control(
            'timeline_fill',
            [
                'label' => esc_html__('Main Line Fill', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
                'label_block' => false,
                'render_type' => 'template',
                'condition' => [
                    'timeline_layout!' => ['horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->add_control(
            'posts_icon',
            [
                'label' => esc_html__('Main Line Icon', 'king-addons'),
                'type' => Controls_Manager::ICONS,
                'skin' => 'inline',
                'label_block' => false,
                'default' => [
                    'value' => 'fab fa-apple',
                    'library' => 'solid',
                ],
                'condition' => [
                    'timeline_content' => 'dynamic'
                ]
            ]
        );

        $this->add_control(
            'show_extra_label',
            [
                'label' => esc_html__('Show Extra Label', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
                'label_block' => false,
                'separator' => 'before',
                'condition' => [
                    'timeline_content' => 'dynamic'
                ]
            ]
        );

        $this->add_control_slides_to_show();

        if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
            $this->add_control(
                'slides_to_show_pro_notice',
                [
                    'type' => Controls_Manager::RAW_HTML,
                    'raw' => 'More than 4 Slides are available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-posts-timeline-settings-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',

                    'content_classes' => 'king-addons-pro-notice',
                    'condition' => [
                        'timeline_layout' => [
                            'horizontal',
                            'horizontal-bottom'
                        ],
                    ]
                ]
            );
        }

        $this->add_control(
            'story_info_gutter',
            [
                'label' => esc_html__('Gutter', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => 5,
                'condition' => [
                    'timeline_layout' => [
                        'horizontal',
                        'horizontal-bottom'
                    ],
                ]
            ]
        );

        $this->add_control(
            'equal_height_slides',
            [
                'label' => esc_html__('Equal Height Slides', 'king-addons'),
                'description' => esc_html__('Make all slides the same height', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'auto-height',
                'default' => 'no',
                'label_block' => false,
                'render_type' => 'template',
                'condition' => [
                    'timeline_layout' => [
                        'horizontal-bottom',
                        'horizontal'
                    ],
                ]
            ]
        );


        $this->add_control_swiper_loop();

        $this->add_control_group_autoplay();

        $this->add_control(
            'swiper_speed',
            [
                'label' => esc_html__('Carousel Speed', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 5000,
                'frontend_available' => true,
                'default' => 500,
                'condition' => [
                    'timeline_layout' => ['horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->add_control(
            'swiper_nav_icon',
            [
                'label' => esc_html__('Carousel Icon', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'fas fa-angle-left',
                'options' => [
                    'fas fa-angle-left' => esc_html__('Angle', 'king-addons'),
                    'fas fa-angle-double-left' => esc_html__('Angle Double', 'king-addons'),
                    'fas fa-arrow-left' => esc_html__('Arrow', 'king-addons'),
                    'fas fa-arrow-alt-circle-left' => esc_html__('Arrow Circle', 'king-addons'),
                    'far fa-arrow-alt-circle-left' => esc_html__('Arrow Circle Alt', 'king-addons'),
                    'fas fa-long-arrow-alt-left' => esc_html__('Long Arrow', 'king-addons'),
                    'fas fa-chevron-left' => esc_html__('Chevron', 'king-addons'),
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal', 'horizontal-bottom'],
                ],

            ]
        );

        $this->add_control(
            'timeline_animation',
            [
                'label' => esc_html__('Entrance Animation', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'fade',
                'separator' => 'before',
                'options' => $this->king_addons_aos_animation_array(),
                'condition' => [
                    'timeline_layout!' => [
                        'horizontal',
                        'horizontal-bottom'
                    ],
                ]
            ]
        );


        Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'timeline', 'timeline_animation', [
            'pro-fu',
            'pro-fd',
            'pro-fl',
            'pro-fr',
            'pro-fur',
            'pro-ful',
            'pro-fdr',
            'pro-fdl',
            'pro-flu',
            'pro-fld',
            'pro-flr',
            'pro-fll',
            'pro-slu',
            'pro-sll',
            'pro-slr',
            'pro-sld',
            'pro-zmi',
            'pro-zmo',
            'pro-zmiu',
            'pro-zmid',
            'pro-zmil',
            'pro-zmir',
            'pro-zmou',
            'pro-zmod',
            'pro-zmol',
            'pro-zmor',
        ]);

        $this->add_control(
            'animation_offset',
            [
                'label' => esc_html__('Animation Offset', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 500,
                'frontend_available' => true,
                'default' => 150,
                'condition' => [
                    'timeline_layout!' => ['horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->add_control(
            'aos_animation_duration',
            [
                'label' => esc_html__('Animation Duration', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 2000,
                'frontend_available' => true,
                'default' => 600,
                'condition' => [
                    'timeline_layout!' => ['horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->add_control_show_pagination();

        $this->end_controls_section();

        $this->start_controls_section(
            'repeater_content_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Timeline Items', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
                'condition' => [
                    'timeline_content' => 'custom'
                ]
            ]
        );

        $repeater = new Repeater();

        $repeater->start_controls_tabs(
            'story_tabs'
        );

        $repeater->start_controls_tab(
            'content_tab',
            [
                'label' => esc_html__('Content', 'king-addons'),
            ]
        );

        $repeater->add_control(
            'main_line_label_heading',
            [
                'label' => esc_html__('Main Line Label', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $repeater->add_control(
            'repeater_show_year_label',
            [
                'label' => esc_html__('Show Label', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Show', 'king-addons'),
                'label_off' => esc_html__('Hide', 'king-addons'),
                'return_value' => 'yes',
                'default' => 'no',
            ]
        );

        $repeater->add_control(
            'repeater_year',
            [
                'label' => esc_html__('Label Text', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => '2022',
                'condition' => [
                    'repeater_show_year_label' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'main_line_label_icon',
            [
                'label' => esc_html__('Main Line Icon', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $repeater->add_control(
            'repeater_story_icon',
            [
                'label' => esc_html__('Select Icon', 'king-addons'),
                'type' => Controls_Manager::ICONS,
                'skin' => 'inline',
                'label_block' => false,
                'default' => [
                    'value' => 'fab fa-apple',
                    'library' => 'solid',
                ],
            ]
        );

        $repeater->add_control(
            'extra_label_heading',
            [
                'label' => esc_html__('Extra Label', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $repeater->add_control(
            'repeater_show_extra_label',
            [
                'label' => esc_html__('Show Extra Label', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
                'label_block' => false,
            ]
        );

        $repeater->add_control(
            'repeater_date_label',
            [
                'label' => esc_html__('Primary Label', 'king-addons'),
                'label_block' => true,
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => '01 Jan 2022',
                'condition' => [
                    'repeater_show_extra_label' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_extra_label',
            [
                'label' => esc_html__('Secondary Label', 'king-addons'),
                'label_block' => true,
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => 'Secondary Label',
                'condition' => [
                    'repeater_show_extra_label' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_media',
            [
                'label' => esc_html__('Display Media', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'image',
                'options' => [
                    'image' => esc_html__('Image', 'king-addons'),
                    'icon' => esc_html__('Icon', 'king-addons'),
                    'video' => esc_html__('Video', 'king-addons'),
                ],
                'render_type' => 'template',
                'separator' => 'before'
            ]
        );

        $repeater->add_group_control(
            Group_Control_Image_Size::get_type(),
            [
                'name' => 'king_addons_thumbnail',
                'default' => 'full',
                'separator' => 'none',
                'condition' => [
                    'repeater_media' => 'image'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_youtube_video_url',
            [
                'label' => esc_html__('Youtube Video Link', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'label_block' => true,
                'default' => '',
                'condition' => [
                    'repeater_media' => 'video',
                ]
            ]
        );

        $repeater->add_control(
            'repeater_image',
            [
                'label' => esc_html__('Choose Image', 'king-addons'),
                'type' => Controls_Manager::MEDIA,
                'dynamic' => [
                    'active' => true
                ],
                'description' => esc_html__('Image Size will not work with default image', 'king-addons'),
                'condition' => [
                    'repeater_media' => 'image'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_timeline_item_icon',
            [
                'label' => esc_html__('Media Icon', 'king-addons'),
                'type' => Controls_Manager::ICONS,
                'skin' => 'inline',
                'label_block' => false,
                'default' => [
                    'value' => 'far fa-star',
                    'library' => 'solid',
                ],
                'condition' => [
                    'repeater_media' => 'icon'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_story_title',
            [
                'label' => esc_html__('Item Title', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => 'Timeline Story',
                'label_block' => true,
                'separator' => 'before'
            ]
        );

        $repeater->add_control(
            'repeater_title_link',
            [
                'label' => esc_html__('Item Title URL', 'king-addons'),
                'type' => Controls_Manager::URL,
                'dynamic' => [
                    'active' => true,
                ],
                'placeholder' => esc_html__('https://example.com', 'king-addons'),
                'default' => [
                    'url' => '',
                    'is_external' => true,
                    'nofollow' => true,
                    'custom_attributes' => '',
                ],
            ]
        );

        $repeater->add_control(
            'repeater_description',
            [
                'label' => esc_html__('Description', 'king-addons'),
                'type' => Controls_Manager::WYSIWYG,
                'default' => 'Add Description Here',
            ]
        );

        $repeater->end_controls_tab();

        $repeater->start_controls_tab(
            'repeater_advanced_tab',
            [
                'label' => esc_html__('Style', 'king-addons'),
            ]
        );

        $repeater->add_control(
            'show_custom_styles',
            [
                'label' => esc_html__('Custom Colors', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'label_block' => false
            ]
        );

        $repeater->add_control(
            'item_main_styles',
            [
                'label' => esc_html__('Item', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'item_bg_color',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#FFF',
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-story-info-vertical.king-addons-data-wrap' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal-bottom-timeline {{CURRENT_ITEM}} .king-addons-story-info' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal {{CURRENT_ITEM}} .king-addons-story-info' => 'background-color: {{VALUE}}'
                ],
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_story_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-story-info' => 'border-color: {{VALUE}} !important;',
                    '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;',
                    '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-right-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;',


                    '{{WRAPPER}} {{CURRENT_ITEM}}.swiper-slide-line-top .king-addons-story-info:before' => 'border-bottom-color: {{VALUE}} !important;',
                    '{{WRAPPER}} {{CURRENT_ITEM}}.swiper-slide-line-bottom .king-addons-story-info:before' => 'border-top-color: {{VALUE}} !important',
                    '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-story-info-vertical:after' => 'border-left-color: {{VALUE}} !important',
                    'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-wrapper .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}} !important; border-left-color: transparent !important;',
                    '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-right-aligned-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}} !important; border-left-color: transparent !important;',
                ],
                'default' => '#5B03FF',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_triangle_color',
            [
                'label' => esc_html__('Triangle', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_triangle_bgcolor',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline {{CURRENT_ITEM}}.king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{icon_bgcolor}}',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}}.king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal {{CURRENT_ITEM}} .king-addons-story-info:before' => 'border-top-color: {{VALUE}} !important',
                    '{{WRAPPER}} .king-addons-horizontal-bottom {{CURRENT_ITEM}} .king-addons-story-info:before' => 'border-bottom-color: {{VALUE}} !important',
                    '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}}.king-addons-left-aligned .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}} !important',
                    '{{WRAPPER}} .king-addons-centered {{CURRENT_ITEM}} .king-addons-one-sided-timeline .king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}} !important; border-left-color: transparent !important;',
                    '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-one-sided-timeline-left .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}} !important',
                ],
                'default' => '#5B03FF',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]

            ]
        );

        $repeater->add_control(
            'repeater_media_styles',
            [
                'label' => esc_html__('Media', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_overlay_bgcolor',
            [
                'label' => esc_html__('Overlay Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-timeline-story-overlay' => 'background-color: {{VALUE}}',
                ],
                'default' => '#0000005E',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_media_item_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#E8E8E8',
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media' => 'border-color: {{VALUE}}',
                ],
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_item_content_styles',
            [
                'label' => esc_html__('Content', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );


        $repeater->add_control(
            'repeater_story_title_color',
            [
                'label' => esc_html__('Title Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-title' => 'color: {{VALUE}} !important;',
                ],
                'default' => '#444444',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_description_color',
            [
                'label' => esc_html__('Description Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-description' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-description p' => 'color: {{VALUE}};'
                ],
                'default' => '#333333',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'item_content_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#E8E8E8',
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-content-wrapper' => 'border-color: {{VALUE}}',
                ],
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_main_line_content_styles',
            [
                'label' => esc_html__('Main Line', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_timeline_icon_color',
            [
                'label' => esc_html__('Icon Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}  .king-addons-icon i' => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}}  .king-addons-icon svg' => 'fill: {{VALUE}}'
                ],
                'default' => '#000',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_icon_timeline_fill_color',
            [
                'label' => esc_html__('Icon Fill Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#fff',
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-change-border-color.king-addons-icon i' => 'color: {{VALUE}} !important;',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-change-border-color.king-addons-icon svg' => 'fill: {{VALUE}} !important;',
                ],
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_timeline_icon_bg_color',
            [
                'label' => esc_html__('Icon Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-icon' => 'background-color: {{VALUE}} !important;',
                ],
                'default' => '#FFFFF',
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'repeater_icon_timeline_background_fill_color',
            [
                'label' => esc_html__('Icon Background Fill Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#FFFFFF',
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-change-border-color.king-addons-icon' => 'background-color: {{VALUE}} !important;',
                ],
                'condition' => [
                    'show_custom_styles' => 'yes'
                ],
            ]
        );

        $repeater->add_control(
            'repeater_icon_border_color',
            [
                'label' => esc_html__('Icon Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#000',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper {{CURRENT_ITEM}} .king-addons-icon' => 'border-color: {{VALUE}}',
                ],
                'condition' => [
                    'show_custom_styles' => 'yes'
                ]
            ]
        );

        $repeater->add_control(
            'item_icon_styles',
            [
                'label' => esc_html__('Media Icon', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'repeater_media' => 'icon',
                ],
            ]
        );

        $repeater->add_control(
            'repeater_timeline_item_icon_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}  .king-addons-timeline-media i' => 'color: {{VALUE}}',
                    '{{WRAPPER}} {{CURRENT_ITEM}}  .king-addons-timeline-media svg' => 'fill: {{VALUE}}'
                ],
                'condition' => [
                    'repeater_media' => 'icon',
                ],
                'default' => '#000',
            ]
        );

        $repeater->add_control(
            'repeater_timeline_item_icon_bgcolor',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media' => 'background-color: {{VALUE}}',
                ],
                'condition' => [
                    'repeater_media' => 'icon',
                ],
                'default' => '#FFF',
            ]
        );

        $repeater->add_responsive_control(
            'repeater_timeline_item_icon_size',
            [
                'label' => esc_html__('Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 600,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 40,
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media i' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media svg' => 'width: {{SIZE}}{{UNIT}};',

                ],
                'condition' => [
                    'repeater_media' => 'icon',
                ]
            ]
        );

        $repeater->add_responsive_control(
            'repeater_timeline_item_icon_padding',
            [
                'label' => esc_html__('Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 20,
                    'right' => 20,
                    'bottom' => 20,
                    'left' => 20,
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [


                    'repeater_media' => 'icon'
                ],
            ]
        );

        $repeater->add_responsive_control(
            'repeater_timeline_item_icon_alignment',
            [
                'label' => esc_html__('Align', 'king-addons'),
                'type' => Controls_Manager::CHOOSE,
                'label_block' => false,
                'default' => 'center',
                'options' => [
                    'left' => [
                        'title' => esc_html__('Start', 'king-addons'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'king-addons'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('End', 'king-addons'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media i' => 'display: block; text-align: {{VALUE}};',
                    '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-timeline-media svg' => 'text-align: {{VALUE}};'
                ],
                'condition' => [

                    'repeater_media' => 'icon'
                ]
            ]
        );

        $repeater->end_controls_tab();

        $repeater->end_controls_tabs();

        $this->add_control(
            'timeline_repeater_list',
            [
                'label' => esc_html__('Content', 'king-addons'),
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'repeater_story_title' => esc_html__('Timeline Item 1', 'king-addons'),
                        'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'),
                        'repeater_year' => esc_html__('2023', 'king-addons'),
                        'repeater_date_label' => esc_html__('January 2023', 'king-addons'),
                        'repeater_extra_label' => esc_html__('Company Established', 'king-addons'),
                        'repeater_story_icon' => [
                            'value' => 'far fa-star',
                            'library' => 'solid'
                        ],
                        'repeater_show_year_label' => 'yes',
                        'repeater_image' => [
                            'url' => Utils::get_placeholder_image_src(),
                            'id' => '',
                        ],
                        'repeater_youtube_video_url' => '',
                        'item_bg_color' => '#f44771',
                        'repeater_triangle_bgcolor' => '#f44771',
                        'repeater_overlay_bgcolor' => '#0000005E',
                        'repeater_story_title_color' => '#FCFCFC',
                        'repeater_description_color' => '#ECECEC',
                        'repeater_timeline_icon_bg_color' => '',
                        'item_content_border_color' => '#E8E8E8',
                        'repeater_timeline_icon_color' => '#E8E8E8',
                        'repeater_icon_timeline_fill_color' => '#f44771',
                        'repeater_icon_timeline_background_fill_color' => '#FFFFFF',
                        'repeater_icon_border_color' => '#E8E8E8'
                    ],
                    [
                        'repeater_story_title' => esc_html__('Timeline Item 2', 'king-addons'),
                        'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'),
                        'repeater_year' => esc_html__('2023', 'king-addons'),
                        'repeater_date_label' => esc_html__('February 2023', 'king-addons'),
                        'repeater_extra_label' => esc_html__('New office in California', 'king-addons'),
                        'repeater_story_icon' => [
                            'value' => 'fas fa-crown',
                            'library' => 'solid'
                        ],
                        'repeater_image' => [
                            'url' => Utils::get_placeholder_image_src(),
                            'id' => '',
                        ],
                        'repeater_youtube_video_url' => '',
                        'item_bg_color' => '#f44771',
                        'repeater_triangle_bgcolor' => '#f44771',
                        'repeater_overlay_bgcolor' => '#0000005E',
                        'repeater_story_title_color' => '#FCFCFC',
                        'repeater_description_color' => '#ECECEC',
                        'repeater_timeline_icon_bg_color' => '',
                        'item_content_border_color' => '#E8E8E8',
                        'repeater_timeline_icon_color' => '#E8E8E8',
                        'repeater_icon_timeline_fill_color' => '#f44771',
                        'repeater_icon_timeline_background_fill_color' => '#FFFFFF',
                        'repeater_icon_border_color' => '#E8E8E8'
                    ],
                    [
                        'repeater_story_title' => esc_html__('Timeline Item 3', 'king-addons'),
                        'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'),
                        'repeater_year' => esc_html__('2023', 'king-addons'),
                        'repeater_date_label' => esc_html__('March 2023', 'king-addons'),
                        'repeater_extra_label' => esc_html__('First Product Launch', 'king-addons'),
                        'repeater_story_icon' => [
                            'value' => 'fas fa-rocket',
                            'library' => 'solid'
                        ],
                        'repeater_show_year_label' => 'yes',
                        'repeater_image' => [
                            'url' => Utils::get_placeholder_image_src(),
                            'id' => '',
                        ],
                        'repeater_youtube_video_url' => '',
                        'item_bg_color' => '#f44771',
                        'repeater_triangle_bgcolor' => '#f44771',
                        'repeater_overlay_bgcolor' => '#0000005E',
                        'repeater_story_title_color' => '#FCFCFC',
                        'repeater_description_color' => '#FDFDFD',
                        'item_content_border_color' => '#E8E8E8',
                        'repeater_timeline_icon_bg_color' => '',
                        'repeater_timeline_icon_color' => '#E8E8E8',
                        'repeater_icon_timeline_fill_color' => '#f44771',
                        'repeater_icon_timeline_background_fill_color' => '#FFFFFF',
                        'repeater_icon_border_color' => '#E8E8E8'
                    ],
                    [
                        'repeater_story_title' => esc_html__('Timeline Item 4', 'king-addons'),
                        'repeater_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo.', 'king-addons'),
                        'repeater_year' => esc_html__('2023', 'king-addons'),
                        'repeater_date_label' => esc_html__('April 2023', 'king-addons'),
                        'repeater_extra_label' => esc_html__('Entering Stock Market', 'king-addons'),
                        'repeater_story_icon' => [
                            'value' => 'fas fa-bolt',
                            'library' => 'solid'
                        ],
                        'repeater_image' => [
                            'url' => Utils::get_placeholder_image_src(),
                            'id' => '',
                        ],
                        'repeater_youtube_video_url' => '',
                        'item_bg_color' => '#f44771',
                        'repeater_triangle_bgcolor' => '#f44771',
                        'repeater_overlay_bgcolor' => '#0000005E',
                        'repeater_story_title_color' => '#FCFCFC',
                        'repeater_description_color' => '#F3F3F3',
                        'item_content_border_color' => '#E8E8E8',
                        'repeater_timeline_icon_bg_color' => '',
                        'repeater_timeline_icon_color' => '#E8E8E8',
                        'repeater_icon_timeline_fill_color' => '#f44771',
                        'repeater_icon_timeline_background_fill_color' => '#FFFFFF',
                        'repeater_icon_border_color' => '#E8E8E8'
                    ],
                ],
                'title_field' => '{{ repeater_story_title }}',
            ]
        );

        if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
            $this->add_control(
                'timeline_repeater_pro_notice',
                [
                    'type' => Controls_Manager::RAW_HTML,
                    'raw' => 'More than 4 Slides are available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-posts-timeline-settings-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',

                    'content_classes' => 'king-addons-pro-notice',
                ]
            );
        }

        $this->end_controls_section();


        $post_types = $this->add_option_query_source();


        $post_taxonomies = Core::getCustomTypes('tax', false);

        $this->start_controls_section(
            'query_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Query', 'king-addons'),
                'condition' => [
                    'timeline_content' => 'dynamic',
                ]
            ]
        );

        $this->add_control(
            'timeline_post_types',
            [
                'label' => esc_html__('Post Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'post',
                'label_block' => false,
                'options' => $post_types,
            ]
        );

        Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'timeline', 'timeline_post_types', ['pro-rl']);

        if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
            $this->add_control(
                'query_source_cpt_pro_notice',
                [
                    'raw' => 'This option is available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-grid-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
                    'type' => Controls_Manager::RAW_HTML,
                    'content_classes' => 'king-addons-pro-notice',
                    'condition' => [
                        'timeline_post_types!' => ['post', 'page', 'related', 'current', 'pro-rl'],
                    ]
                ]
            );
        }

        $this->add_control(
            'query_selection',
            [
                'label' => esc_html__('Selection', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'dynamic',
                'options' => [
                    'dynamic' => esc_html__('Dynamic', 'king-addons'),
                    'manual' => esc_html__('Manual', 'king-addons'),
                ],
                'condition' => [
                    'timeline_post_types!' => ['current', 'related'],
                ],
            ]
        );

        $this->add_control(
            'query_tax_selection',
            [
                'label' => esc_html__('Selection Taxonomy', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'category',
                'options' => $post_taxonomies,
                'condition' => [
                    'timeline_post_types' => 'related',
                ],
            ]
        );


        foreach ($post_types as $slug => $title) {
            $this->add_control(
                'query_manual_' . $slug,
                [
                    'label' => esc_html__('Select ', 'king-addons') . $title,
                    'type' => 'king-addons-ajax-select2',
                    'options' => 'ajaxselect2/getPostsByPostType',
                    'query_slug' => $slug,
                    'multiple' => true,
                    'label_block' => true,
                    'condition' => [
                        'timeline_post_types' => $slug,
                        'query_selection' => 'manual',
                    ],
                    'separator' => 'before',
                ]
            );
        }

        $this->add_control(
            'query_author',
            [
                'label' => esc_html__('Authors', 'king-addons'),
                'type' => 'king-addons-ajax-select2',
                'options' => 'ajaxselect2/getUsers',
                'multiple' => true,
                'label_block' => true,
                'separator' => 'before',
                'condition' => [
                    'timeline_post_types!' => ['current', 'related'],
                    'query_selection' => 'dynamic',
                ],
            ]
        );

        foreach ($post_taxonomies as $slug => $title) {
            global $wp_taxonomies;
            $post_type = '';
            if (isset($wp_taxonomies[$slug]->object_type[0])) {
                $post_type = $wp_taxonomies[$slug]->object_type[0];
            }

            $this->add_control(
                'query_taxonomy_' . $slug,
                [
                    'label' => $title,
                    'type' => 'king-addons-ajax-select2',
                    'options' => 'ajaxselect2/getTaxonomies',
                    'query_slug' => $slug,
                    'multiple' => true,
                    'label_block' => true,
                    'condition' => [
                        'timeline_post_types' => $post_type,
                        'query_selection' => 'dynamic',
                    ],
                ]
            );
        }

        foreach ($post_types as $slug => $title) {
            $this->add_control(
                'query_exclude_' . $slug,
                [
                    'label' => esc_html__('Exclude ', 'king-addons') . $title,
                    'type' => 'king-addons-ajax-select2',
                    'options' => 'ajaxselect2/getPostsByPostType',
                    'query_slug' => $slug,
                    'multiple' => true,
                    'label_block' => true,
                    'condition' => [
                        'timeline_content' => 'dynamic',
                        'timeline_post_types' => $slug,
                        'timeline_post_types!' => ['current', 'related'],
                        'query_selection' => 'dynamic',
                    ],
                ]
            );
        }

        $this->add_control_posts_per_page();

        if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
            $this->add_control(
                'posts_per_page_pro_notice',
                [
                    'type' => Controls_Manager::RAW_HTML,
                    'raw' => 'More than 4 Posts are available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-posts-timeline-settings-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',

                    'content_classes' => 'king-addons-pro-notice',
                ]
            );
        }

        $this->add_control(
            'order_posts',
            [
                'label' => esc_html__('Order By', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'date',
                'label_block' => false,
                'options' => [
                    'title' => esc_html__('Title', 'king-addons'),
                    'date' => esc_html__('Date', 'king-addons'),
                ],
                'condition' => [
                    'query_selection' => 'dynamic',
                ]
            ]
        );

        $this->add_control(
            'order_direction',
            [
                'label' => esc_html__('Order', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'DESC',
                'label_block' => false,
                'options' => [
                    'ASC' => esc_html__('Ascending', 'king-addons'),
                    'DESC' => esc_html__('Descending', 'king-addons'),
                ],
                'condition' => [
                    'query_selection' => 'dynamic',
                ]
            ]
        );

        $this->add_control(
            'query_not_found_text',
            [
                'label' => esc_html__('Not Found Text', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => 'No Posts Found!',
                'condition' => [


                ]
            ]
        );

        $this->add_control(
            'query_exclude_no_images',
            [
                'label' => esc_html__('Exclude Items without Thumbnail', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'label_block' => false
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'content_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
                'condition' => [

                ]
            ]
        );

        $this->add_responsive_control(
            'content_alignment_left',
            [
                'label' => esc_html__('Content Align', 'king-addons'),
                'type' => Controls_Manager::CHOOSE,
                'label_block' => false,
                'default' => 'center',
                'options' => [
                    'left' => [
                        'title' => esc_html__('Left', 'king-addons'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'king-addons'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('Right', 'king-addons'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-story-info' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-left-aligned .king-addons-story-info-vertical' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-left-aligned .king-addons-title-wrap' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-left-aligned .king-addons-description' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-left-aligned .king-addons-inner-date-label' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .swiper-wrapper .king-addons-title-wrap' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .swiper-wrapper .king-addons-description' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .swiper-wrapper .king-addons-inner-date-label' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-title-wrap' => 'text-align: {{VALUE}};',
                ],
                'condition' => [
                    'timeline_layout' => ['centered', 'one-sided-left', 'horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->add_responsive_control(
            'content_alignment',
            [
                'label' => esc_html__('Content Align (Right)', 'king-addons'),
                'type' => Controls_Manager::CHOOSE,
                'label_block' => false,
                'default' => 'center',
                'options' => [
                    'left' => [
                        'title' => esc_html__('Left', 'king-addons'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'king-addons'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('Right', 'king-addons'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-story-info' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-right-aligned .king-addons-title-wrap' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-right-aligned .king-addons-description' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-right-aligned .king-addons-inner-date-label' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-title-wrap' => 'text-align: {{VALUE}};',
                ],
                'condition' => [
                    'timeline_layout' => ['centered', 'one-sided']
                ]
            ]
        );

        $this->add_control(
            'show_overlay',
            [
                'label' => esc_html__('Show Image Overlay', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'no',
                'label_block' => false,
                'separator' => 'before',
                'render_type' => 'template',
                'condition' => [
                    'content_layout' => 'image-top'
                ],
            ]
        );

        $this->add_control(
            'show_on_hover',
            [
                'label' => esc_html__('Show Items on Hover', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'label_block' => false,
                'selectors_dictionary' => [
                    'yes' => 'opacity: 0; transform: translateY(-50%); transition: all 0.5s ease',
                    'no' => 'visibility: visible;',
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-story-info' => '{{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal-timeline .swiper-slide:hover .king-addons-story-info' => 'opacity: 1; transform: translateY(0%);'
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal']
                ]
            ]
        );

        $this->add_control(
            'show_title',
            [
                'label' => esc_html__('Show Title', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
                'label_block' => false,
                'render_type' => 'template',
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'title_overlay',
            [
                'label' => esc_html__('Title Over Image', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'no',
                'label_block' => false,
                'render_type' => 'template',
                'condition' => [
                    'show_overlay' => 'yes',
                    'content_layout' => 'image-top',
                    'show_title' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'show_date',
            [
                'label' => esc_html__('Show Date', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
                'label_block' => false,
                'render_type' => 'template',
                'separator' => 'before',
                'condition' => [
                    'timeline_content' => 'dynamic'
                ]
            ]
        );

        $this->add_control(
            'date_overlay',
            [
                'label' => esc_html__('Date Over Image', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'no',
                'label_block' => false,

                'condition' => [
                    'show_overlay' => 'yes',
                    'content_layout' => 'image-top',
                    'timeline_content' => 'dynamic',
                    'show_date' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'show_description',
            [
                'label' => esc_html__('Show Description', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
                'label_block' => false,
                'render_type' => 'template',
                'separator' => 'before',
                'condition' => [

                ]
            ]
        );

        $this->add_control(
            'description_overlay',
            [
                'label' => esc_html__('Description Over Image', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'no',
                'label_block' => false,
                'condition' => [
                    'show_overlay' => 'yes',
                    'content_layout' => 'image-top',
                    'show_description' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'excerpt_count',
            [
                'label' => esc_html__('Excerpt Count', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 200,
                'render_type' => 'template',
                'frontend_available' => true,
                'default' => 10,
                'condition' => [
                    'timeline_content' => 'dynamic',
                    'show_description' => 'yes'
                ]
            ]
        );


        $this->add_control(
            'show_readmore',
            [
                'label' => esc_html__('Show Read More', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
                'label_block' => false,
                'render_type' => 'template',
                'separator' => 'before',
                'condition' => [
                    'timeline_content' => ['dynamic']
                ]
            ]
        );

        $this->add_control(
            'readmore_overlay',
            [
                'label' => esc_html__('Read More Over Image', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'no',
                'label_block' => false,
                'render_type' => 'template',
                'condition' => [
                    'show_overlay' => 'yes',
                    'show_readmore' => 'yes',
                    'content_layout' => 'image-top',
                    'timeline_content' => ['dynamic']
                ]
            ]
        );

        $this->add_responsive_control(
            'readmore_content_alignment_left',
            [
                'label' => esc_html__('Align', 'king-addons'),
                'type' => Controls_Manager::CHOOSE,
                'label_block' => false,
                'default' => 'center',
                'options' => [
                    'left' => [
                        'title' => esc_html__('Left', 'king-addons'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'king-addons'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('Right', 'king-addons'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-left-aligned .king-addons-read-more-wrap' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-left-aligned .king-addons-read-more-button' => 'text-align: center;',
                    '{{WRAPPER}} .swiper-wrapper .king-addons-read-more-wrap' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .swiper-wrapper .king-addons-read-more-button' => 'text-align: center;',
                ],
                'condition' => [
                    'show_readmore' => 'yes',
                    'timeline_content' => ['dynamic'],
                    'timeline_layout!' => 'one-sided',
                ]
            ]
        );

        $this->add_responsive_control(
            'readmore_content_alignment',
            [
                'label' => esc_html__('Align (Right)', 'king-addons'),
                'type' => Controls_Manager::CHOOSE,
                'label_block' => false,
                'default' => 'center',
                'options' => [
                    'left' => [
                        'title' => esc_html__('Left', 'king-addons'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'king-addons'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('Right', 'king-addons'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-right-aligned .king-addons-read-more-wrap' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-right-aligned .king-addons-read-more-button' => 'text-align: center;',
                ],
                'condition' => [
                    'show_readmore' => 'yes',
                    'timeline_content' => ['dynamic'],
                    'timeline_layout' => ['centered', 'one-sided']
                ]
            ]
        );

        $this->add_control(
            'read_more_text',
            [
                'label' => esc_html__('Read More', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => 'Read More',
                'condition' => [
                    'show_readmore' => 'yes',
                    'timeline_content' => 'dynamic'
                ]
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'overlay_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
                'condition' => [
                    'content_layout' => 'image-top',
                    'show_overlay' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'overlay_width',
            [
                'label' => esc_html__('Width', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['%', 'px'],
                'default' => [
                    'unit' => '%',
                    'size' => 100,
                ],
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                    'px' => [
                        'min' => 0,
                        'max' => 500,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'width: {{SIZE}}{{UNIT}};top:calc((100% - {{overlay_height.SIZE}}{{overlay_height.UNIT}})/2);left:calc((100% - {{SIZE}}{{UNIT}})/2);',


                ],
            ]
        );

        $this->add_responsive_control(
            'overlay_height',
            [
                'label' => esc_html__('Height', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['%', 'px'],
                'default' => [
                    'unit' => '%',
                    'size' => 100,
                ],
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                    'px' => [
                        'min' => 0,
                        'max' => 500,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'height: {{SIZE}}{{UNIT}};top:calc((100% - {{SIZE}}{{UNIT}})/2);left:calc((100% - {{overlay_width.SIZE}}{{overlay_width.UNIT}})/2);',


                ],
                'separator' => 'after',
            ]
        );

        $this->add_responsive_control(
            'overlay_content_alignment_vertical',
            [
                'label' => esc_html__('Content Vertical Align', 'king-addons'),
                'type' => Controls_Manager::CHOOSE,
                'label_block' => false,
                'default' => 'center',
                'options' => [
                    'flex-start' => [
                        'title' => esc_html__('Start', 'king-addons'),
                        'icon' => 'eicon-v-align-top',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'king-addons'),
                        'icon' => 'eicon-v-align-middle',
                    ],
                    'flex-end' => [
                        'title' => esc_html__('End', 'king-addons'),
                        'icon' => 'eicon-v-align-bottom',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'justify-content: {{VALUE}};',
                ],
                'condition' => [
                    'show_overlay' => 'yes',
                    'content_layout' => 'image-top'
                ]
            ]
        );

        $this->add_responsive_control(
            'overlay_content_alignment_horizontal',
            [
                'label' => esc_html__('Content Horizontal Align', 'king-addons'),
                'type' => Controls_Manager::CHOOSE,
                'label_block' => false,
                'default' => 'center',
                'options' => [
                    'flex-start' => [
                        'title' => esc_html__('Start', 'king-addons'),
                        'icon' => 'eicon-h-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'king-addons'),
                        'icon' => 'eicon-h-align-center',
                    ],
                    'flex-end' => [
                        'title' => esc_html__('End', 'king-addons'),
                        'icon' => 'eicon-h-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-story-overlay p' => 'display: flex; justify-content: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-timeline-story-overlay div' => 'display: flex; justify-content: {{VALUE}};',
                ],
                'condition' => [
                    'show_overlay' => 'yes',
                    'content_layout' => 'image-top'
                ]
            ]
        );

        $this->add_control(
            'overlay_animation',
            [
                'label' => esc_html__('Select Animation', 'king-addons'),
                'type' => 'king-addons-animations',
                'default' => 'none',
            ]
        );

        Core::renderUpgradeProNotice($this, Controls_Manager::RAW_HTML, 'timeline', 'overlay_animation', ['pro-slrt', 'pro-slxrt', 'pro-slbt', 'pro-sllt', 'pro-sltp', 'pro-slxlt', 'pro-sktp', 'pro-skrt', 'pro-skbt', 'pro-sklt', 'pro-scup', 'pro-scdn', 'pro-rllt', 'pro-rlrt']);

        $this->add_control(
            'overlay_animation_duration',
            [
                'label' => esc_html__('Animation Duration', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => 0.3,
                'min' => 0,
                'max' => 5,
                'step' => 0.1,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'transition-duration: {{VALUE}}s;'
                ],
                'condition' => [
                    'overlay_animation!' => 'none',
                ],
            ]
        );

        $this->add_control(
            'overlay_animation_delay',
            [
                'label' => esc_html__('Animation Delay', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => 0,
                'min' => 0,
                'max' => 5,
                'step' => 0.1,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-animation-wrap:hover .king-addons-timeline-story-overlay' => 'transition-delay: {{VALUE}}s;'
                ],
                'condition' => [
                    'overlay_animation!' => 'none',
                ],
            ]
        );

        $this->add_control(
            'overlay_animation_size',
            [
                'label' => esc_html__('Animation Size', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'small' => esc_html__('Small', 'king-addons'),
                    'medium' => esc_html__('Medium', 'king-addons'),
                    'large' => esc_html__('Large', 'king-addons'),
                ],
                'default' => 'large',
                'condition' => [
                    'overlay_animation!' => 'none',
                ],
            ]
        );

        $this->add_control(
            'overlay_animation_timing',
            [
                'label' => esc_html__('Animation Timing', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => Core::getAnimationTimings(),
                'default' => 'ease-default',
                'condition' => [
                    'overlay_animation!' => 'none',
                ],
            ]
        );

        $this->add_control(
            'overlay_animation_tr',
            [
                'label' => esc_html__('Animation Transparency', 'king-addons'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'return_value' => 'yes',
                'condition' => [
                    'overlay_animation!' => 'none',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'pagination_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pagination', 'king-addons'),
                'tab' => Controls_Manager::TAB_CONTENT,
                'condition' => [
                    'timeline_content' => 'dynamic',
                    'timeline_layout' => ['centered', 'one-sided', 'one-sided-left'],
                    'show_pagination' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'pagination_type',
            [
                'label' => esc_html__('Pagination Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'render_type' => 'template',
                'default' => 'load-more',
                'options' => [
                    'load-more' => esc_html__('Load More'),
                    'infinite-scroll' => esc_html__('Infinite Scroll')
                ],
                'condition' => [
                    'show_pagination' => 'yes',
                ]
            ]
        );

        $this->add_control(
            'pagination_load_more_text',
            [
                'label' => esc_html__('Load More Text', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => esc_html__('Load More', 'king-addons'),
                'condition' => [
                    'pagination_type' => 'load-more',
                ]
            ]
        );

        $this->add_control(
            'pagination_finish_text',
            [
                'label' => esc_html__('Finish Text', 'king-addons'),
                'type' => Controls_Manager::TEXT,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => 'End of Content.',
                'condition' => [
                    'pagination_type' => ['load-more', 'infinite-scroll'],
                ]
            ]
        );

        $this->add_control(
            'pagination_animation',
            [
                'label' => esc_html__('Select Animation', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'loader-1',
                'options' => [
                    'none' => esc_html__('None', 'king-addons'),
                    'loader-1' => esc_html__('Loader 1', 'king-addons'),
                    'loader-2' => esc_html__('Loader 2', 'king-addons'),
                    'loader-3' => esc_html__('Loader 3', 'king-addons'),
                    'loader-4' => esc_html__('Loader 4', 'king-addons'),
                    'loader-5' => esc_html__('Loader 5', 'king-addons'),
                    'loader-6' => esc_html__('Loader 6', 'king-addons'),
                ],
                'condition' => [
                    'pagination_type' => ['load-more', 'infinite-scroll'],
                    'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
                ],
            ]
        );

        $this->add_responsive_control(
            'pagination_alignment',
            [
                'label' => esc_html__('Align', 'king-addons'),
                'type' => Controls_Manager::CHOOSE,
                'label_block' => false,
                'default' => 'center',
                'options' => [
                    'left' => [
                        'title' => esc_html__('Left', 'king-addons'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'king-addons'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('Right', 'king-addons'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination' => 'text-align: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-pagination-loading' => 'text-align: {{VALUE}};',
                ],
                'condition' => [
                    'timeline_content' => ['dynamic'],
                    'timeline_layout' => ['centered', 'one-sided']
                ]
            ]
        );

        $this->end_controls_section();

        Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'posts-timeline', [
            'Add Unlimited Custom Timeline Items',
            'Unlimited Posts Per Page Option',
            'Custom Post Types Support',
            'Unlimited Slides to Show Option',
            'Carousel Autoplay and Autoplay Speed',
            'Pause on Hover',
            'Advanced Pagination - Load More Button or Infinite Scroll Options',
            'Advanced Entrance Animation Options'
        ]);

        $this->start_controls_section(
            'content_styles_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Timeline Items', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'story_bgcolor',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-data-wrap' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-story-info' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-story-info' => 'background-color: {{VALUE}}',
                ],
                'default' => '#FFF',
            ]
        );

        $this->add_control(
            'story_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-story-info' => 'border-color: {{VALUE}} !important;',
                    '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;',
                ],
                'condition' => [
                    'timeline_layout!' => 'centered'
                ],
                'default' => '#5B03FF',
            ]
        );

        $this->add_control(
            'story_border_color_left',
            [
                'label' => esc_html__('Border Color (Left Aligned)', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-left-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}};',
                ],
                'condition' => [
                    'timeline_layout' => 'centered',
                ],
                'default' => '#5B03FF',
            ]
        );

        $this->add_control(
            'story_border_color_right',
            [
                'label' => esc_html__('Border Color (Right Aligned)', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical' => 'border-color: {{VALUE}} !important;',
                ],
                'condition' => [
                    'timeline_layout' => 'centered',
                ],
                'default' => '#5B03FF',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'timeline_item_shadow',
                'selector' => '{{WRAPPER}} .king-addons-story-info',
                'fields_options' => [
                    'box_shadow_type' =>
                        [
                            'default' => 'yes'
                        ],
                    'box_shadow' => [
                        'default' =>
                            [
                                'horizontal' => 0,
                                'vertical' => 0,
                                'blur' => 20,
                                'spread' => 1,
                                'color' => 'rgba(0,0,0,0.1)'
                            ]
                    ]
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'timeline_item_shadow_vertical',
                'selector' => '{{WRAPPER}} .king-addons-story-info-vertical',
                'fields_options' => [
                    'box_shadow_type' =>
                        [
                            'default' => 'yes'
                        ],
                    'box_shadow' => [
                        'default' =>
                            [
                                'horizontal' => 0,
                                'vertical' => 0,
                                'blur' => 20,
                                'spread' => 1,
                                'color' => 'rgba(0,0,0,0.1)'
                            ]
                    ]
                ],
                'condition' => [
                    'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
                ]
            ]
        );


        $this->add_responsive_control(
            'item_distance_from_line',
            [
                'label' => esc_html__('Distance From Line', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'devices' => ['desktop', 'tablet', 'mobile'],
                'default' => [
                    'size' => 40,
                    'unit' => 'px',
                ],
                'tablet_default' => [
                    'size' => 40,
                    'unit' => 'px',
                ],
                'mobile_default' => [
                    'size' => 15,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-data-wrap' => 'margin-right: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-data-wrap' => 'margin-left: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',

                    '{{WRAPPER}} .king-addons-centered .king-addons-left-aligned .king-addons-timeline-entry-inner .king-addons-data-wrap' => 'margin-right: {{SIZE}}px;',
                    '{{WRAPPER}} .king-addons-centered .king-addons-right-aligned .king-addons-timeline-entry-inner .king-addons-data-wrap' => 'margin-left: {{SIZE}}px;',
                    '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-right-aligned .king-addons-timeline-entry-inner .king-addons-data-wrap' => 'margin-left: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',

                    '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-extra-label' => 'margin-left: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',
                    '{{WRAPPER}} .king-addons-one-sided-wrapper .king-addons-one-sided-timeline .king-addons-extra-label' => 'margin-left: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-timeline-entry .king-addons-extra-label' => 'margin-right: calc({{main_line_side_distance.SIZE}}px/2 + {{SIZE}}px);',
                ],
                'condition' => [
                    'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
                ],
                'render_type' => 'template',
                'separator' => 'before'
            ]
        );

        $this->add_responsive_control(
            'item_distance_vertical',
            [
                'label' => esc_html__('Vertical Distance', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 200,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 40,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-centered .king-addons-year-wrap' => 'margin-bottom: {{SIZE}}px;',
                    '{{WRAPPER}} .king-addons-timeline-centered .king-addons-timeline-entry' => 'margin-bottom: {{SIZE}}px;',
                ],
                'condition' => [
                    'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
                ],
                'render_type' => 'template',
            ]
        );

        $this->add_responsive_control(
            'timeline_item_position',
            [
                'type' => Controls_Manager::SLIDER,
                'label' => esc_html__('Item Bottom Distance', 'king-addons'),
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 150,
                    ]
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-story-info' => 'margin-bottom: calc({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_bottom.SIZE}}{{swiper_pagination_progressbar_bottom.UNIT}}) !important;',
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal'],
                    'equal_height_slides!' => 'auto-height',
                ],
                'separator' => 'before'
            ]
        );

        $this->add_responsive_control(
            'timeline_item_position_equal_heights',
            [
                'type' => Controls_Manager::SLIDER,
                'label' => esc_html__('Item Bottom Distance', 'king-addons'),
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 150,
                    ]
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-horizontal-timeline .swiper-slide.swiper-slide-line-bottom.auto-height .king-addons-story-info' => 'margin-bottom: calc({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_bottom.SIZE}}{{swiper_pagination_progressbar_bottom.UNIT}}) !important; max-height: calc(100% - {{SIZE}}{{UNIT}} - {{swiper_pagination_progressbar_bottom.SIZE}}{{swiper_pagination_progressbar_bottom.UNIT}}) !important; height: calc(100% - {{SIZE}}{{UNIT}} - {{swiper_pagination_progressbar_bottom.SIZE}}{{swiper_pagination_progressbar_bottom.UNIT}}) !important;'
                ],
                'condition' => [
                    'timeline_layout' => 'horizontal',
                    'equal_height_slides' => 'auto-height',
                ],
                'separator' => 'before'
            ]
        );

        $this->add_responsive_control(
            'story_info_margin_top',
            [
                'label' => esc_html__('Item Top Distance', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'default' => [
                    'unit' => 'px',
                    'size' => 50,
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 150,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-horizontal-bottom-timeline .king-addons-story-info' => 'margin-top: calc({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_top.SIZE}}{{swiper_pagination_progressbar_top.UNIT}}) !important; max-height: calc(100% - {{SIZE}}{{UNIT}}) !important;',
                    '{{WRAPPER}} .king-addons-horizontal-bottom-timeline .swiper-slide.auto-height .king-addons-story-info' => 'margin-top: calc({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_top.SIZE}}{{swiper_pagination_progressbar_top.UNIT}}) !important; max-height: calc(100% - {{SIZE}}{{UNIT}}) !important; height: calc(100% - ({{SIZE}}{{UNIT}} + {{swiper_pagination_progressbar_top.SIZE}}{{swiper_pagination_progressbar_top.UNIT}})) !important'
                ],
                'separator' => 'before',
                'condition' => [
                    'timeline_layout' => ['horizontal-bottom'],
                ],
            ]
        );

        $this->add_responsive_control(
            'story_padding',
            [
                'label' => esc_html__('Item Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 20,
                    'right' => 20,
                    'bottom' => 20,
                    'left' => 20,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-story-info' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-data-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'condition' => [
                ],
            ]
        );

        $this->add_responsive_control(
            'story_container_padding',
            [
                'label' => esc_html__('Container Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'description' => esc_html__('Apply this option to fix Box Shadow issue.', 'king-addons'),
                'size_units' => ['px'],
                'devices' => ['desktop', 'tablet', 'mobile'],
                'default' => [
                    'top' => 10,
                    'right' => 10,
                    'left' => 10,
                    'bottom' => 10,
                    'unit' => 'px'
                ],
                'tablet_default' => [
                    'top' => 10,
                    'right' => 10,
                    'left' => 10,
                    'bottom' => 10,
                    'unit' => 'px',
                ],
                'mobile_default' => [
                    'top' => 10,
                    'right' => 10,
                    'left' => 10,
                    'bottom' => 10,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-vertical' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-wrapper .swiper-slide' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'timeline_item_border_type',
            [
                'label' => esc_html__('Border Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'none' => esc_html__('None', 'king-addons'),
                    'solid' => esc_html__('Solid', 'king-addons'),
                    'double' => esc_html__('Double', 'king-addons'),
                    'dotted' => esc_html__('Dotted', 'king-addons'),
                    'dashed' => esc_html__('Dashed', 'king-addons'),
                    'groove' => esc_html__('Groove', 'king-addons'),
                ],
                'default' => 'none',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-story-info' => 'border-style: {{VALUE}} !important;',
                    '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-style: {{VALUE}} !important;',
                ],
                'separator' => 'before',
            ]
        );


        $this->add_control(
            'timeline_item_border_width',
            [
                'label' => esc_html__('Border Width', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 1,
                    'right' => 1,
                    'bottom' => 1,
                    'left' => 1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-story-info' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                    '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                    '{{WRAPPER}} .king-addons-horizontal-timeline .king-addons-story-info:before' => 'top: calc( 100% + {{BOTTOM}}{{UNIT}} ) !important;',
                    '{{WRAPPER}} .king-addons-horizontal-bottom-timeline .king-addons-story-info:before' => 'bottom: calc( 100% + {{TOP}}{{UNIT}} ) !important;',
                    '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical.king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;',
                    '{{WRAPPER}} .king-addons-left-aligned .king-addons-story-info-vertical.king-addons-data-wrap:after' => 'left: calc( 100% + {{LEFT}}{{UNIT}} ) !important;'
                ],
                'condition' => [
                    'timeline_layout!' => 'centered',
                    'timeline_item_border_type!' => 'none'
                ],
            ]
        );

        $this->add_control(
            'timeline_item_border_width_left',
            [
                'label' => esc_html__('Border Width (Left Aligned)', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 1,
                    'right' => 1,
                    'bottom' => 1,
                    'left' => 1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-story-info' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                    '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                    'body[data-elementor-device-mode=desktop] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'left: calc( 100% + {{RIGHT}}{{UNIT}} ) !important;',
                    'body[data-elementor-device-mode=tablet] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'left: calc( 100% + {{RIGHT}}{{UNIT}} ) !important;',
                    'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'right: calc( 103% + {{LEFT}}{{UNIT}} ) !important; left: auto !important',
                ],
                'condition' => [
                    'timeline_layout' => 'centered',
                    'timeline_item_border_type!' => 'none'
                ]
            ]
        );

        $this->add_control(
            'timeline_item_border_width_right',
            [
                'label' => esc_html__('Border Width (Right Aligned)', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 1,
                    'right' => 1,
                    'bottom' => 1,
                    'left' => 1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-right-aligned .king-addons-story-info-vertical' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                    'body[data-elementor-device-mode=desktop] {{WRAPPER}} .king-addons-right-aligned .king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;',
                    'body[data-elementor-device-mode=tablet] {{WRAPPER}} .king-addons-right-aligned .king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;',
                    'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-right-aligned .king-addons-data-wrap:after' => 'right: calc( 100% + {{LEFT}}{{UNIT}} ) !important;',
                ],
                'condition' => [
                    'timeline_layout' => 'centered',
                    'timeline_item_border_type!' => 'none'
                ]
            ]
        );

        $this->add_control(
            'story_border_radius',
            [
                'label' => esc_html__('Border Radius', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 5,
                    'right' => 5,
                    'bottom' => 5,
                    'left' => 5,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-story-info' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                    '{{WRAPPER}} .king-addons-story-info-vertical' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],

            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'media_style_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Media', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'width',
            [
                'label' => esc_html__('Image Width', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'default' => [
                    'size' => 100,
                    'unit' => '%',
                ],
                'size_units' => ['%', 'px'],
                'range' => [
                    '%' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                    'px' => [
                        'min' => 10,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-media' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'separator' => 'after',
            ]
        );

        $this->add_control(
            'media_item_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#E8E8E8',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-media' => 'border-color: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'media_item_border_type',
            [
                'label' => esc_html__('Border Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'none' => esc_html__('None', 'king-addons'),
                    'solid' => esc_html__('Solid', 'king-addons'),
                    'double' => esc_html__('Double', 'king-addons'),
                    'dotted' => esc_html__('Dotted', 'king-addons'),
                    'dashed' => esc_html__('Dashed', 'king-addons'),
                    'groove' => esc_html__('Groove', 'king-addons'),
                ],
                'default' => 'none',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-media' => 'border-style: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'media_item_border_width',
            [
                'label' => esc_html__('Border Width', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-media' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'media_item_border_type!' => 'none'
                ]

            ]
        );

        $this->add_control(
            'media_item_radius',
            [
                'label' => esc_html__('Border Radius', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-media' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'media_item_padding',
            [
                'label' => esc_html__('Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-media' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'separator' => 'before'

            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'content_style_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [

                ],
            ]
        );

        $this->add_control(
            'item_content_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#E8E8E8',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-color: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'item_content_border_type',
            [
                'label' => esc_html__('Border Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'none' => esc_html__('None', 'king-addons'),
                    'solid' => esc_html__('Solid', 'king-addons'),
                    'double' => esc_html__('Double', 'king-addons'),
                    'dotted' => esc_html__('Dotted', 'king-addons'),
                    'dashed' => esc_html__('Dashed', 'king-addons'),
                    'groove' => esc_html__('Groove', 'king-addons'),
                ],
                'default' => 'none',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-style: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'item_content_border_width',
            [
                'label' => esc_html__('Border Width', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'item_content_border_type!' => 'none'
                ],
                'separator' => 'before'

            ]
        );

        $this->add_control(
            'item_content_border_radius',
            [
                'label' => esc_html__('Border Radius', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden',
                ],
            ]
        );

        $this->add_responsive_control(
            'content_item_padding',
            [
                'label' => esc_html__('Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-content-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'separator' => 'before',

            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'overlay_style_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'content_layout' => 'image-top',
                    'show_overlay' => 'yes'
                ],
            ]
        );

        $this->add_control(
            'overlay_bgcolor',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-timeline-story-overlay' => 'background-color: {{VALUE}}',
                ],
                'default' => '#0000005E',
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'overlay_background',
                'label' => esc_html__('Background', 'king-addons'),
                'types' => ['classic', 'gradient', 'video'],
                'selector' => '{{WRAPPER}} .king-addons-timeline-story-overlay',
            ]
        );

        $this->add_control(
            'overlay_border_radius',
            [
                'label' => esc_html__('Border Radius', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],

            ]
        );

        $this->add_responsive_control(
            'timeline_overlay_padding',
            [
                'label' => esc_html__('Overlay Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'separator' => 'before',
                'default' => [
                    'top' => 25,
                    'right' => 25,
                    'bottom' => 25,
                    'left' => 25,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-story-overlay' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'show_overlay' => 'yes',
                    'content_layout' => 'image-top',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'title_styles_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );


        $this->add_control(
            'story_title_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-title' => 'color: {{VALUE}}',
                ],
                'default' => '#444444',
            ]
        );

        $this->add_control(
            'story_title_bg_color',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-title-wrap' => 'background-color: {{VALUE}} !important',
                ],
                'default' => '#FFFFFF00',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography',
                'label' => esc_html__('Typography', 'king-addons'),
                'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-title',
            ]
        );

        $this->add_responsive_control(
            'title_padding',
            [
                'label' => esc_html__('Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'title_margin',
            [
                'label' => esc_html__('Margin', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 10,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-title-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'separator' => 'before',
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_date',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Date', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'show_label' => false,
                'condition' => [
                    'timeline_content' => 'dynamic'
                ]
            ]
        );

        $this->add_control(
            'date_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#9C9C9C',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-inner-date-label' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'date_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#E8E8E8',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-inner-date-label' => 'border-color: {{VALUE}}',
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'date_typography',
                'label' => esc_html__('Typography', 'king-addons'),
                'selector' => '{{WRAPPER}} .king-addons-inner-date-label',
                'fields_options' => [
                    'typography' => [
                        'default' => 'custom',
                    ],
                    'font_weight' => [
                        'default' => '300',
                    ],
                    'font_family' => [
                        'default' => 'Roboto',
                    ],
                    'font_size' => [
                        'default' => [
                            'size' => '15',
                            'unit' => 'px',
                        ]
                    ]
                ]
            ]
        );

        $this->add_control(
            'date_border_type',
            [
                'label' => esc_html__('Border Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'none' => esc_html__('None', 'king-addons'),
                    'solid' => esc_html__('Solid', 'king-addons'),
                    'double' => esc_html__('Double', 'king-addons'),
                    'dotted' => esc_html__('Dotted', 'king-addons'),
                    'dashed' => esc_html__('Dashed', 'king-addons'),
                    'groove' => esc_html__('Groove', 'king-addons'),
                ],
                'default' => 'none',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-inner-date-label' => 'border-style: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'date_border_width',
            [
                'label' => esc_html__('Border Width', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 1,
                    'right' => 1,
                    'bottom' => 1,
                    'left' => 1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-inner-date-label' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'date_border_type!' => 'none',
                ],
            ]
        );

        $this->add_responsive_control(
            'date_margin',
            [
                'label' => esc_html__('Margin', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 5,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-inner-date-label' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'description_styles_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Description', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'description_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-description' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-description p' => 'color: {{VALUE}}'
                ],
                'default' => '#808080',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'description_typography_description',
                'label' => esc_html__('Typography', 'king-addons'),
                'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-description',
            ]
        );

        $this->add_control(
            'timeline_list_types',
            [
                'label' => esc_html__('List Style', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'default' => 'none',
                'label_block' => false,
                'description' => esc_html__('Apply this option for WYSIWYG lists', 'king-addons'),
                'options' => [
                    'none' => esc_html__('None', 'king-addons'),
                    'disc' => esc_html__('Disc', 'king-addons'),
                    'decimal' => esc_html__('Number', 'king-addons')
                ],
                'prefix_class' => 'king-addons-list-style-',
            ]
        );

        $this->add_responsive_control(
            'description_margin',
            [
                'label' => esc_html__('Margin', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 5,
                    'right' => 0,
                    'bottom' => 5,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'separator' => 'before',
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'readmore_styles_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Read More', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'timeline_content' => ['dynamic']
                ]
            ]
        );

        $this->start_controls_tabs(
            'readmore_style_tabs'
        );

        $this->start_controls_tab(
            'readmore_style_normal_tab',
            [
                'label' => esc_html__('Normal', 'king-addons'),
            ]
        );

        $this->add_control(
            'readmore_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'color: {{VAlUE}}',
                ],
                'default' => '#fff',
            ]
        );

        $this->add_control(
            'readmore_bg_color',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'background-color: {{VAlUE}}',
                ],
                'default' => '#5B03FF',
            ]
        );

        $this->add_control(
            'readmore_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#E8E8E8',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-read-more-button' => 'border-color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'read_more_box_shadow',
                'selector' => '{{WRAPPER}} .king-addons-read-more-button',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'readmore_typography',
                'label' => esc_html__('Typography', 'king-addons'),
                'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button',
            ]
        );

        $this->add_control(
            'read_more_transition_duration',
            [
                'label' => esc_html__('Transition Duration (seconds)', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => 0.1,
                'min' => 0,
                'max' => 5,
                'step' => 0.1,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-read-more-button' => 'transition-duration: {{VALUE}}s',
                ],
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'readmore_border_type',
            [
                'label' => esc_html__('Border Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'none' => esc_html__('None', 'king-addons'),
                    'solid' => esc_html__('Solid', 'king-addons'),
                    'double' => esc_html__('Double', 'king-addons'),
                    'dotted' => esc_html__('Dotted', 'king-addons'),
                    'dashed' => esc_html__('Dashed', 'king-addons'),
                    'groove' => esc_html__('Groove', 'king-addons'),
                ],
                'default' => 'none',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-read-more-button' => 'border-style: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'readmore_item_border_width',
            [
                'label' => esc_html__('Border Width', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 1,
                    'right' => 1,
                    'bottom' => 1,
                    'left' => 1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-read-more-button' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'readmore_border_type!' => 'none',
                ],
                'render_type' => 'template'
            ]
        );

        $this->add_responsive_control(
            'readmore_padding',
            [
                'label' => esc_html__('Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 6,
                    'right' => 13,
                    'bottom' => 7,
                    'left' => 13,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'readmore_margin',
            [
                'label' => esc_html__('Margin', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 15,
                    'right' => 0,
                    'bottom' => 15,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->add_control(
            'readmore_border_radius',
            [
                'label' => esc_html__('Border Radius', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'separator' => 'before',
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'style_hover_tab',
            [
                'label' => esc_html__('Hover', 'king-addons'),
            ]
        );

        $this->add_control(
            'readmore_color_hover',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button:hover' => 'color: {{VAlUE}}',
                ],
                'default' => '#ffffff',
            ]
        );

        $this->add_control(
            'readmore_bg_color_hover',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-read-more-button:hover' => 'background-color: {{VAlUE}}',
                ],
                'default' => '#000000',
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();

        $this->start_controls_section(
            'middle_line_styles_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Line', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'line_color',
            [
                'label' => esc_html__('Line Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-line::before' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-middle-line' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-timeline-centered .king-addons-year' => 'border-color: {{VALUE}}',

                    '{{WRAPPER}} .king-addons-wrapper:before' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-wrapper:after' => 'background-color: {{VALUE}}',

                    '{{WRAPPER}} .king-addons-horizontal .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next' => 'color: {{VALUE}}',
                ],
                'default' => '#D6D6D6',
            ]
        );

        $this->add_control(
            'swiper_progressbar_color',
            [
                'label' => esc_html__('Progress(Fill) Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => 'background-color: {{VALUE}}',
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal', 'horizontal-bottom']
                ],
                'default' => '#5B03FF',
            ]
        );

        $this->add_control(
            'timeline_fill_color',
            [
                'label' => esc_html__('Line Fill Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#5B03FF',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-fill' => 'background-color: {{VALUE}} !important;',
                    '{{WRAPPER}} .king-addons-change-border-color' => 'border-color: {{VALUE}} !important;',
                    '{{WRAPPER}} .king-addons-vertical:before' => 'background-color: {{VALUE}} !important;',
                    '{{WRAPPER}} .king-addons-vertical:after' => 'background-color: {{VALUE}} !important;',
                ],
                'condition' => [
                    'timeline_layout!' => ['horizontal', 'horizontal-bottom']
                ],
            ]
        );

        $this->add_control(
            'middle_line_width',
            [
                'label' => esc_html__('Line Width', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 50,
                    ]
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 4,
                ],
                'selectors' => [

                    '{{WRAPPER}} .king-addons-wrapper .king-addons-middle-line' => 'width: {{SIZE}}px; transform: translate(-50%) !important',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-timeline-fill' => 'width: {{SIZE}}px; transform: translate(-50%)  !important;',


                    '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left .king-addons-middle-line' => 'width: {{SIZE}}px; transform: translate(50%) !important;',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left .king-addons-timeline-fill' => 'width: {{SIZE}}px; transform: translate(50%) !important;',


                    '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline .king-addons-middle-line' => 'width: {{SIZE}}px; transform: translate(-50%)  !important;',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline .king-addons-timeline-fill' => 'width: {{SIZE}}px; transform: translate(-50%) !important;',
                ],
                'condition' => [
                    'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
                ],
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'swiper_pagination_progressbar_height',
            [
                'type' => Controls_Manager::NUMBER,
                'label' => esc_html__('Height', 'king-addons'),
                'default' => 0.7,
                'step' => 0.1,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'transform: scaleY({{SIZE}}) translateX(-50%);',
                ],
                'separator' => 'before',
                'condition' => [
                    'timeline_layout' => ['horizontal-bottom', 'horizontal']
                ],
            ]
        );

        $this->add_responsive_control(
            'swiper_pagination_progressbar_bottom',
            [
                'type' => Controls_Manager::SLIDER,
                'label' => esc_html__('Bottom Distance', 'king-addons'),
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ]
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 100,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'top: auto; bottom: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-icon' => 'bottom: calc({{SIZE}}{{UNIT}} + 1px) !important;',
                    '{{WRAPPER}} .king-addons-button-prev' => 'top: auto; bottom: calc({{SIZE}}{{UNIT}});',
                    '{{WRAPPER}} .king-addons-button-next' => 'top: auto; bottom: calc({{SIZE}}{{UNIT}});',
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal']
                ],
            ]
        );

        $this->add_responsive_control(
            'swiper_pagination_progressbar_top',
            [
                'type' => Controls_Manager::SLIDER,
                'label' => esc_html__('Top Distance', 'king-addons'),
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ]
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 100,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'bottom: auto; top: {{SIZE}}{{UNIT}} !important',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-icon' => 'position: absolute; top: calc({{SIZE}}{{UNIT}} + 1px) !important; left: 50%; transform: translate(-50%, -50%);',
                    '{{WRAPPER}} .king-addons-button-prev' => 'bottom: auto; top: calc({{SIZE}}{{UNIT}} + 2px);',
                    '{{WRAPPER}} .king-addons-button-next' => 'bottom: auto; top: calc({{SIZE}}{{UNIT}} + 2px);',
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal-bottom']
                ],
            ]
        );

        $this->add_responsive_control(
            'main_line_side_distance',
            [
                'type' => Controls_Manager::SLIDER,
                'label' => esc_html__('Side Distance', 'king-addons'),
                'description' => esc_html__('This option for Zig-Zag layout only works on mobile devices.', 'king-addons'),
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ]
                ],
                'devices' => ['desktop', 'tablet', 'mobile'],
                'default' => [
                    'size' => 100,
                    'unit' => 'px',
                ],
                'tablet_default' => [
                    'size' => 100,
                    'unit' => 'px',
                ],
                'mobile_default' => [
                    'size' => 50,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-year-label' => 'left: calc({{SIZE}}px/2);',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-middle-line' => 'left: calc({{SIZE}}px/2);',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-timeline-fill' => 'left: calc({{SIZE}}px/2);',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-icon' => 'left: calc({{SIZE}}px/2);',

                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-year-label' => 'right: calc({{SIZE}}px/2);',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-middle-line' => 'right: calc({{SIZE}}px/2);',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-timeline-fill' => 'right: calc({{SIZE}}px/2);',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-icon' => 'right: calc({{SIZE}}px/2);',

                    'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-year-label' => 'position: absolute; left: calc({{SIZE}}px/2);',
                    'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-middle-line' => 'left: calc({{SIZE}}px/2);',
                    'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-timeline-fill' => 'left: calc({{SIZE}}px/2);',
                    'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-both-sided-timeline .king-addons-icon' => 'left: calc({{SIZE}}px/2); transform: translate(-50%, -50%) !important;',
                ],
                'render_type' => 'template',
                'condition' => [
                    'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'year_label_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Line Label', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'timeline_content' => 'custom'
                ]
            ]
        );

        $this->add_control(
            'year_label_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-year' => 'color: {{VALUE}}',
                ],
                'default' => '#222222',
                'condition' => [
                    'timeline_content' => ['custom'],
                ]
            ]
        );

        $this->add_control(
            'year_label_bgcolor',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-year' => 'background-color: {{VALUE}}',
                ],
                'default' => '#fff',
                'condition' => [
                    'timeline_content' => ['custom'],
                ]
            ]
        );

        $this->add_control(
            'year_label_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-year.king-addons-year-label' => 'border-color: {{VALUE}}',
                ],
                'default' => '#E0E0E0',
                'condition' => [
                    'timeline_content' => ['custom'],
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'year_typography',
                'label' => esc_html__('Typography', 'king-addons'),
                'selector' => '{{WRAPPER}} .king-addons-wrapper .king-addons-year',
                'condition' => [
                    'timeline_content' => ['custom'],
                ]
            ]
        );

        $this->add_responsive_control(
            'year_label_width',
            [
                'type' => Controls_Manager::SLIDER,
                'label' => esc_html__('Width', 'king-addons'),
                'size_units' => ['px'],
                'default' => [
                    'size' => 70,
                    'unit' => 'px'
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-year-label' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'separator' => 'before',
                'render_type' => 'template',
            ]
        );

        $this->add_responsive_control(
            'year_label_height',
            [
                'type' => Controls_Manager::SLIDER,
                'label' => esc_html__('Height', 'king-addons'),
                'size_units' => ['px'],
                'default' => [
                    'size' => 41,
                    'unit' => 'px'
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-year-label' => 'height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-year-wrap' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'year_label_border_type',
            [
                'label' => esc_html__('Border Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'none' => esc_html__('None', 'king-addons'),
                    'solid' => esc_html__('Solid', 'king-addons'),
                    'double' => esc_html__('Double', 'king-addons'),
                    'dotted' => esc_html__('Dotted', 'king-addons'),
                    'dashed' => esc_html__('Dashed', 'king-addons'),
                    'groove' => esc_html__('Groove', 'king-addons'),
                ],
                'default' => 'solid',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-year-label' => 'border-style: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'year_label_border_size',
            [
                'label' => esc_html__('Border Width', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 10,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 3,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-year-label' => 'border-width: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'year_label_border_type!' => 'none'
                ]
            ]
        );

        $this->add_control(
            'year_label_radius',
            [
                'label' => esc_html__('Border Radius', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => 5,
                    'right' => 5,
                    'bottom' => 5,
                    'left' => 5,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-year-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'icon_styles_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Line Icon', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'icon_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-icon i' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-icon svg' => 'fill: {{VALUE}};',
                ],
                'default' => '#666666',
            ]
        );

        $this->add_control(
            'icon_timeline_fill_color',
            [
                'label' => esc_html__('Fill Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#333333',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-change-border-color.king-addons-icon i' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-change-border-color.king-addons-icon svg' => 'fill: {{VALUE}};',
                ],
                'condition' => [
                    'timeline_layout!' => ['horizontal', 'horizontal-bottom']
                ],
            ]
        );

        $this->add_control(
            'icon_bgcolor',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'background-color: {{VALUE}}',
                ],
                'default' => '#FFFFFF',
            ]
        );

        $this->add_control(
            'icon_timeline_background_fill_color',
            [
                'label' => esc_html__('Background Fill Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#FFFFFF',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-change-border-color.king-addons-icon' => 'background-color: {{VALUE}};',
                ],
                'condition' => [
                    'timeline_layout!' => ['horizontal', 'horizontal-bottom']
                ],
            ]
        );

        $this->add_control(
            'icon_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#EAEAEA',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'border-color: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'icon_transition_duration',
            [
                'label' => esc_html__('Transition Duration (seconds)', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => 0.1,
                'min' => 0,
                'max' => 5,
                'step' => 0.1,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-icon' => 'transition-duration: {{VALUE}}s',
                ],
                'separator' => 'before'
            ]
        );

        $this->add_responsive_control(
            'icon_size',
            [
                'label' => esc_html__('Icon Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 17,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-icon i' => 'font-size: {{SIZE}}{{UNIT}} !important',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-icon svg' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important;'
                ],
                'separator' => 'before'
            ]
        );

        $this->add_responsive_control(
            'icon_bg_size',
            [
                'label' => esc_html__('Background Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'default' => [
                    'unit' => 'px',
                    'size' => 45,
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-icon i' => 'display: block;',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-icon' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; display: flex !important; justify-content: center !important; align-items: center !important;',
                ],
                'render_type' => 'template',
            ]
        );

        $this->add_control(
            'icon_border_type',
            [
                'label' => esc_html__('Border Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'none' => esc_html__('None', 'king-addons'),
                    'solid' => esc_html__('Solid', 'king-addons'),
                    'double' => esc_html__('Double', 'king-addons'),
                    'dotted' => esc_html__('Dotted', 'king-addons'),
                    'dashed' => esc_html__('Dashed', 'king-addons'),
                    'groove' => esc_html__('Groove', 'king-addons'),
                ],
                'default' => 'solid',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-icon' => 'border-style: {{VALUE}}',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'icon_border_width',
            [
                'label' => esc_html__('Border Width', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => 2,
                    'right' => 2,
                    'bottom' => 2,
                    'left' => 2,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'condition' => [
                    'icon_border_type!' => 'none'
                ]
            ]
        );

        $this->add_control(
            'icon_border_radius',
            [
                'label' => esc_html__('Border Radius', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => 50,
                    'right' => 50,
                    'bottom' => 50,
                    'left' => 50,
                    'unit' => '%'
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'label_styles_section',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Extra Label', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_extra_label' => 'yes',
                ]
            ]
        );

        $this->add_control(
            'extra_label_bg_color_dynamic',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-extra-label' => 'background-color: {{VALUE}}',
                ],
            ]
        );

        $this->add_responsive_control(
            'label_bg_size',
            [
                'label' => esc_html__('Background Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'default' => [
                    'unit' => 'px',
                    'size' => 180,
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 300,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-extra-label' => 'width: {{SIZE}}{{UNIT}}; height: auto;',

                ],
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'label_right',
            [
                'label' => esc_html__('Label Distance', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 25,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-timeline-entry.king-addons-left-aligned .king-addons-extra-label' => 'left: calc(100% + {{SIZE}}{{UNIT}})',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-timeline-entry.king-addons-right-aligned .king-addons-extra-label' => 'right: calc(100% + {{SIZE}}{{UNIT}})',
                ],
                'condition' => [
                    'timeline_layout' => ['centered'],
                ]
            ]
        );

        $this->add_responsive_control(
            'label_padding',
            [
                'label' => esc_html__('Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 5,
                    'right' => 10,
                    'bottom' => 5,
                    'left' => 10,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-extra-label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'label_border_radius',
            [
                'label' => esc_html__('Border Radius', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-extra-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'label_section',
            [
                'label' => esc_html__('Primary Label', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'date_label_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper span.king-addons-label' => 'color: {{VALUE}}',
                ],
                'default' => '#5B03FF',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'label_typography',
                'label' => esc_html__('Typography', 'king-addons'),
                'selector' => '{{WRAPPER}} .king-addons-extra-label span.king-addons-label',
            ]
        );


        $this->add_control(
            'secondary_label_section',
            [
                'label' => esc_html__('Secondary Label', 'king-addons'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'timeline_content' => 'custom'
                ]
            ]
        );

        $this->add_control(
            'secondary_label_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,

                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper span.king-addons-sub-label' => 'color: {{VALUE}}',
                ],
                'condition' => [
                    'timeline_content' => 'custom'
                ],
                'default' => '#7A7A7A',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'secondary_label_typography',
                'label' => esc_html__('Typography', 'king-addons'),
                'selector' => '{{WRAPPER}} .king-addons-wrapper span.king-addons-sub-label',
                'condition' => [
                    'timeline_content' => 'custom'
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'triangle_styles',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Triangle', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'triangle_bgcolor',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'border-right-color: {{icon_bgcolor}}',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-one-sided-timeline-left .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-story-info:before' => 'border-top-color: {{VALUE}} !important',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-story-info:before' => 'border-bottom-color: {{VALUE}} !important',
                    '{{WRAPPER}} .king-addons-wrapper .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-left-color: {{VALUE}}',
                    'body[data-elementor-device-mode=mobile] {{WRAPPER}} .king-addons-wrapper .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}} !important; border-left-color: transparent !important;',
                    '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-right-aligned .king-addons-data-wrap:after' => 'border-right-color: {{VALUE}} !important; border-left-color: transparent !important;',
                ],
                'default' => '#FFFFFF',
                'render_type' => 'template'
            ]
        );

        $this->add_responsive_control(
            'story_triangle_size',
            [
                'label' => esc_html__('Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 11,
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 25,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-story-info:before' => 'border-width: {{size}}{{UNIT}}; top: 100%; left: 50%; transform: translate(-50%);',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-story-info:before' => 'border-width: {{size}}{{UNIT}}; bottom: 100%; left: 50%; transform: translate(-50%);',
                    '{{WRAPPER}} .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'border-width: {{size}}{{UNIT}}; top: {{triangle_onesided_position_top.SIZE}}%; transform: translateY(-50%);',
                    '{{WRAPPER}} .king-addons-one-sided-timeline-left .king-addons-data-wrap:after' => 'border-width: {{size}}{{UNIT}}; top: {{triangle_onesided_position_top.SIZE}}%; transform: translateY(-50%);',
                    '{{WRAPPER}} .king-addons-both-sided-timeline .king-addons-right-aligned .king-addons-data-wrap:after' => 'border-width: {{size}}{{UNIT}}; top: {{arrow_bothsided_position_top.SIZE}}{{arrow_bothsided_position_top.UNIT}}; transform: translateY(-50%);',
                    '{{WRAPPER}} .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after' => 'border-width: {{size}}{{UNIT}}; top: {{arrow_bothsided_position_top.SIZE}}{{arrow_bothsided_position_top.UNIT}}; transform: translateY(-50%);',
                ],
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'triangle_onesided_position_top',
            [
                'label' => esc_html__('Position Top', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['%', 'px'],
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                    'px' => [
                        'min' => 0,
                        'max' => 150,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 30,
                ],
                'selectors' => [

                    '{{WRAPPER}} .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;',
                    '{{WRAPPER}} .king-addons-one-sided-timeline-left .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;',
                    '{{WRAPPER}} .king-addons-one-sided-timeline .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(-50%, -50%) !important;',
                    '{{WRAPPER}} .king-addons-one-sided-timeline-left .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(50%,-50%) !important;',
                ],
                'condition' => [
                    'timeline_layout' => ['one-sided', 'one-sided-left']
                ],
                'render_type' => 'template',
            ]
        );

        $this->add_control(
            'arrow_bothsided_position_top',
            [
                'label' => esc_html__('Position Top', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['%', 'px'],
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                    'px' => [
                        'min' => 0,
                        'max' => 150,
                    ],
                ],
                'default' => [
                    'size' => 30,
                    'unit' => '%',
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-timeline-centered .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-right-aligned .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(50%, -50%) !important;',
                    '{{WRAPPER}} .king-addons-timeline-centered.king-addons-one-sided-timeline  .king-addons-right-aligned .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(-50%, -50%) !important;',
                    '{{WRAPPER}} .king-addons-timeline-centered  .king-addons-left-aligned .king-addons-icon' => 'position: absolute; top: {{size}}{{UNIT}}; transform: translate(-50%, -50%) !important;',
                    '{{WRAPPER}} .king-addons-timeline-centered .king-addons-extra-label' => 'top: {{size}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-centered .king-addons-one-sided-timeline .king-addons-data-wrap:after' => 'top: {{size}}{{UNIT}}; transform: translateY(-50%) !important;',
                ],
                'condition' => [
                    'timeline_layout' => ['centered']
                ],
                'render_type' => 'template'
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'navigation_button_styles',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'timeline_layout' => ['horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->start_controls_tabs(
            'navigation_style_tabs'
        );

        $this->start_controls_tab(
            'navigation_style_normal_tab',
            [
                'label' => esc_html__('Normal', 'king-addons'),
            ]
        );

        $this->add_control(
            'navigation_button_bg_color',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-button-prev' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-button-next' => 'background-color: {{VALUE}}',
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->add_control(
            'navigation_button_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#5B03FF',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-button-prev i' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-button-next i' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-button-prev svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;',
                    '{{WRAPPER}} .king-addons-button-next svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;',
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->add_control(
            'navigation_transition_duration',
            [
                'label' => esc_html__('Transition Duration (seconds)', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => 0.1,
                'min' => 0,
                'max' => 5,
                'step' => 0.1,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-button-prev' => 'transition-duration: {{VALUE}}s',
                    '{{WRAPPER}} .king-addons-button-next' => 'transition-duration: {{VALUE}}s',
                    '{{WRAPPER}} .king-addons-button-prev i' => 'transition-duration: {{VALUE}}s',
                    '{{WRAPPER}} .king-addons-button-next i' => 'transition-duration: {{VALUE}}s',
                    '{{WRAPPER}} .king-addons-button-prev svg' => 'transition-duration: {{VALUE}}s',
                    '{{WRAPPER}} .king-addons-button-next svg' => 'transition-duration: {{VALUE}}s',
                ],
                'separator' => 'before'
            ]
        );

        $this->add_responsive_control(
            'navigation_icon_size',
            [
                'label' => esc_html__('Icon Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 40,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next svg' => 'width: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev svg' => 'width: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next svg' => 'width: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev svg' => 'width: {{SIZE}}{{UNIT}};',

                ],
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'navigation_icon_bg_size',
            [
                'label' => esc_html__('Box Size', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 20,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 40,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev' => 'width: {{SIZE}}{{UNIT}}; text-align: center; height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-next svg' => ' text-align: center; line-height: 1.5;',
                    '{{WRAPPER}} .king-addons-horizontal .king-addons-button-prev svg' => ' text-align: center; line-height: 1.5;',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev i' => 'width: {{SIZE}}{{UNIT}}; text-align: center; line-height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-next svg' => 'text-align: center; line-height: 1.5;',
                    '{{WRAPPER}} .king-addons-horizontal-bottom .king-addons-button-prev svg' => 'text-align: center; line-height: 1.5;',
                    '{{WRAPPER}} .king-addons-swiper-pagination.swiper-pagination-progressbar' => 'width: calc(100% - ({{SIZE}}px + 15px)*2);',
                    '{{WRAPPER}} .king-addons-horizontal-bottom.swiper' => 'margin-left: {{SIZE}}px; margin-right: {{SIZE}}px;',
                    '{{WRAPPER}} .king-addons-horizontal.swiper' => 'margin-left: {{SIZE}}px; margin-right: {{SIZE}}px;',
                ],
                'render_type' => 'template'
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'navigation_style_hover_tab',
            [
                'label' => esc_html__('Hover', 'king-addons'),
            ]
        );

        $this->add_control(
            'navigation_button_bg_color_hover',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-button-prev:hover' => 'background-color: {{VALUE}}; cursor: pointer;',
                    '{{WRAPPER}} .king-addons-button-next:hover' => 'background-color: {{VALUE}}; cursor: pointer;',
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->add_control(
            'navigation_button_color_hover',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#605BE1',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-button-prev:hover i' => 'color: {{VALUE}}; cursor: pointer; z-index: 11;',
                    '{{WRAPPER}} .king-addons-button-next:hover i' => 'color: {{VALUE}}; cursor: pointer; z-index: 11;',
                    '{{WRAPPER}} .king-addons-button-prev:hover svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;',
                    '{{WRAPPER}} .king-addons-button-next:hover svg' => 'fill: {{VALUE}}; cursor: pointer; z-index: 11;',
                ],
                'condition' => [
                    'timeline_layout' => ['horizontal', 'horizontal-bottom']
                ]
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();


        $this->start_controls_section(
            'section_style_pagination',
            [
                'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pagination', 'king-addons'),
                'tab' => Controls_Manager::TAB_STYLE,
                'show_label' => false,
                'condition' => [
                    'timeline_content' => 'dynamic',
                    'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
                ],
            ]
        );

        $this->start_controls_tabs('tabs_grid_pagination_style');

        $this->start_controls_tab(
            'tab_grid_pagination_normal',
            [
                'label' => esc_html__('Normal', 'king-addons'),
            ]
        );

        $this->add_control(
            'pagination_color',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination svg' => 'fill: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'color: {{VALUE}}',
                ],
                'condition' => [
                    'timeline_layout' => ['centered', 'one-sided', 'one-sided-left']
                ]
            ]
        );

        $this->add_control(
            'pagination_bg_color',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#5B03FF',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-pagination-finish' => 'color: {{VALUE}}',
                ]
            ]
        );

        $this->add_control(
            'pagination_border_color',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#E8E8E8',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'border-color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'pagination_box_shadow',
                'selector' => '{{WRAPPER}} .king-addons-grid-pagination a, {{WRAPPER}} .king-addons-grid-pagination > div > span',
            ]
        );

        $this->add_control(
            'pagination_loader_color',
            [
                'label' => esc_html__('Loader Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#5B03FF',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-double-bounce .king-addons-child' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-wave .king-addons-rect' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-spinner-pulse' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-chasing-dots .king-addons-child' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-three-bounce .king-addons-child' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-fading-circle .king-addons-circle:before' => 'background-color: {{VALUE}}',
                ],
                'condition' => [
                    'pagination_type' => ['load-more', 'infinite-scroll']
                ]
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'tab_grid_pagination_hover',
            [
                'label' => esc_html__('Hover', 'king-addons'),
            ]
        );

        $this->add_control(
            'pagination_color_hr',
            [
                'label' => esc_html__('Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a:hover' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination a:hover svg' => 'fill: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'pagination_bg_color_hr',
            [
                'label' => esc_html__('Background Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#4D02D8',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a:hover' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover' => 'background-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'background-color: {{VALUE}}',
                ]
            ]
        );

        $this->add_control(
            'pagination_border_color_hr',
            [
                'label' => esc_html__('Border Color', 'king-addons'),
                'type' => Controls_Manager::COLOR,
                'default' => '#E8E8E8',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a:hover' => 'border-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover' => 'border-color: {{VALUE}}',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-color: {{VALUE}}',
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'pagination_box_shadow_hr',
                'selector' => '{{WRAPPER}} .king-addons-grid-pagination a:hover, {{WRAPPER}} .king-addons-grid-pagination > div > span:not(.king-addons-disabled-arrow):hover',
                'separator' => 'after',
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_control(
            'pagination_transition_duration',
            [
                'label' => esc_html__('Transition Duration (seconds)', 'king-addons'),
                'type' => Controls_Manager::NUMBER,
                'default' => 0.1,
                'min' => 0,
                'max' => 5,
                'step' => 0.1,
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a' => 'transition-duration: {{VALUE}}s',
                    '{{WRAPPER}} .king-addons-grid-pagination svg' => 'transition-duration: {{VALUE}}s',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'transition-duration: {{VALUE}}s',
                ],
                'separator' => 'after',
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'loadmore_typography',
                'label' => esc_html__('Typography', 'king-addons'),
                'selector' => '{{WRAPPER}} .king-addons-load-more-btn',
            ]
        );

        $this->add_control(
            'pagination_border_type',
            [
                'label' => esc_html__('Border Type', 'king-addons'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'none' => esc_html__('None', 'king-addons'),
                    'solid' => esc_html__('Solid', 'king-addons'),
                    'double' => esc_html__('Double', 'king-addons'),
                    'dotted' => esc_html__('Dotted', 'king-addons'),
                    'dashed' => esc_html__('Dashed', 'king-addons'),
                    'groove' => esc_html__('Groove', 'king-addons'),
                ],
                'default' => 'none',
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-style: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-style: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-style: {{VALUE}};',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'border-style: {{VALUE}}',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'pagination_border_width',
            [
                'label' => esc_html__('Border Width', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 1,
                    'right' => 1,
                    'bottom' => 1,
                    'left' => 1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'pagination_border_type!' => 'none',
                ],
            ]
        );

        $this->add_responsive_control(
            'pagination_distance_from_grid',
            [
                'label' => esc_html__('Distance From Timeline', 'king-addons'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 25,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination' => 'margin-top: {{SIZE}}{{UNIT}};',
                ],
                'separator' => 'before'
            ]
        );

        $this->add_responsive_control(
            'pagination_padding',
            [
                'label' => esc_html__('Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 8,
                    'right' => 20,
                    'bottom' => 8,
                    'left' => 20,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-disabled-arrow' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'pagination_wrapper_padding',
            [
                'label' => esc_html__('Wrapper Padding', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px'],
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'pagination_radius',
            [
                'label' => esc_html__('Border Radius', 'king-addons'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => 3,
                    'right' => 3,
                    'bottom' => 3,
                    'left' => 3,
                ],
                'selectors' => [
                    '{{WRAPPER}} .king-addons-grid-pagination a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-grid-pagination > div > span' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .king-addons-grid-pagination span.king-addons-grid-current-page' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'separator' => 'before',
            ]
        );

        
        

$this->end_controls_section();

    
        
    }

    public function get_tax_query_args()
    {
        $settings = $this->get_settings();
        $tax_query = [];

        if ('related' === $settings['timeline_post_types']) {
            $tax_query[] = [
                'taxonomy' => $settings['query_tax_selection'],
                'field' => 'term_id',
                'terms' => wp_get_object_terms(
                    get_the_ID(),
                    $settings['query_tax_selection'],
                    ['fields' => 'ids']
                ),
            ];
        } else {
            foreach (get_object_taxonomies($settings['timeline_post_types']) as $tax) {
                $term_setting = $settings['query_taxonomy_' . $tax] ?? [];
                if (!empty($term_setting)) {
                    $tax_query[] = [
                        'taxonomy' => $tax,
                        'field' => 'id',
                        'terms' => $term_setting,
                    ];
                }
            }
        }

        return $tax_query;
    }

    public function get_main_query_args()
    {
        $settings = $this->get_settings();
        $author = !empty($settings['query_author']) ? implode(',', $settings['query_author']) : '';
        $paged = get_query_var('paged') ?: (get_query_var('page') ?: 1);
        $posts_per_page = !king_addons_freemius()->can_use_premium_code__premium_only() && $settings['posts_per_page'] > 4
            ? 4
            : ($settings['posts_per_page'] ?: 4);

        $args = [
            'post_type' => $settings['timeline_post_types'],
            'tax_query' => $this->get_tax_query_args(),
            'post__not_in' => $settings['query_exclude_' . $settings['timeline_post_types']] ?? '',
            'posts_per_page' => $posts_per_page,
            'orderby' => $settings['order_posts'],
            'order' => $settings['order_direction'],
            'author' => $author,
            'paged' => $paged,
        ];

        if ('yes' === $settings['query_exclude_no_images']) {
            $args['meta_key'] = '_thumbnail_id';
        }

        // Overwrite main query args if manual selection
        if ('manual' === $settings['query_selection']) {
            $post_ids = $settings['query_manual_' . $settings['timeline_post_types']] ?? [''];
            $args = [
                'post_type' => $settings['timeline_post_types'],
                'post__in' => $post_ids,
                'posts_per_page' => $posts_per_page,
                'orderby' => '',
                'paged' => $paged,
            ];
        }

        return $args;
    }

    public function get_max_num_pages()
    {
        $query = new WP_Query($this->get_main_query_args());
        $max_num_pages = (int)ceil($query->max_num_pages);
        wp_reset_postdata();
        return $max_num_pages;
    }

    /** @noinspection PhpMissingFieldTypeInspection */
    public $content_alignment = '';

    public function content_and_animation_alignment($layout, $countItem, $settings)
    {
        // Default alignment
        $this->content_alignment = ($layout === 'one-sided-left')
            ? 'king-addons-left-aligned'
            : 'king-addons-right-aligned';

        // Special case for centered
        if ($layout === 'centered') {
            if ($countItem % 2 === 0) {
                $this->content_alignment = 'king-addons-left-aligned';
            }
            // Handle swapping animations
            if (preg_match('/right/i', $settings['timeline_animation'])) {
                if ('king-addons-left-aligned' === $this->content_alignment) {
                    $this->animation = preg_match('/right/i', $settings['timeline_animation'])
                        ? str_replace('right', 'left', $settings['timeline_animation'])
                        : $settings['timeline_animation'];
                } else {
                    $this->animation = preg_match('/left/i', $settings['timeline_animation'])
                        ? str_replace('left', 'right', $settings['timeline_animation'])
                        : $settings['timeline_animation'];
                }
            }
            if (preg_match('/left/i', $settings['timeline_animation'])) {
                if ('king-addons-left-aligned' === $this->content_alignment) {
                    $this->animation = preg_match('/left/i', $settings['timeline_animation'])
                        ? str_replace('left', 'right', $settings['timeline_animation'])
                        : $settings['timeline_animation'];
                } elseif ('king-addons-right-aligned' === $this->content_alignment) {
                    $this->animation = preg_match('/right/i', $settings['timeline_animation'])
                        ? str_replace('right', 'left', $settings['timeline_animation'])
                        : $settings['timeline_animation'];
                }
            }
        }

        // Handle animation for load more
        if (preg_match('/right/i', $settings['timeline_animation'])) {
            $this->animation_loadmore_left = preg_match('/right/i', $settings['timeline_animation'])
                ? str_replace('right', 'left', $settings['timeline_animation'])
                : $settings['timeline_animation'];
            $this->animation_loadmore_right = preg_match('/left/i', $settings['timeline_animation'])
                ? str_replace('left', 'right', $settings['timeline_animation'])
                : $settings['timeline_animation'];
        } elseif (preg_match('/left/i', $settings['timeline_animation'])) {
            $this->animation_loadmore_left = preg_match('/left/i', $settings['timeline_animation'])
                ? str_replace('left', 'right', $settings['timeline_animation'])
                : $settings['timeline_animation'];
            $this->animation_loadmore_right = preg_match('/right/i', $settings['timeline_animation'])
                ? str_replace('right', 'left', $settings['timeline_animation'])
                : $settings['timeline_animation'];
        }
    }

    public function add_custom_horizontal_timeline_attributes($content, $settings, $index)
    {
        $this->timeline_description = $content['repeater_description'];
        $this->story_date_label = esc_html($content['repeater_date_label']);
        $this->story_extra_label = esc_html($content['repeater_extra_label']);
        $this->timeline_story_title = wp_kses_post($content['repeater_story_title']);
        $this->thumbnail_size = $content['king_addons_thumbnail_size'];
        $this->thumbnail_custom_dimension = $content['king_addons_thumbnail_custom_dimension'];
        $this->show_year_label = esc_html($content['repeater_show_year_label']);
        $this->timeline_year = esc_html($content['repeater_year']);

        $this->title_key = $this->get_repeater_setting_key('repeater_story_title', 'timeline_repeater_list', $index);
        $this->year_key = $this->get_repeater_setting_key('repeater_year', 'timeline_repeater_list', $index);
        $this->date_label_key = $this->get_repeater_setting_key('repeater_date_label', 'timeline_repeater_list', $index);
        $this->extra_label_key = $this->get_repeater_setting_key('repeater_extra_label', 'timeline_repeater_list', $index);
        $this->description_key = $this->get_repeater_setting_key('repeater_description', 'timeline_repeater_list', $index);

        $this->background_image = ($settings['content_layout'] === 'background')
            ? $content['repeater_image']['url']
            : '';
        $this->background_class = ($settings['content_layout'] === 'background')
            ? 'story-with-background'
            : '';

        $this->add_inline_editing_attributes($this->title_key, 'none');
        $this->add_inline_editing_attributes($this->year_key, 'none');
        $this->add_inline_editing_attributes($this->date_label_key, 'none');
        $this->add_inline_editing_attributes($this->extra_label_key, 'none');
        $this->add_inline_editing_attributes($this->description_key, 'advanced');

        $this->add_render_attribute($this->title_key, ['class' => 'king-addons-title']);
        $this->add_render_attribute($this->year_key, ['class' => 'king-addons-year-label king-addons-year']);
        $this->add_render_attribute($this->date_label_key, ['class' => 'king-addons-label']);
        $this->add_render_attribute($this->extra_label_key, ['class' => 'king-addons-sub-label']);
        $this->add_render_attribute($this->description_key, ['class' => 'king-addons-description']);
    }

    public function render_image_or_icon($content)
    {
        $img_id = $content['repeater_image']['id'] ?? '';
        $img_url = $content['repeater_image']['url'] ?? '';
        $icon = $content['repeater_timeline_item_icon'] ?? '';

        if (!empty($img_id)) {
            if ($this->thumbnail_size === 'custom') {
                $size = [$this->thumbnail_custom_dimension['width'], $this->thumbnail_custom_dimension['height']];
                $this->image = wp_get_attachment_image($img_id, $size, true);
            } else {
                $this->image = wp_get_attachment_image($img_id, $this->thumbnail_size, true);
            }
        } elseif (!empty($img_url)) {
            $this->image = '<img src="' . esc_url($img_url) . '">';
        } elseif (!empty($icon)) {
            ob_start();
            Icons_Manager::render_icon($icon, ['aria-hidden' => 'true']);
            $this->image = ob_get_clean();
        } else {
            $this->image = '';
        }
    }

    public function king_addons_render_swiper_navigation($settings)
    {
        echo '</div>        
        <div class="king-addons-swiper-pagination"></div>
        <div class="king-addons-button-prev king-addons-timeline-prev-arrow king-addons-timeline-prev-' . esc_attr($this->get_id()) . '">
            ' . Core::getIcon($settings['swiper_nav_icon'], '') . '
        </div>
        <div class="king-addons-button-next king-addons-timeline-next-arrow king-addons-timeline-next-' . esc_attr($this->get_id()) . '">
            ' . Core::getIcon($settings['swiper_nav_icon'], '') . '
        </div>
    </div>';
    }

    public function render_pagination($settings, $paged)
    {
    }

    public function get_animation_class($data, $object)
    {
        $class = '';
        $anim = $data[$object . '_animation'] ?? 'none';

        if ('none' !== $anim) {
            $class .= ' king-addons-' . $object . '-' . $anim;
            $class .= ' king-addons-anim-size-' . $data[$object . '_animation_size'];
            $class .= ' king-addons-animation-timing-' . $data[$object . '_animation_timing'];
            if ('yes' === $data[$object . '_animation_tr']) {
                $class .= ' king-addons-anim-transparency';
            }
        }
        return $class;
    }

    public static function youtube_url($story_settings)
    {
        $url = $story_settings['repeater_youtube_video_url'] ?? '';
        $media = '';
        if (!empty($url)) {
            preg_match(
                '%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i',
                $url,
                $matches
            );
            if (!empty($matches[1])) {
                $id = $matches[1];
                $media = '<iframe width="100%" height="auto" src="https://www.youtube.com/embed/' . esc_attr($id) . '" allowfullscreen></iframe>';
            } else {
                $media = __("Wrong URL", "king-addons-addons");
            }
        }
        return $media;
    }

    public function horizontal_timeline_classes($settings)
    {
        $this->slides_to_show = $settings['slides_to_show'] ?? 2;
        if (!king_addons_freemius()->can_use_premium_code__premium_only() && $this->slides_to_show > 4) {
            $this->slides_to_show = 4;
        }

        $horizontal_class = '';
        if ($settings['timeline_layout'] === 'horizontal') {
            $horizontal_class = 'king-addons-horizontal-wrapper';
        } elseif ($settings['timeline_layout'] === 'horizontal-bottom') {
            $horizontal_class = 'king-addons-horizontal-bottom-wrapper';
        }

        $this->horizontal_inner_class = ($horizontal_class === 'king-addons-horizontal-wrapper')
            ? 'king-addons-horizontal'
            : 'king-addons-horizontal-bottom';
        $this->horizontal_timeline_class = ($this->horizontal_inner_class === 'king-addons-horizontal')
            ? 'king-addons-horizontal-timeline'
            : 'king-addons-horizontal-bottom-timeline';
        $this->swiper_class = ($this->horizontal_timeline_class === 'king-addons-horizontal-timeline')
            ? 'swiper-slide-line-bottom'
            : 'swiper-slide-line-top';
    }

    public function render_custom_vertical_timeline($layout, $settings, $data, $countItem)
    {
        echo '<div class="king-addons-wrapper king-addons-vertical ' . esc_attr($this->timeline_layout_wrapper) . '">
            <div class="king-addons-timeline-centered king-addons-line ' . esc_attr($this->timeline_layout) . '">
            <div class="king-addons-middle-line"></div>';
        echo ('yes' === $this->timeline_fill)
            ? '<div class="king-addons-timeline-fill" data-layout="' . esc_attr($layout) . '"></div>'
            : '';

        foreach ($data as $index => $content) {
            if (!king_addons_freemius()->can_use_premium_code__premium_only() && $index === 4) {
                break;
            }
            $repeater_title_link = $content['repeater_title_link'] ?? '';
            /** @noinspection PhpIllegalStringOffsetInspection */
            if (!empty($repeater_title_link['url'])) {
                $this->add_link_attributes('repeater_title_link' . $this->item_url_count, $repeater_title_link);
            }

            $this->content_and_animation_alignment($layout, $countItem, $settings);
            $this->render_image_or_icon($content);

            $background_class = ($settings['content_layout'] === 'background') ? 'story-with-background' : '';

            if ($content['repeater_show_year_label'] === 'yes') {
                echo '<span class="king-addons-year-wrap">
                    <span class="king-addons-year-label king-addons-year">' . esc_html($content['repeater_year']) . '</span>
                  </span>';
            }

            echo '<article class="king-addons-timeline-entry ' . esc_attr($this->content_alignment) . ' elementor-repeater-item-' . esc_attr($content['_id']) . '" data-item-id="elementor-repeater-item-' . esc_attr($content['_id']) . '">';

            if ('yes' === $content['repeater_show_extra_label']) {
                if (!empty($content['repeater_date_label']) || !empty($content['repeater_extra_label'])) {
                    echo '<time class="king-addons-extra-label" data-aos="' . esc_attr($this->animation) . '" data-aos-left="' . esc_attr($this->animation_loadmore_left) . '" data-aos-right="' . esc_attr($this->animation_loadmore_right) . '" data-animation-offset="' . esc_attr($settings['animation_offset']) . '" data-animation-duration="' . esc_attr($settings['aos_animation_duration']) . '">';
                    echo !empty($content['repeater_date_label'])
                        ? '<span class="king-addons-label">' . esc_html($content['repeater_date_label']) . '</span>'
                        : '';
                    echo !empty($content['repeater_extra_label'])
                        ? '<span class="king-addons-sub-label">' . wp_kses_post($content['repeater_extra_label']) . '</span>'
                        : '';
                    echo '</time>';
                }
            }

            echo '<div class="king-addons-timeline-entry-inner">
                <div class="king-addons-main-line-icon king-addons-icon">';
            Icons_Manager::render_icon($content['repeater_story_icon'], ['aria-hidden' => 'true']);
            echo '</div>
              <div class="king-addons-story-info-vertical king-addons-data-wrap ' . esc_attr($background_class) . '" data-aos="' . esc_attr($this->animation) . '" data-aos-left="' . esc_attr($this->animation_loadmore_left) . '" data-aos-right="' . esc_attr($this->animation_loadmore_right) . '" data-animation-offset="' . esc_attr($settings['animation_offset']) . '" data-animation-duration="' . esc_attr($settings['aos_animation_duration']) . '">';

            // IMAGE TOP
            if ($settings['content_layout'] === 'image-top' && (!empty($this->image) || !empty($content['repeater_youtube_video_url']))) {
                echo '<div class="king-addons-animation-wrap king-addons-timeline-media">' . $this->image;
                if (!empty($content['repeater_youtube_video_url'])) {
                    echo '<div class="king-addons-timeline-iframe-wrapper"> ' . $this->youtube_url($content) . ' </div>';
                }
                if ('yes' === $settings['show_overlay'] && (!empty($this->image) || !empty($content['repeater_youtube_video_url']))) {
                    echo '<div class="king-addons-timeline-story-overlay ' . esc_attr($this->animation_class) . '">';
                    if (!empty($content['repeater_story_title']) && 'yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) {
                        /** @noinspection PhpIllegalStringOffsetInspection */
                        if (!empty($repeater_title_link['url'])) {
                            echo '<p class="king-addons-title-wrap"><a ' . $this->get_render_attribute_string('repeater_title_link' . $this->item_url_count) . ' class="king-addons-title">' . esc_html($content['repeater_story_title']) . '</a></p>';
                        } else {
                            echo '<p class="king-addons-title-wrap"><span class="king-addons-title">' . esc_html($content['repeater_story_title']) . '</span></p>';
                        }
                    }
                    if (!empty($content['repeater_description']) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) {
                        echo '<div class="king-addons-description">' . wp_kses_post($content['repeater_description']) . '</div>';
                    }
                    echo '</div>';
                }
                echo '</div>';
            }

            // NON-OVERLAY TITLE & DESCRIPTION
            if (
                ('yes' !== $settings['title_overlay'] && 'yes' === $settings['show_title'] && !empty($content['repeater_story_title'])) ||
                ('yes' !== $settings['description_overlay'] && 'yes' === $settings['show_description'] && !empty($content['repeater_description']))
            ) {
                echo '<div class="king-addons-timeline-content-wrapper">
                    <div class="king-addons-content-wrapper">';
                if (!empty($content['repeater_story_title']) && 'yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) {
                    /** @noinspection PhpIllegalStringOffsetInspection */
                    if (!empty($repeater_title_link['url'])) {
                        echo '<p class="king-addons-title-wrap"><a ' . $this->get_render_attribute_string('repeater_title_link' . $this->item_url_count) . ' class="king-addons-title">' . esc_html($content['repeater_story_title']) . '</a></p>';
                    } else {
                        echo '<p class="king-addons-title-wrap"><span class="king-addons-title">' . esc_html($content['repeater_story_title']) . '</span></p>';
                    }
                }
                if (!empty($content['repeater_description']) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) {
                    echo '<div class="king-addons-description">' . wp_kses_post($content['repeater_description']) . '</div>';
                }
                echo '</div>';
                if (!empty($content['repeater_youtube_video_url']) && $settings['content_layout'] !== 'image-top') {
                    echo '<div class="king-addons-timeline-iframe-wrapper"> ' . $this->youtube_url($content) . ' </div>';
                }
                echo '</div>';
            }

            // IMAGE BOTTOM
            if ($settings['content_layout'] === 'image-bottom' && !empty($this->image)) {
                echo '<div class="king-addons-animation-wrap king-addons-timeline-media">' . $this->image . '</div>';
            }

            echo '</div>
            </div>
        </article>';

            $countItem++;
            $this->item_url_count++;
        }
        echo '</div></div>';
    }

    public function render_dynamic_vertical_timeline($settings, $arrow_bgcolor, $layout, $countItem, $paged)
    {
        $layout_settings = ['pagination_type' => $settings['pagination_type']];
        $this->add_render_attribute('grid-settings', ['data-settings' => wp_json_encode($layout_settings)]);
        wp_reset_postdata();

        if (!$this->my_query->have_posts()) {
            echo '<div>' . esc_html($settings['query_not_found_text']) . '</div>';
            return;
        }

        echo '<div class="king-addons-wrapper king-addons-vertical ' . esc_attr($this->timeline_layout_wrapper) . '">
            <div class="king-addons-timeline-centered king-addons-line ' . esc_attr($this->timeline_layout) . '"
                 data-pagination="' . esc_attr($this->pagination_type) . '"
                 data-max-pages="' . esc_attr($this->pagination_max_pages) . '"
                 data-arrow-bgcolor="' . esc_attr($arrow_bgcolor) . '">
            <div class="king-addons-middle-line"></div>';
        echo ('yes' === $this->timeline_fill)
            ? '<div class="king-addons-timeline-fill" data-layout="' . esc_attr($layout) . '"></div>'
            : '';

        while ($this->my_query->have_posts()) {
            $this->my_query->the_post();
            $id = get_post_thumbnail_id();
            $this->src = Group_Control_Image_Size::get_attachment_image_src($id, 'king_addons_thumbnail_dynamic', $settings);
            $this->alt = get_post_meta($id, '_wp_attachment_image_alt', true);
            if (empty($this->alt)) {
                $this->alt = get_the_title($id);
            }
            $this->content_and_animation_alignment($layout, $countItem, $settings);
            $background_class = ($settings['content_layout'] === 'background') ? 'story-with-background' : '';

            echo '<article class="king-addons-timeline-entry ' . esc_attr($this->content_alignment) . '" data-counter="' . esc_attr($countItem) . '">';

            // Extra Label (date)
            if ('yes' === $settings['show_extra_label']) {
                echo '<time class="king-addons-extra-label"
                         data-aos="' . esc_attr($this->animation) . '"
                         data-aos-left="' . esc_attr($this->animation_loadmore_left) . '"
                         data-aos-right="' . esc_attr($this->animation_loadmore_right) . '"
                         data-animation-offset="' . esc_attr($settings['animation_offset']) . '"
                         data-animation-duration="' . esc_attr($settings['aos_animation_duration']) . '">
                    <span class="king-addons-label">' . esc_html(get_the_date($settings['date_format'])) . '</span>
                  </time>';
            }

            echo '<div class="king-addons-timeline-entry-inner">
                <div class="king-addons-main-line-icon king-addons-icon">';
            Icons_Manager::render_icon($settings['posts_icon'], ['aria-hidden' => 'true']);
            echo '</div>
              <div class="king-addons-story-info-vertical king-addons-data-wrap animated ' . esc_attr($background_class) . '"
                   data-aos="' . esc_attr($this->animation) . '"
                   data-aos-left="' . esc_attr($this->animation_loadmore_left) . '"
                   data-aos-right="' . esc_attr($this->animation_loadmore_right) . '"
                   data-animation-offset="' . esc_attr($settings['animation_offset']) . '"
                   data-animation-duration="' . esc_attr($settings['aos_animation_duration']) . '">';

            // IMAGE / OVERLAY
            if (($settings['content_layout'] === 'image-top' && !empty($this->src)) ||
                ('yes' === $settings['show_overlay'] && !empty($this->src))
            ) {
                echo '<div class="king-addons-animation-wrap king-addons-timeline-media">
                    <img class="king-addons-thumbnail-image" alt="' . esc_attr($this->alt) . '" src="' . esc_url($this->src) . '">';
                if ('yes' === $settings['show_overlay'] && !empty(get_the_post_thumbnail_url())) {
                    echo '<div class="king-addons-timeline-story-overlay ' . esc_attr($this->animation_class) . '">';
                    if ('yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) {
                        echo '<p class="king-addons-title-wrap"><a class="king-addons-title" href="' . esc_url(get_the_permalink()) . '">' . esc_html(get_the_title()) . '</a></p>';
                    }
                    if ('yes' === $settings['show_date'] && 'yes' === $settings['date_overlay']) {
                        echo '<div class="king-addons-inner-date-label">' . esc_html(get_the_date($settings['date_format'])) . '</div>';
                    }
                    if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) {
                        echo '<div class="king-addons-description">' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '</div>';
                    }
                    if ('yes' === $this->show_readmore && 'yes' === $settings['readmore_overlay']) {
                        echo '<div class="king-addons-read-more-wrap"><a class="king-addons-read-more-button" href="' . esc_url(get_the_permalink()) . '">' . esc_html($settings['read_more_text']) . '</a></div>';
                    }
                    echo '</div>';
                }
                echo '</div>';
            }

            // Non-Overlay
            $hasNonOverlayContent = (
                ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) ||
                ('yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) ||
                ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) ||
                ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay'])
            );

            if ($hasNonOverlayContent) {
                echo '<div class="king-addons-timeline-content-wrapper">';
                if ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) {
                    echo '<p class="king-addons-title-wrap"><a class="king-addons-title" href="' . esc_url(get_the_permalink()) . '">' . esc_html(get_the_title()) . '</a></p>';
                }
                if ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) {
                    echo '<div class="king-addons-inner-date-label">' . esc_html(get_the_date($settings['date_format'])) . '</div>';
                }
                if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) {
                    echo '<div class="king-addons-description">' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '</div>';
                }
                if ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay']) {
                    echo '<div class="king-addons-read-more-wrap"><a class="king-addons-read-more-button" href="' . esc_url(get_the_permalink()) . '">' . esc_html($settings['read_more_text']) . '</a></div>';
                }
                echo '</div>';
            }

            // IMAGE BOTTOM
            if ($settings['content_layout'] === 'image-bottom' && !empty($this->src)) {
                echo '<div class="king-addons-animation-wrap king-addons-timeline-media"><img class="king-addons-thumbnail-image" alt="' . esc_attr($this->alt) . '" src="' . esc_url($this->src) . '"></div>';
            }
            echo '</div></div></article>';
            $countItem++;
        }
        echo '</div></div>';

        if (!($settings['posts_per_page'] >= wp_count_posts($settings['timeline_post_types'])->publish)) {
            $this->render_pagination($settings, $paged);
        }
    }

    public function render_custom_horizontal_timeline($settings, $autoplay, $loop, $dir, $data, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover)
    {
        $this->horizontal_timeline_classes($settings);
        echo '<div class="king-addons-timeline-outer-container">
            <div class="king-addons-wrapper swiper ' . esc_attr($this->horizontal_inner_class) . '"
                 dir="' . esc_attr($dir) . '"
                 data-slidestoshow="' . esc_attr($this->slides_to_show) . '"
                 data-autoplay="' . esc_attr($autoplay) . '"
                 data-loop="' . esc_attr($loop) . '"
                 data-swiper-speed="' . esc_attr($swiper_speed) . '"
                 data-swiper-delay="' . esc_attr($swiper_delay) . '"
                 data-swiper-poh="' . esc_attr($swiper_pause_on_hover) . '"
                 data-swiper-space-between="' . esc_attr($settings['story_info_gutter']) . '">
                <div class="swiper-wrapper ' . esc_attr($this->horizontal_timeline_class) . '">';

        if (is_array($data)) {
            foreach ($data as $index => $content) {
                if (!king_addons_freemius()->can_use_premium_code__premium_only() && $index === 4) {
                    break;
                }
                $repeater_title_link = $content['repeater_title_link'] ?? '';
                if (!empty($repeater_title_link['url'])) {
                    $this->add_link_attributes('repeater_title_link' . $this->item_url_count, $repeater_title_link);
                }
                $this->add_custom_horizontal_timeline_attributes($content, $settings, $index);
                $this->render_image_or_icon($content);

                echo '<div class="swiper-slide ' . esc_attr($this->swiper_class) . ' ' . esc_attr($slidesHeight) . ' elementor-repeater-item-' . esc_attr($content['_id']) . '">';

                // Extra label
                if ('yes' === $content['repeater_show_extra_label']) {
                    if (!empty($this->story_date_label) || !empty($this->story_extra_label)) {
                        echo '<div class="king-addons-extra-label">';
                        if (!empty($this->story_date_label)) {
                            echo '<span ' . $this->get_render_attribute_string($this->date_label_key) . '>' . esc_html($this->story_date_label) . '</span>';
                        }
                        if (!empty($this->story_extra_label)) {
                            echo '<span ' . $this->get_render_attribute_string($this->extra_label_key) . '>' . wp_kses_post($this->story_extra_label) . '</span>';
                        }
                        echo '</div>';
                    }
                }

                echo '<div class="king-addons-main-line-icon king-addons-icon">';
                Icons_Manager::render_icon($content['repeater_story_icon'], ['aria-hidden' => 'true']);
                echo '</div>
                  <div class="king-addons-story-info ' . esc_attr($this->background_class) . '">';

                // IMAGE TOP
                if (($settings['content_layout'] === 'image-top' && !empty($this->image)) ||
                    ($settings['content_layout'] === 'image-top' && !empty($content['repeater_youtube_video_url']))) {
                    echo '<div class="king-addons-animation-wrap king-addons-timeline-media">';
                    echo $this->image;
                    if (!empty($content['repeater_youtube_video_url'])) {
                        echo '<div class="king-addons-timeline-iframe-wrapper"> ' . $this->youtube_url($content) . ' </div>';
                    }
                    if ('yes' === $settings['show_overlay'] && (!empty($this->image) || !empty($content['repeater_youtube_video_url']))) {
                        echo '<div class="king-addons-timeline-story-overlay ' . esc_attr($this->animation_class) . '">';
                        if (!empty($this->timeline_story_title) && 'yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) {
                            if (!empty($repeater_title_link['url'])) {
                                echo '<p class="king-addons-title-wrap"><a ' . $this->get_render_attribute_string('repeater_title_link' . $this->item_url_count) . $this->get_render_attribute_string($this->title_key) . '>' . esc_html($this->timeline_story_title) . '</a></p>';
                            } else {
                                echo '<p class="king-addons-title-wrap"><span ' . $this->get_render_attribute_string($this->title_key) . '>' . esc_html($this->timeline_story_title) . '</span></p>';
                            }
                        }
                        if (!empty($this->timeline_description) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) {
                            echo '<div ' . $this->get_render_attribute_string($this->description_key) . '>' . wp_kses_post($this->timeline_description) . '</div>';
                        }
                        echo '</div>';
                    }
                    echo '</div>';
                }

                // NON-OVERLAY TITLE & DESCRIPTION
                if (
                    ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay'] && !empty($content['repeater_story_title'])) ||
                    ('yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay'] && !empty($content['repeater_description']))
                ) {
                    echo '<div class="king-addons-timeline-content-wrapper">';
                    if (!empty($this->timeline_story_title) && 'yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) {
                        if (!empty($repeater_title_link['url'])) {
                            echo '<p class="king-addons-title-wrap"><a ' . $this->get_render_attribute_string($this->title_key) . $this->get_render_attribute_string('repeater_title_link' . $this->item_url_count) . '>' . esc_html($this->timeline_story_title) . '</a></p>';
                        } else {
                            echo '<p class="king-addons-title-wrap"><span ' . $this->get_render_attribute_string($this->title_key) . '>' . esc_html($this->timeline_story_title) . '</span></p>';
                        }
                    }
                    if (!empty($this->timeline_description) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) {
                        echo '<div ' . $this->get_render_attribute_string($this->description_key) . '>' . wp_kses_post($this->timeline_description) . '</div>';
                    }
                    if (!empty($content['repeater_youtube_video_url']) && $settings['content_layout'] !== 'image-top') {
                        echo '<div class="king-addons-timeline-iframe-wrapper"> ' . $this->youtube_url($content) . ' </div>';
                    }
                    echo '</div>';
                }

                // IMAGE BOTTOM
                if ($settings['content_layout'] === 'image-bottom' && !empty($this->image)) {
                    echo '<div class="king-addons-animation-wrap king-addons-timeline-media">' . $this->image . '</div>';
                }
                echo '</div></div>';
                $this->item_url_count++;
            }
        }
        $this->king_addons_render_swiper_navigation($settings);
        echo '</div>';
    }

    public function render_dynamic_horizontal_timeline($settings, $dir, $autoplay, $loop, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover)
    {
        wp_reset_postdata();
        $this->horizontal_timeline_classes($settings);

        if (!$this->my_query->have_posts()) {
            echo '<div>' . esc_html($settings['query_not_found_text']) . '</div>';
            return;
        }

        echo '<div class="king-addons-timeline-outer-container">
            <div class="king-addons-wrapper swiper ' . esc_attr($this->horizontal_inner_class) . '"
                 dir="' . esc_attr($dir) . '"
                 data-slidestoshow="' . esc_attr($this->slides_to_show) . '"
                 data-autoplay="' . esc_attr($autoplay) . '"
                 data-loop="' . esc_attr($loop) . '"
                 data-swiper-speed="' . esc_attr($swiper_speed) . '"
                 data-swiper-delay="' . esc_attr($swiper_delay) . '"
                 data-swiper-poh="' . esc_attr($swiper_pause_on_hover) . '"
                 data-swiper-space-between="' . esc_attr($settings['story_info_gutter']) . '">
                <div class="' . esc_attr($this->horizontal_timeline_class) . ' swiper-wrapper">';

        while ($this->my_query->have_posts()) {
            $this->my_query->the_post();
            $id = get_post_thumbnail_id();
            $this->src = Group_Control_Image_Size::get_attachment_image_src($id, 'king_addons_thumbnail_dynamic', $settings);
            $this->alt = get_post_meta($id, '_wp_attachment_image_alt', true);
            if (empty($this->alt)) {
                $this->alt = get_the_title($id);
            }
            $background_class = ($settings['content_layout'] === 'background') ? 'story-with-background' : '';

            echo '<div class="swiper-slide ' . esc_attr($this->swiper_class) . ' ' . esc_attr($slidesHeight) . '">
                <div class="king-addons-story-info ' . esc_attr($background_class) . '">';

            if (($settings['content_layout'] === 'image-top' && !empty($this->src)) ||
                ('yes' === $settings['show_overlay'] && !empty($this->src))
            ) {
                echo '<div class="king-addons-animation-wrap king-addons-timeline-media">';
                if ($settings['content_layout'] === 'image-top') {
                    echo '<img class="king-addons-thumbnail-image" src="' . esc_url($this->src) . '">';
                }
                if ('yes' === $settings['show_overlay'] && !empty(get_the_post_thumbnail_url())) {
                    echo '<div class="king-addons-timeline-story-overlay ' . esc_attr($this->animation_class) . '">';
                    if ('yes' === $settings['show_title'] && 'yes' === $settings['title_overlay']) {
                        echo '<p class="king-addons-title-wrap"><a class="king-addons-title" href="' . esc_url(get_the_permalink()) . '">' . esc_html(get_the_title()) . '</a></p>';
                    }
                    if ('yes' === $settings['show_date'] && 'yes' === $settings['date_overlay']) {
                        echo '<div class="king-addons-inner-date-label">' . esc_html(get_the_date($settings['date_format'])) . '</div>';
                    }
                    if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' === $settings['description_overlay']) {
                        echo '<div class="king-addons-description">' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '</div>';
                    }
                    if ('yes' === $this->show_readmore && 'yes' === $settings['readmore_overlay']) {
                        echo '<div class="king-addons-read-more-wrap"><a class="king-addons-read-more-button" href="' . esc_url(get_the_permalink()) . '">' . esc_html($settings['read_more_text']) . '</a></div>';
                    }
                    echo '</div>';
                }
                echo '</div>';
            }

            // Non-overlay blocks
            $hasNonOverlayContent = (
                ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) ||
                ('yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) ||
                ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) ||
                ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay'])
            );

            if ($hasNonOverlayContent) {
                echo '<div class="king-addons-timeline-content-wrapper">';
                if ('yes' === $settings['show_title'] && 'yes' !== $settings['title_overlay']) {
                    echo '<p class="king-addons-title-wrap"><a class="king-addons-title" href="' . esc_url(get_the_permalink()) . '">' . esc_html(get_the_title()) . '</a></p>';
                }
                if ('yes' === $settings['show_date'] && 'yes' !== $settings['date_overlay']) {
                    echo '<div class="king-addons-inner-date-label">' . esc_html(get_the_date($settings['date_format'])) . '</div>';
                }
                if (!empty(get_the_content()) && 'yes' === $settings['show_description'] && 'yes' !== $settings['description_overlay']) {
                    echo '<div class="king-addons-description">' . esc_html(wp_trim_words(get_the_content(), $settings['excerpt_count'])) . '</div>';
                }
                if ('yes' === $this->show_readmore && 'yes' !== $settings['readmore_overlay']) {
                    echo '<div class="king-addons-read-more-wrap"><a class="king-addons-read-more-button" href="' . esc_url(get_the_permalink()) . '">' . esc_html($settings['read_more_text']) . '</a></div>';
                }
                echo '</div>';
            }

            // IMAGE BOTTOM
            if ($settings['content_layout'] === 'image-bottom' && !empty($this->src)) {
                echo '<div class="king-addons-animation-wrap king-addons-timeline-media"><img class="king-addons-thumbnail-image" alt="' . esc_attr($this->alt) . '" src="' . esc_url($this->src) . '"></div>';
            }
            echo '</div>';

            // Extra Label
            if ('yes' === $settings['show_extra_label']) {
                echo '<div class="king-addons-extra-label">
                    <span class="king-addons-label">' . esc_html(get_the_date($settings['date_format'])) . '</span>
                  </div>';
            }
            echo '<div class="king-addons-main-line-icon king-addons-icon">';
            Icons_Manager::render_icon($settings['posts_icon'], ['aria-hidden' => 'true']);
            echo '</div></div>';
        }
        $this->king_addons_render_swiper_navigation($settings);
        echo '</div>';
    }

    public function add_option_query_source()
    {
        $post_types = [
            'post' => esc_html__('Posts', 'king-addons'),
            'page' => esc_html__('Pages', 'king-addons'),
        ];

        $custom_post_types = Core::getCustomTypes('post');
        foreach ($custom_post_types as $slug => $title) {
            if ('product' === $slug || 'e-landing-page' === $slug) {
                continue;
            }
            if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
                $post_types['pro-' . substr($slug, 0, 2)] = esc_html($title) . ' (Pro)';
            } else {
                $post_types[$slug] = esc_html($title);
            }
        }

        $post_types['current'] = esc_html__('Current Query', 'king-addons');
        $post_types['pro-rl'] = esc_html__('Related Query (Pro)', 'king-addons');
        return $post_types;
    }

    protected function render()
    {
        $settings = $this->get_settings_for_display();
        global $paged;
        $paged = 1;
        $this->my_query = ('dynamic' === $settings['timeline_content'])
            ? new WP_Query($this->get_main_query_args())
            : '';

        $layout = $settings['timeline_layout'];
        $this->animation = $settings['timeline_animation'];
        $this->animation_loadmore_left = '';
        $this->animation_loadmore_right = '';
        $this->timeline_fill = $settings['timeline_fill'];
        $this->show_readmore = $settings['show_readmore'] ?? '';
        $data = $settings['timeline_repeater_list'];
        $loop = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_loop']))
            ? ''
            : $settings['swiper_loop'];
        $autoplay = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_autoplay']))
            ? ''
            : $settings['swiper_autoplay'];
        $swiper_delay = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_delay']))
            ? 0
            : $settings['swiper_delay'];
        $swiper_pause_on_hover = (!king_addons_freemius()->can_use_premium_code__premium_only() && !isset($settings['swiper_pause_on_hover']))
            ? ''
            : $settings['swiper_pause_on_hover'];
        $swiper_speed = $settings['swiper_speed'];
        $slidesHeight = $settings['equal_height_slides'];
        $this->pagination_type = $settings['pagination_type'] ?? '';
        $this->pagination_max_pages = $this->get_max_num_pages() ?: '';
        $arrow_bgcolor = $settings['triangle_bgcolor'];

        $animation_settings = [
            'overlay_animation' => $settings['overlay_animation'],
            'overlay_animation_size' => $settings['overlay_animation_size'],
            'overlay_animation_timing' => $settings['overlay_animation_timing'],
            'overlay_animation_tr' => $settings['overlay_animation_tr'],
        ];
        $this->animation_class = $this->get_animation_class($animation_settings, 'overlay');

        $dir = is_rtl() ? 'rtl' : '';

        if ('one-sided' === $layout) {
            $this->timeline_layout = "king-addons-one-sided-timeline";
            $this->timeline_layout_wrapper = "king-addons-one-sided-wrapper";
        } elseif ('centered' === $layout) {
            $this->timeline_layout = 'king-addons-both-sided-timeline';
            $this->timeline_layout_wrapper = 'king-addons-centered';
        } elseif ('one-sided-left' === $layout) {
            $this->timeline_layout = "king-addons-one-sided-timeline-left";
            $this->timeline_layout_wrapper = "king-addons-one-sided-wrapper-left";
        } elseif ('horizontal' === $layout) {
            $this->timeline_layout = "king-addons-horizontal-timeline";
            $this->timeline_layout_wrapper = "king-addons-horizontal-wrapper";
        }

        $countItem = $countItem ?? 0;
        $this->item_url_count = 0;

        // Dynamic / Horizontal
        if ('dynamic' === $settings['timeline_content'] && ('horizontal' === $layout || 'horizontal-bottom' === $layout)) {
            $this->render_dynamic_horizontal_timeline($settings, $dir, $autoplay, $loop, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover);
        } // Custom / Horizontal
        elseif ('custom' === $settings['timeline_content'] && ('horizontal' === $layout || 'horizontal-bottom' === $layout)) {
            $this->render_custom_horizontal_timeline($settings, $autoplay, $loop, $dir, $data, $slidesHeight, $swiper_speed, $swiper_delay, $swiper_pause_on_hover);
        } // Dynamic / Vertical
        else {
            if ('dynamic' === $settings['timeline_content']) {
                $this->render_dynamic_vertical_timeline($settings, $arrow_bgcolor, $layout, $countItem, $paged);
            } else {
                $this->render_custom_vertical_timeline($layout, $settings, $data, $countItem);
            }
        }
    }


}

new Timeline();