<?php
if ( ! defined( 'ABSPATH' ) ) exit;

class Vista_Career_Widget extends \Elementor\Widget_Base {

	public function get_name() {
		return 'vista-career';
	}

	public function get_title() {
		return esc_html__( 'سوابق', 'vista' );
	}

	public function get_icon() {
		return 'eicon-call-to-action';
	}

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

	protected function register_controls() {

		
		$this->start_controls_section( 'section_items', [
			'label' => esc_html__( 'سوابق کاری', 'vista' ),
			'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
		] );

		$repeater = new \Elementor\Repeater();

		$repeater->add_control( 'job_title', [
			'label'   => esc_html__( 'عنوان شغلی', 'vista' ),
			'type'    => \Elementor\Controls_Manager::TEXT,
			'default' => 'ارشد طراحی UI/UX',
		] );

		$repeater->add_control( 'company_name', [
			'label'   => esc_html__( 'نام شرکت', 'vista' ),
			'type'    => \Elementor\Controls_Manager::TEXT,
			'default' => 'گوگل',
		] );

		$repeater->add_control( 'company_logo', [
			'label' => esc_html__( 'لوگو شرکت', 'vista' ),
			'type'  => \Elementor\Controls_Manager::ICONS,
			'default' => [
				'value' => 'fas fa-building',
				'library' => 'fa-solid',
			],
		] );

$repeater->add_control( 'job_type', [
    'label'   => esc_html__( 'نوع همکاری', 'vista' ),
    'type'    => \Elementor\Controls_Manager::SELECT,
    'default' => 'full-time',
    'options' => [
        'full-time' => esc_html__( 'تمام وقت', 'vista' ),
        'part-time' => esc_html__( 'پاره وقت', 'vista' ),
        'freelance' => esc_html__( 'فریلنسر', 'vista' ),
        'remote'    => esc_html__( 'دورکاری', 'vista' ),
    ],
] );

		$repeater->add_control( 'date_range', [
			'label'   => esc_html__( 'بازه زمانی', 'vista' ),
			'type'    => \Elementor\Controls_Manager::TEXT,
			'default' => '۲۰۲۲ - اکنون',
		] );

		$repeater->add_control( 'description', [
			'label' => esc_html__( 'توضیحات', 'vista' ),
			'type'  => \Elementor\Controls_Manager::TEXTAREA,
			'default' => 'مسئول طراحی رابط کاربری و تجربه کاربری پروژه‌های اصلی شرکت.',
		] );

		$repeater->add_control( 'tags', [
			'label' => esc_html__( 'برچسب‌ها', 'vista' ),
			'type'  => \Elementor\Controls_Manager::TEXT,
			'default' => 'Figma, UI Design, UX Research',
		] );

$repeater->add_control( 'achievement_1', [
    'label'   => esc_html__( 'دستاورد ۱', 'vista' ),
    'type'    => \Elementor\Controls_Manager::TEXT,
    'default' => __( 'افزایش ۲۰ درصدی نرخ تبدیل کاربر', 'vista' ),
] );
$repeater->add_control( 'achievement_2', [
    'label'   => esc_html__( 'دستاورد ۲', 'vista' ),
    'type'    => \Elementor\Controls_Manager::TEXT,
    'default' => __( 'پیاده‌سازی سیستم طراحی (Design System)', 'vista' ),
] );
$repeater->add_control( 'achievement_3', [
    'label'   => esc_html__( 'دستاورد ۳', 'vista' ),
    'type'    => \Elementor\Controls_Manager::TEXT,
] );

		$this->add_control( 'experience_list', [
			'label'   => esc_html__( 'لیست سوابق', 'vista' ),
			'type'    => \Elementor\Controls_Manager::REPEATER,
			'fields'  => $repeater->get_controls(),
			'default' => [
				[ 
					'job_title' => 'ارشد طراحی UI/UX', 
					'company_name' => 'گوگل',
					'job_type' => 'full-time',
					'date_range' => '۲۰۲۲ - اکنون',
					'description' => 'مسئول طراحی رابط کاربری و تجربه کاربری پروژه‌های اصلی شرکت.',
					'tags' => 'Figma, UI Design, UX Research',
					'achievement_1' => 'افزایش ۲۰ درصدی نرخ تبدیل کاربر',
					'achievement_2' => 'پیاده‌سازی سیستم طراحی (Design System)',
					'company_logo' => [
						'value' => 'fas fa-building',
						'library' => 'fa-solid',
					],
				],
			],
			'title_field' => '{{{ job_title }}}',
		] );

		$this->end_controls_section();

		
		$this->start_controls_section( 'section_style', [
			'label' => esc_html__( 'استایل', 'vista' ),
			'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
		] );

		$this->add_control( 'icon_size', [
			'label' => esc_html__( 'اندازه آیکون لوگو', 'vista' ),
			'type'  => \Elementor\Controls_Manager::SLIDER,
			'range' => [ 'px' => [ 'min' => 10, 'max' => 60 ] ],
			'selectors' => [
				'{{WRAPPER}} .tl-logo i'   => 'font-size: {{SIZE}}{{UNIT}};',
				'{{WRAPPER}} .tl-logo svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
			],
		] );

		$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
			'name'     => 'title_typography',
			'label'    => esc_html__( 'تایپوگرافی عناوین', 'vista' ),
			'selector' => '{{WRAPPER}} .tl-title, {{WRAPPER}} .tl-company',
		] );

		$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
			'name'     => 'desc_typography',
			'label'    => esc_html__( 'تایپوگرافی توضیحات', 'vista' ),
			'selector' => '{{WRAPPER}} .tl-desc, {{WRAPPER}} .tl-ach, {{WRAPPER}} .tl-tag, {{WRAPPER}} .tl-date',
		] );

		$this->end_controls_section();
	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		if ( empty( $settings['experience_list'] ) ) return;

		$type_labels = [
    'full-time' => __( 'تمام وقت', 'vista' ),
    'part-time'  => __( 'پاره وقت', 'vista' ),
    'freelance'  => __( 'فریلنسر', 'vista' ),
    'remote'     => __( 'دورکاری', 'vista' ),
];
		?>
		<div class="vista-career-wrap">
			<div class="career-timeline">
				<?php foreach ( $settings['experience_list'] as $item ) : 
					$type_label = $type_labels[ $item['job_type'] ] ?? '';
					$type_icon  = ( $item['job_type'] === 'freelance' ) ? 'fa-briefcase' : 'fa-clock';
				?>
				<div class="tl-item on">
					<div class="tl-card">
						<div class="tl-top">
							<div class="tl-company-row">
								<div class="tl-logo">
									<?php \Elementor\Icons_Manager::render_icon( $item['company_logo'], [ 'aria-hidden' => 'true' ] ); ?>
								</div>
								<div>
									<div class="tl-title"><?php echo esc_html( $item['job_title'] ); ?></div>
									<div class="tl-company"><?php echo esc_html( $item['company_name'] ); ?></div>
								</div>
							</div>
							<div class="tl-meta">
								<span class="tl-date"><?php echo esc_html( $item['date_range'] ); ?></span>
								<span class="tl-type"><i class="fa-solid <?php echo esc_attr( $type_icon ); ?>"></i> <?php echo esc_html($type_label); ?></span>
							</div>
						</div>
						
						<?php if ( ! empty( $item['description'] ) ) : ?>
							<div class="tl-desc"><?php echo esc_html($item['description']); ?></div>
						<?php endif; ?>

						<?php if ( ! empty( $item['tags'] ) ) : 
							$tags = explode( ',', $item['tags'] ); ?>
							<div class="tl-tags">
								<?php foreach ( $tags as $tag ) : ?>
									<span class="tl-tag"><?php echo esc_html( trim( $tag ) ); ?></span>
								<?php endforeach; ?>
							</div>
						<?php endif; ?>
						
						<?php 
						$achs = array_filter([$item['achievement_1'], $item['achievement_2'], $item['achievement_3']]);
						if ( !empty($achs) ) : ?>
							<div class="tl-achievements">
								<?php foreach ( $achs as $ach ) : ?>
									<div class="tl-ach"><i class="fa-solid fa-arrow-trend-up"></i> <?php echo esc_html($ach); ?></div>
								<?php endforeach; ?>
							</div>
						<?php endif; ?>
					</div>
				</div>
				<?php endforeach; ?>
			</div>
		</div>
		<?php
	}

	protected function content_template() {
		?>
		<#
		var type_labels = { 'full-time': 'تمام وقت', 'part-time': 'پاره وقت', 'freelance': 'فریلنسر', 'remote': 'دورکاری' };
		#>
		<div class="vista-career-wrap">
			<div class="career-timeline">
				<# _.each( settings.experience_list, function( item ) { 
					var iconHTML = elementor.helpers.renderIcon( view, item.company_logo, { 'aria-hidden': true }, 'i' , 'object' );
					var type_label = type_labels[ item.job_type ] || '';
					var type_icon = ( item.job_type === 'freelance' ) ? 'fa-briefcase' : 'fa-clock';
					var tags = item.tags ? item.tags.split(',') : [];
					var achs = [ item.achievement_1, item.achievement_2, item.achievement_3 ].filter(Boolean);
				#>
				<div class="tl-item on">
					<div class="tl-card">
						<div class="tl-top">
							<div class="tl-company-row">
								<div class="tl-logo">{{{ iconHTML.value }}}</div>
								<div>
									<div class="tl-title">{{{ item.job_title }}}</div>
									<div class="tl-company">{{{ item.company_name }}}</div>
								</div>
							</div>
							<div class="tl-meta">
								<span class="tl-date">{{{ item.date_range }}}</span>
								<span class="tl-type"><i class="fa-solid {{ type_icon }}"></i> {{ type_label }}</span>
							</div>
						</div>
						<# if ( item.description ) { #><div class="tl-desc">{{{ item.description }}}</div><# } #>
						<# if ( tags.length ) { #>
							<div class="tl-tags">
								<# _.each( tags, function( tag ) { #>
									<span class="tl-tag">{{ tag.trim() }}</span>
								<# }); #>
							</div>
						<# } #>
						<# if ( achs.length ) { #>
							<div class="tl-achievements">
								<# _.each( achs, function( a ) { #>
									<div class="tl-ach"><i class="fa-solid fa-circle-check"></i> {{ a }}</div>
								<# }); #>
							</div>
						<# } #>
					</div>
				</div>
				<# }); #>
			</div>
		</div>
		<?php
	}
}