<?php
/**
 * Plugin Name: Custom Image List Widget
 */

class rilee_custom_image_list_widget extends WP_Widget {

	/**
	 * Widget setup.
	 */
	function __construct() {

		// Widget settings.
		$widget_ops = array( 'classname' => 'rilee_custom_image_list_widget', 'description' => esc_html__('Display a custom list of images.', 'rilee') );

		// Widget control settings. 
		$control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'rilee_custom_image_list_widget' );

		//Create the Widget 
		parent::__construct( 'rilee_custom_image_list_widget', esc_html__('Rilee: Custom Image List', 'rilee'), $widget_ops, $control_ops);
	}

	/**
	 * How to display the widget on the screen.
	 */
	function widget( $args, $instance ) {
		extract( $args );

		/* Before widget (defined by themes). */
		echo wp_kses_post($before_widget); ?>

			<div class="rilee-custom-image-list-widget">

				<?php 

				$i = 1;

				$item_title = 'item_title_' . ($i); 
				$item_link = 'item_link_' . ($i);
				$item_image = 'image_' . ($i);
				$alt_desc = isset($item_title) ? $item_title : '';

				while( $i < 6 && ((isset($instance[$item_title]) && $instance[$item_title] != '') || (isset($instance[$item_image]) && $instance[$item_image] != ''))) { ?>


					<?php if($instance[$item_link]) { ?>
						<a href="<?php echo esc_url($instance[$item_link]); ?>">
					<?php } 

					if($instance[$item_image]) { ?>
						<div class="rilee-custom-image-list-item" style="background-image:url(<?php echo esc_url($instance[$item_image]); ?>)">
						<?php

					} else { ?>
						<div class="rilee-custom-image-list-item">
						<?php

					} ?>
							
						<?php if($instance[$item_title]) { ?>
							<div class="rilee-custom-image-item-overlay">
								<p class="rilee-custom-image-list-title"><?php echo esc_html($instance[$item_title]); ?></p>
							</div>
							
						<?php } ?>	

						</div>	

					<?php if($instance[$item_link]) { ?>
						</a>
					<?php } 

					$i++;

					if ($i < 6) {
						$item_title = 'item_title_' . ($i); 
						$item_link = 'item_link_' . ($i);
						$item_image = 'image_' . ($i);
						$alt_desc = isset($item_title) ? $item_title : '';
					}	
					
				}	?>

			</div> <!--End Widget-->
			
		<?php

		/* After widget (defined by themes). */
		echo wp_kses_post($after_widget);
	}

		/**
	 * Update the widget settings.
	 */
	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;

		/* Strip tags for title and name to remove HTML (important for text inputs). */
		$instance['item_title_1'] = $new_instance['item_title_1'];
		$instance['item_link_1'] = strip_tags( $new_instance['item_link_1'] );
		$instance['image_1'] = strip_tags( $new_instance['image_1'] );
		$instance['item_title_2'] = $new_instance['item_title_2'];
		$instance['item_link_2'] = strip_tags( $new_instance['item_link_2'] );
		$instance['image_2'] = strip_tags( $new_instance['image_2'] );
		$instance['item_title_3'] = $new_instance['item_title_3'];
		$instance['item_link_3'] = strip_tags( $new_instance['item_link_3'] );
		$instance['image_3'] = strip_tags( $new_instance['image_3'] );
		$instance['item_title_4'] = $new_instance['item_title_4'];
		$instance['item_link_4'] = strip_tags( $new_instance['item_link_4'] );
		$instance['image_4'] = strip_tags( $new_instance['image_4'] );
		$instance['item_title_5'] = $new_instance['item_title_5'];
		$instance['item_link_5'] = strip_tags( $new_instance['item_link_5'] );
		$instance['image_5'] = strip_tags( $new_instance['image_5'] );
	
		return $instance;
	}


	function form( $instance ) {

		/* Set up some default widget settings. */
		$defaults = array(  'item_title_1' => '', 'item_link_1' => '', 'image_1' => '','item_title_2' => '', 'item_link_2' => '', 'image_2' => '', 
							'item_title_3' => '', 'item_link_3' => '', 'image_3' => '', 'item_title_4' => '', 'item_link_4' => '', 'image_4' => '',
							'item_title_5' => '', 'item_link_5' => '', 'image_5' => '');
		$instance = wp_parse_args( (array) $instance, $defaults ); ?>

		<div id="custom_image_list_widget_form" class="rilee_widget">


			<?php for($i = 1; $i < 6; $i++) { ?>

				<h4>Item #<?php echo esc_html($i); ?></h4>

				<?php 
				$item_title = 'item_title_' . ($i); 
				$item_link = 'item_link_' . ($i);
				$item_image = 'image_' . ($i)
				?>
		
				<!-- Product Title -->
				<p>
					<label for="<?php echo esc_attr($this->get_field_id( $item_title )); ?>">Item Title</label><br />
					<input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id( $item_title )); ?>" name="<?php echo esc_attr($this->get_field_name( $item_title )); ?>" value="<?php echo esc_attr($instance[$item_title]); ?>" /><br />
				</p>

				<!-- Product Link -->
				<p>
					<label for="<?php echo esc_attr($this->get_field_id( $item_link )); ?>">Item Link</label><br />
					<input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id(  $item_link )); ?>" name="<?php echo esc_attr($this->get_field_name( $item_link )); ?>" value="<?php echo esc_attr($instance[$item_link]); ?>" /><br />
				</p>

				<!-- Product Image URL -->
				<p>
					<label for="<?php echo esc_attr($this->get_field_id( $item_image  )); ?>">Item Image URL</label><br />
					<input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id( $item_image  )); ?>" name="<?php echo esc_attr($this->get_field_name( $item_image  )); ?>" value="<?php echo esc_attr($instance[$item_image]); ?>" /><br />
				</p>
			
			<?php } ?>
			
		</div>	

		<?php
	}
}

add_action( 'widgets_init', 'rilee_register_custom_image_list_widget' );

function rilee_register_custom_image_list_widget() {
	
	register_widget( 'rilee_custom_image_list_widget' );
} ?>