<?php
/** 
 * @package     VikAppointments
 * @subpackage  core
 * @author      E4J s.r.l.
 * @copyright   Copyright (C) 2021 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!');

$service = $this->service;

$vik = VAPApplication::getInstance();

?>

<!-- IMAGE - Media -->

<?php
echo $vik->openControl(JText::translate('VAPMANAGESERVICE9'));
echo JHtml::fetch('vaphtml.mediamanager.field', 'image', $service->image);
echo $vik->closeControl();
?>

<!-- LAYOUT - Select -->

<?php
$control = [];
$control['style'] = $service->image ? '' : 'display: none;';

$help = $vik->createPopover([
	'title'   => JText::translate('VAPINVOICELAYOUT'),
	'content' => JText::translate('VAPSERVICELAYOUTDESC'),
]);

$layouts = [
	'default-layout',
	'featured-image',
	'image-banner',
];

$classSuffix = '';

if (!in_array($service->layout, $layouts))
{
	// use the custom layout
	$classSuffix = $service->layout;
	$service->layout = 'custom';
}

$layouts[] = 'custom';

echo $vik->openControl(JText::translate('VAPINVOICELAYOUT') . $help, 'image-child', $control); ?>
	<select name="layout" id="vap-layout-sel">
		<?php
		$options = [];

		foreach ($layouts as $layout)
		{
			$options[] = JHtml::fetch('select.option', $layout, 'VAPSERVICELAYOUT' . strtoupper(str_replace('-', '', $layout)));
		}

		echo JHtml::fetch('select.options', $options, 'value', 'text', $service->layout, true);
		?>
	</select>
<?php echo $vik->closeControl(); ?>

<!-- LAYOUT PREVIEW - Custom -->

<?php
echo $vik->openControl('', 'image-child', $control);
foreach ($layouts as $layout)
{
	?>
	<div class="layout-child <?php echo $this->escape($layout); ?>" style="<?php echo $service->layout == $layout ? '' : 'display: none;'; ?>">
		<?php if ($layout === 'custom'): ?>
			<input type="text" name="layout_class_sfx" value="<?php echo $this->escape($classSuffix); ?>" placeholder="<?php echo $this->escape(JText::translate('VAPSUFFIXCLASS')); ?>" size="30" />
		<?php else: ?>
			<img src="<?php echo VAPASSETS_ADMIN_URI . 'images/' . $layout . '.png'; ?>" style="max-width: 50%; border-radius: 0.25rem;" />
		<?php endif; ?>
	</div>
	<?php
}
echo $vik->closeControl();
?>

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

		$(function() {
			// toggle "layout" according to the selected image
			$('input[name="image"]').on('change', function() {
				if ($(this).mediamanager('val')) {
					$('.image-child').show();
				} else {
					$('.image-child').hide();
				}
			});

			$('#vap-layout-sel').select2({
				minimumResultsForSearch: -1,
				allowClear: false,
				width: 300,
			}).on('change', function() {
				$('.layout-child').hide();
				$('.layout-child.' + $(this).val()).show();
			});
		});
	})(jQuery);
</script>
