<?php
namespace ova_framework\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;

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

class ova_tabs extends Widget_Base {

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

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

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

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

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

	protected function register_controls() {

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


		$repeater = new \Elementor\Repeater();


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

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

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

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

		$repeater->add_control(
			'link',
			[
				'label' => __( 'Link', 'ova-framework' ),
				'type' => Controls_Manager::URL,
				'placeholder' => __( 'https://your-link.com', 'ova-framework' ),
				'default' => [
					'url' => '#',
				],
			]
		);

		$this->add_control(
			'tabs',
			[
				'label' => __( 'Tabs', 'ova-framework' ),
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'id_tabs' => __( '1', 'ova-framework' ),
						'tab_title' => __( 'Our Mission', 'ova-framework' ),
						'tab_content' => __( 'Monocle ipsum dolor sit amet exclusive essential uniforms, classic K-pop Tsutaya Boeing 787 Ginza. Boeing 787 vibrant Ginza Asia-Pacific non
                         signature emerging Nordic Marylebone international smart cosy handson crafted bespoke tote bag boulevard. Mayor Andrew J. Simmons, an 
                         accomplished advocate for working people', 'ova-framework' ),
						'tab_button'=>__( 'Read more', 'ova-framework' ),
					],
					[
						'id_tabs' => __( '2', 'ova-framework' ),
						'tab_title' => __( 'Our Vision', 'ova-framework' ),
						'tab_content' => __( 'Monocle ipsum dolor sit amet exclusive essential uniforms, classic K-pop Tsutaya Boeing 787 Ginza. Boeing 787 vibrant Ginza Asia-Pacific non
                         signature emerging Nordic Marylebone international smart cosy handson crafted bespoke tote bag boulevard. Mayor Andrew J. Simmons, an 
                         accomplished advocate for working people.', 'ova-framework' ),
						'tab_button'=>__( 'Learn more', 'ova-framework' ),
					],
					[
						'id_tabs' => __( '3', 'ova-framework' ),
						'tab_title' => __( 'Values', 'ova-framework' ),
						'tab_content' => __( 'Monocle ipsum dolor sit amet exclusive essential uniforms, classic K-pop Tsutaya Boeing 787 Ginza. Boeing 787 vibrant Ginza Asia-Pacific non
                         signature emerging Nordic Marylebone international smart cosy handson crafted bespoke tote bag boulevard. Mayor Andrew J. Simmons, an 
                         accomplished advocate for working people', 'ova-framework' ),
						'tab_button'=>__( 'Learn more', 'ova-framework' ),
					],
				],
			]
		);

		$this->end_controls_section();

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

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'tab_title_typography',
				'selector' => '{{WRAPPER}} .tab-wrapper ul li a',
			]
		);

		$this->add_control(
			'back_color_tabs',
			[
				'label' => __( 'Background Color Tabs', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tab-wrapper ul li' => 'background-color : {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'back_color_tabs_hover',
			[
				'label' => __( 'Background Color Tabs Hover', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tab-wrapper ul li:hover' => 'background-color : {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'back_color_tabs_act',
			[
				'label' => __( 'Background Color Tabs Active ', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tab-wrapper ul li.active' => 'background-color : {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'color_tabs',
			[
				'label' => __( 'Color Tabs ', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tab-wrapper ul li a' => 'color : {{VALUE}};',
				],
			]
		);
			$this->add_control(
			'color_tabs_hover',
			[
				'label' => __( 'Color Tabs Hover ', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tab-wrapper ul li:hover a' => 'color : {{VALUE}};',
				],
			]
		);
			$this->add_control(
			'color_tabs_act2',
			[
				'label' => __( 'Color Tabs Active ', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tab-wrapper ul li.active a' => 'color : {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'color_title',
			[
				'label' => __( 'Color Content', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tab-item span' => 'color : {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'title_typography',
				'selector' => '{{WRAPPER}} .tab-item span',
			]
		);

			$this->add_control(
			'back_color_btn_hover',
			[
				'label' => __( 'Background Color Button Hover', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tab-item button:hover' => 'background-color : {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'back_color_btn',
			[
				'label' => __( 'Background Color Button ', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tab-item button' => 'background-color : {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'color_btn',
			[
				'label' => __( 'Color Button ', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tab-item button a' => 'color : {{VALUE}};',
				],
			]
		);


		$this->end_controls_section();
		
	}

	/**
	 * Render the widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();
		$tabs = $settings['tabs'];
		?>

		<div class="tab-wrapper">

	      <ul class="tab">
	      	<?php foreach( $tabs as $item ) { ?>
	      		<li class="second_font">
	      			<a href="#<?php echo esc_html__( $item['id_tabs'] ) ?>">
	      				<?php echo esc_html__( $item['tab_title'] ) ?>
	      			</a>
	      		</li>
	      	<?php } ?>
	      </ul>

	      <!-- Tab panes -->
	      <div class="tab-content">
	      	<?php 
	      	foreach( $tabs as $item ) { 
	      		?>
	      		<div class="tab-item" id = "<?php echo esc_html__( $item['id_tabs'] ) ?>">
	      			<span><?php echo esc_html__( $item['tab_content'] ) ?></span>
	      			<button><a class="ova_button second_font" href="<?php echo $item['link']['url'] ?>" ><?php echo esc_html( $item['tab_button'] ) ?></a></button>
	      		</div>
	      	<?php } ?>
	      </div>
        
    </div>

		<?php
	}
}