<?php

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

class AddonNest_Services_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'addonnest-services';
    }

    public function get_title() {
        return __('Services', 'addonnest');
    }

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

    public function get_categories() {
        return ['addonnest-elementor'];
    }

    protected function register_controls() {
        // Heading Section
        $this->start_controls_section(
            'heading_section',
            [
                'label' => __('Heading Section', 'addonnest'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'main_text',
            [
                'label' => __('Main Text', 'addonnest'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __('Our Amazing', 'addonnest'),
                'label_block' => true,
            ]
        );

        $this->add_control(
            'heading_text',
            [
                'label' => __('Heading Text', 'addonnest'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __('Services', 'addonnest'),
                'label_block' => true,
            ]
        );

        $this->add_control(
            'heading_image',
            [
                'label' => __('Heading Image', 'addonnest'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->end_controls_section();

        // Services Section
        $this->start_controls_section(
            'services_section',
            [
                'label' => __('Services', 'addonnest'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'service_number',
            [
                'label' => __('Service Number', 'addonnest'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __('(01)', 'addonnest'),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'service_title',
            [
                'label' => __('Service Title', 'addonnest'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => __('Brand strategy', 'addonnest'),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'service_items',
            [
                'label' => __('Service Items', 'addonnest'),
                'type' => \Elementor\Controls_Manager::TEXTAREA,
                'default' => "UX/UI Design\nPhotography\nVideo Animation & Illustration",
                'description' => __('Enter each item on a new line', 'addonnest'),
            ]
        );

        $repeater->add_control(
            'service_link',
            [
                'label' => __('Link', 'addonnest'),
                'type' => \Elementor\Controls_Manager::URL,
                'placeholder' => __('https://your-link.com', 'addonnest'),
                'show_external' => true,
                'default' => [
                    'url' => '',
                    'is_external' => true,
                    'nofollow' => true,
                ],
            ]
        );

        $this->add_control(
            'services_list',
            [
                'label' => __('Services List', 'addonnest'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'service_number' => __('(01)', 'addonnest'),
                        'service_title' => __('Brand strategy', 'addonnest'),
                        'service_items' => "UX/UI Design\nPhotography\nVideo Animation & Illustration",
                    ],
                    [
                        'service_number' => __('(02)', 'addonnest'),
                        'service_title' => __('Logo and visual identity', 'addonnest'),
                        'service_items' => "Positioning\nUI/UX Design\nExplainer & Videos",
                    ],
                    [
                        'service_number' => __('(03)', 'addonnest'),
                        'service_title' => __('Brand Messaging', 'addonnest'),
                        'service_items' => "Banner Ads\nInterior Graphics\nRebrand",
                    ],
                ],
                'title_field' => '{{{ service_title }}}',
            ]
        );

        $this->end_controls_section();

        // Style Tab
        $this->start_controls_section(
            'heading_style_section',
            [
                'label' => __('Heading Style', 'addonnest'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'main_text_style',
            [
                'label' => __('Main Text', 'addonnest'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'main_text_color',
            [
                'label' => __('Color', 'addonnest'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .heading_section .text_main' => 'color: {{VALUE}};',
                ],
            ]
        );

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

        $this->add_responsive_control(
            'main_text_spacing',
            [
                'label' => __('Main Spacing', 'addonnest'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'default' => [
					'size' => 10,
				],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 300,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .heading_section .text_main' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'heading_text_style',
            [
                'label' => __('Heading Text', 'addonnest'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'heading_text_color',
            [
                'label' => __('Color', 'addonnest'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .heading_container .heading_row .heading_text h3' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'heading_text_typography',
                'selector' => '{{WRAPPER}} .heading_container .heading_row .heading_text h3',
            ]
        );

        $this->add_control(
            'heading_image_style',
            [
                'label' => __('Heading Image', 'addonnest'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'heading_image_width',
            [
                'label' => __('Width', 'addonnest'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'range' => [
                    'px' => [
                        'min' => 50,
                        'max' => 500,
                        'step' => 1,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .heading_section .heading_img' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'heading_image_border_radius',
            [
                'label' => __('Border Radius', 'addonnest'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .heading_section .heading_img img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Services Style
        $this->start_controls_section(
            'services_style_section',
            [
                'label' => __('Services Style', 'addonnest'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'service_spacing',
            [
                'label' => __('Service Spacing', 'addonnest'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'default' => [
					'size' => 40,
				],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 300,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .service_section' => 'margin-top: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'service_box_style',
            [
                'label' => __('Service Box', 'addonnest'),
                'type' => \Elementor\Controls_Manager::HEADING,
            ]
        );

        // Background Color
        $this->start_controls_tabs('service_box_background_tabs');
            $this->start_controls_tab(
                'service_box_background_normal',
                [
                    'label' => __('Normal', 'addonnest'),
                ]
            );

            $this->add_group_control(
                \Elementor\Group_Control_Background::get_type(),
                [
                    'name'     => 'service_box_background',
                    'types'    => ['classic', 'gradient'],
                    'selector' => '{{WRAPPER}} .service_section .service_box',
                ]
            );

            $this->end_controls_tab();

            $this->start_controls_tab(
                'service_box_background_hover',
                [
                    'label' => __('Hover', 'addonnest'),
                ]
            );

            $this->add_group_control(
                \Elementor\Group_Control_Background::get_type(),
                [
                    'name'     => 'service_box_background_hover',
                    'types'    => ['classic', 'gradient'],
                    'selector' => '{{WRAPPER}} .service_section .service_box:hover',
                ]
            );
            $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'service_box_bordereee',
                'label' => __('Border', 'addonnest'),
                'selector' => '{{WRAPPER}} .service_section .service_box',
            ]
        );

        $this->add_responsive_control(
            'service_box_border_radius',
            [
                'label' => __('Border Radius', 'addonnest'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .service_section .service_box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'service_box_padding',
            [
                'label' => __('Padding', 'addonnest'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .service_section .service_box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'service_box_margin',
            [
                'label' => __('Margin', 'addonnest'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .service_section .service_box' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'service_number_style',
            [
                'label' => __('Service Number', 'addonnest'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'service_number_color',
            [
                'label' => __('Color', 'addonnest'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .service_section .service_text p' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'service_number_hover_color',
            [
                'label' => __('Hover Color', 'addonnest'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .service_container .service_row .service_box:hover p' => 'color: {{VALUE}};',
                ],
            ]
        );


        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'service_number_typography',
                'selector' => '{{WRAPPER}} .service_section .service_text p',
            ]
        );

        $this->add_control(
            'service_title_style',
            [
                'label' => __('Service Title', 'addonnest'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'service_title_color',
            [
                'label' => __('Color', 'addonnest'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .service_container .service_row .service_box .service_text h4' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'service_title_hover_color',
            [
                'label' => __('Hover Color', 'addonnest'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .service_container .service_row .service_box:hover .service_text h4' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'service_title_typography',
                'selector' => '{{WRAPPER}} .service_container .service_row .service_box .service_text h4',
            ]
        );

        $this->add_control(
            'service_items_style',
            [
                'label' => __('Service Items', 'addonnest'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'service_items_color',
            [
                'label' => __('Color', 'addonnest'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .service_section .service_list ul li' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'service_items_hover_color',
            [
                'label' => __('Hover Color', 'addonnest'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .service_container .service_row .service_box:hover .service_side .service_list ul li' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'service_items_typography',
                'selector' => '{{WRAPPER}} .service_section .service_list ul li',
            ]
        );

        $this->add_control(
            'service_icon_style',
            [
                'label' => __('Service Icon', 'addonnest'),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'service_icon_color',
            [
                'label' => __('Color', 'addonnest'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .service_section .service_icon i' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'service_icon_hover_color',
            [
                'label' => __('Hover Color', 'addonnest'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .service_container .service_row .service_box:hover .service_side .service_icon i' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'service_icon_size',
            [
                'label' => __('Size', 'addonnest'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .service_section .service_icon i' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

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

        <section class="heading_section">
            <h2 class="text_main"><?php echo wp_kses_post($settings['main_text']); ?></h2>

            <div class="heading_container">
                <div class="heading_row">
                    <div class="heading_img">
                        <?php echo wp_kses_post(\Elementor\Group_Control_Image_Size::get_attachment_image_html($settings, 'full', 'heading_image')); ?>
                    </div>

                    <div class="heading_text">
                        <h3><?php echo wp_kses_post($settings['heading_text']); ?></h3>
                    </div>
                </div>
            </div>
        </section>

        <section class="service_section">
            <div class="service_container">
                <div class="service_row">
                    <?php foreach ($settings['services_list'] as $service): ?>
                    <div class="service_box">
                        <div class="service_text">
                            <p><?php echo wp_kses_post($service['service_number']); ?></p>
                            <h4><?php echo wp_kses_post($service['service_title']); ?></h4>
                        </div>

                        <div class="service_side">
                            <div class="service_list">
                                <ul>
                                    <?php
                                    $items = explode("\n", $service['service_items']);
                                    foreach ($items as $item) {
                                        if (!empty(trim($item))) {
                                            echo '<li>' . wp_kses_post(trim($item)) . '</li>';
                                        }
                                    }
                                    ?>
                                </ul>
                            </div>

                            <div class="service_icon">
                                <?php if (!empty($service['service_link']['url'])): ?>
                                <a href="<?php echo esc_url($service['service_link']['url']); ?>"
                                   <?php echo $service['service_link']['is_external'] ? 'target="_blank"' : ''; ?>
                                   <?php echo $service['service_link']['nofollow'] ? 'rel="nofollow"' : ''; ?>>
                                    <i class="fa fa-light fa-arrow-right"></i>
                                </a>
                                <?php else: ?>
                                    <i class="fa fa-light fa-arrow-right"></i>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

        <?php
    }

    protected function content_template() {
        ?>
        <#
        // Heading Section
        #>
        <section class="heading_section">
            <h2 class="text_main">{{{ settings.main_text }}}</h2>

            <div class="heading_container">
                <div class="heading_row">
                    <div class="heading_img">
						<?php //phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage ?>
                        <img src="{{ settings.heading_image.url }}" alt="">
                    </div>

                    <div class="heading_text">
                        <h3>{{{ settings.heading_text }}}</h3>
                    </div>
                </div>
            </div>
        </section>

        <#
        // Services Section
        #>
        <section class="service_section">
            <div class="service_container">
                <div class="service_row">
                    <# _.each( settings.services_list, function( service ) { #>
                    <div class="service_box">
                        <div class="service_text">
                            <p>{{{ service.service_number }}}</p>
                            <h4>{{{ service.service_title }}}</h4>
                        </div>

                        <div class="service_side">
                            <div class="service_list">
                                <ul>
                                    <#
                                    var items = service.service_items.split('\n');
                                    _.each( items, function( item ) {
                                        if ( item.trim() !== '' ) { #>
                                            <li>{{{ item.trim() }}}</li>
                                        <# }
                                    });
                                    #>
                                </ul>
                            </div>

                            <div class="service_icon">
                                <# if ( service.service_link.url ) { #>
                                    <a href="{{ service.service_link.url }}"
                                       <# if ( service.service_link.is_external ) { #>target="_blank"<# } #>
                                       <# if ( service.service_link.nofollow ) { #>rel="nofollow"<# } #>>
                                        <i class="fa-light fa-arrow-right"></i>
                                    </a>
                                <# } else { #>
                                    <i class="fa-light fa-arrow-right"></i>
                                <# } #>
                            </div>
                        </div>
                    </div>
                    <# }); #>
                </div>
            </div>
        </section>
        <?php
    }
}

\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new AddonNest_Services_Widget() );