<?php
/**
 * Custom Attributes Widget - Style Controls
 *
 * @package GGM_Commerce
 */

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

// $this is the GGM_Commerce_Widget_Custom_Attributes instance.

// ── Title ─────────────────────────────────────────────────────────────────────

$this->start_controls_section(
	'section_title_style',
	array(
		'label' => 'Title',
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_control(
	'title_color',
	array(
		'label'     => 'Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#333333',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-custom-attributes-title' => 'color: {{VALUE}};',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'     => 'title_typography',
		'label'    => 'Typography',
		'selector' => '{{WRAPPER}} .ggmc-custom-attributes-title',
	)
);

$this->add_responsive_control(
	'title_spacing',
	array(
		'label'      => 'Bottom Spacing',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px' ),
		'range'      => array(
			'px' => array(
				'min' => 0,
				'max' => 50,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => 15,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-custom-attributes-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();

// ── Attribute Name ────────────────────────────────────────────────────────────

$this->start_controls_section(
	'section_name_style',
	array(
		'label' => 'Attribute Name',
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_control(
	'name_color',
	array(
		'label'     => 'Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#666666',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-attr-name' => 'color: {{VALUE}};',
		),
	)
);

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

$this->add_control(
	'name_width',
	array(
		'label'      => 'Width',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px', '%' ),
		'range'      => array(
			'px' => array(
				'min' => 50,
				'max' => 300,
			),
			'%'  => array(
				'min' => 10,
				'max' => 50,
			),
		),
		'default'    => array(
			'unit' => '%',
			'size' => 40,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-attr-name' => 'width: {{SIZE}}{{UNIT}};',
		),
		'condition'  => array(
			'layout' => 'table',
		),
	)
);

$this->end_controls_section();

// ── Attribute Value ───────────────────────────────────────────────────────────

$this->start_controls_section(
	'section_value_style',
	array(
		'label' => 'Attribute Value',
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_control(
	'value_color',
	array(
		'label'     => 'Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#333333',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-attr-value' => 'color: {{VALUE}};',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'     => 'value_typography',
		'label'    => 'Typography',
		'selector' => '{{WRAPPER}} .ggmc-attr-value',
	)
);

$this->add_control(
	'unit_color',
	array(
		'label'     => 'Unit Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#999999',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-attr-unit' => 'color: {{VALUE}};',
		),
		'condition' => array(
			'show_units' => 'yes',
		),
	)
);

$this->end_controls_section();

// ── Icons ─────────────────────────────────────────────────────────────────────

$this->start_controls_section(
	'section_icon_style',
	array(
		'label'     => 'Icons',
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array(
			'show_icons' => 'yes',
		),
	)
);

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

$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' => 50,
			),
			'em' => array(
				'min' => 0.5,
				'max' => 3,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => 16,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-attr-icon'     => 'font-size: {{SIZE}}{{UNIT}};',
			'{{WRAPPER}} .ggmc-attr-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->add_responsive_control(
	'icon_spacing',
	array(
		'label'      => 'Icon Spacing',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px' ),
		'range'      => array(
			'px' => array(
				'min' => 0,
				'max' => 30,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => 8,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-attr-icon' => 'margin-right: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();

// ── Table Style ───────────────────────────────────────────────────────────────

$this->start_controls_section(
	'section_table_style',
	array(
		'label'     => 'Table Style',
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array(
			'layout' => 'table',
		),
	)
);

$this->add_control(
	'row_background',
	array(
		'label'     => 'Row Background',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#ffffff',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-attr-row' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'row_alt_background',
	array(
		'label'     => 'Alternate Row Background',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#f8fafc',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-attr-row:nth-child(even)' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'row_border_color',
	array(
		'label'     => 'Border Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#eeeeee',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-attr-row' => 'border-bottom-color: {{VALUE}};',
		),
	)
);

$this->add_responsive_control(
	'row_padding',
	array(
		'label'      => 'Row Padding',
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', 'em' ),
		'default'    => array(
			'top'    => 10,
			'right'  => 15,
			'bottom' => 10,
			'left'   => 15,
			'unit'   => 'px',
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-attr-row' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();

// ── Group Headers ─────────────────────────────────────────────────────────────

$this->start_controls_section(
	'section_group_style',
	array(
		'label'     => 'Group Headers',
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array(
			'group_by_group' => 'yes',
		),
	)
);

$this->add_control(
	'group_header_color',
	array(
		'label'     => 'Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#333333',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-attr-group-header' => 'color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'group_header_background',
	array(
		'label'     => 'Background',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#f0f0f0',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-attr-group-header' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'     => 'group_header_typography',
		'label'    => 'Typography',
		'selector' => '{{WRAPPER}} .ggmc-attr-group-header',
	)
);

$this->add_responsive_control(
	'group_header_padding',
	array(
		'label'      => 'Padding',
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', 'em' ),
		'default'    => array(
			'top'    => 8,
			'right'  => 15,
			'bottom' => 8,
			'left'   => 15,
			'unit'   => 'px',
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-attr-group-header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();

// ── Container ─────────────────────────────────────────────────────────────────

$this->start_controls_section(
	'section_container_style',
	array(
		'label' => 'Container',
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

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

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

$this->add_group_control(
	\Elementor\Group_Control_Border::get_type(),
	array(
		'name'     => 'container_border',
		'label'    => 'Border',
		'selector' => '{{WRAPPER}} .ggmc-custom-attributes',
	)
);

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

$this->end_controls_section();
