<?php
namespace ova_framework\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Core\Schemes\Typography;
use Elementor\Group_Control_Typography;
use Elementor\Core\Schemes\Color;
use Elementor\Group_Control_Border;

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


class ova_history extends Widget_Base {

	public function get_name() {
		return 'ova_history';
	}

	public function get_title() {
		return __( 'History', 'ova-framework' );
	}

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

	public function get_categories() {
		return [ 'ovatheme' ];
	}

	public function get_script_depends() {
		return [ 'script-elementor' ];
	}

	protected function register_controls() {

		$this->start_controls_section(
			'section_content',
			[
				'label' => __( 'Content', 'ova-framework' ),
			]
		);


		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
			'title',
			[
				'label' => __( 'Title', 'ova-framework' ),
				'type' => \Elementor\Controls_Manager::TEXTAREA,
				'row' => 2
			]
		);


		$repeater->add_control(
			'year',
			[
				'label' => __( 'Year', 'ova-framework' ),
				'type' => \Elementor\Controls_Manager::TEXT,
			]
		);

		$repeater->add_control(
			'image',
			[
				'label'   => 'Image',
				'type'    => \Elementor\Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
			]
		);

		$repeater->add_control(
			'desc',
			[
				'label' => __( 'Description', 'ova-framework' ),
				'type' => \Elementor\Controls_Manager::TEXTAREA,
				'row' => 5,
			]
		);

		$this->add_control(
			'tabs',
			[
				'label' => __( 'Tabs', 'ova-framework' ),
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'title' => __('City Council founded ', 'ova-framework'),
						'year' => 1875,
						'desc' => __('Branding network effects interaction design vesting period responsive web design. Leverage incubator twitter gen-z burn rate MVP termsheet entrepreneur holy grail infographic marketing founders learning curve gamification.', 'ova-framework'),
					],
					[
						'title' => __('First Election Conducted', 'ova-framework'),
						'year' => 1954,
						'desc' => __('Low hanging fruit rockstar iPhone channels founders MVP technology monetization customer disruptive. Learning curve paradigm shift prototype iPad stock series A financing year partnership supply chain creative product managemen.', 'ova-framework'),
					],
					[
						'title' => __('Expand the field of activity', 'ova-framework'),

						'year' => 1997,
						'desc' => __('Value proposition customer user experience valida MVP seed money. Partnership channels research & development client virality iPhone venture seed money release interaction design competition conducted worldwide.', 'ova-framework'),
					],

					[
						'title' => __('Becoming a Smart City', 'ova-framework'),

						'year' => 2018,
						'desc' => __('Branding network effects interaction design vesting period responsive web design. Leverage incubator twitter gen-z burn rate MVP termsheet entrepreneur holy grail infographic marketing founders learning curve gamification. ', 'ova-framework'),
					],
					
				],
				'title_field' => '{{{ title }}}',
			]
		);

		$this->end_controls_section();


		$this->start_controls_section(
			'section_title',
			[
				'label' => __( 'Title', 'ova-framework' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'title_typography',
				'selector' => '{{WRAPPER}} .ova-history .wp-item .wp-year .title h3',
			]
		);

		$this->add_control(
			'color_title',
			[
				'label'     => __( 'Color', 'ova-framework' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ova-history .wp-item .wp-year .title h3' => 'color : {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'margin_title',
			[
				'label'      => __( 'Margin', 'ova-framework' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .ova-history .wp-item .wp-year .title h3' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		


		$this->start_controls_section(
			'section_year',
			[
				'label' => __( 'Year', 'ova-framework' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'year_typography',
				'selector' => '{{WRAPPER}} .ova-history .wp-item .wp-year .year',
			]
		);

		$this->add_control(
			'color_year',
			[
				'label'     => __( 'Color', 'ova-framework' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ova-history .wp-item .wp-year .year' => 'color : {{VALUE}};',
				],
			]
		);


		$this->add_responsive_control(
			'margin_year',
			[
				'label'      => __( 'Margin', 'ova-framework' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .ova-history .wp-item .wp-year .year' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_desc',
			[
				'label' => __( 'Description', 'ova-framework' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'desc_typography',
				'selector' => '{{WRAPPER}} .ova-history .wp-item .wp-year .desc p',
			]
		);

		$this->add_control(
			'color_desc',
			[
				'label'     => __( 'Color', 'ova-framework' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ova-history .wp-item .wp-year .desc p' => 'color : {{VALUE}};',
				],
			]
		);


		$this->add_responsive_control(
			'margin_desc',
			[
				'label'      => __( 'Margin', 'ova-framework' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .ova-history .wp-item .wp-year .desc p' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_dot',
			[
				'label' => __( 'Dots', 'ova-framework' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);


		$this->add_control(
			'bg_color_dot',
			[
				'label'     => __( 'Color', 'ova-framework' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ova-history .wp-item .wp-year .dot .dot1' => 'background-color : {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();

	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		$tabs = $settings['tabs'];
		?>
		<div class="ova-history ">
			<?php if (is_array($tabs)) : ?>
				<?php foreach($tabs as $item) : ?>
					<div class="wp-item">
						<div class="wp-content">
							
							<div class="content">
								<div class="ova-media">
									<img src="<?php echo esc_attr($item['image']['url']) ?>" alt="">
								</div>
							</div>
						</div>
						<div class="wp-year">
							<span class="dot">
								<span class="dot1"></span>
								<span  class="dot2"></span>
								<span  class="dot3"></span>
								<span  class="dot4"></span>
							</span>

							<p class="year second_font"><?php echo esc_html($item['year']) ?></p>

							<div class="title">
								<?php if($item['title']) : ?>
									<h3><?php echo $item['title'] ?></h3>
								<?php endif ?>
							</div>

							<div class="desc">
								<p><?php echo esc_html($item['desc']) ?></p>
							</div>

						</div>
					</div>
				<?php endforeach ?>
			<?php endif ?>
		</div>
		<?php
	}
}