<?php
/** 
 * @package     VikRestaurants
 * @subpackage  core
 * @author      E4J s.r.l.
 * @copyright   Copyright (C) 2023 E4J s.r.l. All Rights Reserved.
 * @license     http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 * @link        https://vikwp.com
 */

// No direct access
defined('ABSPATH') or die('No script kiddies please!');

JHtml::fetch('vrehtml.assets.colorpicker');

$name    = !empty($displayData['name'])       ? $displayData['name']  : 'name';
$id      = !empty($displayData['id'])         ? $displayData['id']    : preg_replace("/[^a-zA-Z0-9\-_]+/", '_', (string) $name);
$value   = isset($displayData['value'])       ? $displayData['value'] : '';
$class   = isset($displayData['class'])       ? $displayData['class'] : '';
$hint    = isset($displayData['placeholder']) ? $displayData['placeholder'] : '';
$preview = !empty($displayData['preview'])    ? true : false;

$value = ltrim($value, '#');

?>

<div class="<?php echo $preview ? 'input-prepend ' : ''; ?>input-append">
	<?php if ($preview): ?>
		<span class="btn color-picker-preview" style="background-color: #<?php echo $this->escape($value); ?>;">&nbsp;&nbsp;</span>
	<?php endif; ?>

	<input
		type="text"
		name="<?php echo $this->escape($name); ?>"
		id="<?php echo $this->escape($id); ?>"
		value="<?php echo $this->escape($value); ?>"
		class="<?php echo $this->escape($class); ?>"
		<?php echo $hint ? 'placeholder="' . $this->escape($hint) . '"' : ''; ?>
	/>

	<button type="button" class="btn">
		<i class="fas fa-eye-dropper"></i>
	</button>
</div>

<script>
	(function($) {
		'use strict';

		$(function() {
			const input   = $('#<?php echo $id; ?>');
			const button  = input.next('button');
			const preview = input.prev('.color-picker-preview');
			
			button.ColorPicker({
				color: input.val(),
				onBeforeShow: () => {
					// always restore the color before opening the colorpicker,
					// as the user might have manually updated it
					button.ColorPickerSetColor(input.val());
				},
				onChange: (hsb, hex, rgb) => {
					input.val(hex.toUpperCase());
					input.trigger('change');
				},
			});

			if (preview.length) {
				input.on('change', function() {
					let color = $(this).val();

					if (color) {
						color = '#' + color;
					} else {
						color = 'inherit';
					}

					// update preview too
					preview.css('background-color', color);
				});
			}
		});
	})(jQuery);
</script>
