<?php
/**
 * Widget API: Wpmedia_PopularPosts_Widget class
 *
 * Author: Gian MR - http://www.gianmr.com
 *
 * @package Wpmedia
 * @subpackage Widgets
 * @since 1.0.0
 */

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

/**
 * Add the RPSL widget.
 *
 * @since 1.0.0
 *
 * @see WP_Widget
 */
class Wpmedia_PopularPosts_Widget extends WP_Widget {
	/**
	 * Sets up a Popular Posts widget instance.
	 *
	 * @since 1.0.0
	 * @access public
	 */
	public function __construct() {
		$widget_ops = array(
			'classname'             => 'wpmedia-popular',
			'description'           => __( 'Popular Posts With Thumbnail.', 'wpmedia' ),
			'show_instance_in_rest' => true,
		);
		parent::__construct( 'wpmedia-popular', __( 'Popular Posts (Wpmedia)', 'wpmedia' ), $widget_ops );

		// Add action for admin_register_scripts.
		add_action( 'admin_enqueue_scripts', array( $this, 'admin_register_scripts' ) );
		add_action( 'admin_footer-widgets.php', array( $this, 'admin_print_scripts' ), 9999 );
	}

	/**
	 * Enqueue scripts.
	 *
	 * @since 1.0
	 *
	 * @param string $hook_suffix Hook Suffix.
	 */
	public function admin_register_scripts( $hook_suffix ) {
		if ( 'widgets.php' !== $hook_suffix ) {
			return;
		}

		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker' );
		wp_enqueue_media();

		wp_enqueue_script( 'wpmedia-widget-colorpicker-js', get_template_directory_uri() . '/js/admin/widget-colorpicker.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_script( 'wpmedia-widget-upload-image-js', get_template_directory_uri() . '/js/admin/widget-upload-image.js', array( 'jquery' ), '1.0.0', true );
	}

	/**
	 * Print scripts.
	 *
	 * @since 1.0
	 */
	public function admin_print_scripts() {
		?>

		<style>
			.idtheme-color-picker-widget {
				display: flex;
				flex-wrap: wrap;
				padding: 10px;
				border: 1px solid #8c8f94;;
				background-color: #ffffff;
				border-radius: 3px;
			}
			.idtheme-color-picker-widget .wp-color-result-text {
				display: none;
			}

			.idtheme-color-picker-widget .wp-picker-container {
				max-width: 160px;
			}
			.idtheme-color-picker-widget .title-color,
			.idtheme-color-picker-widget .idtheme-suboption {
				width: 100%;
			}
			.idtheme-suboption input[type=range] {
				-webkit-appearance: none;
				appearance: none;
				width: 100%;
				height: 5px;
				background: #d3d3d3;
				outline: none;
				-webkit-transition: .2s;
				transition: opacity .2s;
			}

			.idtheme-suboption input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none;
				appearance: none;
				width: 15px;
				height: 15px;
				background: #04AA6D;
				cursor: pointer;
			}

			.idtheme-suboption input[type=range]::-moz-range-thumb {
				width: 15px;
				height: 15px;
				background: #04AA6D;
				cursor: pointer;
			}
		</style>
		<?php
	}

	/**
	 * CSS helper function for get css every block
	 *
	 * @param string $style css render.
	 * @param string $id unique id for render style.
	 */
	public static function get_css( $style = '', $id = '' ) {
		if ( ! is_admin() ) {
			wp_register_style(
				$id,
				false,
				array( 'wpmedia-style' ),
				WPMEDIA_VERSION,
				false
			);
			wp_enqueue_style( $id );
			wp_add_inline_style( $id, $style );
		}
	}

	/**
	 * Outputs the content for Popular Posts.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @param array $args     Display arguments including 'before_title', 'after_title',
	 *                        'before_widget', and 'after_widget'.
	 * @param array $instance Settings for Popular Posts.
	 */
	public function widget( $args, $instance ) {

		global $post;

		// Title.
		$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
		// URL.
		$link_title = ( ! empty( $instance['link_title'] ) ) ? esc_url( $instance['link_title'] ) : '';
		// URL Image.
		$title_image = ( ! empty( $instance['title_image'] ) ) ? esc_url( $instance['title_image'] ) : '';
		// Base Id Widget.
		$wpm_widget_id = $this->id_base . '-' . $this->number;
		// Subtitle.
		$subtitle = ( ! empty( $instance['subtitle'] ) ) ? esc_html( $instance['subtitle'] ) : '';

		echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		if ( $title || $title_image ) {
			$titleimage_class = $title_image ? ' widget-titleimg' : '';
			echo '<div class="page-header widget-titlewrap' . esc_attr( $titleimage_class ) . '">';
			echo $args['before_title']; // phpcs:ignore
			if ( $title_image ) {
				if ( ! empty( $link_title ) ) {
					echo '<a href="' . esc_url( $link_title ) . '" title="' . esc_html__( 'View More', 'wpmedia' ) . '">';
				}
				echo '<span class="img-titlebg" style="background-image:url(\'' . esc_url( $title_image ) . '\');"></span>';
				if ( ! empty( $link_title ) ) {
					echo '</a>';
				}
			} else {
				echo wp_kses_post( $title );
			}
			echo $args['after_title']; // phpcs:ignore
			if ( ! empty( $link_title ) && empty( $title_image ) ) {
				echo '<div class="icon-linktitle">';
				echo '<a class="heading-text" href="' . esc_url( $link_title ) . '" title="' . esc_html__( 'View More', 'wpmedia' ) . '"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg></a>';
				echo '</div>';
			}
			echo '</div>';
			if ( $subtitle ) {
				echo '<div class="widget-subtitle">' . wp_kses_post( $subtitle ) . '</div>';
			}
		}
		/* Popular by date */
		$popular_date = ( isset( $instance['popular_date'] ) ) ? wp_strip_all_tags( $instance['popular_date'] ) : wp_strip_all_tags( 'alltime' );
		/* Order Popular by */
		$popular_by = ( isset( $instance['popular_by'] ) ) ? wp_strip_all_tags( $instance['popular_by'] ) : wp_strip_all_tags( 'bycomment' );
		// Category ID.
		$wpm_category_ids = ( ! empty( $instance['wpm_category_ids'] ) ) ? array_map( 'absint', $instance['wpm_category_ids'] ) : array( 0 );
		// Number Post.
		$wpm_number_posts = ( ! empty( $instance['wpm_number_posts'] ) ) ? absint( $instance['wpm_number_posts'] ) : absint( 6 );
		// Style.
		$wpm_style = ( ! empty( $instance['wpm_style'] ) ) ? wp_strip_all_tags( $instance['wpm_style'] ) : wp_strip_all_tags( 'style_1' );
		// Tag id.
		$wpm_idtag = ( ! empty( $instance['wpm_idtag'] ) ) ? array_map( 'absint', explode( ',', esc_attr( $instance['wpm_idtag'] ) ) ) : array( 0 );

		// Style.
		$bgcolor         = ! empty( $instance['bgcolor'] ) ? 'var(--widget-color1, ' . wp_strip_all_tags( $instance['bgcolor'] ) . ')' : '';
		$bgcolor2        = ! empty( $instance['bgcolor2'] ) ? 'var(--widget-color2, ' . wp_strip_all_tags( $instance['bgcolor2'] ) . ')' : '';
		$bgcolor_dir     = ! empty( $instance['bgcolor_dir'] ) ? absint( $instance['bgcolor_dir'] ) : '';
		$color_title     = ! empty( $instance['color_title'] ) ? wp_strip_all_tags( $instance['color_title'] ) : '';
		$color_beftitle  = ! empty( $instance['color_beftitle'] ) ? wp_strip_all_tags( $instance['color_beftitle'] ) : '';
		$color_desc      = ! empty( $instance['color_desc'] ) ? 'var(--widget-desc, ' . wp_strip_all_tags( $instance['color_desc'] ) . ')' : '';
		$color_link      = ! empty( $instance['color_link'] ) ? 'var(--widget-link, ' . wp_strip_all_tags( $instance['color_link'] ) . ')' : '';
		$color_linkhover = ! empty( $instance['color_linkhover'] ) ? 'var(--widget-linkhover, ' . wp_strip_all_tags( $instance['color_linkhover'] ) . ')' : '';
		$color_meta      = ! empty( $instance['color_meta'] ) ? 'var(--widget-meta, ' . wp_strip_all_tags( $instance['color_meta'] ) . ')' : '';

		$bgcol = '';
		if ( ! empty( $bgcolor ) && empty( $bgcolor2 ) ) {
			$bgcol = 'padding: 16px;background:' . esc_html( $bgcolor ) . ';';
		} elseif ( ! empty( $bgcolor2 ) && empty( $bgcolor ) ) {
			$bgcol = 'padding: 16px;background:' . esc_html( $bgcolor2 ) . ';';
		} elseif ( ! empty( $bgcolor ) && ! empty( $bgcolor2 ) ) {
			$dir   = ! empty( $bgcolor_dir ) ? absint( $bgcolor_dir ) . 'deg' : '90deg';
			$bgcol = 'padding: 16px;background:linear-gradient(' . $dir . ',' . esc_html( $bgcolor ) . ' 0%, ' . esc_html( $bgcolor2 ) . ' 100%);';
		} else {
			$bgcol = '';
		}
		$color_title     = ! empty( $color_title ) ? '--widget-title:' . esc_html( $color_title ) . ';' : '';
		$color_beftitle  = ! empty( $color_beftitle ) ? '--secondscheme-color:' . esc_html( $color_beftitle ) . ';' : '';
		$color_desc      = ! empty( $color_desc ) ? 'color:' . esc_html( $color_desc ) . ';' : '';
		$color_link      = ! empty( $color_link ) ? 'color:' . esc_html( $color_link ) . ';' : '';
		$color_linkhover = ! empty( $color_linkhover ) ? 'color:' . esc_html( $color_linkhover ) . ';' : '';
		$color_meta      = ! empty( $color_meta ) ? 'color:' . esc_html( $color_meta ) . ';' : '';

		$custom_css = '';

		if ( ! empty( $bgcol ) ) {
			$custom_css .= '#' . $wpm_widget_id . ' {';
			$custom_css .= $bgcol;
			$custom_css .= '}';
			$custom_css .= '#' . $wpm_widget_id . ' .big-thumb {';
			$custom_css .= 'margin: 0 -16px;border-radius: 0 !important;';
			$custom_css .= '}';
		}
		if ( ! empty( $color_title ) ) {
			$custom_css .= '#' . $wpm_widget_id . ' {';
			$custom_css .= $color_title;
			$custom_css .= '}';
		}
		if ( ! empty( $color_beftitle ) ) {
			$custom_css .= '#' . $wpm_widget_id . ' {';
			$custom_css .= $color_beftitle;
			$custom_css .= '}';
		}
		if ( ! empty( $color_desc ) ) {
			$custom_css .= '#' . $wpm_widget_id . ' .widget-subtitle {';
			$custom_css .= $color_desc;
			$custom_css .= '}';
		}
		if ( ! empty( $color_link ) ) {
			$custom_css .= '#' . $wpm_widget_id . ' a {';
			$custom_css .= $color_link;
			$custom_css .= '}';
		}
		if ( ! empty( $color_linkhover ) ) {
			$custom_css .= '#' . $wpm_widget_id . ' a:hover {';
			$custom_css .= $color_linkhover;
			$custom_css .= '}';
		}
		if ( ! empty( $color_meta ) ) {
			$custom_css .= '#' . $wpm_widget_id . ' .meta-content {';
			$custom_css .= $color_meta;
			$custom_css .= '}';
		}

		if ( isset( $wpm_widget_id ) && ! empty( $wpm_widget_id ) && ( ! empty( $bgcol ) || ! empty( $color_title ) || ! empty( $color_beftitle ) || ! empty( $color_desc ) || ! empty( $color_link ) || ! empty( $color_linkhover ) || ! empty( $color_meta ) ) ) {
			if ( ! wp_style_is( $wpm_widget_id, 'enqueued' ) ) {
				$this->get_css( $custom_css, $wpm_widget_id );
			}
		}

		// if 'all categories' was selected ignore other selections of categories.
		if ( in_array( 0, $wpm_category_ids, true ) ) {
			$wpm_category_ids = array( 0 );
		}

		// if 'all tags' was selected ignore other selections of categories.
		if ( in_array( 0, $wpm_idtag, true ) ) {
			$wpm_idtag = array( 0 );
		}

		// standard params.
		$query_args = array(
			'posts_per_page'         => $wpm_number_posts,
			'post_status'            => 'publish',
			// make it fast withour update term cache and cache results.
			// https://thomasgriffin.io/optimize-worspless-queries/.
			'update_post_term_cache' => false,
			'update_post_meta_cache' => false,
			'cache_results'          => false,
			'no_found_rows'          => true,
			'fields'                 => 'ids',
		);

		$query_args['ignore_sticky_posts'] = true;

		// set order of posts in widget.
		if ( 'byview' === $popular_by ) {
			if ( class_exists( 'WP_Widget_PostViews' ) ) {
				$query_args['orderby']  = 'meta_value_num';
				$query_args['meta_key'] = 'views'; // phpcs:ignore
				$query_args['order']    = 'DESC';
			} elseif ( class_exists( 'Post_Views_Counter' ) ) {
				$query_args['suppress_filters'] = false;
				$query_args['orderby']          = 'post_views';
				$query_args['fields']           = '';
			} else {
				$query_args['orderby'] = 'comment_count';
				$query_args['order']   = 'DESC';
			}
		} else {
			$query_args['orderby'] = 'comment_count';
			$query_args['order']   = 'DESC';
		}

		if ( 'weekly' === $popular_date ) {
			/* Get posts last week */
			$query_args['date_query'] = array(
				array(
					'after' => '1 week ago',
				),
			);
		} elseif ( 'mountly' === $popular_date ) {
			/* Get posts last mount */
			$query_args['date_query'] = array(
				array(
					'after' => '1 month ago',
				),
			);
		} elseif ( 'secondmountly' === $popular_date ) {
			/* Get posts last mount */
			$query_args['date_query'] = array(
				array(
					'after' => '2 months ago',
				),
			);
		} elseif ( 'yearly' === $popular_date ) {
			/* Get posts last mount */
			$query_args['date_query'] = array(
				array(
					'after' => '1 year ago',
				),
			);
		}

		// add categories param only if 'all categories' was not selected.
		if ( ! in_array( 0, $wpm_category_ids, true ) ) {
			$query_args['category__in'] = $wpm_category_ids;
		}

		// Add tag option.
		if ( ! in_array( 0, $wpm_idtag, true ) ) {
			$query_args['tag__in'] = $wpm_idtag;
		}

		// run the query: get the latest posts.
		$rp = new WP_Query( apply_filters( 'wpm_rp_widget_posts_args', $query_args ) );
		if ( $rp->have_posts() ) {
			if ( 'style_5' === $wpm_style || 'style_6' === $wpm_style || 'style_7' === $wpm_style ) {
				?>
				<ul class="wpmedia-rp-widget">
					<?php
					$count = 0;
					while ( $rp->have_posts() ) :
						$rp->the_post();
						$count++;
						$number = '0';
						$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>';
						$postid = get_the_ID();
						if ( 'byview' === $popular_by ) {
							if ( class_exists( 'WP_Widget_PostViews' ) ) {
								if ( function_exists( 'the_views' ) ) {
									$post_views = get_post_meta( absint( $postid ), 'views', true );
									if ( ! empty( $post_views ) ) {
										$number = $post_views;
										$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"/></svg>';
									} else {
										$number = '0';
										$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"/></svg>';
									}
								}
							} elseif ( class_exists( 'Post_Views_Counter' ) ) {
								$number = pvc_get_post_views( absint( $postid ) );
								$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"/></svg>';
							} else {
								$number = get_comments_number();
								$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>';
							}
						} else {
							$number = get_comments_number();
							$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>';
						}
						if ( $count <= 1 ) {
							?>
							<li class="clearfix">
								<?php
								if ( has_post_thumbnail() ) {
									?>
									<a class="post-thumbnail big-thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
										<?php
											the_post_thumbnail(
												'medium_large',
												array(
													'alt' => the_title_attribute(
														array(
															'echo' => false,
														)
													),
												)
											);
											wpmedia_postformat_thumbnails();

											echo '<div class="inner-thumbnail">';
										if ( 'style_7' === $wpm_style ) {
											echo '<div class="rp-number heading-text">' . absint( $count ) . '</div>';
										}
											echo '<div class="recent-content">';
											the_title( '<span class="recent-title heading-text">', '</span>' );
											echo '<div class="meta-content meta-content-flex">';
											wpmedia_posted_on();
											echo '<span class="count-text">' . $icon . ' <span class="in-count-text">' . absint( $number ) . '</span></span>'; // phpcs:ignore
											echo '</div>';
											echo '</div>';
											echo '</div>';
										?>
									</a>
									<?php
								}
								?>
							</li>
							<?php
						} else {
							?>
							<li class="clearfix">
								<?php
								if ( 'style_6' !== $wpm_style && 'style_7' !== $wpm_style ) {
									if ( has_post_thumbnail() ) {
										?>
										<a class="post-thumbnail small-thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
											<?php
												the_post_thumbnail(
													'thumbnail',
													array(
														'alt' => the_title_attribute(
															array(
																'echo' => false,
															)
														),
													)
												);
												wpmedia_postformat_thumbnails();
											?>
										</a>
										<?php
									}
								}
								if ( 'style_7' === $wpm_style ) {
									echo '<div class="rp-number heading-text">' . absint( $count ) . '</div>';
								}
									echo '<div class="recent-content">';
									the_title( '<a class="recent-title heading-text" href="' . esc_url( get_permalink() ) . '" title="' . the_title_attribute( array( 'echo' => false ) ) . '" rel="bookmark">', '</a>' );
									echo '<div class="meta-content meta-content-flex">';
									wpmedia_posted_on();
									echo '<span class="count-text">' . $icon . ' <span class="in-count-text">' . absint( $number ) . '</span></span>'; // phpcs:ignore
									echo '</div>';
									echo '</div>';
								?>
							</li>
							<?php
						}
					endwhile;
					wp_reset_postdata();
					?>
				</ul>
				<?php
			} else {
				?>
				<ul class="<?php echo ( 'style_2' === $wpm_style || 'style_4' === $wpm_style ) ? 'wpmedia-list-widget' : 'wpmedia-rp-widget'; ?>">
					<?php
					$count = 0;
					while ( $rp->have_posts() ) :
						$rp->the_post();
						$count++;
						$number = '0';
						$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>';
						$postid = get_the_ID();
						if ( 'byview' === $popular_by ) {
							if ( class_exists( 'WP_Widget_PostViews' ) ) {
								if ( function_exists( 'the_views' ) ) {
									$post_views = get_post_meta( absint( $postid ), 'views', true );
									if ( ! empty( $post_views ) ) {
										$number = $post_views;
										$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"/></svg>';
									} else {
										$number = '0';
										$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"/></svg>';
									}
								}
							} elseif ( class_exists( 'Post_Views_Counter' ) ) {
								$number = pvc_get_post_views( absint( $postid ) );
								$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"/></svg>';
							} else {
								$number = get_comments_number();
								$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>';
							}
						} else {
							$number = get_comments_number();
							$icon   = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>';
						}
						?>
						<li class="clearfix">
							<?php
							if ( 'style_2' !== $wpm_style && 'style_4' !== $wpm_style ) {
								$classes   = 'small-thumb';
								$thumbsize = 'thumbnail';
								if ( 'style_3' === $wpm_style ) {
									$classes   = 'big-thumb';
									$thumbsize = 'medium_large';
								}
								if ( has_post_thumbnail() ) {
									?>
									<a class="post-thumbnail <?php echo esc_html( $classes ); ?>" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
										<?php
											the_post_thumbnail(
												esc_html( $thumbsize ),
												array(
													'alt' => the_title_attribute(
														array(
															'echo' => false,
														)
													),
												)
											);
											wpmedia_postformat_thumbnails();
										if ( 'style_3' === $wpm_style ) {
											echo '<div class="inner-thumbnail">';
											echo '<div class="recent-content">';
											the_title( '<span class="recent-title heading-text">', '</span>' );
											echo '<div class="meta-content meta-content-flex">';
											wpmedia_posted_on();
											echo '<span class="count-text">' . $icon . ' <span class="in-count-text">' . absint( $number ) . '</span></span>'; // phpcs:ignore
											echo '</div>';
											echo '</div>';
											echo '</div>';
										}
										?>
									</a>
									<?php
								}
							}
							if ( 'style_3' !== $wpm_style ) {
								if ( 'style_4' === $wpm_style ) {
									echo '<div class="rp-number heading-text">' . absint( $count ) . '</div>';
								}
								echo '<div class="recent-content">';
								the_title( '<a class="recent-title heading-text" href="' . esc_url( get_permalink() ) . '" title="' . the_title_attribute( array( 'echo' => false ) ) . '" rel="bookmark">', '</a>' );
								echo '<div class="meta-content meta-content-flex">';
								wpmedia_posted_on();
								echo '<span class="count-text">' . $icon . ' <span class="in-count-text">' . absint( $number ) . '</span></span>'; // phpcs:ignore
								echo '</div>';
								echo '</div>';
							}
							?>
						</li>
						<?php

					endwhile;
					wp_reset_postdata();
					?>
				</ul>
				<?php
			}
		}
		echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	}

	/**
	 * Handles updating settings for the current Mailchimp widget instance.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @param array $new_instance New settings for this instance as input by the user via
	 *                            Wpmedia_Mailchimp_form::form().
	 * @param array $old_instance Old settings for this instance.
	 * @return array Updated settings to save.
	 */
	public function update( $new_instance, $old_instance ) {
		$instance = $old_instance;

		$new_instance = wp_parse_args(
			(array) $new_instance,
			array(
				'title'            => '',
				'link_title'       => '',
				'title_image'      => '',
				'subtitle'         => '',
				'popular_date'     => 'alltime',
				'popular_by'       => 'bycomment',
				'wpm_category_ids' => array( 0 ),
				'wpm_number_posts' => 6,
				'wpm_style'        => 'style_1',
				'wpm_idtag'        => '',
				'bgcolor'          => '',
				'bgcolor2'         => '',
				'bgcolor_dir'      => '',
				'color_title'      => '',
				'color_beftitle'   => '',
				'color_desc'       => '',
				'color_link'       => '',
				'color_linkhover'  => '',
				'color_meta'       => '',
			)
		);

		// Title.
		$instance['title'] = sanitize_text_field( $new_instance['title'] );
		// Link Title.
		$instance['link_title'] = esc_url_raw( $new_instance['link_title'] );
		// Title Image.
		$instance['title_image'] = esc_url_raw( $new_instance['title_image'] );
		// SubTitle.
		$instance['subtitle'] = sanitize_text_field( $new_instance['subtitle'] );
		/* Popular range */
		$instance['popular_date'] = wp_strip_all_tags( $new_instance['popular_date'] );
		/* Popular by */
		$instance['popular_by'] = wp_strip_all_tags( $new_instance['popular_by'] );
		// Category IDs.
		$instance['wpm_category_ids'] = array_map( 'absint', $new_instance['wpm_category_ids'] );
		// Number posts.
		$instance['wpm_number_posts'] = absint( $new_instance['wpm_number_posts'] );
		// Style.
		$instance['wpm_style'] = wp_strip_all_tags( $new_instance['wpm_style'] );
		// tag id.
		$instance['wpm_idtag'] = wp_strip_all_tags( $new_instance['wpm_idtag'] );

		// Style.
		$instance['bgcolor']         = wp_strip_all_tags( $new_instance['bgcolor'] );
		$instance['bgcolor2']        = wp_strip_all_tags( $new_instance['bgcolor2'] );
		$instance['bgcolor_dir']     = absint( $new_instance['bgcolor_dir'] );
		$instance['color_title']     = wp_strip_all_tags( $new_instance['color_title'] );
		$instance['color_beftitle']  = wp_strip_all_tags( $new_instance['color_beftitle'] );
		$instance['color_desc']      = wp_strip_all_tags( $new_instance['color_desc'] );
		$instance['color_link']      = wp_strip_all_tags( $new_instance['color_link'] );
		$instance['color_linkhover'] = wp_strip_all_tags( $new_instance['color_linkhover'] );
		$instance['color_meta']      = wp_strip_all_tags( $new_instance['color_meta'] );

		return $instance;
	}

	/**
	 * Outputs the settings form for the Mailchimp widget.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @param array $instance Current settings.
	 */
	public function form( $instance ) {
		$instance = wp_parse_args(
			(array) $instance,
			array(
				'title'            => __( 'Popular Posts', 'wpmedia' ),
				'link_title'       => '',
				'title_image'      => '',
				'subtitle'         => '',
				'popular_date'     => 'alltime',
				'popular_by'       => 'bycomment',
				'wpm_category_ids' => array( 0 ),
				'wpm_number_posts' => 6,
				'wpm_style'        => 'style_1',
				'wpm_idtag'        => '',
				'bgcolor'          => '',
				'bgcolor2'         => '',
				'bgcolor_dir'      => '',
				'color_title'      => '',
				'color_beftitle'   => '',
				'color_desc'       => '',
				'color_link'       => '',
				'color_linkhover'  => '',
				'color_meta'       => '',
			)
		);
		// Title.
		$title = sanitize_text_field( $instance['title'] );
		// Link Title.
		$link_title = esc_url( $instance['link_title'] );
		// Title Image.
		$title_image = esc_url( $instance['title_image'] );
		// SubTitle.
		$subtitle = sanitize_text_field( $instance['subtitle'] );
		/* Popular range */
		$popular_date = wp_strip_all_tags( $instance['popular_date'] );
		/* Popular by */
		$popular_by = wp_strip_all_tags( $instance['popular_by'] );
		// Category ID.
		$wpm_category_ids = array_map( 'absint', $instance['wpm_category_ids'] );
		// Number posts.
		$wpm_number_posts = absint( $instance['wpm_number_posts'] );
		// Style.
		$wpm_style = wp_strip_all_tags( $instance['wpm_style'] );
		// tag id.
		$wpm_idtag = wp_strip_all_tags( $instance['wpm_idtag'] );

		// Style.
		$bgcolor         = wp_strip_all_tags( $instance['bgcolor'] );
		$bgcolor2        = wp_strip_all_tags( $instance['bgcolor2'] );
		$bgcolor_dir     = absint( $instance['bgcolor_dir'] );
		$color_title     = wp_strip_all_tags( $instance['color_title'] );
		$color_beftitle  = wp_strip_all_tags( $instance['color_beftitle'] );
		$color_desc      = wp_strip_all_tags( $instance['color_desc'] );
		$color_link      = wp_strip_all_tags( $instance['color_link'] );
		$color_linkhover = wp_strip_all_tags( $instance['color_linkhover'] );
		$color_meta      = wp_strip_all_tags( $instance['color_meta'] );

		// get categories.
		$categories     = get_categories(
			array(
				'hide_empty'   => 0,
				'hierarchical' => 1,
			)
		);
		$number_of_cats = count( $categories );

		// get size (number of rows to display) of selection box: not more than 10.
		$number_of_rows = ( 10 > $number_of_cats ) ? $number_of_cats + 1 : 10;

		// if 'all categories' was selected ignore other selections of categories.
		if ( in_array( 0, $wpm_category_ids, true ) ) {
			$wpm_category_ids = array( 0 );
		}

		// start selection box.
		$selection_category  = sprintf(
			'<select name="%s[]" id="%s" class="cat-select widefat" multiple size="%d">',
			$this->get_field_name( 'wpm_category_ids' ),
			$this->get_field_id( 'wpm_category_ids' ),
			$number_of_rows
		);
		$selection_category .= "\n";

		// make selection box entries.
		$cat_list = array();
		if ( 0 < $number_of_cats ) {

			// make a hierarchical list of categories.
			while ( $categories ) {
				// go on with the first element in the categories list:.
				// if there is no parent.
				if ( 0 === $categories[0]->parent ) {
					// get and remove it from the categories list.
					$current_entry = array_shift( $categories );
					// append the current entry to the new list.
					$cat_list[] = array(
						'id'    => absint( $current_entry->term_id ),
						'name'  => esc_html( $current_entry->name ),
						'depth' => 0,
					);
					// go on looping.
					continue;
				}
				// if there is a parent:
				// try to find parent in new list and get its array index.
				$parent_index = $this->get_cat_parent_index( $cat_list, $categories[0]->parent );
				// if parent is not yet in the new list: try to find the parent later in the loop.
				if ( false === $parent_index ) {
					// get and remove current entry from the categories list.
					$current_entry = array_shift( $categories );
					// append it at the end of the categories list.
					$categories[] = $current_entry;
					// go on looping.
					continue;
				}
				// if there is a parent and parent is in new list:
				// set depth of current item: +1 of parent's depth.
				$depth = $cat_list[ $parent_index ]['depth'] + 1;
				// set new index as next to parent index.
				$new_index = $parent_index + 1;
				// find the correct index where to insert the current item.
				foreach ( $cat_list as $entry ) {
					// if there are items with same or higher depth than current item.
					if ( $depth <= $entry['depth'] ) {
						// increase new index.
						$new_index++;
						// go on looping in foreach().
						continue;
					}
					// if the correct index is found:
					// get current entry and remove it from the categories list.
					$current_entry = array_shift( $categories );
					// insert current item into the new list at correct index.
					$end_array  = array_splice( $cat_list, $new_index ); // $cat_list is changed, too.
					$cat_list[] = array(
						'id'    => absint( $current_entry->term_id ),
						'name'  => esc_html( $current_entry->name ),
						'depth' => $depth,
					);
					$cat_list   = array_merge( $cat_list, $end_array );
					// quit foreach(), go on while-looping.
					break;
				}
			}

			// make HTML of selection box.
			$selected            = ( in_array( 0, $wpm_category_ids, true ) ) ? ' selected="selected"' : '';
			$selection_category .= "\t";
			$selection_category .= '<option value="0"' . $selected . '>' . __( 'All Categories', 'wpmedia' ) . '</option>';
			$selection_category .= "\n";

			foreach ( $cat_list as $category ) {
				$cat_name            = apply_filters( 'wpm_list_cats', $category['name'], $category );
				$pad                 = ( 0 < $category['depth'] ) ? str_repeat( '&ndash;&nbsp;', $category['depth'] ) : '';
				$selection_category .= "\t";
				$selection_category .= '<option value="' . $category['id'] . '"';
				$selection_category .= ( in_array( $category['id'], $wpm_category_ids, true ) ) ? ' selected="selected"' : '';
				$selection_category .= '>' . $pad . $cat_name . '</option>';
				$selection_category .= "\n";
			}
		}

		// close selection box.
		$selection_category .= "</select>\n";

		?>

		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'title' ) ); ?>"><?php esc_html_e( 'Title:', 'wpmedia' ); ?></label>
			<input class="widefat" id="<?php echo esc_html( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'link_title' ) ); ?>"><?php esc_html_e( 'Link Title:', 'wpmedia' ); ?></label>
			<input class="widefat" id="<?php echo esc_html( $this->get_field_id( 'link_title' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'link_title' ) ); ?>" type="url" value="<?php echo esc_attr( $link_title ); ?>" />
			<br />
			<small><?php esc_html_e( 'Target url for title (example: https://www.domain.com/target), leave blank if you want using title without link.', 'wpmedia' ); ?></small>
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'title_image' ) ); ?>">
				<?php esc_html_e( 'Title Image:', 'wpmedia' ); ?>
			</label><br />
			<span id="<?php echo esc_attr( $this->get_field_id( 'title_image' ) ); ?>-preview">
			<?php if ( ! empty( $title_image ) ) : ?>
				<img src="<?php echo esc_attr( $title_image ); ?>" alt="" style="max-width:200px; height:auto; margin: 0px 0px 5px; display: block;">
			<?php endif; ?>
			</span>
			<input type="text" id="<?php echo esc_attr( $this->get_field_id( 'title_image' ) ); ?>" class="widefat" name="<?php echo esc_attr( $this->get_field_name( 'title_image' ) ); ?>" value="<?php echo esc_attr( $title_image ); ?>" />
			<br />
			<small>
				<?php esc_html_e( 'This options, will replace your title widget with image. Please using image size: height: 32px and maximal width: 300px', 'wpmedia' ); ?>
			</small><br />
			<span>
				<input type="button" value="<?php echo esc_html_e( 'Remove Image', 'wpmedia' ); ?>" class="button idt-media-remove" id="<?php echo esc_attr( $this->get_field_id( 'title_image' ) ); ?>-remove" <?php echo ( '' !== $title_image ) ? '' : 'style="display:none;"'; ?> />
				<input type="button" value="<?php echo esc_html_e( 'Select Image', 'wpmedia' ); ?>" class="button idt-media-upload button-primary" id="<?php echo esc_attr( $this->get_field_id( 'title_image' ) ); ?>-button" />
			</span>
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'subtitle' ) ); ?>"><?php esc_html_e( 'Description Title:', 'wpmedia' ); ?></label>
			<textarea class="widefat" rows="3" id="<?php echo esc_html( $this->get_field_id( 'subtitle' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'subtitle' ) ); ?>"><?php echo esc_textarea( $instance['subtitle'] ); ?></textarea>
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'popular_date' ) ); ?>"><?php esc_html_e( 'Popular range:', 'wpmedia' ); ?></label>
			<select class="widefat" id="<?php echo esc_html( $this->get_field_id( 'popular_date', 'wpmedia' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'popular_date' ) ); ?>">
				<option value="alltime" <?php selected( $instance['popular_date'], 'alltime' ); ?>><?php esc_html_e( 'Alltime', 'wpmedia' ); ?></option>
				<option value="yearly" <?php selected( $instance['popular_date'], 'yearly' ); ?>><?php esc_html_e( '1 Year', 'wpmedia' ); ?></option>
				<option value="secondmountly" <?php selected( $instance['popular_date'], 'secondmountly' ); ?>><?php esc_html_e( '2 Mounts', 'wpmedia' ); ?></option>
				<option value="mountly" <?php selected( $instance['popular_date'], 'mountly' ); ?>><?php esc_html_e( '1 Mount', 'wpmedia' ); ?></option>
				<option value="weekly" <?php selected( $instance['popular_date'], 'weekly' ); ?>><?php esc_html_e( '7 Days', 'wpmedia' ); ?></option>
			</select>
			<br/>
			<small><?php esc_html_e( 'Select popular range time.', 'wpmedia' ); ?></small>
		</p>
		<?php if ( class_exists( 'WP_Widget_PostViews' ) || class_exists( 'Post_Views_Counter' ) ) { ?>
			<p>
				<label for="<?php echo esc_html( $this->get_field_id( 'popular_by' ) ); ?>"><?php esc_html_e( 'Popular By:', 'wpmedia' ); ?></label>
				<select class="widefat" id="<?php echo esc_html( $this->get_field_id( 'popular_by', 'wpmedia' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'popular_by' ) ); ?>">
					<option value="bycomment" <?php selected( $instance['popular_by'], 'bycomment' ); ?>><?php esc_html_e( 'Popular By Comments', 'wpmedia' ); ?></option>
					<option value="byview" <?php selected( $instance['popular_by'], 'byview' ); ?>><?php esc_html_e( 'Popular By Views', 'wpmedia' ); ?></option>
				</select>
				<br/>
				<small><?php esc_html_e( 'Filter Post Popular By Views Or Comments.', 'wpmedia' ); ?></small>
			</p>
		<?php } else { ?>
			<p>
				<label for="<?php echo esc_html( $this->get_field_id( 'popular_by' ) ); ?>"><?php esc_html_e( 'Popular By Comments', 'wpmedia' ); ?></label>
				<small><?php esc_html_e( 'If you want display popular by views, you can try install plugin wp-postviews or plugin post-views-counter', 'wpmedia' ); ?></small>
			</p>
		<?php } ?>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'wpm_category_ids' ) ); ?>"><?php esc_html_e( 'Selected categories', 'wpmedia' ); ?></label>
			<?php echo $selection_category; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
			<br />
			<small><?php esc_html_e( 'Click on the categories with pressed CTRL key to select multiple categories. If All Categories was selected then other selections will be ignored.', 'wpmedia' ); ?></small>
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'wpm_number_posts' ) ); ?>"><?php esc_html_e( 'Number post', 'wpmedia' ); ?></label>
			<input class="widefat" id="<?php echo esc_html( $this->get_field_id( 'wpm_number_posts' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'wpm_number_posts' ) ); ?>" type="number" value="<?php echo esc_attr( $wpm_number_posts ); ?>" />
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'wpm_style' ) ); ?>"><?php esc_html_e( 'Style', 'wpmedia' ); ?></label>
			<select class="widefat" id="<?php echo esc_html( $this->get_field_id( 'wpm_style', 'wpmedia' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'wpm_style' ) ); ?>">
				<option value="style_1" <?php echo selected( $instance['wpm_style'], 'style_1', false ); ?>><?php esc_html_e( 'Default Style', 'wpmedia' ); ?></option>
				<option value="style_2" <?php echo selected( $instance['wpm_style'], 'style_2', false ); ?>><?php esc_html_e( 'Just Title Style', 'wpmedia' ); ?></option>
				<option value="style_3" <?php echo selected( $instance['wpm_style'], 'style_3', false ); ?>><?php esc_html_e( 'All Big Thumbnail Style', 'wpmedia' ); ?></option>
				<option value="style_4" <?php echo selected( $instance['wpm_style'], 'style_4', false ); ?>><?php esc_html_e( 'Number With Title Style', 'wpmedia' ); ?></option>
				<option value="style_5" <?php echo selected( $instance['wpm_style'], 'style_5', false ); ?>><?php esc_html_e( 'Default With 1 Big Thumbnail', 'wpmedia' ); ?></option>
				<option value="style_6" <?php echo selected( $instance['wpm_style'], 'style_6', false ); ?>><?php esc_html_e( 'Just Title With 1 Big Thumbnail', 'wpmedia' ); ?></option>
				<option value="style_7" <?php echo selected( $instance['wpm_style'], 'style_7', false ); ?>><?php esc_html_e( 'Number With Title With 1 Big Thumbnail', 'wpmedia' ); ?></option>
			</select>
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'wpm_idtag' ) ); ?>"><?php esc_html_e( 'Tag:', 'wpmedia' ); ?></label>
			<input class="widefat" id="<?php echo esc_html( $this->get_field_id( 'wpm_idtag' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'wpm_idtag' ) ); ?>" type="text" value="<?php echo esc_attr( $wpm_idtag ); ?>" />
			<br />
			<small><?php esc_html_e( 'ID Tag, separate by commas(,). Example: 1,2,3,4. Leave blank if you want display by category without tag filter', 'wpmedia' ); ?></small>
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'bgcolor' ) ); ?>"><?php esc_html_e( 'Background Gradient', 'wpmedia' ); ?></label><br />
			<span class="idtheme-color-picker-widget">
				<label for="<?php echo esc_html( $this->get_field_id( 'bgcolor' ) ); ?>" class="title-color"><?php esc_html_e( 'From To', 'wpmedia' ); ?></label><br />
				<input class="widefat color-picker" id="<?php echo esc_html( $this->get_field_id( 'bgcolor' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'bgcolor' ) ); ?>" type="text" value="<?php echo esc_attr( $bgcolor ); ?>" data-default-color="" />
				<input class="widefat color-picker" id="<?php echo esc_html( $this->get_field_id( 'bgcolor2' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'bgcolor2' ) ); ?>" type="text" value="<?php echo esc_attr( $bgcolor2 ); ?>" data-default-color="" />
				<span class="idtheme-suboption">
					<label for="<?php echo esc_html( $this->get_field_id( 'bgcolor' ) ); ?>" class="title-color"><?php esc_html_e( 'Direction', 'wpmedia' ); ?></label><br />
					<input type="range" min="1" max="360" step="1" class="idtcoldirection"  id="<?php echo esc_html( $this->get_field_id( 'bgcolor_dir' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'bgcolor_dir' ) ); ?>" value="<?php echo absint( $bgcolor_dir ); ?>" />
				</span>
			</span>
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'color_title' ) ); ?>"><?php esc_html_e( 'Title Color', 'wpmedia' ); ?></label><br />
			<input class="widefat color-picker" id="<?php echo esc_html( $this->get_field_id( 'color_title' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'color_title' ) ); ?>" type="text" value="<?php echo esc_attr( $color_title ); ?>" data-default-color="" />
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'color_beftitle' ) ); ?>"><?php esc_html_e( 'Before Title Color', 'wpmedia' ); ?></label><br />
			<input class="widefat color-picker" id="<?php echo esc_html( $this->get_field_id( 'color_beftitle' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'color_beftitle' ) ); ?>" type="text" value="<?php echo esc_attr( $color_beftitle ); ?>" data-default-color="" />
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'color_desc' ) ); ?>"><?php esc_html_e( 'Subtitle Color', 'wpmedia' ); ?></label><br />
			<input class="widefat color-picker" id="<?php echo esc_html( $this->get_field_id( 'color_desc' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'color_desc' ) ); ?>" type="text" value="<?php echo esc_attr( $color_desc ); ?>" data-default-color="" />
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'color_link' ) ); ?>"><?php esc_html_e( 'Link Color', 'wpmedia' ); ?></label><br />
			<input class="widefat color-picker" id="<?php echo esc_html( $this->get_field_id( 'color_link' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'color_link' ) ); ?>" type="text" value="<?php echo esc_attr( $color_link ); ?>" data-default-color="" />
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'color_linkhover' ) ); ?>"><?php esc_html_e( 'Link Hover Color', 'wpmedia' ); ?></label><br />
			<input class="widefat color-picker" id="<?php echo esc_html( $this->get_field_id( 'color_linkhover' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'color_linkhover' ) ); ?>" type="text" value="<?php echo esc_attr( $color_linkhover ); ?>" data-default-color="" />
		</p>
		<p>
			<label for="<?php echo esc_html( $this->get_field_id( 'color_meta' ) ); ?>"><?php esc_html_e( 'Meta Color', 'wpmedia' ); ?></label><br />
			<input class="widefat color-picker" id="<?php echo esc_html( $this->get_field_id( 'color_meta' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'color_meta' ) ); ?>" type="text" value="<?php echo esc_attr( $color_meta ); ?>" data-default-color="" />
		</p>
		<?php
	}

	/**
	 * Return the array index of a given ID
	 *
	 * @param Array  $arr Arr.
	 * @param Number $id Post ID.
	 *
	 * @since 1.0.0
	 * @access private
	 */
	private function get_cat_parent_index( $arr, $id ) {
		$len = count( $arr );
		if ( 0 === $len ) {
			return false;
		}
		$id = absint( $id );
		for ( $i = 0; $i < $len; $i++ ) {
			if ( $id === $arr[ $i ]['id'] ) {
				return $i;
			}
		}
		return false;
	}

}

add_action(
	'widgets_init',
	function() {
		register_widget( 'Wpmedia_PopularPosts_Widget' );
	}
);
