trAvis - MANAGER

Edit File: tp_post_navigation.php

<?php 
/*
Widget Name: Post Previous Next
Description: Post Previous Next
Author: Theplus
Author URI: https://posimyth.com
*/
namespace TheplusAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Core\Schemes\Color;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Core\Schemes\Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Box_Shadow;

use TheplusAddons\Theplus_Element_Load;
if (!defined('ABSPATH'))
    exit; // Exit if accessed directly

class ThePlus_Post_Navigation extends Widget_Base {
		
	public function get_name() {
		return 'tp-post-navigation';
	}

public function get_title() {
        return esc_html__('Post Prev/Next', 'theplus');
    }

public function get_icon() {
        return 'fa fa-exchange theplus_backend_icon';
    }

public function get_categories() {
        return array('plus-builder');
    }

protected function _register_controls() {
		
		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'theplus' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);
		$this->add_control(
			'style',
			[
				'label' => esc_html__( 'Style', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'style-1',
				'options' => [
					"style-1" => esc_html__("Style 1", 'theplus'),					
					"style-2" => esc_html__("Style 2", 'theplus'),					
					"style-3" => esc_html__("Style 3", 'theplus'),					
					"style-4" => esc_html__("Style 4", 'theplus'),					
				],			
			]
		);
		$this->add_responsive_control(
            'st3minheight',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Min Height', 'theplus'),
				'size_units' => [ 'px'],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 500,
						'step' => 1,
					],
				],
				'condition' => [
					'style' => 'style-3',
				],
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-trans.tp-nav-style-3 .tp-post-nav-hover-con' => 'min-height: {{SIZE}}{{UNIT}}',
				],
            ]
        );
		$this->add_control(
			'prevText',
			[
				'label'       => esc_html__( 'Previous Post', 'theplus' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => 'Previous Post',
				'placeholder' => 'Previous Post',
				'label_block' => true,	
			]
		);
		$this->add_control(
			'nextText',
			[
				'label'       => esc_html__( 'Next Post', 'theplus' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => 'Next Post',
				'placeholder' => 'Next Post',
				'label_block' => true,
			]
		);
		$this->end_controls_section();
		/*End Content Section*/
		/*Prev/Next icon Style*/
		$this->start_controls_section(
            'section_np_icon_style',
            [
                'label' => esc_html__('Prev/Next Icon', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style' => 'style-2',
				],
            ]
        );
		$this->add_responsive_control(
			'np_icon_align',
			[
				'label' => esc_html__( 'Alignment', 'theplus' ),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'flex-start' => [
						'title' => esc_html__( 'Left', 'theplus' ),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'theplus' ),
						'icon' => 'eicon-text-align-center',
					],
					'flex-end' => [
						'title' => esc_html__( 'Right', 'theplus' ),
						'icon' => 'eicon-text-align-right',
					],
				],
				'devices' => [ 'desktop', 'tablet', 'mobile' ],
				'default' => 'flex-start',
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .tp-post-nav' => 'justify-content: {{VALUE}}',
				],
			]
		);
		$this->add_responsive_control(
			'np_icon_padding',
			[
				'label' => esc_html__( 'Padding', 'theplus' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em' ],
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next a i' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
            'np_icon_size',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Size', 'theplus'),
				'size_units' => [ 'px'],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 200,
						'step' => 1,
					],
				],
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next a i' => 'font-size: {{SIZE}}{{UNIT}}',
				],
            ]
        );
		$this->start_controls_tabs( 'tabs_tab_np_icon' );
		$this->start_controls_tab(
			'tab_np_icon_n',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),
			]
		);
		$this->add_control(
			'tab_np_icon_color_n',
			[
				'label' => esc_html__( 'Icon Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next a i' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'np_icon_background_n',
				'label' => esc_html__( 'Background', 'theplus' ),
				'types' => [ 'classic', 'gradient'],
				'selector' => '{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next a i',
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'np_icon_border_n',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next a i',
			]
		);
		$this->add_responsive_control(
			'np_icon_radius_n',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next a i' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],				
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'np_icon_shadow_n',
				'selector' => '{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next a i',
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_tabs_np_icon_h',
			[
				'label' => esc_html__( 'Hover', 'theplus' ),
			]
		);
		$this->add_control(
			'tab_np_icon_h',
			[
				'label' => esc_html__( 'Icon Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev:hover a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next:hover a i' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'np_icon_background_h',
				'label' => esc_html__( 'Background', 'theplus' ),
				'types' => [ 'classic', 'gradient'],
				'selector' => '{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev:hover a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next:hover a i',
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'np_icon_border_h',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev:hover a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next:hover a i',
			]
		);
		$this->add_responsive_control(
			'np_icon_radius_h',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev:hover a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next:hover a i' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],				
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'np_icon_shadow_h',
				'selector' => '{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev:hover a i,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next:hover a i',
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();	
		$this->end_controls_section();
		/*Prev/Next icon Style*/
		/*Prev/Next content Style*/
		$this->start_controls_section(
            'section_next_prev_con_style',
            [
                'label' => esc_html__('Prev/Next Content', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style!' => ['style-3','style-4'],
				],
            ]
        );
		$this->add_responsive_control(
			'np__con_padding',
			[
				'label' => esc_html__( 'Padding', 'theplus' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em' ],
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev:hover .tp-post-nav-hover-con,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next:hover .tp-post-nav-hover-con' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'after',
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'np__con_background_h',
				'label' => esc_html__( 'Background', 'theplus' ),
				'types' => [ 'classic', 'gradient'],
				'selector' => '{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev:hover .tp-post-nav-hover-con,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next:hover .tp-post-nav-hover-con',
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'np__con_border_h',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev:hover .tp-post-nav-hover-con,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next:hover .tp-post-nav-hover-con',
			]
		);
		$this->add_responsive_control(
			'np__con_radius_h',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev:hover .tp-post-nav-hover-con,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next:hover .tp-post-nav-hover-con' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],				
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'np__con_shadow_h',
				'selector' => '{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-prev:hover .tp-post-nav-hover-con,{{WRAPPER}} .tp-post-navigation.tp-nav-style-2 .post-next:hover .tp-post-nav-hover-con',
			]
		);
		$this->end_controls_section();
		/*Prev/Next content Style*/
		/*Prev/Next Post Title Style*/
		$this->start_controls_section(
            'section_next_prev_title_style',
            [
                'label' => esc_html__('Prev/Next', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style!' => ['style-4'],
				],
            ]
        );
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'navTypo',
				'label' => esc_html__( 'Typography', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation .prev-post-content b,{{WRAPPER}} .tp-post-navigation .next-post-content b',
			]
		);
		$this->start_controls_tabs( 'tabs_next_prev_style' );
		$this->start_controls_tab(
			'tab_next_prev_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),				
			]
		);
		$this->add_control(
			'navNormalColor',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation .prev-post-content b,{{WRAPPER}} .tp-post-navigation .next-post-content b' => 'color: {{VALUE}}',
				],
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_next_prev_hover',
			[
				'label' => esc_html__( 'Hover', 'theplus' ),
			]
		);
		$this->add_control(
			'navHoverColor',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation .post-prev:hover .prev-post-content b,{{WRAPPER}} .tp-post-navigation .post-next:hover .next-post-content b' => 'color: {{VALUE}}',
				],
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*Prev/Next Post Title Style*/
		/*Post Title Style*/
		$this->start_controls_section(
            'section_title_style',
            [
                'label' => esc_html__('Post Title', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style!' => ['style-4'],
				],
            ]
        );
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'titleTypo',
				'label' => esc_html__( 'Typography', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation .prev-post-content span,{{WRAPPER}} .tp-post-navigation .next-post-content span',
			]
		);
		$this->start_controls_tabs( 'tabs_title_style' );
		$this->start_controls_tab(
			'tab_title_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),				
			]
		);
		$this->add_control(
			'titleNormalColor',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation .prev-post-content span,{{WRAPPER}} .tp-post-navigation .next-post-content span' => 'color: {{VALUE}}',
				],
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_title_hover',
			[
				'label' => esc_html__( 'Hover', 'theplus' ),
			]
		);
		$this->add_control(
			'titleHoverColor',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation .post-prev:hover .prev-post-content span,{{WRAPPER}} .tp-post-navigation .post-next:hover .next-post-content span' => 'color: {{VALUE}}',
				],
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*Post Title Style*/
		/*Image Style*/
		$this->start_controls_section(
            'section_img_style',
            [
                'label' => esc_html__('Image', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style!' => ['style-3','style-4'],
				],
            ]
        );
		$this->start_controls_tabs( 'tabs_img_style' );
		$this->start_controls_tab(
			'tab_img_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),				
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'imgBorder',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation img',
			]
		);
		$this->add_responsive_control(
			'imgBorderRadius',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .tp-post-navigation img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],			
			]
		);		
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'imgBoxShadow',
				'selector' => '{{WRAPPER}} .tp-post-navigation img',
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_img_hover',
			[
				'label' => esc_html__( 'Hover', 'theplus' ),
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'imgBorderHover',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-prev:hover img,{{WRAPPER}} .tp-post-navigation .post-next:hover img',
			]
		);
		$this->add_responsive_control(
			'imgBorderRadiusHover',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .tp-post-navigation .post-prev:hover img,{{WRAPPER}} .tp-post-navigation .post-next:hover img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],			
			]
		);		
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'imgBoxShadowHover',
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-prev:hover img,{{WRAPPER}} .tp-post-navigation .post-next:hover img',
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*Image Style*/
		/*Previous Box Style*/
		$this->start_controls_section(
            'section_prev_box_style',
            [
                'label' => esc_html__('Prev Box', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style' => 'style-1',
				],
            ]
        ); 
		$this->start_controls_tabs( 'tabs_prev_box_style' );
		$this->start_controls_tab(
			'tab_prev_box_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),				
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'prevBg',
				'types'     => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-prev .prev',
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'prevBorder',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-prev .prev',	
			]
		);
		$this->add_responsive_control(
			'prevBorderRadius',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .tp-post-navigation .post-prev .prev' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],			
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'prevBoxShadow',
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-prev .prev',
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_prev_box_hover',
			[
				'label' => esc_html__( 'Hover', 'theplus' ),
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'prevBgHover',
				'types'     => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-prev:hover .prev',
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'prevBorderHover',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-prev:hover .prev',	
			]
		);
		$this->add_responsive_control(
			'prevBorderRadiusHover',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .tp-post-navigation .post-prev:hover .prev' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],			
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'prevBoxShadowHover',
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-prev:hover .prev',
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*Previous Box Style*/
		/*Next Box Style*/
		$this->start_controls_section(
            'section_next_box_style',
            [
                'label' => esc_html__('Next Box ', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style' => 'style-1',
				],
            ]
        );
		$this->start_controls_tabs( 'tabs_next_box_style' );
		$this->start_controls_tab(
			'tab_next_box_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),				
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'nextBg',
				'types'     => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-next .next',
			]
		);	
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'nextBorder',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-next .next',		
			]
		);
		$this->add_responsive_control(
			'nextBorderRadius',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .tp-post-navigation .post-next .next' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],			
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'nextBoxShadow',
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-next .next',
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_next_box_hover',
			[
				'label' => esc_html__( 'Hover', 'theplus' ),
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'nextBgHover',
				'types'     => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-next:hover .next',
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'nextBorderHover',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-next:hover .next',	
			]
		);
		$this->add_responsive_control(
			'nextBorderRadiusHover',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .tp-post-navigation .post-next:hover .next' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],		
			]
		);	
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'nextBoxShadowHover',
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-next:hover .next',
			]
		);		
		$this->end_controls_tab();
		$this->end_controls_tabs();	
		$this->end_controls_section();
		/*Next Box Style*/
		/*Content Background*/
		$this->start_controls_section(
            'section_content_bg_style',
            [
                'label' => esc_html__('Content Background', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style' => 'style-1',
				],
            ]
        );		
		$this->add_responsive_control(
			'padding',
			[
				'label' => esc_html__( 'Padding', 'theplus' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'default' => [
							'top' => '',
							'right' => '',
							'bottom' => '',
							'left' => '',
							'isLinked' => false 
				],
				'selectors' => [
					'{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'after',	
			]
		);
		$this->start_controls_tabs( 'tabs_content_bg_style' );
		$this->start_controls_tab(
			'tab_content_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),				
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'boxBg',
				'types'     => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}}',
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'boxBorder',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}}',
			]
		);
		$this->add_responsive_control(
			'boxBorderRadius',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}}' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],		
			]
		);	
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'boxBoxShadow',
				'selector' => '{{WRAPPER}}',
			]
		);	
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_content_hover',
			[
				'label' => esc_html__( 'Hover', 'theplus' ),
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'boxBgHover',
				'types' => [ 'classic', 'gradient'],
				'selector' => '{{WRAPPER}}:hover',
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'boxBorderHover',
				'label' => esc_html__( 'Border', 'theplus' ),
				'selector' => '{{WRAPPER}}:hover',	
			]
		);
		$this->add_responsive_control(
			'boxBorderRadiusHover',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}}:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],		
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'boxBoxShadowHover',
				'selector' => '{{WRAPPER}}:hover',
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*Content Background*/		
		/*image Style*/
		$this->start_controls_section(
            'section_image_bg_style',
            [
                'label' => esc_html__('Background Image ', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style' => 'style-3',
				],
            ]
        );
		$this->add_control(
			'column_bg_image_normal',
			[
				'label' => esc_html__( 'Normal Background', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-trans.tp-nav-style-3 .post_nav_link .tp-post-nav-hover-con:before' => 'background: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'column_bg_image_hover',
			[
				'label' => esc_html__( 'Hover Background', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-trans.tp-nav-style-3 .post_nav_link:hover .tp-post-nav-hover-con:before' => 'background: {{VALUE}};',
				],
			]
		);
		$this->add_control(
            'column_bg_image_position', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Image Position', 'theplus'),
				'default' => 'center center',
				'options' => theplus_get_image_position_options(),
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-trans.tp-nav-style-3 .tp-post-nav-hover-con' => 'background-position: {{VALUE}} !important;',
				],
			]
        );
		$this->add_control(
            'column_bg_img_attach', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Attachment', 'theplus'),
				'default' => 'fixed',
				'options' => theplus_get_image_attachment_options(),
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-trans.tp-nav-style-3 .tp-post-nav-hover-con' => 'background-attachment: {{VALUE}} !important;',
				],
			]
        );
		$this->add_control(
            'column_bg_img_repeat', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Repeat', 'theplus'),
				'default' => 'no-repeat',
				'options' => theplus_get_image_reapeat_options(),
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-trans.tp-nav-style-3 .tp-post-nav-hover-con' => 'background-repeat: {{VALUE}} !important;',
				],
			]
        );
		$this->add_control(
            'column_bg_image_size', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Background Size', 'theplus'),
				'default' => 'cover',
				'options' => theplus_get_image_size_options(),
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-trans.tp-nav-style-3 .tp-post-nav-hover-con' => 'background-size: {{VALUE}} !important;',
				],
			]
        );
		$this->end_controls_section();
		/*Icon Style*/
		$this->start_controls_section(
            'section_st4_icon_style',
            [
                'label' => esc_html__('Icon ', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style' => ['style-4'],
				],
            ]
        );
		$this->add_control(
			'st4_icon_color',
			[
				'label' => esc_html__( 'Icon Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-4 .tp-post-nav-hover-arrow' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'st4_icon_color_hover',
			[
				'label' => esc_html__( 'Hover Icon Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-4 .post-prev:hover .tp-post-nav-hover-arrow,
					{{WRAPPER}} .tp-post-navigation.tp-nav-style-4 .post-next:hover .tp-post-nav-hover-arrow' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'st4_icon_bg',
			[
				'label' => esc_html__( 'Background Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-4 .tp-post-nav-hover-arrow' => 'background: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'st4_icon_bg_hover',
			[
				'label' => esc_html__( 'Hover Background Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-4 .post-prev:hover .tp-post-nav-hover-arrow,{{WRAPPER}} .tp-post-navigation.tp-nav-style-4 .post-next:hover .tp-post-nav-hover-arrow' => 'background: {{VALUE}};',
				],
			]
		);
		$this->end_controls_section();
		/*Icon Style*/
		/*Post Content Style*/
		$this->start_controls_section(
            'section_st4_post_con_style',
            [
                'label' => esc_html__('Post Content ', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'style' => ['style-4'],
				],
            ]
        );
		$this->add_responsive_control(
			'st4_post_con_padding',
			[
				'label' => esc_html__( 'Padding', 'theplus' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em' ],
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-4 .prev-post-content,
					{{WRAPPER}} .tp-post-navigation.tp-nav-style-4 .next-post-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_control(
			'st4_post_con_bg',
			[
				'label' => esc_html__( 'Background', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation.tp-nav-style-4 .prev-post-content,
					{{WRAPPER}} .tp-post-navigation.tp-nav-style-4 .next-post-content' => 'background: {{VALUE}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'st4titleTypo',
				'label' => esc_html__( 'Post Title Typography', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation .post-next:hover .next-post-content span,{{WRAPPER}} .tp-post-navigation .post-prev:hover .prev-post-content span',
			]
		);
		$this->add_control(
			'st4titleNormalColor',
			[
				'label' => esc_html__( 'Post Title Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation .post-next:hover .next-post-content span,{{WRAPPER}} .tp-post-navigation .post-prev:hover .prev-post-content span' => 'color: {{VALUE}}',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'st4labelTypo',
				'label' => esc_html__( 'Post Label Typography', 'theplus' ),
				'selector' => '{{WRAPPER}} .tp-post-navigation .prev-post-content b,{{WRAPPER}} .tp-post-navigation .next-post-content b',
			]
		);
		$this->add_control(
			'st4labelNormalColor',
			[
				'label' => esc_html__( 'Post Label Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .tp-post-navigation .prev-post-content b,{{WRAPPER}} .tp-post-navigation .next-post-content b' => 'color: {{VALUE}}',
				],
			]
		);
		$this->end_controls_section();
		/*Post Content Style*/
	}

protected function render() {

$settings = $this->get_settings_for_display();

$post_id = get_queried_object_id();
		$post = get_queried_object();
		$uid_psnav=uniqid('tp-nav');
		$style = (!empty($settings['style'])) ? $settings['style'] : 'style-1';
		$prevText = (!empty($settings['prevText'])) ? $settings['prevText'] : '';
		$nextText = (!empty($settings['nextText'])) ? $settings['nextText'] : '';

$prev_post = get_previous_post();
		$prevnav =$img=$prevpostimg =$prevpostcon='';
		if (!empty( $prev_post )){
			
			$prevpostcon .= '<div class="prev-post-content">';
				$prevpostcon .= '<b>'.esc_html($prevText).'</b>';
				$prevpostcon .= '<span>'.esc_html($prev_post->post_title).'</span>';
			$prevpostcon .= '</div>';
			
			if (has_post_thumbnail( $prev_post->ID ) ){
				$prevpostimg .= '<div class="post-image">';
					$prevpostimg .= get_the_post_thumbnail( $prev_post->ID, 'thumbnail', array( 'class' => 'tp-nav-trans' ) );
				$prevpostimg .= '</div>';
			}else{
				$prevpostimg .= '<div class="post-image">';
					$prevpostimg .= '<img src="'.THEPLUS_URL .'/assets/images/placeholder-grid.jpg" class="tp-nav-trans" />';
				$prevpostimg .= '</div>';
			}
			
			if(!empty($style)){
				if($style=='style-1'){	
					$prevnav .= '<a href="'.esc_url(get_permalink( $prev_post->ID )).'" class="post_nav_link prev tp-nav-trans" rel="'.esc_attr__('prev','theplus').'">';	
						$prevnav .=$prevpostimg;
						$prevnav .=$prevpostcon;						
					$prevnav .= '</a>';
				}else if($style=='style-2'){				
					$prevnav .= '<a href="'.esc_url(get_permalink( $prev_post->ID )).'" class="post_nav_link prev tp-nav-trans" rel="'.esc_attr__('prev','theplus').'"><i aria-hidden="true" class="far fa-arrow-alt-circle-left"></i>';
					$prevnav .='<div class="tp-post-nav-hover-con">'.$prevpostimg.$prevpostcon.'</div></a>';
				}else if($style=='style-3'){				
					$img = wp_get_attachment_image_src( get_post_thumbnail_id( $prev_post->ID ),'full');					
					$prevnav .= '<a href="'.esc_url(get_permalink( $prev_post->ID )).'" class="post_nav_link prev tp-nav-trans" rel="'.esc_attr__('prev','theplus').'">';
					$prevnav .='<div class="tp-post-nav-hover-con" style="background-image: url('.esc_url(!empty($img[0]) ? $img[0] : '').');background-size: cover;background-attachment: fixed;background-position: center center;background-repeat:no-repeat;">'.$prevpostcon.'</div></a>';
				}else if($style=='style-4'){				
					$prevnav .= '<a href="'.esc_url(get_permalink( $prev_post->ID )).'" class="post_nav_link prev tp-nav-trans" rel="'.esc_attr__('prev','theplus').'">';
						$prevnav .=$prevpostimg;
						$prevnav .='<div class="tp-post-nav-hover-arrow"></div>';
						$prevnav .=$prevpostcon;
					$prevnav .='</a>';
				}
				
			}
		}

$next_post = get_next_post();
		$nextnav =$img1=$nextpostcon= $nextpostimg='';
		if (!empty( $next_post )){
			$nextpostcon .= '<div class="next-post-content">';
				$nextpostcon .= '<b>'.esc_html($nextText).'</b>';
				$nextpostcon .= '<span>'.esc_html($next_post->post_title).'</span>';
			$nextpostcon .= '</div>';
			
			if (has_post_thumbnail( $next_post->ID ) ){
				$nextpostimg .= '<div class="post-image">';
					$nextpostimg .= get_the_post_thumbnail( $next_post->ID, 'thumbnail', array( 'class' => 'tp-nav-trans' ) );
				$nextpostimg .= '</div>';
			}else{
				$nextpostimg .= '<div class="post-image">';
					$nextpostimg .= '<img src="'.THEPLUS_URL .'/assets/images/placeholder-grid.jpg" class="tp-nav-trans" />';
				$nextpostimg .= '</div>';
			}			
			
			if(!empty($style)){
				if($style=='style-1'){					
					$nextnav .= '<a href="'.esc_url(get_permalink( $next_post->ID )).'" class="post_nav_link next tp-nav-trans" rel="'.esc_attr__('next','theplus').'">';
					$nextnav .=$nextpostcon;
					$nextnav .=$nextpostimg;				
					$nextnav .= '</a>';
				}else if($style=='style-2'){
					$nextnav .= '<a href="'.esc_url(get_permalink( $next_post->ID )).'" class="post_nav_link next tp-nav-trans" rel="'.esc_attr__('next','theplus').'"><i aria-hidden="true" class="far fa-arrow-alt-circle-right"></i>';
					$nextnav .='<div class="tp-post-nav-hover-con">'.$nextpostimg.$nextpostcon.'</div></a>';
				}else if($style=='style-3'){
					$img1 = wp_get_attachment_image_src( get_post_thumbnail_id( $next_post->ID ),'full');
					$nextnav .= '<a href="'.esc_url(get_permalink( $next_post->ID )).'" class="post_nav_link next tp-nav-trans" rel="'.esc_attr__('next','theplus').'">';
					$nextnav .='<div class="tp-post-nav-hover-con" style="background-image: url('.esc_url($img1[0]).');background-size: cover;background-attachment: fixed;background-position: center center;background-repeat:no-repeat;">'.$nextpostcon.'</div></a>';
				}else if($style=='style-4'){				
					$nextnav .= '<a href="'.esc_url(get_permalink( $next_post->ID )).'" class="post_nav_link next tp-nav-trans" rel="'.esc_attr__('next','theplus').'">';
						$nextnav .=$nextpostimg;
						$nextnav .='<div class="tp-post-nav-hover-arrow"></div>';
						$nextnav .=$nextpostcon;
					$nextnav .='</a>';
				}				
			}			
		}
		
		 $output = '<div class="tp-post-navigation tp-nav-trans tp-widget-'.esc_attr($uid_psnav).' tp-nav-'.$style.'">';
			$output .= '<div class="tp-post-nav tp-row">';
				$colclass='';
				if($style!='style-2'){
					$colclass = 'tp-col tp-col-md-6 tp-col-sm-6 tp-col-xs-12';
				}
				$output .= '<div class="post-prev '.esc_attr($colclass).'">';
					$output .= $prevnav;
				$output .= '</div>';
				$output .= '<div class="post-next '.esc_attr($colclass).'">';
					$output .= $nextnav;
				$output .= '</div>';
			$output .= '</div>';
		$output .= "</div>";
       
        echo $output;
	}
	
    protected function content_template() {
	
    }
}