<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Background;
use Elementor\Icons_Manager;
use Elementor\Repeater;

class Sifency_Vertical_Tabs extends Widget_Base {

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

	public function get_title() {
		return esc_html__( 'Sifency Vertical Tabs', 'sifency-addons' );
	}

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

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

	public function get_style_depends() {
		return [ 'sifency-vertical-tab-style' ];
	}

	public function get_script_depends() {
		return [ 'sifency-vertical-tab-script' ];
	}

	protected function register_controls() {

		// ==========================
		// CONTENT: TABS
		// ==========================
		$this->start_controls_section(
			'section_content',
			[ 'label' => esc_html__( 'Tabs Content', 'sifency-addons' ) ]
		);

		$this->add_control(
			'tab_skin',
			[
				'label'   => esc_html__( 'Style Preset (Skin)', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'classic',
				'options' => [
					'classic' => 'Classic (Bordered)',
					'minimal' => 'Minimal (Left Line)',
					'cards'   => 'Cards (Shadow Box)',
					'pills'   => 'Pills (Rounded)',
					'neon'    => 'Neon (Dark Glow)',
				],
				'prefix_class' => 'sifency-vtabs-skin-',
			]
		);

		$repeater = new Repeater();

		$repeater->add_control( 'tab_title', [
			'label' => esc_html__( 'Title', 'sifency-addons' ),
			'type' => Controls_Manager::TEXT,
			'default' => 'Tab Title',
			'label_block' => true,
		]);

		$repeater->add_control( 'tab_subtitle', [
			'label' => esc_html__( 'Subtitle', 'sifency-addons' ),
			'type' => Controls_Manager::TEXT,
			'default' => 'Short description',
		]);

		$repeater->add_control( 'tab_icon', [
			'label' => esc_html__( 'Icon', 'sifency-addons' ),
			'type' => Controls_Manager::ICONS,
			'default' => [ 'value' => 'fas fa-star', 'library' => 'fa-solid' ],
		]);

		$repeater->add_control( 'tab_content', [
			'label' => esc_html__( 'Content', 'sifency-addons' ),
			'type' => Controls_Manager::WYSIWYG,
			'default' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.',
		]);

		$this->add_control(
			'tabs',
			[
				'label' => esc_html__( 'Tabs Items', 'sifency-addons' ),
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[ 'tab_title' => 'Development', 'tab_subtitle' => 'Coding & logic' ],
					[ 'tab_title' => 'Design', 'tab_subtitle' => 'UI & UX Interface' ],
					[ 'tab_title' => 'Marketing', 'tab_subtitle' => 'SEO & Socials' ],
				],
				'title_field' => '{{{ tab_title }}}',
			]
		);

		$this->end_controls_section();

		// ==========================
		// STYLE: LAYOUT
		// ==========================
		$this->start_controls_section( 'style_layout', [ 'label' => 'Layout', 'tab' => Controls_Manager::TAB_STYLE ] );

		$this->add_responsive_control( 'nav_width', [
			'label' => 'Navigation Width (%)',
			'type' => Controls_Manager::SLIDER,
			'size_units' => [ '%', 'px' ],
			'range' => [ '%' => [ 'min' => 10, 'max' => 50 ] ],
			'default' => [ 'unit' => '%', 'size' => 30 ],
			'tablet_default' => [ 'unit' => '%', 'size' => 100 ], // Stack on tablet
			'mobile_default' => [ 'unit' => '%', 'size' => 100 ],
			'selectors' => [ 
				'{{WRAPPER}} .sifency-vtabs-nav' => 'width: {{SIZE}}{{UNIT}};',
				'{{WRAPPER}} .sifency-vtabs-content-wrap' => 'width: calc(100% - {{SIZE}}{{UNIT}});',
			],
		]);

		$this->add_responsive_control( 'gap', [
			'label' => 'Gap',
			'type' => Controls_Manager::SLIDER,
			'size_units' => [ 'px' ],
			'default' => [ 'size' => 40 ],
			'selectors' => [ '{{WRAPPER}} .sifency-vtabs-wrapper' => 'gap: {{SIZE}}px;' ],
		]);

		$this->add_responsive_control( 'nav_item_spacing', [
			'label' => 'Nav Item Spacing',
			'type' => Controls_Manager::SLIDER,
			'selectors' => [ '{{WRAPPER}} .sifency-vtabs-nav-item' => 'margin-bottom: {{SIZE}}px;' ],
		]);

		$this->end_controls_section();

		// ==========================
		// STYLE: NAVIGATION
		// ==========================
		$this->start_controls_section( 'style_nav', [ 'label' => 'Navigation Style', 'tab' => Controls_Manager::TAB_STYLE ] );

		$this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'nav_title_typo', 'selector' => '{{WRAPPER}} .sifency-vtab-title' ] );
		
		$this->start_controls_tabs( 'tabs_nav_style' );

		// Normal
		$this->start_controls_tab( 'tab_nav_normal', [ 'label' => 'Normal' ] );
		$this->add_control( 'nav_color', [ 'label' => 'Text Color', 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .sifency-vtab-title' => 'color: {{VALUE}};' ] ] );
		$this->add_control( 'nav_icon_color', [ 'label' => 'Icon Color', 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .sifency-vtab-icon' => 'color: {{VALUE}};' ] ] );
		$this->add_control( 'nav_bg', [ 'label' => 'Background', 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .sifency-vtabs-nav-item' => 'background-color: {{VALUE}};' ] ] );
		$this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'nav_border', 'selector' => '{{WRAPPER}} .sifency-vtabs-nav-item' ] );
		$this->end_controls_tab();

		// Active
		$this->start_controls_tab( 'tab_nav_active', [ 'label' => 'Active' ] );
		$this->add_control( 'nav_active_color', [ 'label' => 'Text Color', 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .sifency-vtabs-nav-item.active .sifency-vtab-title' => 'color: {{VALUE}};' ] ] );
		$this->add_control( 'nav_active_icon_color', [ 'label' => 'Icon Color', 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .sifency-vtabs-nav-item.active .sifency-vtab-icon' => 'color: {{VALUE}};' ] ] );
		$this->add_control( 'nav_active_bg', [ 'label' => 'Background', 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .sifency-vtabs-nav-item.active' => 'background-color: {{VALUE}};' ] ] );
		$this->add_control( 'nav_active_border_color', [ 'label' => 'Border Color', 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .sifency-vtabs-nav-item.active' => 'border-color: {{VALUE}};' ] ] );
		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'nav_active_shadow', 'selector' => '{{WRAPPER}} .sifency-vtabs-nav-item.active' ] );
		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_responsive_control( 'nav_padding', [ 'label' => 'Padding', 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .sifency-vtabs-nav-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ] ] );
		$this->add_responsive_control( 'nav_radius', [ 'label' => 'Border Radius', 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .sifency-vtabs-nav-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ] ] );

		$this->end_controls_section();

		// ==========================
		// STYLE: CONTENT
		// ==========================
		$this->start_controls_section( 'style_content_area', [ 'label' => 'Content Area', 'tab' => Controls_Manager::TAB_STYLE ] );
		
		$this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'content_typo', 'selector' => '{{WRAPPER}} .sifency-vtabs-content-item' ] );
		$this->add_control( 'content_color', [ 'label' => 'Text Color', 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .sifency-vtabs-content-item' => 'color: {{VALUE}};' ] ] );
		$this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'content_bg', 'selector' => '{{WRAPPER}} .sifency-vtabs-content-wrap' ] );
		$this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'content_border', 'selector' => '{{WRAPPER}} .sifency-vtabs-content-wrap' ] );
		$this->add_responsive_control( 'content_padding', [ 'label' => 'Padding', 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .sifency-vtabs-content-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ] ] );
		$this->add_responsive_control( 'content_radius', [ 'label' => 'Border Radius', 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .sifency-vtabs-content-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ] ] );

		$this->end_controls_section();
	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		?>
		<div class="sifency-vtabs-wrapper">
			
			<div class="sifency-vtabs-nav">
				<?php foreach ( $settings['tabs'] as $index => $tab ) : 
					$active = ( 0 === $index ) ? 'active' : '';
				?>
					<div class="sifency-vtabs-nav-item <?php echo esc_attr($active); ?>" data-index="<?php echo esc_attr($index); ?>">
						<?php if ( ! empty( $tab['tab_icon']['value'] ) ) : ?>
							<span class="sifency-vtab-icon">
								<?php \Elementor\Icons_Manager::render_icon( $tab['tab_icon'], [ 'aria-hidden' => 'true' ] ); ?>
							</span>
						<?php endif; ?>
						<div class="sifency-vtab-text">
							<span class="sifency-vtab-title"><?php echo esc_html( $tab['tab_title'] ); ?></span>
							<?php if ( ! empty( $tab['tab_subtitle'] ) ) : ?>
								<span class="sifency-vtab-subtitle"><?php echo esc_html( $tab['tab_subtitle'] ); ?></span>
							<?php endif; ?>
						</div>
					</div>
				<?php endforeach; ?>
			</div>

			<div class="sifency-vtabs-content-wrap">
				<?php foreach ( $settings['tabs'] as $index => $tab ) : 
					$active = ( 0 === $index ) ? 'active' : '';
				?>
					<div class="sifency-vtabs-content-item <?php echo esc_attr($active); ?>" data-index="<?php echo esc_attr($index); ?>">
						<div class="sifency-vtabs-inner">
							<?php echo do_shortcode( $tab['tab_content'] ); ?>
						</div>
					</div>
				<?php endforeach; ?>
			</div>

		</div>
		<?php
	}
}