<?php
/**
 * Product Image Grid — TAB_STYLE Controls
 * Included via require inside register_controls().
 * $this is the widget instance.
 *
 * @package GGM_Commerce
 */

// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// -------------------------------------------------------------------------
// Container style section
// -------------------------------------------------------------------------
$this->start_controls_section(
	'container_style_section',
	[
		'label' => __( 'Container', 'ggm-commerce' ),
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	]
);

$this->add_responsive_control(
	'container_padding',
	[
		'label'      => __( 'Padding', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', '%', 'em' ],
		'selectors'  => [
			'{{WRAPPER}} .ggmc-image-grid' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Background::get_type(),
	[
		'name'     => 'container_background',
		'label'    => __( 'Background', 'ggm-commerce' ),
		'types'    => [ 'classic', 'gradient' ],
		'selector' => '{{WRAPPER}} .ggmc-image-grid',
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Border::get_type(),
	[
		'name'     => 'container_border',
		'label'    => __( 'Border', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggmc-image-grid',
	]
);

$this->add_responsive_control(
	'container_border_radius',
	[
		'label'      => __( 'Border Radius', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', '%', 'em' ],
		'selectors'  => [
			'{{WRAPPER}} .ggmc-image-grid' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	[
		'name'     => 'container_box_shadow',
		'label'    => __( 'Box Shadow', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggmc-image-grid',
	]
);

$this->end_controls_section();

// -------------------------------------------------------------------------
// Images style section
// -------------------------------------------------------------------------
$this->start_controls_section(
	'image_style_section',
	[
		'label' => __( 'Images', 'ggm-commerce' ),
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	]
);

$this->add_control(
	'image_fit',
	[
		'label'       => __( 'Image Fit', 'ggm-commerce' ),
		'type'        => \Elementor\Controls_Manager::SELECT,
		'default'     => 'cover',
		'options'     => [
			'cover'   => __( 'Cover', 'ggm-commerce' ),
			'contain' => __( 'Contain', 'ggm-commerce' ),
			'fill'    => __( 'Fill (Stretch)', 'ggm-commerce' ),
		],
		'render_type' => 'template',
	]
);

$this->add_control(
	'image_position',
	[
		'label'       => __( 'Image Position', 'ggm-commerce' ),
		'type'        => \Elementor\Controls_Manager::SELECT,
		'default'     => 'center center',
		'options'     => [
			'top left'      => __( 'Top Left', 'ggm-commerce' ),
			'top center'    => __( 'Top Center', 'ggm-commerce' ),
			'top right'     => __( 'Top Right', 'ggm-commerce' ),
			'center left'   => __( 'Center Left', 'ggm-commerce' ),
			'center center' => __( 'Center Center', 'ggm-commerce' ),
			'center right'  => __( 'Center Right', 'ggm-commerce' ),
			'bottom left'   => __( 'Bottom Left', 'ggm-commerce' ),
			'bottom center' => __( 'Bottom Center', 'ggm-commerce' ),
			'bottom right'  => __( 'Bottom Right', 'ggm-commerce' ),
		],
		'condition'   => [
			'image_fit' => [ 'cover', 'contain' ],
		],
		'render_type' => 'template',
		'separator'   => 'after',
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Border::get_type(),
	[
		'name'     => 'image_border',
		'label'    => __( 'Border', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggmc-image-grid__item img',
	]
);

$this->add_responsive_control(
	'image_border_radius',
	[
		'label'      => __( 'Border Radius', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', '%', 'em' ],
		'selectors'  => [
			'{{WRAPPER}} .ggmc-image-grid__item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	[
		'name'     => 'image_box_shadow',
		'label'    => __( 'Box Shadow', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggmc-image-grid__item img',
	]
);

$this->add_control(
	'image_hover_heading',
	[
		'label'     => __( 'Hover Effects', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::HEADING,
		'separator' => 'before',
	]
);

$this->add_control(
	'image_hover_opacity',
	[
		'label'     => __( 'Hover Opacity', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => [
			'px' => [
				'min'  => 0,
				'max'  => 1,
				'step' => 0.05,
			],
		],
		'selectors' => [
			'{{WRAPPER}} .ggmc-image-grid__item:hover img' => 'opacity: {{SIZE}};',
		],
	]
);

$this->add_control(
	'image_hover_scale',
	[
		'label'     => __( 'Hover Scale', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => [
			'px' => [
				'min'  => 1,
				'max'  => 1.3,
				'step' => 0.01,
			],
		],
		'selectors' => [
			'{{WRAPPER}} .ggmc-image-grid__item:hover img' => 'transform: scale({{SIZE}});',
		],
	]
);

$this->add_control(
	'image_transition',
	[
		'label'     => __( 'Transition Duration (ms)', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => [
			'px' => [
				'min'  => 0,
				'max'  => 1000,
				'step' => 50,
			],
		],
		'selectors' => [
			'{{WRAPPER}} .ggmc-image-grid__item img' => 'transition: all {{SIZE}}ms ease;',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	[
		'name'     => 'image_hover_box_shadow',
		'label'    => __( 'Hover Box Shadow', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggmc-image-grid__item:hover img',
	]
);

$this->end_controls_section();

// -------------------------------------------------------------------------
// Lightbox style section
// -------------------------------------------------------------------------
$this->start_controls_section(
	'lightbox_style_section',
	[
		'label'     => __( 'Lightbox', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => [
			'show_lightbox' => 'yes',
		],
	]
);

$this->add_control(
	'lightbox_overlay_color',
	[
		'label'     => __( 'Overlay Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggmc-image-grid-lightbox__overlay' => 'background-color: {{VALUE}};',
		],
	]
);

$this->end_controls_section();

// -------------------------------------------------------------------------
// Load More Link Styles
// -------------------------------------------------------------------------
$this->start_controls_section(
	'load_more_style',
	[
		'label'     => __( 'Load More Link', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => [ 'enable_load_more' => 'yes' ],
	]
);

$this->add_control(
	'load_more_text',
	[
		'label'   => __( 'Link Text', 'ggm-commerce' ),
		'type'    => \Elementor\Controls_Manager::TEXT,
		'default' => __( 'SEE ALL HERE', 'ggm-commerce' ),
	]
);

$this->add_control(
	'load_more_icon',
	[
		'label'   => __( 'Icon', 'ggm-commerce' ),
		'type'    => \Elementor\Controls_Manager::ICONS,
		'default' => [
			'value'   => 'eicon-chevron-right',
			'library' => 'eicons',
		],
	]
);

$this->add_control(
	'load_more_color',
	[
		'label'     => __( 'Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggmc-image-grid__load-more' => 'color: {{VALUE}};',
		],
	]
);

$this->add_control(
	'load_more_hover_color',
	[
		'label'     => __( 'Hover Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggmc-image-grid__load-more:hover' => 'color: {{VALUE}};',
		],
	]
);

$this->add_control(
	'load_more_icon_color',
	[
		'label'     => __( 'Icon Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggmc-image-grid__load-more .ggmc-load-more-icon i' => 'color: {{VALUE}};',
			'{{WRAPPER}} .ggmc-image-grid__load-more .ggmc-load-more-icon svg' => 'fill: {{VALUE}};',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	[
		'name'     => 'load_more_typography',
		'label'    => __( 'Typography', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggmc-image-grid__load-more',
	]
);

$this->add_responsive_control(
	'load_more_icon_size',
	[
		'label'      => __( 'Icon Size', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => [ 'px' ],
		'range'      => [
			'px' => [ 'min' => 6, 'max' => 30 ],
		],
		'default'    => [ 'size' => 12, 'unit' => 'px' ],
		'selectors'  => [
			'{{WRAPPER}} .ggmc-image-grid__load-more .ggmc-load-more-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
			'{{WRAPPER}} .ggmc-image-grid__load-more .ggmc-load-more-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
		],
	]
);

$this->add_responsive_control(
	'load_more_icon_spacing',
	[
		'label'      => __( 'Icon Spacing', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => [ 'px' ],
		'range'      => [
			'px' => [ 'min' => 0, 'max' => 20 ],
		],
		'default'    => [ 'size' => 4, 'unit' => 'px' ],
		'selectors'  => [
			'{{WRAPPER}} .ggmc-image-grid__load-more .ggmc-load-more-icon' => 'margin-left: {{SIZE}}{{UNIT}};',
		],
	]
);

$this->add_responsive_control(
	'load_more_margin',
	[
		'label'      => __( 'Margin', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', 'em' ],
		'selectors'  => [
			'{{WRAPPER}} .ggmc-image-grid__load-more' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->add_control(
	'load_more_box_heading',
	[
		'label'     => __( 'Box', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::HEADING,
		'separator' => 'before',
	]
);

$this->add_control(
	'load_more_background_color',
	[
		'label'     => __( 'Background Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggmc-image-grid__load-more' => 'background-color: {{VALUE}};',
		],
	]
);

$this->add_responsive_control(
	'load_more_padding',
	[
		'label'      => __( 'Padding', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', 'em', '%' ],
		'selectors'  => [
			'{{WRAPPER}} .ggmc-image-grid__load-more' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->add_responsive_control(
	'load_more_border_radius',
	[
		'label'      => __( 'Border Radius', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', '%' ],
		'selectors'  => [
			'{{WRAPPER}} .ggmc-image-grid__load-more' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->end_controls_section();
