<?php

namespace Softech_Addons_for_Elementor\Widgets;

use Elementor\Controls_Manager;



if (!defined('ABSPATH'))
	exit; // Exit if accessed directly

class sitsel_number_box extends \Elementor\Widget_Base
{

	public function get_name()
	{
		return 'sitsel_number_box';
	}

	public function get_title()
	{
		return __('SITS Number Box', 'softech-addons-for-elementor');
	}

	public function get_icon()
	{
		return 'eicon-number-field';
	}

	public function get_categories()
	{
		return ['sits-category'];
	}


    public function get_style_depends() {
            self::register_styles();
            return ['sitsel-number-box-inline'];
        }

	 public static function register_styles() {
        static $styles_registered = false;
        
        if ($styles_registered) {
            return;
        }
        
        wp_register_style('sitsel-number-box-inline', false, [], '1.0.0');
        
        $custom_css = "
          .sitsel-wrap {
                text-align: center;
            }
                .sitsel-number-box{
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction:column;
               }
            .sitsel-badge {
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--badge-bg, #FF008C);
                width: var(--sitsel-size, 120px);
                height: var(--sitsel-size, 120px);
                color: #fff;
            }
                /* Square */
                .shape-square {
                    border-radius: 0;
                }
                /* Circle */
                .shape-circle {
                    border-radius: 50%;
                }
                /* Diamond */
                .shape-diamond {
                    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
                }
                /*  Trapezoid */
                .shape-trapezoid {
                    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
                }
                /*Hexagon*/
                .shape-hexagon{
                    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
                    }
                /*Left Point*/
                .shape-left-point{
                        clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
                    }
                /*right Point*/
                .shape-right-point{
                        clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
                    }
                /*Rabbet*/
                .shape-rabbet{
                            clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
                    }
        ";
        
        wp_add_inline_style('sitsel-number-box-inline', $custom_css);
        $styles_registered = true;
    }

	public function softech_image_shape_array() {
		return [			
				'square' => 'Square',
				'circle' =>  'Circle',
				'diamond' => 'Diamond ',
				'hexagon' => 'Hexagon ',
				'trapezoid' => 'Trapezoid ' ,
				'rabbet' => 'Rabbet ',
				'left-point' => 'Left Point ',
				'right-point' => 'Right Point ',			
	   ];
	}



	protected function register_controls()
	{

		// CONTENT
		$this->start_controls_section('content_section', [
			'label' => __('Content', 'softech-addons-for-elementor'),
		]);

		$this->add_control('number', [
			'label' => __('Number', 'softech-addons-for-elementor'),
			'type' => \Elementor\Controls_Manager::TEXT,
			'default' => '01',
			'label_block' => true,
		]);

		$this->add_control('title', [
			'label' => __('Title', 'softech-addons-for-elementor'),
			'type' => \Elementor\Controls_Manager::TEXT,
			'default' => __('Title here', 'softech-addons-for-elementor'),
			'label_block' => true,
		]);

		// Title Tag Selector
		$this->add_control('title_tag', [
			'label' => __('Title HTML Tag', 'softech-addons-for-elementor'),
			'type' => \Elementor\Controls_Manager::SELECT,
			'default' => 'h3',
			'options' => [
				'h1' => 'H1',
				'h2' => 'H2',
				'h3' => 'H3',
				'h4' => 'H4',
				'h5' => 'H5',
				'h6' => 'H6',
				'div' => 'div',
				'span' => 'span',
				'p' => 'p',
			],
		]);

		$this->add_control('description', [
			'label' => __('Description', 'softech-addons-for-elementor'),
			'type' => \Elementor\Controls_Manager::TEXTAREA,
			'default' => __('Description here', 'softech-addons-for-elementor'),
		]);

		// Shape Selector
		$this->add_control('shape', [
			'label' => __('Shape', 'softech-addons-for-elementor'),
			'type' => \Elementor\Controls_Manager::SELECT,
			'default' => 'square',
			'options' => $this->softech_image_shape_array(),
			]);




		$this->end_controls_section();

		// STYLE TAB - Badge

		// STYLE TAB - Number Box Wrapper

		$this->start_controls_section(
			'section_style_number_box',
			[
				'label' => __('Number Box Wrapper', 'softech-addons-for-elementor'),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
		$this->add_responsive_control(
			'sitsel_number_box_gap',
			[
				'label' => __('Gap', 'softech-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'size_units' => ['px', 'em', 'rem'],
				'range' => [
					'px' => ['min' => 0, 'max' => 100],
					'em' => ['min' => 0, 'max' => 10],
					'rem' => ['min' => 0, 'max' => 10],
				],
				'default' => [
					'unit' => 'px',
					'size' => 10, // Default gap
				],
				'selectors' => [
					'{{WRAPPER}} .sitsel-number-box' => 'gap: {{SIZE}}{{UNIT}};',
				],
			]
		);
		// Background (color, gradient, image)
		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name' => 'number_box_background',
				'label' => __('Background', 'softech-addons-for-elementor'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .sitsel-number-box',
				'fields_options' => [
					'background' => [
						'default' => 'classic',
					],
					'color' => [
						'default' => '#ffffff', // White background
					],
				],
			]
		);

		// Border
		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			[
				'name' => 'number_box_border',
				'selector' => '{{WRAPPER}} .sitsel-number-box',
				'fields_options' => [
					'border' => [
						'default' => 'solid',
					],
					'width' => [
						'default' => [
							'top' => '0',
							'right' => '0',
							'bottom' => '2',
							'left' => '0',
							'isLinked' => false,
						],
					],
					'color' => [
						'default' => '#ff008c',
					],
				],
			]
		);

		// Border radius
		$this->add_responsive_control(
			'box_border_radius',
			[
				'label' => __('Border Radius', 'softech-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'default' => [
					'top' => 12,
					'right' => 12,
					'bottom' => 12,
					'left' => 12,
					'unit' => 'px',
				],
				'selectors' => [
					'{{WRAPPER}} .sitsel-number-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		// Padding
		$this->add_responsive_control(
			'number_box_padding',
			[
				'label' => __('Padding', 'softech-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'default' => [
					'top' => 20,
					'right' => 20,
					'bottom' => 20,
					'left' => 20,
					'unit' => 'px',
				],
				'selectors' => [
					'{{WRAPPER}} .sitsel-number-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		// Box Shadow
		$this->add_group_control(
			\Elementor\Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'number_box_shadow',
				'selector' => '{{WRAPPER}} .sitsel-number-box',
				'fields_options' => [
					'box_shadow_type' => [
						'default' => 'yes',
					],
					'box_shadow' => [
						'default' => [
							'horizontal' => 0,
							'vertical' => 2,
							'blur' => 6,
							'spread' => 0,
							'color' => 'rgba(0,0,0,0.15)',
						],
					],
				],
			]
		);

		$this->end_controls_section();



		$this->start_controls_section(
			'section_style_badge',
			[
				'label' => __('Badge', 'softech-addons-for-elementor'),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
		$this->add_control(
			'badge_size',
			[
				'label' => __('Badge Size', 'softech-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'size_units' => ['px', '%'], // Allow px and %
				'range' => [
					'px' => [
						'min' => 60,
						'max' => 260,
					],
					'%' => [
						'min' => 5,
						'max' => 100,
					],
				],
				'default' => [
					'size' => 120,
					'unit' => 'px',
				],
				'selectors' => [
					'{{WRAPPER}} .sitsel-badge' => '--sitsel-size: {{SIZE}}{{UNIT}};',
				],
			]
		);



		// Background (color, gradient, image)
		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name' => 'badge_background',
				'label' => __('Background', 'softech-addons-for-elementor'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .sitsel-badge',
			]
		);

		// Border
		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			[
				'name' => 'badge_border',
				'selector' => '{{WRAPPER}} .sitsel-badge',
			]
		);

		

		// Box Shadow
		$this->add_group_control(
			\Elementor\Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'badge_shadow',
				'selector' => '{{WRAPPER}} .sitsel-badge',
			]
		);

		// Number color
		$this->add_control(
			'badge_color',
			[
				'label' => __('Number Color', 'softech-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .sitsel-badge .sitsel-number' => 'color: {{VALUE}};',
				],
			]
		);

		// Typography
		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'badge_typo',
				'label' => __('Number Typography', 'softech-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .sitsel-badge .sitsel-number',
				'fields_options' => [
					'typography' => ['default' => 'yes'], // Enable default typography
					'font_size' => [
						'default' => [
							'unit' => 'px',
							'size' => 40,
						],
					],
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_content',
			[
				'label' => __('Content Wrapper', 'softech-addons-for-elementor'),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
		$this->add_control(
			'sitsel_number_content_alignment',
			[
				'label' => esc_html__('Text Alignment', 'softech-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__('Left', 'softech-addons-for-elementor'),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'softech-addons-for-elementor'),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__('Right', 'softech-addons-for-elementor'),
						'icon' => 'eicon-text-align-right',
					],
				],
				'default' => 'center', // ✅ Default alignment
				'selectors' => [
					'{{WRAPPER}} .sitsel-number-content' => 'text-align: {{VALUE}};',
				],
			]
		);

		// Background (color, gradient, image)
		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name' => 'number_content_background',
				'label' => __('Background', 'softech-addons-for-elementor'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .sitsel-number-content',
			]
		);

		// Border
		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			[
				'name' => 'number_content_border',
				'selector' => '{{WRAPPER}} .sitsel-number-content',
			]
		);

		// Border radius
		$this->add_responsive_control(
			'number_content_radius',
			[
				'label' => __('Border Radius', 'softech-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .sitsel-number-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		// Box Shadow
		$this->add_group_control(
			\Elementor\Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'number_content_shadow',
				'selector' => '{{WRAPPER}} .sitsel-number-content',
			]
		);


        $this->add_responsive_control(
            'number_content_padding',
            [
                'label' => __('Padding', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em' ,  'rem'],
                'default' => [
                    'top' => 10,
                    'right' => 10,
                    'bottom' => 10,
                    'left' => 10,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-number-content' =>
                        'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );



		$this->end_controls_section();

		// STYLE TAB - Text
		$this->start_controls_section(
			'section_style_text',
			[
				'label' => __('Content Style ', 'softech-addons-for-elementor'),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'title_color',
			[
				'label' => __('Title Color', 'softech-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .sitsel-title' => 'color: {{VALUE}};',
				],
			]
		);

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

		$this->add_control(
			'desc_color',
			[
				'label' => __('Description Color', 'softech-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .sitsel-desc' => 'color: {{VALUE}};',
				],
			]
		);

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

		$this->end_controls_section();
	}


	protected function render()
	{
		$settings = $this->get_settings_for_display();

		$number = isset($settings['number']) ? $settings['number'] : '';
		$title = isset($settings['title']) ? $settings['title'] : '';
		$description = isset($settings['description']) ? $settings['description'] : '';
		$shape = isset($settings['shape']) ? $settings['shape'] : '';
		$title_tag = isset($settings['title_tag']) ? $settings['title_tag'] : 'h3';

		// Allow only safe HTML tags for title_tag
		$allowed_tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'p'];
		if (!in_array(strtolower($title_tag), $allowed_tags, true)) {
			$title_tag = 'h3';
		}

		?>
		<div class="sitsel-number-box">
			<div class="sitsel-badge shape-<?php echo esc_attr($shape); ?>">
				<span class="sitsel-number"><?php echo esc_html($number); ?></span>
			</div>
			<div class="sitsel-number-content">
				<<?php echo tag_escape($title_tag); ?> class="sitsel-title">
					<?php echo esc_html($title); ?>
				</<?php echo tag_escape($title_tag); ?>>
				<p class="sitsel-desc"><?php echo esc_html($description); ?></p>
			</div>
		</div>
		<?php
	}




	
}
