<?php

namespace PhotoSphereViewer\Includes;

use Elementor\Controls_Manager;
use Elementor\Widget_Base;
use Elementor\Group_Control_Typography;
use Elementor\Repeater;
use Elementor\Modules\Promotions\Controls\Promotion_Control;


class Photo_Sphere_Viewer extends Widget_Base {

    private function is_pro_activated(): bool {
        return ProStatus::is_active();
    }


    public function get_name() {
        return 'photo-sphere-viewer';
    }

    public function get_title() {
        return __('360° Panorama Viewer', 'photo-sphere-viewer');
    }

    public function get_icon() {
        return 'psv-widget-icon psv-widget-icon-panorama';
    }

    public function get_categories() {
        return ['photo-sphere-viewer'];
    }

    public function get_keywords() {
        return [
            'photo sphere viewer',
            'psv',
            '360',
            '360 panorama',
            '360 image',
            'panorama',
            'panoramic',
            'equirectangular',
            'virtual',
            'vr',
            'immersive',
            'real estate',
            'dji',
            'ricoh theta',
            'insta360',
            'street view',
        ];
    }

    public function get_script_depends() {
        return ['psv-main'];
    }

    public function get_style_depends() {
        return ['psv-style'];
    }

    protected function register_controls() {
        /**
         * !Content Section
         */
        $this->start_controls_section(
            '_content_section',
            [
                'label' => __('Content', 'photo-sphere-viewer'),
                'tab'   => Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control(
            'viewer_width',
            [
                'label'      => __('Width', 'photo-sphere-viewer'),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'vw'],
                'range'      => [
                    'px' => [
                        'min'  => 300,
                        'max'  => 3000,
                        'step' => 5,
                    ],
                    '%'  => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default'    => [
                    'unit' => '%',
                    'size' => 100,
                ],
                'selectors'  => [
                    '{{WRAPPER}} .photo-sphere-viewer' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'viewer_height',
            [
                'label'       => __('Height', 'photo-sphere-viewer'),
                'type'        => Controls_Manager::SLIDER,
                'size_units'  => ['px', '%', 'vh'],
                'default'     => [
                    'unit' => 'vh',
                    'size' => 70,
                ],
                'selectors'   => [
                    '{{WRAPPER}} .photo-sphere-viewer' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'render_type' => 'template',
            ]
        );

        $this->add_control(
            'caption',
            [
                'label'       => __('Caption', 'photo-sphere-viewer'),
                'label_block' => true,
                'type'        => Controls_Manager::TEXT,
                'default'     => __('Photo Sphere Viewer', 'photo-sphere-viewer'),
                'placeholder' => __('Type your title here', 'photo-sphere-viewer'),
                'separator'   => 'before',
            ]
        );

        $this->add_control(
            'image',
            [
                'label'       => __('Image', 'photo-sphere-viewer'),
                'type'        => Controls_Manager::MEDIA,
                'default'     => [
                    'url' => PSV_ASSETS_URL . 'img/sphere.jpg',
                ],
                'render_type' => 'template',
            ]
        );

        $this->add_control(
            'use_original_image',
            [
                'label'        => __('Use Original Image (Full Resolution)', 'photo-sphere-viewer'),
                'type'         => $this->is_pro_activated() ? Controls_Manager::SWITCHER : Promotion_Control::TYPE,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => $this->is_pro_activated() ? 'yes' : '',
                'description'  => !$this->is_pro_activated()
                    ? __('Available in Pro version — loads the un-scaled original upload for true 360° detail (DJI Matrice etc.).', 'photo-sphere-viewer')
                    : __('Recommended for high-resolution panoramas (e.g. DJI Matrice). Loads the original uploaded file instead of WordPress\'s auto-scaled copy. Disable only if your CDN/hosting cannot serve very large images.', 'photo-sphere-viewer'),
            ]
        );
        $this->end_controls_section();
        $this->start_controls_section(
            'settings_controls',
            [
                'label' => __('Controls', 'photo-sphere-viewer'),
                'tab'   => Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->start_controls_tabs(
            'tab_standard'
        );
        $this->start_controls_tab(
            'standard',
            [
                'label' => __('Standard', 'photo-sphere-viewer'),
            ]
        );
        $this->add_control(
            'heading_navbar',
            [
                'label'     => __('N A V B A R', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::HEADING,
                // 'separator' => 'before',
            ]
        );
        $this->add_control(
            'show_navbar',
            [
                'label'        => __('Show Navbar', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );

        $this->add_control(
            'show_caption',
            [
                'label'        => __('Show Caption', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
                'condition'    => [
                    'show_navbar' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'show_zoom',
            [
                'label'        => __('Show Zoom', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
                'condition'    => [
                    'show_navbar' => 'yes',
                ],
            ]
        );
        $this->add_control(
            'show_download',
            [
                'label'        => __('Show Download', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
                'condition'    => [
                    'show_navbar' => 'yes',
                ],
            ]
        );
        // Premium Features Section
        $this->add_control(
            'premium_features_heading',
            [
                'label' => __('Premium Features', 'photo-sphere-viewer'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'show_move',
            [
                'label'        => __('Show Move', 'photo-sphere-viewer'),
                'type'         => $this->is_pro_activated() ? Controls_Manager::SWITCHER : Promotion_Control::TYPE,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => $this->is_pro_activated() ? 'yes' : '',
                'condition'    => [
                    'show_navbar' => 'yes',
                ],
                'description'  => !$this->is_pro_activated() ? __('Available in Pro version', 'photo-sphere-viewer') : '',
            ]
        );

        $this->add_control(
            'show_fullscreen',
            [
                'label'        => __('Show Fullscreen', 'photo-sphere-viewer'),
                'type'         => $this->is_pro_activated() ? Controls_Manager::SWITCHER : Promotion_Control::TYPE,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => $this->is_pro_activated() ? 'yes' : '',
                'condition'    => [
                    'show_navbar' => 'yes',
                ],
                'description'  => !$this->is_pro_activated() ? __('Available in Pro version', 'photo-sphere-viewer') : '',
            ]
        );

        $this->add_control(
            'show_autorotate',
            [
                'label'        => __('Show Autorotate', 'photo-sphere-viewer'),
                'type'         => $this->is_pro_activated() ? Controls_Manager::SWITCHER : Promotion_Control::TYPE,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => $this->is_pro_activated() ? 'yes' : '',
                'condition'    => [
                    'show_navbar' => 'yes',
                ],
                'description'  => !$this->is_pro_activated() ? __('Available in Pro version', 'photo-sphere-viewer') : '',
            ]
        );

        $this->add_control(
            'autorotate_autoplay',
            [
                'label'        => __('Autorotate Autoplay', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => '',
                'condition'    => [
                    'show_navbar'     => 'yes',
                    'show_autorotate' => 'yes',
                ],
                'description'  => __('When enabled, the panorama starts rotating automatically. When disabled, the autorotate button is shown in the navbar but rotation must be started manually.', 'photo-sphere-viewer'),
            ]
        );

        $this->add_control(
            'show_description',
            [
                'label'        => __('Show Description', 'photo-sphere-viewer'),
                'type'         => $this->is_pro_activated() ? Controls_Manager::SWITCHER : Promotion_Control::TYPE,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => $this->is_pro_activated() ? 'yes' : '',
                'condition'    => [
                    'show_navbar' => 'yes',
                ],
                'description'  => !$this->is_pro_activated() ? __('Available in Pro version', 'photo-sphere-viewer') : '',
            ]
        );

        $this->add_control(
            'description_text',
            [
                'label'        => __('Description Text', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::TEXTAREA,
                'rows'         => 10,
                'default'      => '<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas.
      Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
      egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et
      sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet,
      wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
      dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>',
                'condition'    => [
                    'show_description' => 'yes',
                ],
            ],
        );
        // Premium Plugins Heading
        $this->add_control(
            'premium_plugins_heading',
            [
                'label'     => __('Premium Plugins', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'enable_compass',
            [
                'label'        => __('Compass Overlay', 'photo-sphere-viewer'),
                'type'         => $this->is_pro_activated() ? Controls_Manager::SWITCHER : Promotion_Control::TYPE,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => '',
                'description'  => !$this->is_pro_activated() ? __('Available in Pro version', 'photo-sphere-viewer') : __('Show a compass indicator on the viewer.', 'photo-sphere-viewer'),
            ]
        );

        $this->add_control(
            'compass_size',
            [
                'label'     => __('Compass Size', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::NUMBER,
                'default'   => 120,
                'min'       => 50,
                'max'       => 300,
                'step'      => 10,
                'condition' => [
                    'enable_compass' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'enable_gyroscope',
            [
                'label'        => __('Gyroscope (Mobile)', 'photo-sphere-viewer'),
                'type'         => $this->is_pro_activated() ? Controls_Manager::SWITCHER : Promotion_Control::TYPE,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => '',
                'description'  => !$this->is_pro_activated() ? __('Available in Pro version', 'photo-sphere-viewer') : __('Enable device orientation control on mobile. Requires HTTPS.', 'photo-sphere-viewer'),
            ]
        );

        $this->add_control(
            'enable_visible_range',
            [
                'label'        => __('Restrict Viewing Angle', 'photo-sphere-viewer'),
                'type'         => $this->is_pro_activated() ? Controls_Manager::SWITCHER : Promotion_Control::TYPE,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => '',
                'description'  => !$this->is_pro_activated() ? __('Available in Pro version', 'photo-sphere-viewer') : __('Limit horizontal and vertical viewing angles.', 'photo-sphere-viewer'),
            ]
        );

        $this->add_control(
            'visible_range_yaw_min',
            [
                'label'     => __('Min Yaw (°)', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::NUMBER,
                'default'   => -180,
                'min'       => -180,
                'max'       => 180,
                'condition' => [
                    'enable_visible_range' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'visible_range_yaw_max',
            [
                'label'     => __('Max Yaw (°)', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::NUMBER,
                'default'   => 180,
                'min'       => -180,
                'max'       => 180,
                'condition' => [
                    'enable_visible_range' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'visible_range_pitch_min',
            [
                'label'     => __('Min Pitch (°)', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::NUMBER,
                'default'   => -90,
                'min'       => -90,
                'max'       => 90,
                'condition' => [
                    'enable_visible_range' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'visible_range_pitch_max',
            [
                'label'     => __('Max Pitch (°)', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::NUMBER,
                'default'   => 90,
                'min'       => -90,
                'max'       => 90,
                'condition' => [
                    'enable_visible_range' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'fisheye',
            [
                'label'        => __('Fisheye', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
                'separator'    => 'before',
            ]
        );
        $this->add_control(
            'mousewheel',
            [
                'label'        => __('MouseWheel', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );
        $this->add_control(
            'mousewheel_ctrl_key',
            [
                'label'        => __('MouseWheel CTRL Key', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );
        $this->add_control(
            'touch_move_two_fingers',
            [
                'label'        => __('Touch Move Two Fingers', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );
        $this->add_control(
            'mouse_move',
            [
                'label'        => __('Mouse Move', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );
        $this->add_control(
            'capture_cursor',
            [
                'label'        => __('Capture Cursor', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'no',
            ]
        );

        $this->end_controls_tab();
        $this->start_controls_tab(
            'advanced',
            [
                'label' => __('Advanced', 'photo-sphere-viewer'),
            ]
        );
        $this->add_control(
            'min_fov',
            [
                'label'   => __('MinFov', 'photo-sphere-viewer'),
                'description' => __('Minimal field of view (maximum zoom), between 1 and maxFov.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'min'     => 1,
                'max'     => 179,
                'step'    => 1,
                'default' => 30,
            ]
        );
        $this->add_control(
            'max_fov',
            [
                'label'   => __('MaxFov', 'photo-sphere-viewer'),
                'description' => __('Maximum field of view (minimum zoom), between minFov and 180.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'min'     => 1,
                'max'     => 180,
                'step'    => 1,
                'default' => 90,
            ]
        );
        $this->add_control(
            'default_zoom_level',
            [
                'label'   => __('Zoom Level', 'photo-sphere-viewer'),
                'description' => __('Default zoom level, between 1 and maxFov.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'default' => 30,
            ]
        );
        $this->add_control(
            'default_yaw',
            [
                'label'   => __('Starting Yaw (horizontal)', 'photo-sphere-viewer'),
                'description' => __('Initial horizontal angle in degrees, between -180 and 180.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'min'     => -180,
                'max'     => 180,
                'step'    => 1,
                'default' => 0,
            ]
        );
        $this->add_control(
            'default_pitch',
            [
                'label'   => __('Starting Pitch (vertical)', 'photo-sphere-viewer'),
                'description' => __('Initial vertical angle in degrees, between -90 and 90.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'min'     => -90,
                'max'     => 90,
                'step'    => 1,
                'default' => 0,
            ]
        );
        $this->add_control(
            'longitude_range',
            [
                'label'   => __('LongiTude Range', 'photo-sphere-viewer'),
                'description' => __('Longitude range, between -180 and 180.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'default' => 0,
            ]
        );
        $this->add_control(
            'latitude_range',
            [
                'label'   => __('Latitude Range', 'photo-sphere-viewer'),
                'description' => __('Latitude range, between -90 and 90.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'default' => 0,
            ]
        );
        $this->add_control(
            'auto_rotate_delay',
            [
                'label'   => __('Auto Rotate Delay', 'photo-sphere-viewer'),
                'description' => __('Auto rotate delay, in milliseconds.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'min'     => 0,
                'max'     => 7000,
                'step'    => 5,
                'default' => 100,
            ]
        );
        $this->add_control(
            'move_speed',
            [
                'label'   => __('Move Speed', 'photo-sphere-viewer'),
                'description' => __('Move speed, in pixels per second.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'default' => 1,
            ]
        );
        $this->add_control(
            'mouse_wheel_speed',
            [
                'label'   => __('Mouse Wheel Speed', 'photo-sphere-viewer'),
                'description' => __('Mouse wheel speed, in pixels per second.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'default' => 1,
            ]
        );

        $this->add_control(
            'zoom_button_increment',
            [
                'label'   => __('Zoom Button Increment', 'photo-sphere-viewer'),
                'description' => __('Zoom button increment, in degrees.', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::NUMBER,
                'default' => 2,
            ]
        );
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->end_controls_section();

        /**
         * !Gallery Section
         */
        $this->start_controls_section(
            '_gallery_section',
            [
                'label' => __('Gallery', 'photo-sphere-viewer'),
                'tab'   => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'enable_gallery',
            [
                'label'        => __('Enable Gallery', 'photo-sphere-viewer'),
                'type'         => $this->is_pro_activated() ? Controls_Manager::SWITCHER : Promotion_Control::TYPE,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => '',
                'description'  => $this->is_pro_activated() ?   __('Adds a gallery bar at the bottom to switch between multiple panoramas.', 'photo-sphere-viewer') : __('Adds a gallery bar at the bottom to switch between multiple panoramas.', 'photo-sphere-viewer'),
                'render_type'  => 'template',
            ]
        );

        $gallery_repeater = new Repeater();

        $gallery_repeater->add_control(
            'gallery_item_name',
            [
                'label'       => __('Name', 'photo-sphere-viewer'),
                'type'        => Controls_Manager::TEXT,
                'default'     => __('Panorama', 'photo-sphere-viewer'),
                'label_block' => true,
                'render_type' => 'none',
            ]
        );

        $gallery_repeater->add_control(
            'gallery_item_image',
            [
                'label'   => __('Panorama Image', 'photo-sphere-viewer'),
                'type'    => Controls_Manager::MEDIA,
                'default' => [
                    'url' => '',
                ],
            ]
        );

        $gallery_repeater->add_control(
            'gallery_item_thumbnail',
            [
                'label'       => __('Thumbnail', 'photo-sphere-viewer'),
                'type'        => Controls_Manager::MEDIA,
                'description' => __('Optional. If empty, the panorama image is used.', 'photo-sphere-viewer'),
                'default'     => [
                    'url' => '',
                ],
            ]
        );

        $this->add_control(
            'gallery_items',
            [
                'label'       => __('Gallery Items', 'photo-sphere-viewer'),
                'type'        => Controls_Manager::REPEATER,
                'fields'      => $gallery_repeater->get_controls(),
                'default'     => [],
                'title_field' => '{{{ gallery_item_name }}}',
                'condition'   => [
                    'enable_gallery' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'gallery_visible_on_load',
            [
                'label'        => __('Visible On Load', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
                'description'  => __('Show the gallery panel when the viewer first loads.', 'photo-sphere-viewer'),
                'condition'    => [
                    'enable_gallery' => 'yes',
                ],
                'separator'    => 'before',
            ]
        );

        $this->add_control(
            'gallery_hide_on_click',
            [
                'label'        => __('Hide On Click', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => 'yes',
                'description'  => __('Hide the gallery after clicking an item.', 'photo-sphere-viewer'),
                'condition'    => [
                    'enable_gallery' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'gallery_navigation_arrows',
            [
                'label'        => __('Navigation Arrows', 'photo-sphere-viewer'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'photo-sphere-viewer'),
                'label_off'    => __('No', 'photo-sphere-viewer'),
                'return_value' => 'yes',
                'default'      => '',
                'description'  => __('Show left/right arrows on the gallery bar.', 'photo-sphere-viewer'),
                'condition'    => [
                    'enable_gallery' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'gallery_thumb_width',
            [
                'label'     => __('Thumbnail Width', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::NUMBER,
                'default'   => 200,
                'min'       => 50,
                'max'       => 500,
                'step'      => 10,
                'condition' => [
                    'enable_gallery' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'gallery_thumb_height',
            [
                'label'     => __('Thumbnail Height', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::NUMBER,
                'default'   => 100,
                'min'       => 50,
                'max'       => 300,
                'step'      => 10,
                'condition' => [
                    'enable_gallery' => 'yes',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            /**
             * ! Style Section
             */
            '_style_section',
            [
                'label' => __('Navbar', 'photo-sphere-viewer'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
            'navbar_background',
            [
                'label'     => __('Background', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .psv-navbar' => 'background: {{VALUE}}',
                ],
            ]
        );
        $this->add_control(
            'title_heading',
            [
                'label'     => __('Title', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_control(
            'title_color',
            [
                'label'     => __('Color', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .psv-caption-content' => 'color: {{VALUE}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'title_typography',
                'label'    => __('Typography', 'photo-sphere-viewer'),
                'selector' => '{{WRAPPER}} .psv-caption-content',
            ]
        );
        $this->add_control(
            'title_alignment',
            [
                'label'     => __('Alignment', 'photo-sphere-viewer'),
                'type'      => Controls_Manager::CHOOSE,
                'options'   => [
                    'left'   => [
                        'title' => __('Left', 'photo-sphere-viewer'),
                        'icon'  => 'eicon-h-align-left',
                    ],
                    'center' => [
                        'title' => __('Center', 'photo-sphere-viewer'),
                        'icon'  => 'eicon-h-align-center',
                    ],
                    'right'  => [
                        'title' => __('Right', 'photo-sphere-viewer'),
                        'icon'  => 'eicon-h-align-right',
                    ],
                ],
                'default'   => 'center',
                'toggle'    => true,
                'selectors' => [
                    '{{WRAPPER}} .psv-caption' => 'text-align: {{VALUE}}',
                ],
            ]
        );

        $this->end_controls_section();
    }

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

        // Pro: SWITCHER returns 'yes' when ON (default), '' when OFF.
        //   ON  → load the un-scaled original via ImageResolver.
        //   OFF → keep Elementor's URL.
        $use_original = $is_pro
            && isset($settings['use_original_image'])
            && $settings['use_original_image'] === 'yes';

        // Initialize empty navbar array and let Pro plugin handle the ordering
        $navbar_enabled = [];

        // Allow Pro plugin to add all navbar features in correct order
        $navbar_enabled = apply_filters('photo_sphere_viewer_navbar_features', $navbar_enabled, $settings, $this);

        // Fallback: if no features were added (Pro plugin not active), add basic features
        if (empty($navbar_enabled)) {
            if (isset($settings['show_zoom']) && $settings['show_zoom']) $navbar_enabled[] = 'zoom';
            if (isset($settings['show_caption']) && $settings['show_caption']) $navbar_enabled[] = 'caption';
            if (isset($settings['show_download']) && $settings['show_download']) $navbar_enabled[] = 'download';
        }

        // Add 'gallery' to navbar when gallery is enabled
        if (isset($settings['enable_gallery']) && $settings['enable_gallery'] === 'yes') {
            $navbar_enabled[] = 'gallery';
        }

        $navbar_options = implode(',', $navbar_enabled);
        $this->add_render_attribute('viewer', 'class', 'photo-sphere-viewer viewer');
        $id = wp_unique_id('psv-container-');

        // Build gallery items array for JS
        $gallery_items = [];
        if (isset($settings['enable_gallery']) && $settings['enable_gallery'] === 'yes' && !empty($settings['gallery_items'])) {
            foreach ($settings['gallery_items'] as $index => $item) {
                if (empty($item['gallery_item_image']['url'])) continue;
                $gallery_panorama_url = ImageResolver::resolve($item['gallery_item_image'], $use_original, 'gallery-item');
                $gallery_items[] = [
                    'id'        => 'gallery-item-' . $index,
                    'name'      => $item['gallery_item_name'],
                    'panorama'  => $gallery_panorama_url,
                    'thumbnail' => !empty($item['gallery_item_thumbnail']['url'])
                        ? $item['gallery_item_thumbnail']['url']
                        : $gallery_panorama_url,
                ];
            }
        }

        $this->add_render_attribute([
            'viewer' => [
                'data-settings' => [
                    wp_json_encode(array_filter([
                        'container'           => sanitize_key($id),
                        'panorama'            => ImageResolver::resolve($settings['image'], $use_original, 'panorama'),
                        'caption'             => $settings['caption'],
                        'description'         => $is_pro ? ($settings['description_text'] ?? '') : '',
                        'navbar'              => isset($settings['show_navbar']) && $settings['show_navbar'] === 'yes' ? $navbar_options : false,
                        'autorotateAutoplay'  => (isset($settings['show_autorotate']) && $settings['show_autorotate'] === 'yes'
                            && isset($settings['autorotate_autoplay']) && $settings['autorotate_autoplay'] === 'yes'),
                        'minFov'              => $settings['min_fov'],
                        'maxFov'              => $settings['max_fov'],
                        'defaultZoomLvl'      => $settings['default_zoom_level'],
                        'defaultYaw'          => $settings['default_yaw'] . 'deg',
                        'defaultPitch'        => $settings['default_pitch'] . 'deg',
                        'longitudeRange'      => $settings['longitude_range'],
                        'latitudeRange'       => $settings['latitude_range'],
                        'fisheye'             => ('yes' === ($settings['fisheye'] ?? '')),
                        'mousewheel'          => ('yes' === ($settings['mousewheel'] ?? '')),
                        'mousewheelCtrlKey'   => ('yes' === ($settings['mousewheel_ctrl_key'] ?? '')),
                        'touchmoveTwoFingers' => ('yes' === ($settings['touch_move_two_fingers'] ?? '')),
                        'mousemove'           => ('yes' === ($settings['mouse_move'] ?? '')),
                        'captureCursor'       => ('yes' === ($settings['capture_cursor'] ?? '')),
                        'moveSpeed'           => $settings['move_speed'],
                        'canvasBackground'    => '#333',
                        // Premium plugins (only output config when pro is active)
                        'compassPlugin'       => ($is_pro && isset($settings['enable_compass']) && $settings['enable_compass'] === 'yes') ? [
                            'size' => (isset($settings['compass_size']) ? (int) $settings['compass_size'] : 120) . 'px',
                        ] : null,
                        'gyroscopePlugin'     => ($is_pro && isset($settings['enable_gyroscope']) && $settings['enable_gyroscope'] === 'yes') ? true : null,
                        'visibleRangePlugin'  => ($is_pro && isset($settings['enable_visible_range']) && $settings['enable_visible_range'] === 'yes') ? [
                            'horizontalRange' => [
                                (isset($settings['visible_range_yaw_min']) ? (int) $settings['visible_range_yaw_min'] : -180) . 'deg',
                                (isset($settings['visible_range_yaw_max']) ? (int) $settings['visible_range_yaw_max'] : 180) . 'deg',
                            ],
                            'verticalRange' => [
                                (isset($settings['visible_range_pitch_min']) ? (int) $settings['visible_range_pitch_min'] : -90) . 'deg',
                                (isset($settings['visible_range_pitch_max']) ? (int) $settings['visible_range_pitch_max'] : 90) . 'deg',
                            ],
                        ] : null,
                        // Gallery plugin config
                        'galleryPlugin'       => !empty($gallery_items) ? [
                            'items'            => $gallery_items,
                            'visibleOnLoad'    => isset($settings['gallery_visible_on_load']) && $settings['gallery_visible_on_load'] === 'yes',
                            'hideOnClick'      => isset($settings['gallery_hide_on_click']) && $settings['gallery_hide_on_click'] === 'yes',
                            'navigationArrows' => isset($settings['gallery_navigation_arrows']) && $settings['gallery_navigation_arrows'] === 'yes',
                            'thumbnailSize'    => [
                                'width'  => isset($settings['gallery_thumb_width']) ? (int) $settings['gallery_thumb_width'] : 200,
                                'height' => isset($settings['gallery_thumb_height']) ? (int) $settings['gallery_thumb_height'] : 100,
                            ],
                        ] : null,
                    ])),
                ],
            ],
        ]);
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Elementor's get_render_attribute_string() escapes internally
        printf('<div id="%1$s" %2$s></div>', esc_attr($id), $this->get_render_attribute_string('viewer'));
    }
}
