<?php

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

class AddonNest_Widget_Time_Line extends \Elementor\Widget_Base {
	public function get_name() {
		return 'time-line';
	}

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

	public function get_icon() {
		return 'eicon-time-line';
	}

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

	protected function register_controls() {
		$this->start_controls_section(
            'section_title',
            [
                'label' => __( 'Title Element', 'addonnest' )
            ]
        );

		$repeater = new \Elementor\Repeater();

        $repeater->add_control(
			'timeline_title',
			[
				'label' => __( 'Timeline Title', 'addonnest' ),
				'type' => \Elementor\Controls_Manager::TEXT,
                'default'   => 'Co-Founder',
            ]
		);

        $repeater->add_control(
			'timeline_intro',
			[
				'label' => __( 'Timeline Intro', 'addonnest' ),
				'type' => \Elementor\Controls_Manager::TEXTAREA,
				'default' => __( 'Lorem ipsum dolor sit amet', 'addonnest' ),
            ]
		);

		$repeater->add_control(
			'timeline_datetime',
			[
				'label' => __( 'Timeline date Intro', 'addonnest' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => __( '18 March, 2025', 'addonnest' ),
            ]
		);

		$this->add_control(
			'timeline_list',
			[
				'label' => esc_html__( 'Timeline List', 'addonnest' ),
				'type' => \Elementor\Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'timeline_title' => esc_html__( 'Co-Founder', 'addonnest' ),
						'timeline_intro' => 'Lorem ipsum dolor sit amet',
						'timeline_datetime' => '18 March, 2021'
					],
				],
			]
		);

        $this->end_controls_section();
        # Option End


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

		# Timeline Title
		$this->add_control(
			'timeline_title',
			[
				'label'		=> __( 'Timeline Title Color', 'addonnest' ),
				'type'		=> \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} #timeline .timeline-movement .timeline-item .timeline-panel .title' => 'color: {{VALUE}};',
				],
			]
		);

		# Timeline Title Typography
		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'label'		=> __( 'Timeline Title Typography', 'addonnest' ),
				'name' 		=> 'title_typography',
				'selector' 	=> '{{WRAPPER}} #timeline .timeline-movement .timeline-item .timeline-panel .title',
			]
		);

		$this->add_responsive_control(
			'timeline_title_space',
			[
				'label' => esc_html__( 'Spacing', 'addonnest' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'default' => [
					'size' => 5,
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .timeline-area .timeline-description h6' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],
			]
		);

		/**
		 * Timeline Intro Style
		 */
		$this->add_control(
			'timeline_intro_section',
			[
				'label' => esc_html__( 'Intro Text Style', 'addonnest' ),
				'type' => \Elementor\Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		# Timeline Intro
		$this->add_control(
			'timeline_intro',
			[
				'label'		=> __( 'Timeline Intro Color', 'addonnest' ),
				'type'		=> \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} #timeline .timeline-movement .timeline-item .timeline-panel .details' => 'color: {{VALUE}};',
				],
			]
		);

		# Timeline Intro Typography
		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'label'		=> __( 'Timeline Intro Typography', 'addonnest' ),
				'name' 		=> 'intro_typography',
				'selector' 	=> '{{WRAPPER}} #timeline .timeline-movement .timeline-item .timeline-panel .details',
			]
		);

		$this->add_control(
			'timeline_datetime_section',
			[
				'label' => esc_html__( 'Datetime Style', 'addonnest' ),
				'type' => \Elementor\Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		# Timeline Datetime
		$this->add_control(
			'timeline_datetime',
			[
				'label'		=> __( 'Timeline Datetime Color', 'addonnest' ),
				'type'		=> \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} #timeline .timeline-movement .timeline-item .timeline-date' => 'color: {{VALUE}};',
				],
			]
		);

		# Timeline Datetime Typography
		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'label'		=> __( 'Timeline Datetime Typography', 'addonnest' ),
				'name' 		=> 'datetime_typography',
				'selector' 	=> '{{WRAPPER}} #timeline .timeline-movement .timeline-item .timeline-date',
			]
		);

		$this->add_control(
			'timeline_style',
			[
				'label' => esc_html__( 'Timeline Style', 'addonnest' ),
				'type' => \Elementor\Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);
		# Timeline Row
		$this->add_control(
			'timeline_row',
			[
				'label'		=> __( 'Timeline Line Color', 'addonnest' ),
				'type'		=> \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} #timeline:before' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} #timeline .timeline-movement.timeline-movement-top:before' => 'background: {{VALUE}};',
					'{{WRAPPER}} #timeline .timeline-movement .timeline-item .timeline-panel .title:before' => 'background: {{VALUE}};',
					'{{WRAPPER}} #timeline .timeline-movement .timeline-item .timeline-panel .title:after' => 'background: {{VALUE}};',
					'{{WRAPPER}} #timeline:after' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} #timeline .timeline-badge:before' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function render( ) {
		$settings = $this->get_settings();
		$timeline_list = $settings['timeline_list']; ?>


		<div id="timeline">
			<div class="timeline-movement timeline-movement-top">&nbsp;</div>

			<?php
			$counter = 0;
			foreach($timeline_list as $value) { ?>
				<?php if($counter%2==0){ ?>
					<div class="timeline-row timeline-movement">
						<div class="timeline-badge">&nbsp;</div>
						<div class="timeline-col-6 timeline-item">
							<div class="timeline-row">
								<div class="timeline-col-11">
									<div class="timeline-panel left-part">
										<?php if($value['timeline_title']) { ?>
											<p class="title"><?php echo wp_kses_post($value['timeline_title']); ?></p>
										<?php } ?>

										<?php if($value['timeline_intro']) { ?>
											<p class="details"><?php echo wp_kses_post($value['timeline_intro']); ?></p>
										<?php } ?>
									</div>
								</div>
							</div>
						</div>
						<div class="timeline-col-6 timeline-item">
							<div class="timeline-row">
								<div>
									<?php if($value['timeline_datetime']) { ?>
										<p class="timeline-date"><?php echo wp_kses_post($value['timeline_datetime']); ?> </p>
									<?php } ?>
								</div>
							</div>
						</div>
					</div>
				<?php }else{ ?>
					<div class="timeline-row timeline-movement">
						<div class="timeline-badge">&nbsp;</div>
						<div class="timeline-col-6 timeline-item">
							<div class="timeline-row">
								<div class="left-timeline-date">
									<?php if($value['timeline_datetime']) { ?>
										<p class="timeline-date text-right"><?php echo wp_kses_post($value['timeline_datetime']); ?></p>
									<?php } ?>
								</div>
							</div>
						</div>
						<div class="timeline-col-6 timeline-item">
							<div class="timeline-row">
								<div class="timeline-col-offset timeline-col-11">
									<div class="timeline-panel">
										<?php if($value['timeline_title']) { ?>
											<p class="title"><?php echo wp_kses_post($value['timeline_title']); ?></p>
										<?php } ?>

										<?php if($value['timeline_intro']) { ?>
											<p class="details"><?php echo wp_kses_post($value['timeline_intro']); ?></p>
										<?php } ?>
									</div>
								</div>
							</div>
						</div>
					</div>
					<?php } ?>
				<?php $counter++ ?>
			<?php } ?>
		</div>

		<?php
    }
}

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