<?php
// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<div class="wrap">
	
	<h2>Awesome designs for WooCommerce : <?php esc_html_e( 'Settings', 'awesome-designs-for-woocommerce' ); ?></h2>

	<?php 
		settings_fields( 'Awesome-designs-for-woocommerce' );
		$options = get_option( 'Awesome_designs_for_woocommerce_main_settings' );

		// Array containing the image data and links
		$data = array(
			array(
				'img' 				=> plugin_dir_url( dirname( __FILE__ ) ) . 'img/designs/design1.jpg',
				'preview_link' 		=> 'https://awesome-designs-for-woocommerce.wondercode.pro/demo-1/shop/',
				'id_select_link' 	=> 1
			),
			array(
				'img' 				=> plugin_dir_url( dirname( __FILE__ ) ) . 'img/designs/design2.jpg',
				'preview_link' 		=> 'https://awesome-designs-for-woocommerce.wondercode.pro/demo-2/shop/',
				'id_select_link' 	=> 2
			),
			array(
				'img' 				=> plugin_dir_url( dirname( __FILE__ ) ) . 'img/designs/design3.jpg',
				'preview_link' 		=> 'https://awesome-designs-for-woocommerce.wondercode.pro/demo-3/shop/',
				'id_select_link' 	=> 3
			),
		);

		$html = '<table class="form-table adfw-table"><tbody>';
		
		// Counter to keep track of columns
		$counter = 0;
		
		foreach ($data as $item) {
			if ($counter % 3 == 0) {
				$html .= '<tr>';
			}
			
			$html .= '<td>';
			
			if( ($options) && ( $item['id_select_link'] == $options['design'] ) ) {
				// Show current design
				$html .= '<img src="' . $item['img'] . '" class="current-design" alt="Design '. $item['id_select_link'] .'" />';
				$html .= '<div class="current-template">';
				$html .= '<p>'. esc_html__( 'Current Design', 'awesome-designs-for-woocommerce' ) .'</p>';
				$html .= '</div>';
			} else {
				// Show others designs
				$html .= '<img src="' . $item['img'] . '" alt="Design '. $item['id_select_link'] .'" />';
				$html .= '<div class="adfw-hover-template">';
				$html .= '<a href="' . $item['preview_link'] . '" target="_blank" class="adfw-template-preview" title="'. esc_html__( 'Preview', 'awesome-designs-for-woocommerce' ) .'"></a>';
				$html .= '<a href="#TB_inline?width=300&height=200&inlineId=confirm_modal&identifier=' . $item['id_select_link'] . '" class="adfw-template-select thickbox" title="' . esc_html__( 'Select this design', 'awesome-designs-for-woocommerce' )  . '"></a>';
				$html .= '</div>';
			}

			$html .= '</td>';
			
			$counter++;
			
			if ($counter % 3 == 0) {
				$html .= '</tr>';
			}
		}
		
		// Close the last row if it is not complete
		if ($counter % 3 != 0) {
			$html .= '</tr>';
		}
		
		$html .= '</tbody></table>';
		echo wp_kses_post( $html );

	?>


	<div id="confirm_modal" style="display:none;">
		<p id="confirmation-message"><?php esc_html_e( 'Are you sure you want to choose this new design?', 'awesome-designs-for-woocommerce' ); ?></p>
		<a href="#" id="confirm-button" class="button button-yes"><?php esc_html_e( 'Yes', 'awesome-designs-for-woocommerce' ); ?></a>
		<a href="#" class="button button-no button-secondary" onclick="tb_remove(); return false;"><?php esc_html_e( 'No', 'awesome-designs-for-woocommerce' ); ?></a>
	</div>



</div>
<div class="clear"></div>