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

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Sifency\Traits\Sifency_Core_Text_Style;

class Sifency_Vertical_Progress extends Widget_Base {
	use Sifency_Core_Text_Style;

	public function get_name() { return 'sifency_vertical_progress'; }
	public function get_title() { return esc_html__( 'Sifency Vertical Progress', 'sifency-addons' ); }
	public function get_icon() { return 'eicon-skill-bar'; }
	public function get_categories() { return [ 'sifency-addons-widgets' ]; }
	public function get_style_depends() { return [ 'sifency-vprog-style' ]; }
	public function get_script_depends() { return [ 'sifency-vertical-progressbar-script' ]; }

	protected function register_controls() {

		$this->start_controls_section('section_content', [
			'label' => esc_html__('Progress Bars', 'sifency-addons')
		]);

		$this->add_control('skin', [
			'label'   => 'Layout Skin',
			'type'    => Controls_Manager::SELECT,
			'default' => 'chart',
			'options' => [
				'chart'    => 'Chart (Screenshot Style)',
				'tooltip'  => 'Floating Tooltip',
				'internal' => 'Internal Content',
			],
			'prefix_class' => 'sifency-vprog-skin-',
		]);

		$repeater = new Repeater();

		$repeater->add_control('title', [
			'label' => 'Title',
			'type' => Controls_Manager::TEXT,
			'default' => 'Skill',
		]);

		$repeater->add_control('percent', [
			'label' => 'Percentage',
			'type' => Controls_Manager::SLIDER,
			'range' => [ 'px' => [ 'min' => 0, 'max' => 100 ] ],
			'default' => [ 'size' => 50 ],
		]);

		$repeater->add_control('bar_color', [
			'label' => 'Custom Color',
			'type' => Controls_Manager::COLOR,
			'selectors' => [
				'{{WRAPPER}} {{CURRENT_ITEM}} .sifency-vprog-fill' => 'background-color: {{VALUE}};'
			]
		]);

		$this->add_control('items', [
			'label' => 'Items',
			'type' => Controls_Manager::REPEATER,
			'fields' => $repeater->get_controls(),
			'default' => [
				[ 'title' => 'Design', 'percent' => ['size' => 20] ],
				[ 'title' => 'PR', 'percent' => ['size' => 35] ],
				[ 'title' => 'Idea', 'percent' => ['size' => 52] ],
			],
			'title_field' => '{{{ title }}} - {{{ percent.size }}}%',
		]);

		$this->end_controls_section();

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

		$this->add_responsive_control(
			'columns',
			[
				'label' => 'Grid Columns',
				'type' => Controls_Manager::SELECT,
				'default' => '5',
				'options' => [ '1'=>'1', '2'=>'2', '3'=>'3', '4'=>'4', '5'=>'5', '6'=>'6', '7'=>'7', '8'=>'8', '9'=>'9', '10'=>'10' ],
				'selectors' => [ '{{WRAPPER}} .sifency-vprog-wrapper' => 'grid-template-columns: repeat({{VALUE}}, 1fr);' ],
			]
		);

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

		$this->add_responsive_control( 'chart_height', [
			'label' => 'Chart Height',
			'type' => Controls_Manager::SLIDER,
			'size_units' => [ 'px', 'vh' ],
			'range' => [ 'px' => [ 'min' => 100, 'max' => 600 ] ],
			'default' => [ 'size' => 250, 'unit' => 'px' ],
			'selectors' => [ '{{WRAPPER}} .sifency-vprog-track' => 'height: {{SIZE}}{{UNIT}};' ],
		]);

		$this->end_controls_section();

		// ==========================
		// STYLE: BAR
		// ==========================
		$this->start_controls_section( 'style_bar', [ 'label' => 'Bar Styling', 'tab' => Controls_Manager::TAB_STYLE ] );

		$this->add_control( 'bar_bg', [
			'label' => 'Track Color (Empty)',
			'type' => Controls_Manager::COLOR,
			'default' => '#f5f5f5',
			'selectors' => [ '{{WRAPPER}} .sifency-vprog-track' => 'background-color: {{VALUE}};' ],
		]);

		$this->add_control( 'bar_fill_color', [
			'label' => 'Fill Color (Global)',
			'type' => Controls_Manager::COLOR,
			'default' => '#ccc',
			'selectors' => [ '{{WRAPPER}} .sifency-vprog-fill' => 'background-color: {{VALUE}};' ],
		]);

		$this->add_control( 'bar_active_color', [
			'label' => 'Fill Color (Hover)',
			'type' => Controls_Manager::COLOR,
			'default' => '#54a0ff',
			'selectors' => [ '{{WRAPPER}} .sifency-vprog-item:hover .sifency-vprog-fill' => 'background-color: {{VALUE}};' ],
		]);

		$this->add_responsive_control( 'bar_width', [
			'label' => 'Bar Width (%)',
			'type' => Controls_Manager::SLIDER,
			'size_units' => [ '%' ],
			'default' => [ 'size' => 100, 'unit' => '%' ],
			'selectors' => [ '{{WRAPPER}} .sifency-vprog-track' => 'width: {{SIZE}}%;' ],
		]);

		$this->add_responsive_control( 'bar_radius', [
			'label' => 'Border Radius',
			'type' => Controls_Manager::DIMENSIONS,
			'selectors' => [ '{{WRAPPER}} .sifency-vprog-track, {{WRAPPER}} .sifency-vprog-fill' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
		]);

		$this->end_controls_section();

		$this->add_sifency_advanced_text_style([
            'prefix'   => 'content_style',
            'label'    => 'List Item Subtitle',
            'selector' => '.sifency-content-style',
            'target_children' => false,
        ]);

        $this->add_sifency_advanced_text_style([
            'prefix'   => 'number_style',
            'label'    => 'Price Sale',
            'selector' => '.sifency-number-style',
            'target_children' => false,
        ]);
	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		$widget_id = $this->get_id();
		?>
		<div class="sifency-vprog-wrapper" id="sifency-vprog-<?php echo esc_attr($widget_id); ?>">
			<?php foreach ($settings['items'] as $index => $item): 
				$percent = $item['percent']['size'];
				$delay = $index * 0.1;
			?>
				<div class="sifency-vprog-item elementor-repeater-item-<?php echo esc_attr($item['_id']); ?>">
					<div class="sifency-vprog-track">
						<div class="sifency-vprog-fill"
							style="height:0%; transition-delay: <?php echo esc_attr($delay); ?>s;"
							data-height="<?php echo esc_attr($percent); ?>">
							
							<?php if ($settings['skin'] === 'tooltip'): ?>
								<span class="sifency-vprog-tooltip"><?php echo esc_html($percent); ?>%</span>
							<?php endif; ?>

							<?php if ($settings['skin'] === 'internal'): ?>
								<div class="sifency-vprog-internal-content">
									<span class="sifency-vprog-title"><?php echo esc_html($item['title']); ?></span>
									<span class="sifency-vprog-percent"><?php echo esc_html($percent); ?>%</span>
								</div>
							<?php endif; ?>

						</div>
					</div>

					<?php if ($settings['skin'] === 'chart'): ?>
						<div class="sifency-vprog-meta">
							<span class="sifency-vprog-title"><?php echo esc_html($item['title']); ?></span>
							<span class="sifency-vprog-percent"><?php echo esc_html($percent); ?>%</span>
						</div>
					<?php elseif ($settings['skin'] === 'tooltip'): ?>
						<div class="sifency-vprog-meta">
							<span class="sifency-vprog-title"><?php echo esc_html($item['title']); ?></span>
						</div>
					<?php endif; ?>

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