<?php
if ( ! class_exists( 'glaza_widget_banner' ) ) :
	class glaza_widget_banner extends WP_Widget {

		function __construct() {
			$widget_ops = array(
				'classname'   => 'widget-banner',
				'description' => esc_attr__( 'Display a banner text with custom background.', 'glaza-core' )
			);
			parent::__construct( 'banner', esc_html__( '[Full Width/Content] Banner', 'glaza-core' ), $widget_ops );
			add_action( 'wp_enqueue_scripts', array( $this, 'dynamic_style' ), 20 );
		}

		function widget( $args, $instance ) {

			echo $args['before_widget'];

			$instance = wp_parse_args( $instance, array(
				'content'              => '',
				'btn_text'             => '',
				'btn_link'             => '',
				'new_tab'              => '1',
				'height'               => '200',
				'height_mobile'        => '150',
				'content_align'        => 'centered',
				'btn_bg_color'         => '',
				'btn_text_color'       => '',
				'btn_text_color_hover' => '',
				'btn_bg_color_hover'   => ''
			) );

			if ( empty( $instance['panels_info']['style']['background_image_attachment'] ) ) {
				return false;
			}

			$widget_class_name = $args['widget_id'];

			if ( ! empty( $instance['panels_info']['widget_id'] ) ) {
				$widget_class_name = str_replace( '-', '', $instance['panels_info']['widget_id'] );
				$widget_class_name = 'banner-outer b-' . substr( $widget_class_name, 0, 6 );
			}; ?>
			<div class="<?php echo esc_attr( $widget_class_name ); ?>">
				<?php if ( ! empty( $instance['btn_link'] )) : ?>
					<a href="<?php echo esc_url( $instance['btn_link'] ); ?>" class="bg-link" rel="nofollow" <?php if ( ! empty( $instance['new_tab'] )) { echo ' target="_blank"'; } ?>></a>
				<?php endif; ?>
				<div class="banner-text-holder">
					<div class="<?php echo 'banner-text-wrap is-' . esc_attr( $instance['content_align'] ); ?>">
						<div class="banner-text-inner">
							<?php if ( ! empty( $instance['content'] ) ) : ?>
								<div class="banner-text-content">
									<?php $content = wpautop( $instance['content'] );
									echo shortcode_unautop( $content );?>
								</div>
							<?php endif; ?>
							<?php if ( ! empty( $instance['btn_link'] ) && ! empty( $instance['btn_text'] ) ) : ?>
								<div class="banner-link-wrap btn-wrap">
									<a href="<?php echo esc_url( $instance['btn_link'] ); ?>" class="banner-link" rel="nofollow" <?php if ( ! empty( $instance['new_tab'] )) { echo ' target="_blank"'; } ?>><?php echo esc_html( $instance['btn_text'] ); ?></a>
								</div>
							<?php endif; ?>
						</div>
					</div>
				</div>
			</div>
			<?php echo $args['after_widget'];
		}

		function dynamic_style() {

			$dynamic_css       = '';
			$widget_class_name = '';
			$widget_options    = get_option( $this->option_name );

			if ( is_array( $widget_options ) ) {
				foreach ( $widget_options as $key => $instance ) {

					if ( ! is_array( $instance ) ) {
						continue;
					}

					if ( ! empty( $instance['panels_info']['widget_id'] ) ) {
						$widget_class_name = str_replace( '-', '', $instance['panels_info']['widget_id'] );
						$widget_class_name = '.b-' . substr( $widget_class_name, 0, 6 );
					} else {
						if ( ! empty( $this->id_base ) ) {
							$widget_class_name = '.' . $this->id_base . '-' . $key;
						}
					}

					if ( empty( $widget_class_name ) ) {
						return false;
					}

					if ( ! empty( $instance['height'] ) ) {
						$dynamic_css .= $widget_class_name . ' .banner-text-holder {';
						$dynamic_css .= 'height:' . absint( $instance['height'] ) . 'px;';
						$dynamic_css .= '}';
					}

					$dynamic_css .= $widget_class_name . ' .banner-link {';
					if ( ! empty( $instance['btn_bg_color'] ) ) {
						$dynamic_css .= 'background-color:' . wp_strip_all_tags( $instance['btn_bg_color'] ) . ';';
					}
					if ( ! empty( $instance['btn_text_color'] ) ) {
						$dynamic_css .= 'color:' . wp_strip_all_tags( $instance['btn_text_color'] ) . ';';
					}
					$dynamic_css .= '}';

					$dynamic_css .= $widget_class_name . ' .banner-link:hover {';
					if ( ! empty( $instance['btn_bg_color_hover'] ) ) {
						$dynamic_css .= 'background-color:' . wp_strip_all_tags( $instance['btn_bg_color_hover'] ) . ';';
					}
					if ( ! empty( $instance['btn_text_color_hover'] ) ) {
						$dynamic_css .= 'color:' . wp_strip_all_tags( $instance['btn_text_color_hover'] ) . ';';
					}
					$dynamic_css .= '}';

					if ( ! empty( $instance['height_mobile'] ) ) {
						$dynamic_css .= '@media only screen and (max-width: 767px) {';
						$dynamic_css .= $widget_class_name . ' .banner-text-holder {';
						$dynamic_css .= 'height:' . absint( $instance['height_mobile'] ) . 'px;';
						$dynamic_css .= '}';
						$dynamic_css .= '}';
					}

				}
			}

			if ( ! empty( $dynamic_css ) ) {
				wp_add_inline_style( 'glaza-core-style', $dynamic_css );
			}
		}

		function update( $new_instance, $old_instance ) {

			$instance = $old_instance;

			if ( current_user_can( 'unfiltered_html' ) ) {
				$instance['content'] = $new_instance['content'];
			} else {
				$instance['content'] = wp_filter_post_kses( $new_instance['content'] );
			}

			$instance['btn_text']             = esc_attr( $new_instance['btn_text'] );
			$instance['btn_link']             = esc_attr( $new_instance['btn_link'] );
			$instance['new_tab']              = esc_attr( $new_instance['new_tab'] );
			$instance['height']               = esc_attr( $new_instance['height'] );
			$instance['height_mobile']        = esc_attr( $new_instance['height_mobile'] );
			$instance['content_align']        = esc_attr( $new_instance['content_align'] );
			$instance['btn_bg_color']         = esc_attr( $new_instance['btn_bg_color'] );
			$instance['btn_text_color']       = esc_attr( $new_instance['btn_text_color'] );
			$instance['btn_bg_color_hover']   = esc_attr( $new_instance['btn_bg_color_hover'] );
			$instance['btn_text_color_hover'] = esc_attr( $new_instance['btn_text_color_hover'] );

			return $instance;
		}


		function form( $instance ) {

			wp_enqueue_style( 'wp-color-picker' );
			wp_enqueue_script( 'glaza-color-picker', GLAZA_CORE_URL . 'assets/color-picker.js', array( 'wp-color-picker' ), false, true );

			$defaults = array(
				'content'              => '',
				'custom_id'            => '',
				'btn_text'             => '',
				'btn_link'             => '',
				'new_tab'              => '1',
				'height'               => '200',
				'height_mobile'        => '150',
				'content_align'        => 'centered',
				'btn_bg_color'         => '',
				'btn_text_color'       => '',
				'btn_text_color_hover' => '',
				'btn_bg_color_hover'   => ''
			);

			$instance = wp_parse_args( (array) $instance, $defaults ); ?>
			<p><?php esc_html_e( 'To setup the background, please open to explain the design section at the right of this panel.', 'glaza' ) ?></p>
			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'content' ) ); ?>"><strong><?php esc_html_e( 'Banner Text (allow HTML/shortcode):', 'glaza-core' ); ?></strong></label>
				<textarea rows="10" cols="50" id="<?php echo esc_attr( $this->get_field_id( 'content' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'content' ) ); ?>" class="widefat"><?php echo esc_textarea( $instance['content'] ); ?></textarea>
			</p>
			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'btn_text' ) ); ?>"><strong><?php esc_html_e( 'Button Text:', 'glaza-core' ); ?></strong></label>
				<input class="widefat" type="text" id="<?php echo esc_attr( $this->get_field_id( 'btn_text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'btn_text' ) ); ?>" value="<?php echo esc_attr( $instance['btn_text'] ); ?>"/>
			</p>
			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'btn_link' ) ); ?>"><strong><?php esc_html_e( 'Button Link:', 'glaza-core' ); ?></strong></label>
				<input class="widefat" type="text" id="<?php echo esc_attr( $this->get_field_id( 'btn_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'btn_link' ) ); ?>" value="<?php echo esc_attr( $instance['btn_link'] ); ?>"/>
			</p>

			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'new_tab' ) ); ?>"><?php esc_attr_e( 'Open in new tab', 'glaza-core' ); ?></label>
				<input class="widefat" type="checkbox" id="<?php echo esc_attr( $this->get_field_id( 'new_tab' ) ); ?>" name="<?php echo esc_attr($this->get_field_name('new_tab')); ?>" value="true" <?php if (!empty($instance['new_tab'])) echo 'checked="checked"'; ?>  />
			</p>
			<h3 class="glaza-wh"><?php esc_html_e( 'Styling Options', 'glaza-core' ) ?></h3>
			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'height' ) ); ?>"><strong><?php esc_html_e( 'Banner Height:', 'glaza-core' ) ?></strong></label>
				<input type="text" class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'height' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'height' ) ); ?>" value="<?php if ( ! empty( $instance['height'] ) ) echo esc_attr( $instance['height'] ); ?>"/>
			</p>
			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'height_mobile' ) ); ?>"><strong><?php esc_html_e( 'Banner Height on Mobile:', 'glaza-core' ) ?></strong></label>
				<input type="text" class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'height_mobile' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'height_mobile' ) ); ?>" value="<?php if ( ! empty( $instance['height_mobile'] ) ) echo esc_attr( $instance['height_mobile'] ); ?>"/>
			</p>
			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'content_align' ) ); ?>"><strong><?php esc_html_e( 'Content Position:', 'glaza-core' ); ?></strong></label>
				<select class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'content_align' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'content_align' ) ); ?>">
					<option value="centered" <?php if ( ! empty( $instance['content_align'] ) && $instance['content_align'] == 'centered' ) echo "selected=\"selected\""; else echo ""; ?>><?php esc_html_e( 'Centered', 'glaza-core' ); ?></option>
					<option value="top" <?php if ( ! empty( $instance['content_align'] ) && $instance['content_align'] == 'top' ) echo "selected=\"selected\""; else echo ""; ?>><?php esc_html_e( 'Top', 'glaza-core' ); ?></option>
					<option value="bottom" <?php if ( ! empty( $instance['content_align'] ) && $instance['content_align'] == 'bottom' ) echo "selected=\"selected\""; else echo ""; ?>><?php esc_html_e( 'Bottom', 'glaza-core' ); ?></option>
				</select>
			</p>
			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'btn_bg_color' ) ); ?>"><?php esc_html_e( 'Button Background Color:', 'glaza-core' ) ?></label>
				<input type="text" class="widefat glaza-color-field" id="<?php echo esc_attr( $this->get_field_id( 'btn_bg_color' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'btn_bg_color' ) ); ?>" value="<?php echo esc_attr( $instance['btn_bg_color'] ); ?>"/>
			</p>
			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'btn_text_color' ) ); ?>"><?php esc_html_e( 'Button Text Color:', 'glaza-core' ) ?></label>
				<input type="text" class="widefat glaza-color-field" id="<?php echo esc_attr( $this->get_field_id( 'btn_text_color' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'btn_text_color' ) ); ?>" value="<?php echo esc_attr( $instance['btn_text_color'] ); ?>"/>
			</p>
			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'btn_bg_color_hover' ) ); ?>"><?php esc_html_e( 'Hover Background Color:', 'glaza-core' ) ?></label>
				<input type="text" class="widefat glaza-color-field" id="<?php echo esc_attr( $this->get_field_id( 'btn_bg_color_hover' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'btn_bg_color_hover' ) ); ?>" value="<?php echo esc_attr( $instance['btn_bg_color_hover'] ); ?>"/>
			</p>
			<p>
				<label for="<?php echo esc_attr( $this->get_field_id( 'btn_text_color_hover' ) ); ?>"><?php esc_html_e( 'Hover Text Color:', 'glaza-core' ) ?></label>
				<input type="text" class="widefat glaza-color-field" id="<?php echo esc_attr( $this->get_field_id( 'btn_text_color_hover' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'btn_text_color_hover' ) ); ?>" value="<?php echo esc_attr( $instance['btn_text_color_hover'] ); ?>"/>
			</p>
			
		<?php
		}
	}

endif;