<?php



//-------------------------------------------------------------------------------//
//-------------------------------------------------------------------------------//
//-------------------------------------------------------------------------------//
// STYLES
//-------------------------------------------------------------------------------//
//-------------------------------------------------------------------------------//
//-------------------------------------------------------------------------------//




$levels = 6;

for($i=0; $i<$levels; $i++) {

    $levelLabel = $i+1;

    $this->start_controls_section(
        'style_toc_items' . $levelLabel,
        [
            'label' => __('Rubriknivå', 'webien') . ' ' . $levelLabel,
            'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            'condition' => [
                'view' => 'toc',
            ],
        ],

    );


    $this->add_responsive_control(
        'style_toc_text'.$levelLabel,
        [
            'label' 		=> __( 'Textjustering', 'webien' ),
            'type' 			=> \Elementor\Controls_Manager::CHOOSE,
            'default' 		=> 'left',
            'options' 		=> [
                'left' 			=> [
                    'title' 	=> __( 'Vänster', 'webien' ),
                    'icon' 		=> 'eicon-h-align-left',
                ],
                'center' 		=> [
                    'title' 	=> __( 'Centrera', 'webien' ),
                    'icon' 		=> 'eicon-h-align-center',
                ],
                'right' 		=> [
                    'title' 	=> __( 'Höger', 'webien' ),
                    'icon' 		=> 'eicon-h-align-right',
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .chapters button.level-'.$levelLabel => 'text-align: {{VALUE}};',
            ],
        ]
    );

    $this->start_controls_tabs( 'toc_item_states'.$levelLabel );

    $this->start_controls_tab( 'toc_item_normal'.$levelLabel, [ 'label' => __( 'Normal', 'webien' ) ] );

    $this->add_control(
        'toc_item_color'.$levelLabel,
        [
            'label' 	=> __( 'Textfärg', 'webien' ),
            'type' 		=> \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .chapters button.level-'.$levelLabel => 'color: {{VALUE}};',
            ],
        ]
    );


    $this->add_group_control(
        \Elementor\Group_Control_Background::get_type(),
        [
            'name' => 'toc_item_background'.$levelLabel,
            'types' => [ 'classic', 'gradient' ],
            'selector' => '{{WRAPPER}} .chapters button.level-'.$levelLabel,
        ]
    );


    $this->add_responsive_control(
        'toc_item_margin'.$levelLabel,
        [
            'label' 		=> __( 'Marginal', 'webien' ),
            'type' 			=> \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' 	=> [ 'px', 'em', 'rem', '%', 'deg', 'vh', 'custom' ],
            'selectors' 	=> [
                '{{WRAPPER}} .chapters button.level-'.$levelLabel => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            //'allowed_dimensions' => [ 'right', 'left' ],
        ]
    );

    $this->add_responsive_control(
        'toc_item_padding'.$levelLabel,
        [
            'label' 		=> __( 'Padding', 'webien' ),
            'type' 			=> \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' 	=> [ 'px', 'em', 'rem', '%', 'deg', 'vh', 'custom' ],
            'selectors' 	=> [
                '{{WRAPPER}} .chapters button.level-'.$levelLabel => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            //'allowed_dimensions' => [ 'right', 'left' ],
        ]
    );


    $this->add_group_control(
        \Elementor\Group_Control_Border::get_type(),
        [
            'name' 		=> 'toc_item_border'.$levelLabel,
            'label' 	=> __( 'Border', 'webien' ),
            'selector' 	=> '{{WRAPPER}} .chapters button.level-'.$levelLabel,
        ]
    );

    $this->add_responsive_control(
        'toc_item_border_radius'.$levelLabel,
        [
            'label' 		=> __( 'Border Radius', 'webien' ),
            'type' 			=> \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' 	=> [ 'px', 'em', 'rem', '%', 'deg', 'vh', 'custom' ],
            'selectors' 	=> [
                '{{WRAPPER}} .chapters button.level-'.$levelLabel => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );

    $this->add_group_control(
        \Elementor\Group_Control_Typography::get_type(),
        [
            'name' 		=> 'toc_item_typography'.$levelLabel,
            'label' 	=> __( 'Typography', 'webien' ),
            'global' => [
                'default' => \Elementor\Group_Control_Typography::get_type(),
            ],
            'selector' 	=> '{{WRAPPER}} .chapters button.level-'.$levelLabel,
        ]
    );
    $this->end_controls_tab();

    $this->start_controls_tab( 'toc_item_hover'.$levelLabel, [ 'label' => __( 'Hover', 'webien' ) ] );

    $this->add_control(
        'toc_item_color_hover'.$levelLabel,
        [
            'label' 	=> __( 'Textfärg', 'webien' ),
            'type' 		=> \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .chapters button.level-' . $levelLabel . ':hover' => 'color: {{VALUE}};',
            ],
        ]
    );

    $this->add_group_control(
        \Elementor\Group_Control_Background::get_type(),
        [
            'name' => 'toc_item_background_hover'.$levelLabel,
            'types' => [ 'classic', 'gradient' ],
            'selector' => '{{WRAPPER}} .chapters button.level-' . $levelLabel . ':hover',
        ]
    );


    $this->add_group_control(
        \Elementor\Group_Control_Border::get_type(),
        [
            'name' 		=> 'toc_item_border_hover'.$levelLabel,
            'label' 	=> __( 'Border', 'webien' ),
            'selector' 	=> '{{WRAPPER}} .chapters button.level-' . $levelLabel . ':hover',
        ]
    );

    $this->add_responsive_control(
        'toc_item_border_radius_hover'.$levelLabel,
        [
            'label' 		=> __( 'Border Radius', 'webien' ),
            'type' 			=> \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' 	=> [ 'px', 'em', 'rem', '%', 'deg', 'vh', 'custom' ],
            'selectors' 	=> [
                '{{WRAPPER}} .chapters button.level-' . $levelLabel . ':hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );

    $this->add_group_control(
        \Elementor\Group_Control_Typography::get_type(),
        [
            'name' 		=> 'toc_item_typography_hover'.$levelLabel,
            'label' 	=> __( 'Typography', 'webien' ),
            'global' => [
                'default' => \Elementor\Group_Control_Typography::get_type(),
            ],
            'selector' 	=> '{{WRAPPER}} .chapters button.level-' . $levelLabel . ':hover',
        ]
    );
    $this->end_controls_tab();



    $this->start_controls_tab( 'toc_item_active'.$levelLabel, [ 'label' => __( 'Aktiv', 'webien' ) ] );

    $this->add_control(
        'toc_item_color_active'.$levelLabel,
        [
            'label' 	=> __( 'Textfärg', 'webien' ),
            'type' 		=> \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .chapters button.level-' . $levelLabel . '.active' => 'color: {{VALUE}};',
            ],
        ]
    );

    $this->add_group_control(
        \Elementor\Group_Control_Background::get_type(),
        [
            'name' => 'toc_item_background_active'.$levelLabel,
            'types' => [ 'classic', 'gradient' ],
            'selector' => '{{WRAPPER}} .chapters button.level-' . $levelLabel . '.active',
        ]
    );


    $this->add_group_control(
        \Elementor\Group_Control_Border::get_type(),
        [
            'name' 		=> 'toc_item_border_active'.$levelLabel,
            'label' 	=> __( 'Border', 'webien' ),
            'selector' 	=> '{{WRAPPER}} .chapters button.level-' . $levelLabel . '.active',
        ]
    );

    $this->add_responsive_control(
        'toc_item_border_radius_active'.$levelLabel,
        [
            'label' 		=> __( 'Border Radius', 'webien' ),
            'type' 			=> \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' 	=> [ 'px', 'em', 'rem', '%', 'deg', 'vh', 'custom' ],
            'selectors' 	=> [
                '{{WRAPPER}} .chapters button.level-' . $levelLabel . '.active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );

    $this->add_group_control(
        \Elementor\Group_Control_Typography::get_type(),
        [
            'name' 		=> 'toc_item_typography_active'.$levelLabel,
            'label' 	=> __( 'Typography', 'webien' ),
            'global' => [
                'default' => \Elementor\Group_Control_Typography::get_type(),
            ],
            'selector' 	=> '{{WRAPPER}} .chapters button.level-' . $levelLabel . '.active',
        ]
    );
    $this->end_controls_tab();


    $this->end_controls_tabs();

    $this->end_controls_section();

}





// ------------------------------------------ //
// Fixed mobile toggle

$this->start_controls_section(
    'style_toc_fixed_open',
    [
        'label' => __('Toggle mobil', 'webien'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'view' => 'toc',
        ],
    ],
);

$this->add_responsive_control(
    'toc_mobile_toggle_bottom',
    [
        'label' 		=> __( 'Placering från botten', 'webien' ),
        'type' 			=> \Elementor\Controls_Manager::TEXT,
        'default'       => '20%',
        'selectors' 	=> [
            '{{WRAPPER}} .narrow-view-btns' => 'bottom: {{VALUE}};',
        ],
        //'allowed_dimensions' => [ 'right', 'left' ],
    ]
);

$this->add_control(
    'toc_mobile_toggle_gap',
    [
        'label' 	=> __( 'Avstånd till scrollknapp', 'webien' ),
        'type' 		=> \Elementor\Controls_Manager::SLIDER,
        'default'	=> [
            'size'	=> 10
        ],
        'range' 	=> [
            'px' 	=> [
                'min' => 1,
                'max' => 100,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .narrow-view-btns' => 'gap: {{SIZE}}{{UNIT}};',
        ],
        'separator' => 'after',
    ]
);

$this->add_control(
    'toc_toggle_btn_size',
    [
        'label' 	=> __( 'Storlek', 'webien' ),
        'type' 		=> \Elementor\Controls_Manager::SLIDER,
        'default'	=> [
            'size'	=> 60
        ],
        'range' 	=> [
            'px' 	=> [
                'min' => 20,
                'max' => 200,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .narrow-view-btns .open' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
        ],
    ]
);


$this->add_control(
    'toc_toggle_icon',
    [
        'label' => __( 'Ikon', 'webien' ),
        'type' => \Elementor\Controls_Manager::ICONS,
        'default' => [],
        'recommended' => [

        ],
    ]
);



$this->add_control(
    'toc_toggle_size',
    [
        'label' 	=> __( 'Storlek', 'webien' ),
        'type' 		=> \Elementor\Controls_Manager::SLIDER,
        'default'	=> [
            'size'	=> 30
        ],
        'range' 	=> [
            'px' 	=> [
                'min' => 5,
                'max' => 100,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .narrow-view-btns .open svg' => 'width: {{SIZE}}{{UNIT}};',
            '{{WRAPPER}} .narrow-view-btns .open i' => 'font-size: {{SIZE}}{{UNIT}};',
        ],
    ]
);


$this->add_control(
    'toc_mobile_toggle_color',
    [
        'label' 	=> __( 'Textfärg', 'webien' ),
        'type' 		=> \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .narrow-view-btns .open' => 'color: {{VALUE}};',
        ],
    ]
);


$this->add_group_control(
    \Elementor\Group_Control_Background::get_type(),
    [
        'name' => 'toc_mobile_toggle_background',
        'types' => [ 'classic', 'gradient' ],
        'selector' => '{{WRAPPER}} .narrow-view-btns .open',
    ]
);



$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' 		=> 'toc_mobile_toggle_border',
        'label' 	=> __( 'Border', 'webien' ),
        'selector' 	=> '{{WRAPPER}} .narrow-view-btns .open',
    ]
);

$this->add_responsive_control(
    'toc_mobile_toggle_radius',
    [
        'label' 		=> __( 'Border Radius', 'webien' ),
        'type' 			=> \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' 	=> [ 'px', 'em', 'rem', '%', 'deg', 'vh', 'custom' ],
        'selectors' 	=> [
            '{{WRAPPER}} .narrow-view-btns .open' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();
// ------------------------------------------ //
// Fixed mobile sxroll up

$this->start_controls_section(
    'style_toc_fixed_scroll',
    [
        'label' => __('Scroll knapp mobil', 'webien'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'view' => 'toc',
        ],
    ],
);


$this->add_control(
    'toc_scroll_btn_size',
    [
        'label' 	=> __( 'Storlek knapp', 'webien' ),
        'type' 		=> \Elementor\Controls_Manager::SLIDER,
        'default'	=> [
            'size'	=> 60
        ],
        'range' 	=> [
            'px' 	=> [
                'min' => 20,
                'max' => 100,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .narrow-view-btns .scroll-up' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
        ],
    ]
);



$this->add_control(
    'toc_scroll_icon',
    [
        'label' => __( 'Ikon', 'webien' ),
        'type' => \Elementor\Controls_Manager::ICONS,
        'default' => [],
        'recommended' => [

        ],
    ]
);



$this->add_control(
    'toc_scroll_size',
    [
        'label' 	=> __( 'Storlek', 'webien' ),
        'type' 		=> \Elementor\Controls_Manager::SLIDER,
        'default'	=> [
            'size'	=> 30
        ],
        'range' 	=> [
            'px' 	=> [
                'min' => 5,
                'max' => 100,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .narrow-view-btns .scroll-up svg' => 'width: {{SIZE}}{{UNIT}};',
            '{{WRAPPER}} .narrow-view-btns .scroll-up i' => 'font-size: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'toc_mobile_scroll_color',
    [
        'label' 	=> __( 'Textfärg', 'webien' ),
        'type' 		=> \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .narrow-view-btns .scroll-up' => 'color: {{VALUE}};',
        ],
    ]
);


$this->add_group_control(
    \Elementor\Group_Control_Background::get_type(),
    [
        'name' => 'toc_mobile_scroll_background',
        'types' => [ 'classic', 'gradient' ],
        'selector' => '{{WRAPPER}} .narrow-view-btns .scroll-up',
    ]
);



$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' 		=> 'toc_mobile_scroll_border',
        'label' 	=> __( 'Border', 'webien' ),
        'selector' 	=> '{{WRAPPER}} .narrow-view-btns .scroll-up',
    ]
);

$this->add_responsive_control(
    'toc_mobile_scroll_radius',
    [
        'label' 		=> __( 'Border Radius', 'webien' ),
        'type' 			=> \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' 	=> [ 'px', 'em', 'rem', '%', 'deg', 'vh', 'custom' ],
        'selectors' 	=> [
            '{{WRAPPER}} .narrow-view-btns .scroll-up' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);
$this->end_controls_section();
// ------------------------------------------ //
// FMobile panel

$this->start_controls_section(
    'style_toc_mobile_overlay',
    [
        'label' => __('Mobil overlay', 'webien'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'view' => 'toc',
        ],
    ],
);

$this->add_control(
    'toc_scroll_icon',
    [
        'label' => __( 'Ikon', 'webien' ),
        'type' => \Elementor\Controls_Manager::ICONS,
        'default' => [],
        'recommended' => [

        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Background::get_type(),
    [
        'name' => 'toc_mobile_overlay_background',
        'types' => [ 'classic', 'gradient' ],
        'selector' => '{{WRAPPER}} .narrow-view .inner',
    ]
);




$this->add_control(
    'toc_mobile_overlay_padding',
    [
        'label' 		=> __( 'Padding', 'webien' ),
        'type' 			=> \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' 	=> [ 'px', 'em', 'rem', '%', 'deg', 'vh', 'custom' ],
        'selectors' 	=> [
            '{{WRAPPER}} .narrow-view .inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
        //'allowed_dimensions' => [ 'right', 'left' ],
    ]
);


$this->add_group_control(
    \Elementor\Group_Control_Background::get_type(),
    [
        'name' => 'toc_mobile_overlay_outer_background',
        'types' => [ 'classic', 'gradient' ],
        'selector' => '{{WRAPPER}} .narrow-view .bkg',
        'separator' => 'before',
    ]
);

$this->end_controls_section();
