<?php
/**
 * Kit Contents Widget - Style Controls
 *
 * @package GGM_Commerce
 */

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

// $this is the GGM_Commerce_Widget_Kit_Contents instance.

// Style Section - Title.
$this->start_controls_section(
	'section_title_style',
	array(
		'label'     => 'Title',
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array(
			'show_title' => 'yes',
		),
	)
);

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

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

$this->add_responsive_control(
	'title_margin',
	array(
		'label'      => 'Margin',
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', 'em' ),
		'default'    => array(
			'top'    => 0,
			'right'  => 0,
			'bottom' => 15,
			'left'   => 0,
			'unit'   => 'px',
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-kit-contents-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();

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

$this->add_control(
	'component_name_color',
	array(
		'label'     => 'Name Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#1d2327',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-component-name'   => 'color: {{VALUE}};',
			'{{WRAPPER}} .ggmc-component-name a' => 'color: {{VALUE}};',
		),
	)
);

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

$this->add_control(
	'quantity_color',
	array(
		'label'     => 'Quantity Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#666666',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-component-qty' => 'color: {{VALUE}};',
		),
		'condition' => array(
			'show_quantities' => 'yes',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'      => 'quantity_typography',
		'label'     => 'Quantity Typography',
		'selector'  => '{{WRAPPER}} .ggmc-component-qty',
		'condition' => array(
			'show_quantities' => 'yes',
		),
	)
);

$this->add_control(
	'price_color',
	array(
		'label'     => 'Price Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#667eea',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-component-price' => 'color: {{VALUE}};',
		),
		'condition' => array(
			'show_prices' => 'yes',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'      => 'price_typography',
		'label'     => 'Price Typography',
		'selector'  => '{{WRAPPER}} .ggmc-component-price',
		'condition' => array(
			'show_prices' => 'yes',
		),
	)
);

$this->add_responsive_control(
	'image_size',
	array(
		'label'      => 'Image Size',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px' ),
		'range'      => array(
			'px' => array(
				'min' => 30,
				'max' => 150,
			),
		),
		'default'    => array(
			'unit' => 'px',
			'size' => 50,
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-component-image img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
		),
		'condition'  => array(
			'show_images' => 'yes',
		),
	)
);

$this->add_control(
	'image_border_color',
	array(
		'label'     => 'Image Border Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-component-image img' => 'border-color: {{VALUE}};',
		),
		'condition' => array(
			'show_images' => 'yes',
		),
	)
);

$this->add_control(
	'image_border_radius',
	array(
		'label'      => 'Image Border Radius',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px' ),
		'range'      => array(
			'px' => array(
				'min' => 0,
				'max' => 20,
			),
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-component-image img' => 'border-radius: {{SIZE}}{{UNIT}};',
		),
		'condition'  => array(
			'show_images' => 'yes',
		),
	)
);

$this->add_control(
	'image_spacing',
	array(
		'label'      => 'Image Spacing',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px' ),
		'range'      => array(
			'px' => array(
				'min' => 0,
				'max' => 40,
			),
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-components-list .ggmc-component-item' => 'gap: {{SIZE}}{{UNIT}};',
			'{{WRAPPER}} .ggmc-components-grid .ggmc-component-image' => 'margin-bottom: {{SIZE}}{{UNIT}};',
		),
		'condition'  => array(
			'show_images' => 'yes',
		),
	)
);

$this->add_control(
	'link_hover_color',
	array(
		'label'     => 'Link Hover Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-component-name a:hover' => 'color: {{VALUE}};',
		),
		'condition' => array(
			'link_to_products' => 'yes',
		),
	)
);

$this->end_controls_section();

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

$this->add_control(
	'table_header_color',
	array(
		'label'     => 'Header Text Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-components-table th' => 'color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'table_header_background',
	array(
		'label'     => 'Header Background',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-components-table th' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'     => 'table_header_typography',
		'label'    => 'Header Typography',
		'selector' => '{{WRAPPER}} .ggmc-components-table th',
	)
);

$this->add_control(
	'table_border_color',
	array(
		'label'     => 'Border Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-components-table th, {{WRAPPER}} .ggmc-components-table td' => 'border-bottom-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'table_row_hover_background',
	array(
		'label'     => 'Row Hover Background',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-components-table tbody tr:hover' => 'background-color: {{VALUE}};',
		),
	)
);

$this->end_controls_section();

// Style Section - Grid Layout.
$this->start_controls_section(
	'section_grid_style',
	array(
		'label'     => 'Grid Layout',
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array(
			'layout' => 'grid',
		),
	)
);

$this->add_responsive_control(
	'grid_columns',
	array(
		'label'          => 'Columns',
		'type'           => \Elementor\Controls_Manager::SELECT,
		'default'        => 'auto',
		'tablet_default' => 'auto',
		'mobile_default' => '2',
		'options'        => array(
			'auto' => 'Auto',
			'2'    => '2',
			'3'    => '3',
			'4'    => '4',
			'5'    => '5',
			'6'    => '6',
		),
		'selectors'      => array(
			'{{WRAPPER}} .ggmc-components-grid' => 'grid-template-columns: {{VALUE}};',
		),
		'selectors_dictionary' => array(
			'auto' => 'repeat(auto-fill, minmax(150px, 1fr))',
			'2'    => 'repeat(2, 1fr)',
			'3'    => 'repeat(3, 1fr)',
			'4'    => 'repeat(4, 1fr)',
			'5'    => 'repeat(5, 1fr)',
			'6'    => 'repeat(6, 1fr)',
		),
	)
);

$this->add_responsive_control(
	'grid_gap',
	array(
		'label'      => 'Gap',
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px' ),
		'range'      => array(
			'px' => array(
				'min' => 0,
				'max' => 50,
			),
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-components-grid' => 'gap: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->add_control(
	'grid_item_background',
	array(
		'label'     => 'Item Background',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-components-grid .ggmc-component-item' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'grid_item_border_color',
	array(
		'label'     => 'Item Border Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-components-grid .ggmc-component-item' => 'border-color: {{VALUE}};',
		),
	)
);

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

$this->add_responsive_control(
	'grid_item_padding',
	array(
		'label'      => 'Item Padding',
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', 'em' ),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-components-grid .ggmc-component-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		),
	)
);

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

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

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	array(
		'name'     => 'grid_item_hover_shadow',
		'label'    => 'Hover Shadow',
		'selector' => '{{WRAPPER}} .ggmc-components-grid .ggmc-component-item:hover',
	)
);

$this->end_controls_section();

// Style Section - List Layout.
$this->start_controls_section(
	'section_list_style',
	array(
		'label'     => 'List Layout',
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array(
			'layout' => 'list',
		),
	)
);

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

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

$this->add_control(
	'list_row_background',
	array(
		'label'     => 'Row Background',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-components-list .ggmc-component-item' => 'background-color: {{VALUE}};',
		),
	)
);

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

$this->add_control(
	'list_border_color',
	array(
		'label'     => 'Row Divider Color',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-components-list .ggmc-component-item' => 'border-bottom-color: {{VALUE}};',
		),
	)
);

$this->add_responsive_control(
	'list_item_padding',
	array(
		'label'      => 'Item Padding',
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', 'em' ),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-components-list .ggmc-component-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		),
	)
);

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

$this->add_control(
	'list_row_hover_background',
	array(
		'label'     => 'Hover Background',
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-components-list .ggmc-component-item:hover' => 'background-color: {{VALUE}};',
		),
	)
);

$this->end_controls_section();

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

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

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

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

$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' => 30,
			),
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-kit-contents' => 'border-radius: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->end_controls_section();

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

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

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

$this->add_control(
	'empty_text_align',
	array(
		'label'     => 'Text Alignment',
		'type'      => \Elementor\Controls_Manager::CHOOSE,
		'options'   => array(
			'left'   => array(
				'title' => 'Left',
				'icon'  => 'eicon-text-align-left',
			),
			'center' => array(
				'title' => 'Center',
				'icon'  => 'eicon-text-align-center',
			),
			'right'  => array(
				'title' => 'Right',
				'icon'  => 'eicon-text-align-right',
			),
		),
		'default'   => 'center',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-no-components' => 'text-align: {{VALUE}};',
		),
	)
);

$this->end_controls_section();
