<?php
/**
 * Variation Selector Widget - Style Controls
 *
 * @package GGM_Commerce
 */

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

// $this is the GGM_Commerce_Widget_Variation_Selector instance.

// Style Section - Labels.
$this->start_controls_section(
	'section_style_labels',
	array(
		'label' => 'Labels',
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'     => 'label_typography',
		'selector' => '{{WRAPPER}} .ggmc-variation-attribute-label',
	)
);

$this->add_control(
	'label_color',
	array(
		'label'     => 'Label Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-attribute-label' => 'color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'selected_value_color',
	array(
		'label'     => 'Selected Value Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-selected-value' => 'color: {{VALUE}};',
		),
	)
);

$this->add_responsive_control(
	'label_margin',
	array(
		'label'      => 'Label Margin',
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', 'em', '%' ),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-variation-attribute-row' => 'margin-bottom: {{BOTTOM}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();

// Style Section - Buttons/Swatches.
$this->start_controls_section(
	'section_style_options',
	array(
		'label' => 'Options',
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

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

$this->add_control(
	'option_text_color',
	array(
		'label'     => 'Text Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-button' => 'color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'option_border_color',
	array(
		'label'     => 'Border Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-button, {{WRAPPER}} .ggmc-variation-swatch' => 'border-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'heading_selected',
	array(
		'label'     => 'Selected State',
		'type'      => \Elementor\Controls_Manager::HEADING,
		'separator' => 'before',
	)
);

$this->add_control(
	'selected_background',
	array(
		'label'     => 'Selected Background',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-button.selected, {{WRAPPER}} .ggmc-variation-swatch.selected' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'selected_text_color',
	array(
		'label'     => 'Selected Text Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-button.selected' => 'color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'selected_border_color',
	array(
		'label'     => 'Selected Border Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-button.selected, {{WRAPPER}} .ggmc-variation-swatch.selected' => 'border-color: {{VALUE}};',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	array(
		'name'     => 'selected_box_shadow',
		'label'    => 'Selected Box Shadow',
		'selector' => '{{WRAPPER}} .ggmc-variation-swatch.selected',
	)
);

$this->add_control(
	'heading_hover',
	array(
		'label'     => 'Hover State',
		'type'      => \Elementor\Controls_Manager::HEADING,
		'separator' => 'before',
	)
);

$this->add_control(
	'hover_border_color',
	array(
		'label'     => 'Hover Border Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-button:hover, {{WRAPPER}} .ggmc-variation-swatch:hover' => 'border-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'heading_disabled',
	array(
		'label'     => 'Disabled/Out of Stock',
		'type'      => \Elementor\Controls_Manager::HEADING,
		'separator' => 'before',
	)
);

$this->add_control(
	'out_of_stock_line_color',
	array(
		'label'     => 'Out of Stock Line Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-button.out-of-stock::after' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'disabled_opacity',
	array(
		'label'      => 'Disabled Opacity',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( '' ),
		'range'      => array(
			'' => array(
				'min'  => 0.1,
				'max'  => 1,
				'step' => 0.1,
			),
		),
		'default'    => array(
			'size' => 0.4,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-variation-button.disabled, {{WRAPPER}} .ggmc-variation-swatch.disabled' => 'opacity: {{SIZE}};',
		),
	)
);

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

$this->add_control(
	'option_border_width',
	array(
		'label'      => 'Border Width',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px' ),
		'range'      => array(
			'px' => array(
				'min'  => 0,
				'max'  => 5,
				'step' => 1,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => 1,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-variation-button, {{WRAPPER}} .ggmc-variation-swatch' => 'border-width: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->add_control(
	'option_border_radius',
	array(
		'label'      => 'Border Radius',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px', '%' ),
		'range'      => array(
			'px' => array(
				'min'  => 0,
				'max'  => 50,
				'step' => 1,
			),
			'%'  => array(
				'min'  => 0,
				'max'  => 50,
				'step' => 1,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => 4,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-variation-button, {{WRAPPER}} .ggmc-variation-swatch' => 'border-radius: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->add_responsive_control(
	'option_gap',
	array(
		'label'      => 'Gap Between Options',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px', 'em' ),
		'range'      => array(
			'px' => array(
				'min'  => 0,
				'max'  => 30,
				'step' => 1,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => 8,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-variation-options' => 'gap: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();

// Style Section - Dropdown.
$this->start_controls_section(
	'section_style_dropdown',
	array(
		'label' => 'Dropdown',
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

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

$this->add_control(
	'dropdown_text_color',
	array(
		'label'     => 'Text Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-select' => 'color: {{VALUE}};',
		),
	)
);

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

$this->add_control(
	'dropdown_hover_border_color',
	array(
		'label'     => 'Hover/Focus Border Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-select:hover, {{WRAPPER}} .ggmc-variation-select:focus' => 'border-color: {{VALUE}};',
		),
	)
);

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

$this->add_control(
	'dropdown_border_radius',
	array(
		'label'      => 'Border Radius',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px', '%' ),
		'range'      => array(
			'px' => array(
				'min'  => 0,
				'max'  => 20,
				'step' => 1,
			),
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-variation-select' => 'border-radius: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();

// Style Section - Price Display.
$this->start_controls_section(
	'section_style_price',
	array(
		'label' => 'Price Display',
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'     => 'price_typography',
		'selector' => '{{WRAPPER}} .ggmc-variation-price',
	)
);

$this->add_control(
	'price_color',
	array(
		'label'     => 'Price Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-price' => 'color: {{VALUE}};',
		),
	)
);

$this->add_responsive_control(
	'price_margin',
	array(
		'label'      => 'Margin',
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', 'em', '%' ),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-variation-price-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		),
	)
);

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

$this->add_control(
	'price_border_color',
	array(
		'label'     => 'Border Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-price-wrapper' => 'border-top-color: {{VALUE}};',
		),
	)
);

$this->end_controls_section();

// Style Section - Clear Button.
$this->start_controls_section(
	'section_style_clear',
	array(
		'label' => 'Clear Button',
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'     => 'clear_typography',
		'selector' => '{{WRAPPER}} .ggmc-variation-clear',
	)
);

$this->add_control(
	'clear_text_color',
	array(
		'label'     => 'Text Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-clear' => 'color: {{VALUE}};',
		),
	)
);

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

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

$this->add_control(
	'clear_hover_text_color',
	array(
		'label'     => 'Hover Text Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-variation-clear:hover' => 'color: {{VALUE}};',
		),
	)
);

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

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

$this->add_control(
	'clear_border_radius',
	array(
		'label'      => 'Border Radius',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px', '%' ),
		'range'      => array(
			'px' => array(
				'min'  => 0,
				'max'  => 20,
				'step' => 1,
			),
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-variation-clear' => 'border-radius: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->add_responsive_control(
	'clear_margin',
	array(
		'label'      => 'Margin',
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', 'em', '%' ),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-variation-clear' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();
