<?php
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

function click_n_chat_setting() {
	global $wpdb;
	
	
	$nonce = 'setting-user';
	$gradient_colors = array(
		'linear-gradient(90deg, rgb(30, 30, 30) 0%, rgb(20, 20, 20) 35%, rgb(10, 10, 10) 100%)',
'linear-gradient(90deg, rgb(255, 100, 100) 0%, rgb(240, 50, 50) 35%, rgb(200, 0, 0) 100%)',
'linear-gradient(90deg, rgb(100, 255, 100) 0%, rgb(50, 240, 50) 35%, rgb(0, 200, 0) 100%)',
'linear-gradient(90deg, rgb(100, 100, 255) 0%, rgb(50, 50, 240) 35%, rgb(0, 0, 200) 100%)',
'linear-gradient(90deg, rgb(255, 165, 100) 0%, rgb(255, 140, 0) 35%, rgb(255, 120, 0) 100%)',
'linear-gradient(90deg, rgb(170, 100, 170) 0%, rgb(150, 50, 150) 35%, rgb(128, 0, 128) 100%)',
'linear-gradient(90deg, rgb(181, 101, 29) 0%, rgb(150, 80, 20) 35%, rgb(139, 69, 19) 100%)',
'linear-gradient(90deg, rgb(130, 130, 130) 0%, rgb(100, 100, 100) 35%, rgb(80, 80, 80) 100%)',
'linear-gradient(90deg, rgb(150, 150, 150) 0%, rgb(120, 120, 120) 35%, rgb(90, 90, 90) 100%)',
'linear-gradient(90deg, rgb(50, 50, 128) 0%, rgb(30, 30, 100) 35%, rgb(0, 0, 80) 100%)',
'linear-gradient(90deg, rgb(100, 200, 200) 0%, rgb(50, 150, 150) 35%, rgb(0, 100, 100) 100%)',
'linear-gradient(90deg, rgb(170, 170, 50) 0%, rgb(150, 150, 40) 35%, rgb(100, 100, 20) 100%)',
'linear-gradient(90deg, rgb(128, 30, 30) 0%, rgb(100, 20, 20) 35%, rgb(80, 0, 0) 100%)',
'linear-gradient(90deg, rgb(135, 206, 250) 0%, rgb(100, 190, 240) 35%, rgb(70, 170, 230) 100%)',
'linear-gradient(90deg, rgb(255, 127, 80) 0%, rgb(240, 100, 60) 35%, rgb(220, 70, 40) 100%)',
'linear-gradient(90deg, rgb(75, 0, 130) 0%, rgb(55, 0, 100) 35%, rgb(40, 0, 80) 100%)',
'linear-gradient(90deg, rgb(218, 165, 32) 0%, rgb(180, 140, 20) 35%, rgb(150, 100, 10) 100%)',
'linear-gradient(90deg, rgb(210, 105, 30) 0%, rgb(170, 80, 20) 35%, rgb(139, 69, 19) 100%)',
'linear-gradient(90deg, rgb(220, 20, 60) 0%, rgb(180, 10, 50) 35%, rgb(150, 0, 40) 100%)',
'linear-gradient(90deg, rgb(250, 128, 114) 0%, rgb(240, 100, 100) 35%, rgb(230, 70, 70) 100%)',
'linear-gradient(90deg, rgb(0, 0, 139) 0%, rgb(0, 0, 120) 35%, rgb(0, 0, 100) 100%)',
'linear-gradient(90deg, rgb(152, 255, 152) 0%, rgb(130, 230, 130) 35%, rgb(100, 200, 100) 100%)',
'linear-gradient(90deg, rgb(64, 224, 208) 0%, rgb(50, 200, 180) 35%, rgb(40, 180, 160) 100%)',
'linear-gradient(90deg, rgb(112, 128, 144) 0%, rgb(90, 100, 120) 35%, rgb(70, 80, 100) 100%)',
'linear-gradient(90deg, rgb(46, 139, 87) 0%, rgb(40, 120, 70) 35%, rgb(30, 100, 50) 100%)',
'linear-gradient(90deg, rgb(240, 128, 128) 0%, rgb(220, 100, 100) 35%, rgb(200, 80, 80) 100%)',
'linear-gradient(90deg, rgb(255, 140, 0) 0%, rgb(240, 120, 0) 35%, rgb(220, 100, 0) 100%)',
'linear-gradient(90deg, rgb(139, 0, 0) 0%, rgb(120, 0, 0) 35%, rgb(100, 0, 0) 100%)',
'linear-gradient(90deg, rgb(255, 20, 147) 0%, rgb(240, 15, 120) 35%, rgb(220, 10, 100) 100%)',
'linear-gradient(90deg, rgb(32, 178, 170) 0%, rgb(30, 150, 140) 35%, rgb(20, 120, 100) 100%)',
'linear-gradient(90deg, rgb(255, 160, 122) 0%, rgb(240, 140, 100) 35%, rgb(220, 120, 80) 100%)',
'linear-gradient(90deg, rgb(199, 21, 133) 0%, rgb(170, 15, 110) 35%, rgb(150, 10, 100) 100%)',
'linear-gradient(90deg, rgb(189, 183, 107) 0%, rgb(170, 160, 90) 35%, rgb(150, 140, 70) 100%)',
'linear-gradient(90deg, rgb(188, 143, 143) 0%, rgb(160, 120, 120) 35%, rgb(140, 100, 100) 100%)',
'linear-gradient(90deg, rgb(119, 136, 153) 0%, rgb(100, 110, 130) 35%, rgb(80, 90, 100) 100%)',
'linear-gradient(90deg, rgb(85, 107, 47) 0%, rgb(70, 90, 40) 35%, rgb(50, 70, 30) 100%)',
'linear-gradient(90deg, rgb(70, 130, 180) 0%, rgb(60, 120, 160) 35%, rgb(40, 100, 140) 100%)',
'linear-gradient(0deg, rgb(30, 30, 30) 0%, rgb(20, 20, 20) 35%, rgb(10, 10, 10) 100%)',
'linear-gradient(0deg, rgb(255, 100, 100) 0%, rgb(240, 50, 50) 35%, rgb(200, 0, 0) 100%)',
'linear-gradient(0deg, rgb(100, 255, 100) 0%, rgb(50, 240, 50) 35%, rgb(0, 200, 0) 100%)',
'linear-gradient(0deg, rgb(100, 100, 255) 0%, rgb(50, 50, 240) 35%, rgb(0, 0, 200) 100%)',
'linear-gradient(0deg, rgb(170, 100, 170) 0%, rgb(150, 50, 150) 35%, rgb(128, 0, 128) 100%)',
'linear-gradient(0deg, rgb(255, 182, 193) 0%, rgb(255, 150, 180) 35%, rgb(255, 105, 180) 100%)',
'linear-gradient(0deg, rgb(181, 101, 29) 0%, rgb(150, 80, 20) 35%, rgb(139, 69, 19) 100%)',
'linear-gradient(0deg, rgb(130, 130, 130) 0%, rgb(100, 100, 100) 35%, rgb(80, 80, 80) 100%)',
'linear-gradient(0deg, rgb(150, 150, 150) 0%, rgb(120, 120, 120) 35%, rgb(90, 90, 90) 100%)',
'linear-gradient(0deg, rgb(255, 100, 255) 0%, rgb(240, 50, 240) 35%, rgb(200, 0, 200) 100%)',
'linear-gradient(0deg, rgb(150, 255, 150) 0%, rgb(100, 240, 100) 35%, rgb(50, 200, 50) 100%)',
'linear-gradient(0deg, rgb(50, 50, 128) 0%, rgb(30, 30, 100) 35%, rgb(0, 0, 80) 100%)',
'linear-gradient(0deg, rgb(100, 200, 200) 0%, rgb(50, 150, 150) 35%, rgb(0, 100, 100) 100%)',
'linear-gradient(0deg, rgb(170, 170, 50) 0%, rgb(150, 150, 40) 35%, rgb(100, 100, 20) 100%)',
'linear-gradient(0deg, rgb(128, 30, 30) 0%, rgb(100, 20, 20) 35%, rgb(80, 0, 0) 100%)',
'linear-gradient(0deg, rgb(135, 206, 250) 0%, rgb(100, 190, 240) 35%, rgb(70, 170, 230) 100%)',
'linear-gradient(0deg, rgb(255, 127, 80) 0%, rgb(240, 100, 60) 35%, rgb(220, 70, 40) 100%)',
'linear-gradient(0deg, rgb(238, 130, 238) 0%, rgb(218, 100, 218) 35%, rgb(180, 70, 180) 100%)',
'linear-gradient(0deg, rgb(75, 0, 130) 0%, rgb(55, 0, 100) 35%, rgb(40, 0, 80) 100%)',
'linear-gradient(0deg, rgb(218, 165, 32) 0%, rgb(180, 140, 20) 35%, rgb(150, 100, 10) 100%)',
'linear-gradient(0deg, rgb(210, 105, 30) 0%, rgb(170, 80, 20) 35%, rgb(139, 69, 19) 100%)',
'linear-gradient(0deg, rgb(220, 20, 60) 0%, rgb(180, 10, 50) 35%, rgb(150, 0, 40) 100%)',
'linear-gradient(0deg, rgb(250, 128, 114) 0%, rgb(240, 100, 100) 35%, rgb(230, 70, 70) 100%)',
'linear-gradient(0deg, rgb(0, 0, 139) 0%, rgb(0, 0, 120) 35%, rgb(0, 0, 100) 100%)',
'linear-gradient(0deg, rgb(152, 255, 152) 0%, rgb(130, 230, 130) 35%, rgb(100, 200, 100) 100%)',
'linear-gradient(0deg, rgb(64, 224, 208) 0%, rgb(50, 200, 180) 35%, rgb(40, 180, 160) 100%)',
'linear-gradient(0deg, rgb(112, 128, 144) 0%, rgb(90, 100, 120) 35%, rgb(70, 80, 100) 100%)',
'linear-gradient(0deg, rgb(46, 139, 87) 0%, rgb(40, 120, 70) 35%, rgb(30, 100, 50) 100%)',
'linear-gradient(0deg, rgb(240, 128, 128) 0%, rgb(220, 100, 100) 35%, rgb(200, 80, 80) 100%)',
'linear-gradient(0deg, rgb(255, 140, 0) 0%, rgb(240, 120, 0) 35%, rgb(220, 100, 0) 100%)',
'linear-gradient(0deg, rgb(139, 0, 0) 0%, rgb(120, 0, 0) 35%, rgb(100, 0, 0) 100%)',
'linear-gradient(0deg, rgb(255, 20, 147) 0%, rgb(240, 15, 120) 35%, rgb(220, 10, 100) 100%)',
'linear-gradient(0deg, rgb(32, 178, 170) 0%, rgb(30, 150, 140) 35%, rgb(20, 120, 100) 100%)',
'linear-gradient(0deg, rgb(238, 232, 170) 0%, rgb(220, 220, 150) 35%, rgb(200, 200, 130) 100%)',
'linear-gradient(0deg, rgb(255, 160, 122) 0%, rgb(240, 140, 100) 35%, rgb(220, 120, 80) 100%)',
'linear-gradient(0deg, rgb(199, 21, 133) 0%, rgb(170, 15, 110) 35%, rgb(150, 10, 100) 100%)',
'linear-gradient(0deg, rgb(189, 183, 107) 0%, rgb(170, 160, 90) 35%, rgb(150, 140, 70) 100%)',
'linear-gradient(0deg, rgb(188, 143, 143) 0%, rgb(160, 120, 120) 35%, rgb(140, 100, 100) 100%)',
'linear-gradient(0deg, rgb(119, 136, 153) 0%, rgb(100, 110, 130) 35%, rgb(80, 90, 100) 100%)',
'linear-gradient(0deg, rgb(85, 107, 47) 0%, rgb(70, 90, 40) 35%, rgb(50, 70, 30) 100%)',
'linear-gradient(0deg, rgb(70, 130, 180) 0%, rgb(60, 120, 160) 35%, rgb(40, 100, 140) 100%)',
'linear-gradient(180deg, rgb(30, 30, 30) 0%, rgb(20, 20, 20) 35%, rgb(10, 10, 10) 100%)',
'linear-gradient(180deg, rgb(255, 100, 100) 0%, rgb(240, 50, 50) 35%, rgb(200, 0, 0) 100%)',
'linear-gradient(180deg, rgb(100, 255, 100) 0%, rgb(50, 240, 50) 35%, rgb(0, 200, 0) 100%)',
'linear-gradient(180deg, rgb(100, 100, 255) 0%, rgb(50, 50, 240) 35%, rgb(0, 0, 200) 100%)',
'linear-gradient(180deg, rgb(255, 255, 150) 0%, rgb(240, 240, 100) 35%, rgb(200, 200, 50) 100%)',
'linear-gradient(180deg, rgb(255, 165, 100) 0%, rgb(255, 140, 0) 35%, rgb(255, 120, 0) 100%)',
'linear-gradient(180deg, rgb(170, 100, 170) 0%, rgb(150, 50, 150) 35%, rgb(128, 0, 128) 100%)',
'linear-gradient(180deg, rgb(255, 182, 193) 0%, rgb(255, 150, 180) 35%, rgb(255, 105, 180) 100%)',
'linear-gradient(180deg, rgb(181, 101, 29) 0%, rgb(150, 80, 20) 35%, rgb(139, 69, 19) 100%)',
'linear-gradient(180deg, rgb(130, 130, 130) 0%, rgb(100, 100, 100) 35%, rgb(80, 80, 80) 100%)',
'linear-gradient(180deg, rgb(150, 150, 150) 0%, rgb(120, 120, 120) 35%, rgb(90, 90, 90) 100%)',
'linear-gradient(180deg, rgb(100, 255, 255) 0%, rgb(50, 240, 240) 35%, rgb(0, 200, 200) 100%)',
'linear-gradient(180deg, rgb(255, 100, 255) 0%, rgb(240, 50, 240) 35%, rgb(200, 0, 200) 100%)',
'linear-gradient(180deg, rgb(150, 255, 150) 0%, rgb(100, 240, 100) 35%, rgb(50, 200, 50) 100%)',
'linear-gradient(180deg, rgb(50, 50, 128) 0%, rgb(30, 30, 100) 35%, rgb(0, 0, 80) 100%)',
'linear-gradient(180deg, rgb(100, 200, 200) 0%, rgb(50, 150, 150) 35%, rgb(0, 100, 100) 100%)',
'linear-gradient(180deg, rgb(170, 170, 50) 0%, rgb(150, 150, 40) 35%, rgb(100, 100, 20) 100%)',
'linear-gradient(180deg, rgb(128, 30, 30) 0%, rgb(100, 20, 20) 35%, rgb(80, 0, 0) 100%)',
'linear-gradient(180deg, rgb(135, 206, 250) 0%, rgb(100, 190, 240) 35%, rgb(70, 170, 230) 100%)',
'linear-gradient(180deg, rgb(255, 127, 80) 0%, rgb(240, 100, 60) 35%, rgb(220, 70, 40) 100%)',
'linear-gradient(180deg, rgb(238, 130, 238) 0%, rgb(218, 100, 218) 35%, rgb(180, 70, 180) 100%)',
'linear-gradient(180deg, rgb(75, 0, 130) 0%, rgb(55, 0, 100) 35%, rgb(40, 0, 80) 100%)',
'linear-gradient(180deg, rgb(218, 165, 32) 0%, rgb(180, 140, 20) 35%, rgb(150, 100, 10) 100%)',
'linear-gradient(180deg, rgb(210, 105, 30) 0%, rgb(170, 80, 20) 35%, rgb(139, 69, 19) 100%)',
'linear-gradient(180deg, rgb(220, 20, 60) 0%, rgb(180, 10, 50) 35%, rgb(150, 0, 40) 100%)',
'linear-gradient(180deg, rgb(250, 128, 114) 0%, rgb(240, 100, 100) 35%, rgb(230, 70, 70) 100%)',
'linear-gradient(180deg, rgb(173, 216, 230) 0%, rgb(150, 190, 220) 35%, rgb(130, 170, 200) 100%)',
'linear-gradient(180deg, rgb(0, 0, 139) 0%, rgb(0, 0, 120) 35%, rgb(0, 0, 100) 100%)',
'linear-gradient(180deg, rgb(152, 255, 152) 0%, rgb(130, 230, 130) 35%, rgb(100, 200, 100) 100%)',
'linear-gradient(180deg, rgb(64, 224, 208) 0%, rgb(50, 200, 180) 35%, rgb(40, 180, 160) 100%)',
'linear-gradient(180deg, rgb(112, 128, 144) 0%, rgb(90, 100, 120) 35%, rgb(70, 80, 100) 100%)',
'linear-gradient(180deg, rgb(46, 139, 87) 0%, rgb(40, 120, 70) 35%, rgb(30, 100, 50) 100%)',
'linear-gradient(180deg, rgb(240, 128, 128) 0%, rgb(220, 100, 100) 35%, rgb(200, 80, 80) 100%)',
'linear-gradient(180deg, rgb(255, 140, 0) 0%, rgb(240, 120, 0) 35%, rgb(220, 100, 0) 100%)',
'linear-gradient(180deg, rgb(139, 0, 0) 0%, rgb(120, 0, 0) 35%, rgb(100, 0, 0) 100%)',
'linear-gradient(180deg, rgb(255, 20, 147) 0%, rgb(240, 15, 120) 35%, rgb(220, 10, 100) 100%)',
'linear-gradient(180deg, rgb(32, 178, 170) 0%, rgb(30, 150, 140) 35%, rgb(20, 120, 100) 100%)',
'linear-gradient(180deg, rgb(238, 232, 170) 0%, rgb(220, 220, 150) 35%, rgb(200, 200, 130) 100%)',
'linear-gradient(180deg, rgb(255, 160, 122) 0%, rgb(240, 140, 100) 35%, rgb(220, 120, 80) 100%)',
'linear-gradient(180deg, rgb(199, 21, 133) 0%, rgb(170, 15, 110) 35%, rgb(150, 10, 100) 100%)',
'linear-gradient(180deg, rgb(189, 183, 107) 0%, rgb(170, 160, 90) 35%, rgb(150, 140, 70) 100%)',
'linear-gradient(180deg, rgb(188, 143, 143) 0%, rgb(160, 120, 120) 35%, rgb(140, 100, 100) 100%)',
'linear-gradient(180deg, rgb(119, 136, 153) 0%, rgb(100, 110, 130) 35%, rgb(80, 90, 100) 100%)',
'linear-gradient(180deg, rgb(85, 107, 47) 0%, rgb(70, 90, 40) 35%, rgb(50, 70, 30) 100%)',
'linear-gradient(180deg, rgb(70, 130, 180) 0%, rgb(60, 120, 160) 35%, rgb(40, 100, 140) 100%)',
'linear-gradient(180deg, rgb(84,207,96) 0%, rgb(68,197,84) 35%, rgb(45,184,66) 100%)'

	);
	$background_colors = array(
		'#FF5733', '#6699ff', '#FF33A1', '#A133FF', '#FFA133', '#33A1FF', '#DD5733', '#5733FF', '#FF33FF', '#33FFB5', '#FFB533', '#FF3357', '#5733FF', '#33FF83', '#FF8333', '#3383FF', '#C70039', '#FFC300', '#900C3F', '#581845', '#2E86C1', '#1e1e1e', '#000000', '#FF0000', '#00FF00', '#0000FF', '#FFA500', '#800080', '#A52A2A', '#808080', '#000080', '#008080', '#808000', '#800000', '#FF7F50', '#EE82EE', '#4B0082', '#DAA520', '#D2691E', '#DC143C', '#FA8072', '#ADD8E6', '#00008B', '#708090', '#2E8B57', '#F08080', '#FF8C00', '#8B0000', '#FF1493', '#20B2AA', '#FFA07A', '#C71585', '#BDB76B', '#BC8F8F', '#778899', '#556B2F', '#4682B4'
	);
	$chat_skin_colors = array(
		'#CCF7FF', '#F0F0F0', '#FFFFFF', '#cae7fc', '#F7E2A0'
	);
	$text_colors = array(
		'#FFFFFF', '#000000'
	);
     if (isset($_POST['action'])) {
		if (  ! wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'])), $nonce) ) {
			 die( 'Security check' ); 
		} 

		$click_n_chat_setting_popup_old = get_option('click_n_chat_setting_popup');
		
		$click_n_chat_setting_popup = new click_n_chat_setting_popup();
 
		$click_n_chat_setting_popup->show_header = sanitize_text_field($_POST['show_header']) == "on" ? 1 : 0;
		$click_n_chat_setting_popup->title = sanitize_text_field(htmlentities($_POST['popup_title'], ENT_QUOTES, 'UTF-8', false));
		$click_n_chat_setting_popup->header_padding = sanitize_text_field($_POST['header_padding']);
		$click_n_chat_setting_popup->bg_color = sanitize_text_field($_POST['bg_color']);
		$click_n_chat_setting_popup->txt_color = sanitize_text_field($_POST['txt_color']);
		$click_n_chat_setting_popup->border_style = sanitize_text_field($_POST['border_style']);
		$click_n_chat_setting_popup->pop_type = sanitize_text_field($_POST['pop_type']);
		$click_n_chat_setting_popup->socialwidgets_no_availability = sanitize_text_field($_POST['socialwidgets_no_availability']);
		//$click_n_chat_setting_popup->popup_width = sanitize_text_field($_POST['popup_width']);
		$click_n_chat_setting_popup->popup_position = sanitize_text_field($_POST['popup_position']);
		$click_n_chat_setting_popup->pop_up_style = sanitize_text_field($_POST['pop_up_style']);
		$click_n_chat_setting_popup->pop_up_icon = sanitize_text_field($_POST['pop_up_icon']);
		$click_n_chat_setting_popup->display_all = sanitize_text_field($_POST['display_all']) == "on" ? 1 : 0;
		$click_n_chat_setting_popup->display_front_page = sanitize_text_field($_POST['display_front_page']);
		$click_n_chat_setting_popup->display_home = sanitize_text_field($_POST['display_home']);
		$click_n_chat_setting_popup->display_cart = sanitize_text_field($_POST['display_cart']);
		$click_n_chat_setting_popup->display_checkout = sanitize_text_field($_POST['display_checkout']);
		$click_n_chat_setting_popup->display_page = sanitize_text_field($_POST['display_page']);
		$click_n_chat_setting_popup->display_account_page = sanitize_text_field($_POST['display_account_page']);
		$click_n_chat_setting_popup->display_shop = sanitize_text_field($_POST['display_shop']);
		$click_n_chat_setting_popup->display_product = sanitize_text_field($_POST['display_product']);
		
		$click_n_chat_setting_popup->mypopup_icon = $click_n_chat_setting_popup_old->mypopup_icon;
 		if (isset($_FILES['myicon']) && !empty($_FILES['myicon']['name'])) {
			$uploaded_file = $_FILES['myicon'];
			$upload_overrides = array('test_form' => false);
			$movefile = wp_handle_upload($uploaded_file, $upload_overrides);
			if ($movefile && !isset($movefile['error'])) {
				$icon_url = $movefile['url'];
			}
			$click_n_chat_setting_popup->pop_up_icon = $icon_url;
			$click_n_chat_setting_popup->mypopup_icon = $icon_url;
		}
		
		$click_n_chat_setting_popup->widget_style = sanitize_text_field($_POST['widget_style']);
		$click_n_chat_setting_popup->widget_icon_size = sanitize_text_field($_POST['widget_icon_size']);
		
		$click_n_chat_setting_popup->chat_logs = sanitize_text_field($_POST['chat_logs']) == "on" ? 1 : 0;
		$click_n_chat_setting_popup->chat_name_start = sanitize_text_field($_POST['chat_name_start']) == "on" ? 1 : 0;
		$click_n_chat_setting_popup->chat_bg_color = sanitize_text_field($_POST['chat_bg_color']);
		
		$click_n_chat_time_zone = sanitize_text_field($_POST['click_n_chat_time_zone']);
		update_option('click_n_chat_time_zone', $click_n_chat_time_zone);
		
		update_option('click_n_chat_setting_popup', $click_n_chat_setting_popup);
		
		update_option('click_n_chat_greetings_message', sanitize_text_field(htmlentities($_POST['click_n_chat_greetings_message'])));
		
		update_option('click_n_chat_is_enable', sanitize_text_field($_POST['click_n_chat_is_enable']) == "on" ? 1 : 0);
			
	}
    $table_name = $wpdb->prefix . 'cnc_social_users';
	
	$click_n_chat_setting_popup = get_option('click_n_chat_setting_popup');
	$click_n_chat_greetings_message = get_option('click_n_chat_greetings_message');
	$click_n_chat_is_enable = get_option('click_n_chat_is_enable');
 
	
	$pop_up_style = $click_n_chat_setting_popup->pop_up_style;
?>
<form id="userForm" method="post" enctype="multipart/form-data">
<?php wp_nonce_field($nonce, '_wpnonce'); ?>
<input type="hidden" name="action" value="setting">    
<div class="my-3">   
    <h1 class="wp-heading-inline">Setting</h1>
    <div style="display: inline-flex;">
        <label for="welcome_message">Enable Plugin?</label>&nbsp;&nbsp;
        <label class="cnc-switch">
            <input name="click_n_chat_is_enable" id="click_n_chat_is_enable" class="click_n_chat_is_enable" type="checkbox" <?php echo esc_html(($click_n_chat_is_enable == "1" ? "checked" : ""));  ?> <?php  echo esc_html((get_option('click_n_chat_is_active') == "0") ? "disabled" : ""); ?>>
            <span class="cnc-switch-slider"></span>
        </label>
    </div>
</div>


<div class="wrap">
    <h2 class="nav-tab-wrapper">
        <a href="#" class="nav-tab nav-tab-active" data-tab="popup-tab">Popup</a>
        <a href="#" class="nav-tab" data-tab="pop-widget-tab">Popup Widget</a>
        <a href="#" class="nav-tab" data-tab="loading-control-tab">Loading Control</a>
        <a href="#" class="nav-tab" data-tab="page-widget-tab">Page Widget</a>
        <a href="#" class="nav-tab" data-tab="chat-tab">Chat</a>
        <a href="#" class="nav-tab" data-tab="timezone-tab">Timezone</a>
    </h2>

    <div class="tab-content form-wrap">
        <div id="popup-tab" class="tab-content-item">
        	
            <div class="cnc-custom-gap-row mt-3">
                <div class="form-wrap cnc-custom-col-gap-6">
                	<div class="cnc-container cnc-bg-white cnc-shadow">
                    	<div class="form-field">
                            <label for="name">Show Popup Header:</label>
                            <label class="cnc-switch">
                                <input name="show_header" id="show_header" class="cnc-user-status" type="checkbox" <?php echo esc_html(($click_n_chat_setting_popup->show_header == "1" ? "checked" : ""));  ?> >
                                <span class="cnc-switch-slider"></span>
                            </label>
                        </div>
                        <div class="form-field">
                            <label for="name">Header Text:</label>
                            <textarea name="popup_title" type="text" id="popup_title" class="form-control cnc-header-info" placeholder="Flag92" row="1"><?php echo esc_html(stripslashes(html_entity_decode($click_n_chat_setting_popup->title)));  ?></textarea>
                            <p>
                                    <b>Title: </b> You can add HTML code here. <a id="show-header-code-view" href="javascript:void(0)">Example of HTML code</a>	
                                
                                <div id="cnc-header-code-view" style="display:none">How can we help you today? &lt;img src=&quot;https://s.w.org/images/core/emoji/15.0.3/svg/1f44b.svg&quot; style=&quot;width:20px&quot;&gt;
&lt;br /&gt;
&lt;p style=&quot;color:#3d3d3d; font-size:11px; color:#FFFFFF&quot;&gt;
    &lt;b&gt;Click n Chat&lt;/b&gt; Social Solution with AI-driven AI Chatbot.
&lt;/p&gt;
</div>
							</p>
                        </div>
                        <div class="form-field">
                            <label for="designation">Header Padding:</label>
                            <input type="range" class="form-rangs customRange" value="<?php echo esc_html($click_n_chat_setting_popup->header_padding);  ?>" min="1" max="20" step="1" name="header_padding" id="header_padding" data-span="headerPaddingRangeValue">
							<b><span id="headerPaddingRangeValue"><?php echo esc_html($click_n_chat_setting_popup->header_padding);  ?></span>%</b>
                        </div>
                        <div class="form-field">
                            <label for="designation">Background Color:</label>
                            <div class="cnc-color-picker-container">
                              <input type="text" id="bg_color" name="bg_color" value="<?php echo esc_attr($click_n_chat_setting_popup->bg_color); ?>" class="cnc-color-input cnc-header-info" placeholder="Enter color or select">
                              <a class="cnc-color-btn cncColorPickerBtn" data-option = "cncChatColorOptions"><span class="dashicons dashicons-color-picker"></span></a>
                              <div class="cnc-color-options cncChatColorOptions">
                                <?php
                                foreach ($background_colors as $color) {
                                ?>
                                    <div data-id="bg_color" data-option = "cncChatColorOptions" class="cnc-color-option" style="background:<?php echo esc_attr($color) ?>;" data-color="<?php echo esc_attr($color) ?>"></div>
                                <?php
                                }
                                foreach ($gradient_colors as $color) {
                                ?>
                                    <div data-id="bg_color" data-option = "cncChatColorOptions" class="cnc-color-option" style="background:<?php echo esc_attr($color) ?>;" data-color="<?php echo esc_attr($color) ?>"></div>
                                <?php
                                }
                                ?>
                              </div>
                            </div>
                        </div>
                        <div class="form-field">
                            <label for="designation">Text Color:</label>
                            <div class="cnc-color-picker-container">
                              <input type="text" id="txt_color" name="txt_color" value="<?php echo esc_attr($click_n_chat_setting_popup->txt_color); ?>" class="cnc-color-input cnc-header-info" placeholder="Enter color or select">
                              <a class="cnc-color-btn cncColorPickerBtn" data-option = "cncTxtColorOptions"><span class="dashicons dashicons-color-picker"></span></a>
                              <div class="cnc-color-options cncTxtColorOptions" style="height:auto; overflow:hidden	">
                              	<div class="cnc-color-option" data-id="txt_color" data-option = "cncTxtColorOptions" style="background-color: #FF0000;" data-color="#FF0000"></div>
                                <div class="cnc-color-option" data-id="txt_color" data-option = "cncTxtColorOptions" style="background-color: #FFA500;" data-color="#FFA500"></div>
                                <div class="cnc-color-option" data-id="txt_color" data-option = "cncTxtColorOptions" style="background-color: #008000;" data-color="#008000"></div>
                                <div class="cnc-color-option" data-id="txt_color" data-option = "cncTxtColorOptions" style="background-color: #0000FF;" data-color="#0000FF"></div>
                                <div class="cnc-color-option" data-id="txt_color" data-option = "cncTxtColorOptions" style="background-color: #86CD91;" data-color="#86CD91"></div>
                                <div class="cnc-color-option" data-id="txt_color" data-option = "cncTxtColorOptions" style="background-color: #FF6060;" data-color="#FF6060"></div>
                                <div class="cnc-color-option" data-id="txt_color" data-option = "cncTxtColorOptions" style="background-color: #000000;" data-color="#000000"></div>
                                <div class="cnc-color-option" data-id="txt_color" data-option = "cncTxtColorOptions" style="background-color: #FFFFFF; border:1px solid #F1F1F1" data-color="#FFFFFF"></div>
                                <div class="cnc-color-option" data-id="txt_color" data-option = "cncTxtColorOptions" style="background-color: #EEF075;" data-color="#EEF075"></div>
                              </div>
                            </div>
                        </div>
                        <div class="form-field">
                            <label for="designation">Border Style:</label>
                            <div class="cnc-border-options cnc-radio-group">
                                <label>
                                    <input type="radio" class="cnc-header-info" id="no-border" name="border_style" <?php echo esc_html($click_n_chat_setting_popup->border_style == "0px 0px 0px 0px" ? "checked" : "");  ?> value="0px 0px 0px 0px">
                                    <span class="cnc-border-view no-border cnc-checkpoint"></span>
                                    <span class="cnc-checkmark">&#10003;</span>
                                </label>
                                
                                <label>
                                    <input type="radio" class="cnc-header-info" id="border-left-top" name="border_style" <?php echo esc_html($click_n_chat_setting_popup->border_style == "20px 0px 0px 0px" ? "checked" : "");  ?> value="20px 0px 0px 0px">
                                    <span class="cnc-border-view border-left-top cnc-checkpoint"></span>
                                    <span class="cnc-checkmark">&#10003;</span>
                                </label>
                                
                                <label>
                                    <input type="radio" class="cnc-header-info" id="border-left-top" name="border_style" <?php echo esc_html($click_n_chat_setting_popup->border_style == "0px 0px 0px 20px" ? "checked" : "");  ?> value="0px 0px 0px 20px">
                                    <span class="cnc-border-view border-left-bottom cnc-checkpoint"></span>
                                    <span class="cnc-checkmark">&#10003;</span>
                                </label>
                                <label>
                                    <input type="radio" class="cnc-header-info" id="border-left-top" name="border_style" <?php echo esc_html($click_n_chat_setting_popup->border_style == "0px 20px 0px 0px" ? "checked" : "");  ?> value="0px 20px 0px 0px">
                                    <span class="cnc-border-view border-right-top cnc-checkpoint"></span>
                                    <span class="cnc-checkmark">&#10003;</span>
                                </label>
                                <label>
                                    <input type="radio" class="cnc-header-info" id="border-left-top" name="border_style" <?php echo esc_html($click_n_chat_setting_popup->border_style == "0px 0px 20px 0px" ? "checked" : "");  ?> value="0px 0px 20px 0px">
                                    <span class="cnc-border-view border-right-bottom cnc-checkpoint"></span>
                                    <span class="cnc-checkmark">&#10003;</span>
                                </label>
                                <label>
                                    <input type="radio" class="cnc-header-info" id="border-left-right-top" name="border_style" <?php echo esc_html($click_n_chat_setting_popup->border_style == "20px 20px 0px 0px" ? "checked" : "");  ?> value="20px 20px 0px 0px">
                                    <span class="cnc-border-view border-left-right-top cnc-checkpoint"></span>
                                    <span class="cnc-checkmark">&#10003;</span>
                                </label>
                                <label>
                                    <input type="radio" class="cnc-header-info" id="border-all" name="border_style" <?php echo esc_html($click_n_chat_setting_popup->border_style == "20px 20px 20px 20px" ? "checked" : "");  ?> value="20px 20px 20px 20px">
                                    <span class="cnc-border-view border-all cnc-checkpoint"></span>
                                    <span class="cnc-checkmark">&#10003;</span>
                                </label>
                            </div>
                        </div>
                        <div class="form-field">
                        	<label for="welcome_message">Popup Position:</label>
                            <div class="pb-2">
                                <span>
                                    <input type="radio" name="popup_position" value="left" <?php echo esc_html($click_n_chat_setting_popup->popup_position == "left" ? 'checked="checked"' : '');  ?>>
                                	Left
                                </span>
                                
                                <span>
                                    <input type="radio" name="popup_position" value="right" <?php echo esc_html($click_n_chat_setting_popup->popup_position == "right" ? 'checked="checked"' : '');  ?>>
                                	Right
                                </span>
                                 
                            </div>
                        </div>
                        <div class="form-field">
                            <label for="designation">Popup Icon:</label>
                            <div class="cnc-radio-group cnc-link-option">
                                <label>
                                    <input type="radio" name="pop_up_icon" value="<?php echo esc_html(CLICK_N_CHAT_DIR_URL . 'assets/images/cnccalliconw.png');  ?>" <?php echo esc_html($click_n_chat_setting_popup->pop_up_icon == CLICK_N_CHAT_DIR_URL . 'assets/images/cnccalliconw.png' ? 'checked="checked"' : '');  ?>>
                                        <img id="cnccalliconw" style="background:<?php echo esc_html($click_n_chat_setting_popup->bg_color);?>; width:40px; height:40px; border-radius:50%" class="cnc-checkpoint" src="<?php echo esc_html(CLICK_N_CHAT_DIR_URL .'assets/images/cnccalliconw.png');  ?>">
                                    <span class="cnc-checkmark">&#10003;</span>
                                    <br />Chat n Click
                                </label>
                                
                                <label>
                                    <input type="radio" name="pop_up_icon" value="<?php echo esc_html(CLICK_N_CHAT_DIR_URL . 'assets/images/chatlefticonlw.png');  ?>" <?php echo esc_html($click_n_chat_setting_popup->pop_up_icon == CLICK_N_CHAT_DIR_URL . 'assets/images/chatlefticonlw.png' ? 'checked="checked"' : '');  ?>>
                                        <img id="cnccalliconw" style="background:<?php echo esc_html($click_n_chat_setting_popup->bg_color);?>; width:40px; height:40px; border-radius:50%" class="cnc-checkpoint" src="<?php echo esc_html(CLICK_N_CHAT_DIR_URL .'assets/images/chatlefticonlw.png');  ?>">
                                    <span class="cnc-checkmark">&#10003;</span>
                                    <br />Bot
                                </label>
                                
                                <label>
                                    <input type="radio" name="pop_up_icon" value="<?php echo esc_html(CLICK_N_CHAT_DIR_URL . 'assets/images/whatsapp.png');  ?>" <?php echo esc_html($click_n_chat_setting_popup->pop_up_icon == CLICK_N_CHAT_DIR_URL . 'assets/images/whatsapp.png' ? 'checked="checked"' : '');  ?>>
                                    <img class="cnc-checkpoint" src="<?php echo esc_html(CLICK_N_CHAT_DIR_URL .'assets/images/whatsapp.png');  ?>" alt="WhatsApp" style="width:40px; height:40px; border-radius:50%">
                                    <span class="cnc-checkmark">&#10003;</span>
                                    <br />WhatsApp
                                </label>
                            
                                <label>
                                    <input type="radio" name="pop_up_icon" value="<?php echo esc_html(CLICK_N_CHAT_DIR_URL . 'assets/images/telegram.png');  ?>" <?php echo esc_html($click_n_chat_setting_popup->pop_up_icon == CLICK_N_CHAT_DIR_URL . 'assets/images/telegram.png' ? 'checked="checked"' : '');  ?>>
                                    <img class="cnc-checkpoint" width="20px" height="20px" src="<?php echo esc_html(CLICK_N_CHAT_DIR_URL .'assets/images/telegram.png');  ?>" alt="Telegram" style="width:40px; height:40px; border-radius:50%">
                                    <span class="cnc-checkmark">&#10003;</span>
                                    <br />Telegram
                                </label>
                                <?php if($click_n_chat_setting_popup->mypopup_icon != "") { ?>
                                <label>
                                    <input type="radio" name="pop_up_icon" value="<?php echo esc_html($click_n_chat_setting_popup->mypopup_icon);  ?>" <?php echo esc_html($click_n_chat_setting_popup->pop_up_icon == $click_n_chat_setting_popup->mypopup_icon ? 'checked="checked"' : '');  ?>>
                                    <img class="cnc-checkpoint" width="20px" height="20px" src="<?php echo esc_html(esc_url($click_n_chat_setting_popup->mypopup_icon));  ?>" alt="mypopup icon" style="width:40px; height:40px; border-radius:50%">
                                    <span class="cnc-checkmark">&#10003;</span>
                                    <br />Custom Icon
                                </label>
                                <?php } ?>
                            </div>
                        </div>
                        <div class="form-field">
                            <label for="designation">Upload Custom Icon:</label>
                            <input name="myicon" type="file" id="myicon" class="form-control" style="width:100%">
                        </div>
                   	</div>
                </div>
                <div class="form-wrap cnc-custom-col-gap-6">
                    <div class="cnc-right-fixed">  
                    	<div id="cnc-chatbot-popup">
                            <div>
                                <div class="cnc-chatbot-popup-header" style="background:<?php echo esc_html($click_n_chat_setting_popup->bg_color);  ?>; border-radius:<?php echo esc_html($click_n_chat_setting_popup->border_style);  ?>;padding:<?php echo esc_html($click_n_chat_setting_popup->header_padding);  ?>px; width:350px">
                                    <h1 class="cnc-text-header" style="font-size:20px; color:<?php echo esc_html($click_n_chat_setting_popup->txt_color);  ?>;"><?php echo wp_kses_post(stripslashes(html_entity_decode($click_n_chat_setting_popup->title)));  ?></h1>
                                </div>
                            </div>
                            <div id="<?php echo esc_html($pop_up_style);  ?>-cnc-widget" style="height: auto; overflow-y: auto;">
                               <!-- <a class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-link" href="#">
                                <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-container">
                                    <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-item">
                                        <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-icon-div">
                                            <img src="<?php echo esc_html((CLICK_N_CHAT_DIR_URL . 'assets/images/call-icon1.png'));  ?>" class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-icon">
                                        </div>
                                        <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-details">
                                            <p class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-designation">Support</p>
                                            <h3 class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-name">John Doe</h3>
                                            <p class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-description">Available</p>
                                        </div>
                                    </div>
                                </div>
                                </a>-->
                            </div>
                            <br />
                        </div> 
                    </div>
               	</div>
           	</div>
        </div>
        
        <!-- Popup Wodget -->
        <div id="pop-widget-tab" class="tab-content-item" style="display: none;">
        	<div class="cnc-custom-gap-row mt-5">
                <div class="form-wrap cnc-custom-col-gap-6">
                    <div class="cnc-container cnc-bg-white cnc-shadow">
                        <div class="form-field">
                            <label for="pop_up_style">Widgets:</label>
                            <select id="pop_up_style" name="pop_up_style" class="form-select cnc-select">
                               <option <?php echo esc_html($click_n_chat_setting_popup->pop_up_style == "wgs1" ? 'selected' : '');  ?> value="wgs1">Widget 1</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->pop_up_style == "wgs2" ? 'selected' : '');  ?> value="wgs2">Widget 2</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->pop_up_style == "wgs3" ? 'selected' : '');  ?> value="wgs3">Widget 3</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->pop_up_style == "wgs4" ? 'selected' : '');  ?> value="wgs4">Widget 4</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->pop_up_style == "wgs5" ? 'selected' : '');  ?> value="wgs5">Widget 5</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->pop_up_style == "wgs6" ? 'selected' : '');  ?> value="wgs6">Widget 6</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-wrap cnc-custom-col-gap-4">
                    <div class="cnc-containers">	
                         <?php
                            $items = ['1', '2', '3', '4', '5', '6'];
                            $rows = 2;
                            $columns = ceil(count($items) / $rows);
                            
                            $table = array_fill(0, $rows, array());
                            
                            for ($i = 0; $i < count($items); $i++) {
                                $rowIndex = $i % $rows;
                                $table[$rowIndex][] = $items[$i];
                            }
                                     
                            foreach ($table as $row) {
                            ?><?php
                            foreach ($row as $item) {
                                $pop_up_style = "wgs".$item;
                            ?>
                            <div id="pop-widget-<?php echo esc_html($pop_up_style);  ?>" style="display:<?php echo esc_html($click_n_chat_setting_popup->pop_up_style == $pop_up_style ? 'block' : 'none');  ?>">
                                <div id="cnc-chatbot-popup" style="box-shadow:none; border-radius:0px;height: 100px; width:310px">
                                    <div id="<?php echo esc_html($pop_up_style);  ?>-cnc-widget" style="height: auto; overflow-y: auto; margin:0px">
                                        
                                        <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-container">
                                            <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-item">
                                                
                                                <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-icon-div">
                                                    <img src="<?php echo esc_html((CLICK_N_CHAT_DIR_URL . 'assets/images/call-icon11.png'));  ?>" class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-icon">
                                                </div>
                                                <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-details">
                                                    <span class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-designation">Support</span>
                                                    <span class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-name">John Doe</span>
                                                    <span class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-description">Need Help? Just Click</span>
                                                </div>
                                            </div>
                                        </div>
                                     
                                    </div>
                                </div>
                            </div>
                            <?php
                            }
                            ?>
                            
                            <?php
                        } 
                        ?>
                    </div>
                </div>
           	</div>
        </div>
        
        <!-- Loadidng Control -->
        <div id="loading-control-tab" class="tab-content-item" style="display: none;">
            <p class="mt-3">Popup Loading Control Options</p>
            <div class="cnc-custom-gap-row mt-3">
                <div class="form-wrap cnc-custom-col-gap-6">
                    <div class="cnc-container cnc-bg-white cnc-shadow">      
                    	<div class="form-field">
                        	<label for="welcome_message">Default Type:</label>
                            <div class="pb-2">
                                <span class="pop_type_hover">
                                    <input type="radio" name="pop_type" value="socialwidgets" <?php echo esc_html($click_n_chat_setting_popup->pop_type == "socialwidgets" ? 'checked="checked"' : '');  ?> data-img="socialwidgets">
                                	Social Widgets
                                </span>
                                
                                <span class="pop_type_hover">
                                    <input type="radio" name="pop_type" value="socialicon" <?php echo esc_html($click_n_chat_setting_popup->pop_type == "socialicon" ? 'checked="checked"' : '');  ?> data-img="socialicon">
                                	Social Icon
                                </span>
                                
                                <span class="pop_type_hover">
                                    <input type="radio" name="pop_type" value="chatgpt" <?php echo esc_html($click_n_chat_setting_popup->pop_type == "chatgpt" ? 'checked="checked"' : '');  ?> data-img="chatgpt">
                                	AI	
                                </span>
                                
                                <span class="pop_type_hover" >
                                    <input type="radio" name="pop_type" value="autoreply" <?php echo esc_html($click_n_chat_setting_popup->pop_type == "autoreply" ? 'checked="checked"' : '');  ?> data-img="autoreply">
                                	Auto Reply 
                                </span>
                            </div>
                        </div>  
                        
                        <div class="form-field" id="noAvailabilityOption" style="display:<?php echo esc_html($click_n_chat_setting_popup->pop_type == "socialwidgets" ? 'block' : 'none');  ?>">
                            <label for="welcome_message">If no social user is available, automatically move to:</label>
                            <input name="socialwidgets_no_availability" <?php echo esc_html($click_n_chat_setting_popup->socialwidgets_no_availability == "autoreply" ? 'checked="checked"' : '');  ?> type="radio" value="autoreply" /> Auto Reply
                            
                            <input name="socialwidgets_no_availability" <?php echo esc_html($click_n_chat_setting_popup->socialwidgets_no_availability == "chatgpt" ? 'checked="checked"' : '');  ?> type="radio" value="chatgpt" /> AI
                            
                        </div>   
                        <div class="form-field">
                            <label for="welcome_message">Display All Pages:</label>
                            <label class="cnc-switch">
                                <input name="display_all" id="display_all" type="checkbox" <?php echo esc_attr($click_n_chat_setting_popup->display_all == "1" ? "checked" : ""); ?>>
                                <span class="cnc-switch-slider"></span>
                            </label>
                            <p id="name-description">
                                <b>Display All Pages:</b> option will ensure that <b>Default Type</b> is visible on all pages, regardless of whether any other options are selected
                            </p>
                        </div>
                        <div class="form-field">
                            <label for="display_front_page">Display Home Page:</label>
                            <select name="display_front_page" class="form-select cnc-select">
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_front_page == "0" ? 'selected' : '');  ?> value="0">None</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_front_page == "1" ? 'selected' : '');  ?> value="1">Auto Reply</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_front_page == "2" ? 'selected' : '');  ?> value="2">AI</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_front_page == "3" ? 'selected' : '');  ?> value="3">Social Icon</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_front_page == "4" ? 'selected' : '');  ?> value="4">Social Widgets</option>
                            </select>
                        </div>
                        <div class="form-field">
                            <label for="display_front_page">Display Blog Page:</label>
                        
                            <select name="display_home" class="form-select cnc-select">
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_home == "0" ? 'selected' : '');  ?> value="0">None</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_home == "1" ? 'selected' : '');  ?> value="1">Auto Reply</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_home == "2" ? 'selected' : '');  ?> value="2">AI</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_home == "3" ? 'selected' : '');  ?> value="3">Social Icon</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_home == "4" ? 'selected' : '');  ?> value="4">Social Widgets</option>
                            </select>
                        </div>
                        <div class="form-field">
                            <label for="display_front_page">Display Cart Page:</label>
                            <select name="display_cart" class="form-select cnc-select">
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_cart == "0" ? 'selected' : '');  ?> value="0">None</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_cart == "1" ? 'selected' : '');  ?> value="1">Auto Reply</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_cart == "2" ? 'selected' : '');  ?> value="2">AI</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_cart == "3" ? 'selected' : '');  ?> value="3">Social Icon</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_cart == "4" ? 'selected' : '');  ?> value="4">Social Widgets</option>
                            </select>
                        </div>
                        <div class="form-field">
                            <label for="display_front_page">Display Checkout Page:</label>
                            <select name="display_checkout" class="form-select cnc-select">
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_checkout == "0" ? 'selected' : '');  ?> value="0">None</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_checkout == "1" ? 'selected' : '');  ?> value="1">Auto Reply</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_checkout == "2" ? 'selected' : '');  ?> value="2">AI</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_checkout == "3" ? 'selected' : '');  ?> value="3">Social Icon</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_checkout == "4" ? 'selected' : '');  ?> value="4">Social Widgets</option>
                            </select>
                        </div>
                        <div class="form-field">
                            <label for="display_front_page">Display Contact-Us Page:</label>
                            <select name="display_page" class="form-select cnc-select">
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_page == "0" ? 'selected' : '');  ?> value="0">None</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_page == "1" ? 'selected' : '');  ?> value="1">Auto Reply</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_page == "2" ? 'selected' : '');  ?> value="2">AI</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_page == "3" ? 'selected' : '');  ?> value="3">Social Icon</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_page == "4" ? 'selected' : '');  ?> value="4">Social Widgets</option>
                            </select>
                        </div>
                        <div class="form-field">
                            <label for="display_front_page">Display Accounnt Page:</label>
                            <select name="display_account_page" class="form-select cnc-select">
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_account_page == "0" ? 'selected' : '');  ?> value="0">None</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_account_page == "1" ? 'selected' : '');  ?> value="1">Auto Reply</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_account_page == "2" ? 'selected' : '');  ?> value="2">AI</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_account_page == "3" ? 'selected' : '');  ?> value="3">Social Icon</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_account_page == "4" ? 'selected' : '');  ?> value="4">Social Widgets</option>
                            </select>
                        </div>
                        <div class="form-field">
                            <label for="display_front_page">Display Shop Page:</label>
                            <select name="display_shop" class="form-select cnc-select">
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_shop == "0" ? 'selected' : '');  ?> value="0">None</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_shop == "1" ? 'selected' : '');  ?> value="1">Auto Reply</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_shop == "2" ? 'selected' : '');  ?> value="2">AI</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_shop == "3" ? 'selected' : '');  ?> value="3">Social Icon</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_shop == "4" ? 'selected' : '');  ?> value="4">Social Widgets</option>
                            </select>
                        </div>
                        <div class="form-field">
                            <label for="display_front_page">Display Product Page:</label>
                            <select name="display_product" class="form-select cnc-select">
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_product == "0" ? 'selected' : '');  ?> value="0">None</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_product == "1" ? 'selected' : '');  ?> value="1">Auto Reply</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_product == "2" ? 'selected' : '');  ?> value="2">AI</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_product == "3" ? 'selected' : '');  ?> value="3">Social Icon</option>
                                <option <?php echo esc_html($click_n_chat_setting_popup->display_product == "4" ? 'selected' : '');  ?> value="4">Social Widgets</option>
                            </select>
                       </div>
                        <p id="name-description">
                            <b>Default Type</b> will be visible on any other page</p>
                        </p>
                   	</div>
               	</div>
                <div class="form-wrap cnc-custom-col-gap-4">
                	<div style="width:200px; border:1px solid #f1f1f1; border-radius:5px">
                    	<img style="width:100%; border-radius:5px" id="pop_type_view_img" src="<?php echo esc_html(CLICK_N_CHAT_DIR_URL .'assets/images/'.$click_n_chat_setting_popup->pop_type.'view.png');  ?>" />
                    </div>
                    <br />
                    <p>
                        <b>Social Widgets: </b> Onclick chat popup opens social users widgets
                    </p>
                    <p>
                        <b>Social Icon: </b> Onclick chat popup opens social users social icons 
                    </p>
                    <p>
                        <b>AI: </b> Onclick chat popup opens chat using <a href="?page=wa-clicknchat&tab=chatgpt">AI</a>
                    </p>
                    <p>
                        <b>Auto Reply: </b> Onclick chat popup opens chat using <a href="?page=wa-clicknchat&tab=autoreply">Auto Reply</a>
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Page Widget -->
        <div id="page-widget-tab" class="tab-content-item" style="display: none;">
            <p class="mt-2">
            	* Add the <b>[cnc_chatbot_widget]</b> shortcode to any page or post where you want the chatbot widget to appear. 
            </p>
            <div class="cnc-custom-gap-row mt-3">
                <div class="form-wrap cnc-custom-col-gap-6">
                    <div class="cnc-container cnc-bg-white cnc-shadow">
                        <div class="form-field">
                            <label for="widget_style">Widgets:</label>
                            <select id="widget_style" name="widget_style" class="form-select cnc-select">
                               <option <?php echo esc_html($click_n_chat_setting_popup->widget_style == "justicons" ? 'selected' : '');  ?> value="justicons">Social Icons</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->widget_style == "wgs1" ? 'selected' : '');  ?> value="wgs1">Widget 1</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->widget_style == "wgs2" ? 'selected' : '');  ?> value="wgs2">Widget 2</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->widget_style == "wgs3" ? 'selected' : '');  ?> value="wgs3">Widget 3</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->widget_style == "wgs4" ? 'selected' : '');  ?> value="wgs4">Widget 4</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->widget_style == "wgs5" ? 'selected' : '');  ?> value="wgs5">Widget 5</option>
                               <option <?php echo esc_html($click_n_chat_setting_popup->widget_style == "wgs6" ? 'selected' : '');  ?> value="wgs6">Widget 6</option>
                            </select>
                        </div>
                        <div class="form-field" id="justIconsSize" style="display:<?php echo esc_html($click_n_chat_setting_popup->widget_style == 'justicons' ? 'block' : 'none');  ?>">
                            <label for="welcome_message">Icons Size:</label>
                            <input type="range" class="form-rangs customRange" value="<?php echo esc_html($click_n_chat_setting_popup->widget_icon_size);  ?>" min="20" max="80" step="1" name="widget_icon_size" id="widget_icon_size" data-span="widgetIconSizeRangeValue">
                            <b><span id="widgetIconSizeRangeValue"><?php echo esc_html($click_n_chat_setting_popup->widget_icon_size);  ?></span>px</b>
widget_icon_size
						</div>
                    </div>
                </div>
                <div class="form-wrap cnc-custom-col-gap-4">
                    <div class="cnc-containers">	
                         <div id="justIconsView" style="display:<?php echo esc_html($click_n_chat_setting_popup->widget_style == 'justicons' ? 'block' : 'none');  ?>" style="text-align:center">
                             <img class="cnc-wooicons" src="<?php echo esc_html(CLICK_N_CHAT_DIR_URL . 'assets/images/svgs/whatsapp.svg'); ?>" width="<?php echo esc_html($click_n_chat_setting_popup->widget_icon_size);  ?>" />
                             <img class="cnc-wooicons" src="<?php echo esc_html(CLICK_N_CHAT_DIR_URL . 'assets/images/svgs/telegram.svg'); ?>" width="<?php echo esc_html($click_n_chat_setting_popup->widget_icon_size);  ?>" />
                             <img class="cnc-wooicons" src="<?php echo esc_html(CLICK_N_CHAT_DIR_URL . 'assets/images/svgs/youtube.svg'); ?>" width="<?php echo esc_html($click_n_chat_setting_popup->widget_icon_size);  ?>" />
                             <img class="cnc-wooicons" src="<?php echo esc_html(CLICK_N_CHAT_DIR_URL . 'assets/images/svgs/instagram.svg'); ?>" width="<?php echo esc_html($click_n_chat_setting_popup->widget_icon_size);  ?>" />
                         </div>
                         
                         <?php
                            $items = ['1', '2', '3', '4', '5', '6'];
                            $rows = 2;
                            $columns = ceil(count($items) / $rows);
                            
                            $table = array_fill(0, $rows, array());
                            
                            for ($i = 0; $i < count($items); $i++) {
                                $rowIndex = $i % $rows;
                                $table[$rowIndex][] = $items[$i];
                            }
                                     
                            foreach ($table as $row) {
                            ?><?php
                            foreach ($row as $item) {
                                $pop_up_style = "wgs".$item;
                            ?>
                            <div id="widget-<?php echo esc_html($pop_up_style);  ?>" style="display:<?php echo esc_html($click_n_chat_setting_popup->widget_style == $pop_up_style ? 'block' : 'none');  ?>">
                                <div id="cnc-chatbot-popup" style="box-shadow:none; border-radius:0px;height: 100px; width:310px">
                                    <div id="<?php echo esc_html($pop_up_style);  ?>-cnc-widget" style="height: auto; overflow-y: auto; margin:0px">
                                        
                                        <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-container">
                                            <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-item">
                                                
                                                <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-icon-div">
                                                    <img src="<?php echo esc_html((CLICK_N_CHAT_DIR_URL . 'assets/images/call-icon11.png'));  ?>" class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-icon">
                                                </div>
                                                <div class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-details">
                                                    <span class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-designation">Support</span>
                                                    <span class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-name">John Doe</span>
                                                    <span class="<?php echo esc_html($pop_up_style);  ?>-cnc-widget-description">Need Help? Just Click</span>
                                                </div>
                                            </div>
                                        </div>
                                     
                                    </div>
                                </div>
                            </div>
                            <?php
                            }
                            ?>
                            
                            <?php
                        } 
                        ?>
                    </div>
                </div>
           	</div>
        </div>
        
        <!-- Chat -->
        <div id="chat-tab" class="tab-content-item" style="display: none;">
            <div class="cnc-custom-gap-row mt-5">
                <div class="form-wrap cnc-custom-col-gap-6">
                    <div class="cnc-container cnc-bg-white cnc-shadow">
                        <div class="form-field">
                            <label for="availability">Greetings Message:</label>
                            <?php 
								$content = stripslashes(html_entity_decode($click_n_chat_greetings_message));
								$editor_id = 'click_n_chat_greetings_message';  
								$settings = array(
									'textarea_name' => 'click_n_chat_greetings_message',  
									'media_buttons' => true,  
									'textarea_rows' => 5,  
									'teeny'         => false,  
									'quicktags'     => true,
									'class'			=> 'cnc-chat-info'
								);
								
								wp_editor($content, $editor_id, $settings);
							?>
                        </div>
                        <div class="form-field">
                            <label for="availability">Chat Receive Skin:</label>
                            <div class="cnc-color-picker-container">
                              <input type="text" id="chat_bg_color" name="chat_bg_color" value="<?php echo esc_attr($click_n_chat_setting_popup->chat_bg_color); ?>" class="cnc-color-input cnc-chat-info" placeholder="Enter color or select">
                              <a class="cnc-color-btn cncColorPickerBtn" data-option = "cncSkinColorOptions"><span class="dashicons dashicons-color-picker"></span></a>
                              <div class="cnc-color-options cncSkinColorOptions">
                                <?php
                                foreach ($chat_skin_colors as $color) {
                                ?>
                                    <div data-id="chat_bg_color" data-option = "cncSkinColorOptions" class="cnc-color-option" style="background:<?php echo esc_attr($color) ?>;" data-color="<?php echo esc_attr($color) ?>"></div>
                                <?php
                                }
                                foreach ($background_colors as $color) {
                                ?>
                                    <div data-id="chat_bg_color" data-option = "cncSkinColorOptions" class="cnc-color-option" style="background:<?php echo esc_attr($color) ?>;" data-color="<?php echo esc_attr($color) ?>"></div>
                                <?php
                                }
                                foreach ($gradient_colors as $color) {
                                ?>
                                    <div data-id="chat_bg_color" data-option = "cncSkinColorOptions" class="cnc-color-option" style="background:<?php echo esc_attr($color) ?>;" data-color="<?php echo esc_attr($color) ?>"></div>
                                <?php
                                }
                                ?>
                              </div>
                            </div>
                        </div>
                        <div class="form-field">
                            <label for="availability">Ask for Lead Name, Email, and Phone on Chat Start?</label>
                            <label class="cnc-switch">
                                <input name="chat_name_start" id="chat_name_start" class="cnc-user-status" type="checkbox" <?php echo esc_html(($click_n_chat_setting_popup->chat_name_start == "1" ? "checked" : ""));  ?> >
                                <span class="cnc-switch-slider"></span>
                            </label>
                        </div>
                        <div class="form-field">
                            <label for="availability">Enable Lead Logs:</label>
                            <label class="cnc-switch">
                                <input name="chat_logs" id="chat_logs" class="cnc-user-status" type="checkbox" <?php echo esc_html(($click_n_chat_setting_popup->chat_logs == "1" ? "checked" : ""));  ?> >
                                <span class="cnc-switch-slider"></span>
                            </label>
                        </div>
                	</div>
              	</div>
                <div class="form-wrap cnc-custom-col-gap-6">
                	<div class="cnc-right-fixed">
                    	<div class="cnc-message received tri-right left-top">
                        	<div id="cnc-received-content" class="cnc-received-content" style="background:<?php echo esc_attr($click_n_chat_setting_popup->chat_bg_color); ?>"><?php echo stripslashes(html_entity_decode($click_n_chat_greetings_message)) ?></div>
						</div>
                    </div>
                </div>
           	</div>
        </div>
        <!-- Timezone -->
        <div id="timezone-tab" class="tab-content-item" style="display: none;">
            <div class="cnc-custom-gap-row mt-5">
                <div class="form-wrap cnc-custom-col-gap-6">
                    <div class="cnc-container cnc-bg-white cnc-shadow">
                        <div class="form-field">
                            <label for="name">Timezone:</label>
                            <?php
								$time_zones = DateTimeZone::listIdentifiers();
							?> 	
							<select name="click_n_chat_time_zone" class="form-select">
							<?php
								foreach ($time_zones as $zone) {
									echo '<option '.esc_attr($zone == $click_n_chat_time_zone ? 'selected' : '').' value="' . esc_attr($zone) . '">' . esc_html($zone) . '</option>';
								}
							?>
							</select>
                            <p id="name-description">
                                 <b>Timezone: </b> Which timezone social users will be available?
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<p class="submit">
    <input type="submit" name="submit" id="submit" class="button button-primary" value="Update Setting">
</p>    
</form>
<?php
}