JezK

Edit File: 12chat.php

<?php 
if ( ! defined( 'ABSPATH' ) ) { exit; }
global $foxtool_options; ?>
<h2><?php _e('CHAT', 'foxtool'); ?></h2>
<div class="ft-on">
<label class="nut-fton">
<input class="toggle-checkbox" id="check12" data-target="play12" type="checkbox" name="foxtool_settings[chat]" value="1" <?php if ( isset($foxtool_options['chat']) && 1 == $foxtool_options['chat'] ) echo 'checked="checked"'; ?> />
<span class="ftder"></span></label>
<label class="ft-on-right"><?php _e('ON/OFF', 'foxtool'); ?></label>
</div>
<div id="play12" class="ft-card toggle-div">
  <h3><i class="fa-regular fa-message-lines"></i> <?php _e('Create a chat feature for users', 'foxtool') ?></h3>
	<p>
	<label class="nut-switch">
	<input type="checkbox" name="foxtool_settings[chat-nut1]" value="1" <?php if ( isset($foxtool_options['chat-nut1']) && 1 == $foxtool_options['chat-nut1'] ) echo 'checked="checked"'; ?> />
	<span class="slider"></span></label>
	<label class="ft-label-right"><?php _e('Enable chat button', 'foxtool'); ?></label>
	</p>
	<p>
	<label class="nut-switch">
	<input type="checkbox" name="foxtool_settings[chat-nut-js]" value="1" <?php if ( isset($foxtool_options['chat-nut-js']) && 1 == $foxtool_options['chat-nut-js'] ) echo 'checked="checked"'; ?> />
	<span class="slider"></span></label>
	<label class="ft-label-right"><?php _e('Hide chat button when scrolling down', 'foxtool'); ?></label>
	</p>
	<h4><?php _e('Display options', 'foxtool'); ?></h4>
	<div id="ft-imgstyle3" class="ft-imgstyle ft-imgstyle6">
		<img src="<?php echo esc_url(FOXTOOL_URL .'img/chat/1.png'); ?>" data-value="Default" class="<?php if(isset($foxtool_options['chat-nut-skin']) && $foxtool_options['chat-nut-skin'] == 'Default') echo 'selected'; ?>" />
		<img src="<?php echo esc_url(FOXTOOL_URL .'img/chat/2.png'); ?>" data-value="Total" class="<?php if(isset($foxtool_options['chat-nut-skin']) && $foxtool_options['chat-nut-skin'] == 'Total') echo 'selected'; ?>" />
		<img src="<?php echo esc_url(FOXTOOL_URL .'img/chat/3.png'); ?>" data-value="Effective" class="<?php if(isset($foxtool_options['chat-nut-skin']) && $foxtool_options['chat-nut-skin'] == 'Effective') echo 'selected'; ?>" />
		<img src="<?php echo esc_url(FOXTOOL_URL .'img/chat/4.png'); ?>" data-value="Leaves" class="<?php if(isset($foxtool_options['chat-nut-skin']) && $foxtool_options['chat-nut-skin'] == 'Leaves') echo 'selected'; ?>" />
		<img src="<?php echo esc_url(FOXTOOL_URL .'img/chat/5.png'); ?>" data-value="Floating" class="<?php if(isset($foxtool_options['chat-nut-skin']) && $foxtool_options['chat-nut-skin'] == 'Floating') echo 'selected'; ?>" />
		<img src="<?php echo esc_url(FOXTOOL_URL .'img/chat/6.png'); ?>" data-value="Tap" class="<?php if(isset($foxtool_options['chat-nut-skin']) && $foxtool_options['chat-nut-skin'] == 'Tap') echo 'selected'; ?>" />
	</div>
	<input type="hidden" name="foxtool_settings[chat-nut-skin]" id="chat-nut-skin" value="<?php if(!empty($foxtool_options['chat-nut-skin'])){echo sanitize_text_field($foxtool_options['chat-nut-skin']);} else {echo sanitize_text_field('Default');} ?>" />
	<script>
		document.addEventListener("DOMContentLoaded", function() {
			var imgStyles = document.querySelectorAll('#ft-imgstyle3 img');
			imgStyles.forEach(function(img) {
				img.addEventListener('click', function() {
					var selectedStyle = this.getAttribute('data-value');
					document.getElementById('chat-nut-skin').value = selectedStyle;
					imgStyles.forEach(function(img) {
						img.classList.remove('selected');
					});
					this.classList.add('selected');
				});
			});
		});
	</script>
	<h4><?php _e('Configure buttons', 'foxtool'); ?></h4>
	<p class="ft-note"><i class="fa-regular fa-lightbulb-on"></i> <?php _e('Visit this page to get the SVG icon:', 'foxtool'); ?> <b><a target="_blank" href="https://lineicons.com/free-icons">lineicons.com</a> [Copy SVG]</b><br>
	<b>Custom, Maps:</b> <?php _e('Enter link', 'foxtool'); ?><br>
	<b>Phone, SMS, Messenger, Telegram, Zalo, Whatsapp, Viber, Skype, Tiktok, Mail:</b> <?php _e('Enter ID', 'foxtool'); ?>
	</p>
	<div id="sortable-list">
	<div data-id="1" class="ui-state-default ft-button-grid">
	<?php $styles = array('Custom', 'Phone', 'SMS', 'Messenger', 'Telegram', 'Zalo', 'Whatsapp', 'Viber', 'Skype', 'Tiktok', 'Mail', 'Maps'); ?>
	<select name="foxtool_settings[chat-nut11]"> 
	<?php foreach($styles as $style) { ?> 
	<?php if(isset($foxtool_options['chat-nut11']) && $foxtool_options['chat-nut11'] == $style) { $selected = 'selected="selected"'; } else { $selected = ''; } ?>
	<option value="<?php echo $style; ?>" <?php echo $selected; ?>><?php echo $style; ?></option> 
	<?php } ?> 
	</select>
	<div class="ft-button-grid-in">
	<input class="ft-input-big" placeholder="<?php _e('Enter button name', 'foxtool'); ?>" type="text" name="foxtool_settings[chat-nut21]" value="<?php if(!empty($foxtool_options['chat-nut21'])){echo sanitize_text_field($foxtool_options['chat-nut21']);} ?>" />
	<input class="ft-input-big" placeholder="<?php _e('Enter link', 'foxtool'); ?>" type="text" name="foxtool_settings[chat-nut31]" value="<?php if(!empty($foxtool_options['chat-nut31'])){echo sanitize_text_field($foxtool_options['chat-nut31']);} ?>" />
	<textarea style="height:40px;" class="ft-code-textarea" name="foxtool_settings[chat-nut41]" placeholder="<?php _e('Enter the SVG icon', 'foxtool'); ?>"><?php if(!empty($foxtool_options['chat-nut41'])){echo esc_textarea($foxtool_options['chat-nut41']);} ?></textarea>
	</div>
	<div class="fr-move"><i class="fa-regular fa-grip-dots-vertical"></i></div>
	</div>
	<?php
	if (is_array($foxtool_options) || is_object($foxtool_options)) {
		foreach ($foxtool_options as $key => $value) {
			if (preg_match('/^chat-nut1(\d+)$/', $key, $matches) && $matches[1] != 1) {
				$n = $matches[1];
				echo '<div data-id="' . $n . '" class="ui-state-default ft-button-grid">';
				echo '<select name="foxtool_settings[chat-nut1' . $n . ']">';
				foreach ($styles as $style) {
					$selected = ($style == $value) ? 'selected="selected"' : '';
					echo '<option value="' . $style . '" ' . $selected . '>' . $style . '</option>';
				}
				echo '</select>';
				echo '<div class="ft-button-grid-in">';
				echo '<input class="ft-input-big" placeholder="'. __('Enter button name', 'foxtool') .'" type="text" name="foxtool_settings[chat-nut2' . $n . ']" value="' . sanitize_text_field($foxtool_options['chat-nut2' . $n]) . '" />';
				echo '<input class="ft-input-big" placeholder="'. __('Enter link', 'foxtool') .'" type="text" name="foxtool_settings[chat-nut3' . $n . ']" value="' . sanitize_text_field($foxtool_options['chat-nut3' . $n]) . '" />';
				echo '<textarea style="height:40px;" class="ft-code-textarea" name="foxtool_settings[chat-nut4' . $n . ']" placeholder="'. __('Enter the SVG icon', 'foxtool') .'">' . esc_textarea($foxtool_options['chat-nut4' . $n]) . '</textarea>';
				echo '</div>';
				echo '<div class="fr-move"><i class="fa-regular fa-grip-dots-vertical"></i></div><span id="ft-chatx">&#x2715</span>';
				echo '</div>';
			}
		}
	}
	?>
	</div>
	<span id="ft-chatmore"><i class="fa-regular fa-plus"></i> <?php _e('Add field', 'foxtool'); ?></span>
	<script>
	jQuery(document).ready(function($){
		var count = 0;
		$('#ft-chatmore').click(function() {
			var count = $('#sortable-list .ui-state-default:last').data('id') + 1;
			var newDiv = $('<div data-id="' + count + '" class="ui-state-default ft-button-grid">' +
				'<select name="foxtool_settings[chat-nut1' + count + ']">' +
				'<option value="Custom">Custom</option>' +
				'<option value="Phone">Phone</option>' +
				'<option value="SMS">SMS</option>' +
				'<option value="Messenger">Messenger</option>' +
				'<option value="Telegram">Telegram</option>' +
				'<option value="Zalo">Zalo</option>' +
				'<option value="Whatsapp">Whatsapp</option>' +
				'<option value="Viber">Viber</option>' +
				'<option value="Skype">Skype</option>' +
				'<option value="Skype">Tiktok</option>' +
				'<option value="Mail">Mail</option>' +
				'<option value="Maps">Maps</option>' +
				'</select>' +
				'<div class="ft-button-grid-in">' +
				'<input class="ft-input-big" placeholder="<?php _e('Enter button name', 'foxtool'); ?>" type="text" name="foxtool_settings[chat-nut2' + count + ']" />' +
				'<input class="ft-input-big" placeholder="<?php _e('Enter link', 'foxtool'); ?>" type="text" name="foxtool_settings[chat-nut3' + count + ']" />' +
				'<textarea style="height:40px;" class="ft-code-textarea" name="foxtool_settings[chat-nut4' + count + ']" placeholder="<?php _e('Enter the SVG icon', 'foxtool'); ?>"></textarea>' +
				'</div>' +
				'<div class="fr-move"><i class="fa-regular fa-grip-dots-vertical"></i></div><span id="ft-chatx">&#x2715</span>' +
				'</div>');
			$('#sortable-list').append(newDiv);
		});
		$('#sortable-list').on('click', '#ft-chatx', function() {
			$(this).parent('.ui-state-default').remove();
			count--;
		});
	});
	// keo qua lai
	jQuery(function($) {
		$("#sortable-list").sortable({
			connectWith: "#sortable-list",
			update: function(event, ui) {
				updateNames();
			}
		}).disableSelection();