<?php
/**
 * Compare Icon Widget - Style Controls
 *
 * @package GGM_Commerce
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// $this is the GGM_Commerce_Widget_Compare_Icon instance.

// ── Icon Style ────────────────────────────────────────────────────────────────

$this->start_controls_section(
	'section_style',
	array(
		'label' => 'Icon Style',
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_responsive_control(
	'icon_size',
	array(
		'label'      => 'Icon Size',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px', 'em' ),
		'range'      => array(
			'px' => array(
				'min' => 10,
				'max' => 100,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => 24,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-compare-icon i'   => 'font-size: {{SIZE}}{{UNIT}};',
			'{{WRAPPER}} .ggmc-compare-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->add_responsive_control(
	'icon_padding',
	array(
		'label'      => 'Padding',
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', 'em' ),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-compare-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		),
	)
);

$this->start_controls_tabs( 'icon_colors' );

$this->start_controls_tab(
	'icon_normal',
	array(
		'label' => 'Normal',
	)
);

$this->add_control(
	'icon_color',
	array(
		'label'     => 'Icon Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#666666',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-compare-icon'     => 'color: {{VALUE}};',
			'{{WRAPPER}} .ggmc-compare-icon svg' => 'fill: {{VALUE}};',
		),
	)
);

$this->add_control(
	'icon_background',
	array(
		'label'     => 'Background Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-compare-icon' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Border::get_type(),
	array(
		'name'     => 'icon_border',
		'selector' => '{{WRAPPER}} .ggmc-compare-icon',
	)
);

$this->end_controls_tab();

$this->start_controls_tab(
	'icon_hover',
	array(
		'label' => 'Hover',
	)
);

$this->add_control(
	'icon_hover_color',
	array(
		'label'     => 'Icon Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#2563eb',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-compare-icon:hover'     => 'color: {{VALUE}};',
			'{{WRAPPER}} .ggmc-compare-icon:hover svg' => 'fill: {{VALUE}};',
		),
	)
);

$this->add_control(
	'icon_hover_background',
	array(
		'label'     => 'Background Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-compare-icon:hover' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'icon_hover_border_color',
	array(
		'label'     => 'Border Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-compare-icon:hover' => 'border-color: {{VALUE}};',
		),
	)
);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->add_control(
	'icon_border_radius',
	array(
		'label'      => 'Border Radius',
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', '%' ),
		'separator'  => 'before',
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-compare-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();

// ── Count Badge ───────────────────────────────────────────────────────────────

$this->start_controls_section(
	'section_badge_style',
	array(
		'label'     => 'Count Badge',
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array(
			'show_count' => 'yes',
		),
	)
);

$this->add_control(
	'badge_background',
	array(
		'label'     => 'Background Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#2563eb',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-compare-count-badge' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'badge_color',
	array(
		'label'     => 'Text Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#ffffff',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-compare-count-badge' => 'color: {{VALUE}};',
		),
	)
);

$this->add_responsive_control(
	'badge_size',
	array(
		'label'      => 'Badge Size',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px' ),
		'range'      => array(
			'px' => array(
				'min' => 12,
				'max' => 30,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => 18,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-compare-count-badge' => 'min-width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; font-size: calc({{SIZE}}{{UNIT}} * 0.6);',
		),
	)
);

$this->add_responsive_control(
	'badge_position_x',
	array(
		'label'      => 'Horizontal Position',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px', '%' ),
		'range'      => array(
			'px' => array(
				'min' => -20,
				'max' => 20,
			),
			'%'  => array(
				'min' => -100,
				'max' => 100,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => -8,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-compare-count-badge' => 'right: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->add_responsive_control(
	'badge_position_y',
	array(
		'label'      => 'Vertical Position',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px', '%' ),
		'range'      => array(
			'px' => array(
				'min' => -20,
				'max' => 20,
			),
			'%'  => array(
				'min' => -100,
				'max' => 100,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => -8,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-compare-count-badge' => 'top: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();
