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

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

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

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

$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' => 'container_border',
        'selector' => '{{WRAPPER}} .ggmc-product-attributes',
    ]
);

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

$this->end_controls_section();


// === STYLE TAB - Labels ===
$this->start_controls_section(
    'label_style_section',
    [
        'label' => __('Labels', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_labels' => 'yes',
        ],
    ]
);

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

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

$this->end_controls_section();


// === STYLE TAB - Values ===
$this->start_controls_section(
    'value_style_section',
    [
        'label' => __('Values', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

$this->add_control(
    'value_color',
    [
        'label' => __('Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .attribute-value' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'value_typography',
        'selector' => '{{WRAPPER}} .attribute-value',
    ]
);

$this->add_control(
    'unit_color',
    [
        'label' => __('Unit Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .attribute-unit' => 'color: {{VALUE}};',
        ],
        'condition' => [
            'show_units' => 'yes',
        ],
    ]
);

$this->end_controls_section();


// === STYLE TAB - Table Specific ===
$this->start_controls_section(
    'table_style_section',
    [
        'label' => __('Table Style', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'layout' => 'table',
        ],
    ]
);

$this->add_control(
    'table_row_background',
    [
        'label' => __('Row Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-table .ggmc-attr-row' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'table_row_alt_background',
    [
        'label' => __('Alternate Row Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-table .ggmc-attr-row:nth-child(even)' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'table_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-table .ggmc-attr-list' => 'border-color: {{VALUE}};',
            '{{WRAPPER}} .ggmc-product-attributes.layout-table .ggmc-attr-row' => 'border-bottom-color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'table_cell_padding',
    [
        'label' => __('Row Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-table .ggmc-attr-row' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'table_label_width',
    [
        'label' => __('Label Width', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['%', 'px'],
        'range' => [
            '%' => [
                'min' => 20,
                'max' => 60,
            ],
            'px' => [
                'min' => 100,
                'max' => 400,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-table .attribute-label' => 'width: {{SIZE}}{{UNIT}}; flex-shrink: 0;',
        ],
        'condition' => [
            'show_labels' => 'yes',
        ],
    ]
);

$this->add_control(
    'table_row_hover_background',
    [
        'label' => __('Row Hover Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-table .ggmc-attr-row:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_section();


// === STYLE TAB - List Specific ===
$this->start_controls_section(
    'list_style_section',
    [
        'label' => __('List Style', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'layout' => 'list',
        ],
    ]
);

$this->add_control(
    'list_item_background',
    [
        'label' => __('Item Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-list .ggmc-attr-row' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'list_item_alt_background',
    [
        'label' => __('Alternate Item Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-list .ggmc-attr-row:nth-child(even)' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'list_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-list .ggmc-attr-row' => 'border-bottom-color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'list_item_padding',
    [
        'label' => __('Item Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-list .ggmc-attr-row' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'list_item_hover_background',
    [
        'label' => __('Item Hover Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-list .ggmc-attr-row:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_section();


// === STYLE TAB - Inline Specific ===
$this->start_controls_section(
    'inline_style_section',
    [
        'label' => __('Inline Style', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'layout' => 'inline',
        ],
    ]
);

$this->add_control(
    'inline_separator_color',
    [
        'label' => __('Separator Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-inline .separator' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'inline_gap',
    [
        'label' => __('Gap', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 40,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-inline .ggmc-attr-inline' => 'gap: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();


// === STYLE TAB - Grid Specific ===
$this->start_controls_section(
    'grid_style_section',
    [
        'label' => __('Grid Style', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'layout' => 'grid',
        ],
    ]
);

$this->add_responsive_control(
    'grid_gap',
    [
        'label' => __('Gap', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 50,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-grid .ggmc-attr-grid' => 'gap: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'grid_item_background',
    [
        'label' => __('Item Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-grid .ggmc-attr-item' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'grid_item_border_color',
    [
        'label' => __('Item Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-grid .ggmc-attr-item' => 'border-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'grid_item_border_radius',
    [
        'label' => __('Item Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 20,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-grid .ggmc-attr-item' => 'border-radius: {{SIZE}}{{UNIT}};',
        ],
    ]
);

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

$this->add_control(
    'grid_item_hover_background',
    [
        'label' => __('Item Hover Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-attributes.layout-grid .ggmc-attr-item:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_section();
