<?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!');

VRELoader::import('library.mvc.controllers.admin');

/**
 * VikRestaurants customizer view controller.
 *
 * @since 1.9
 */
class VikRestaurantsControllerCustomizer extends VREControllerAdmin
{
	/**
	 * A preview displaying how the colors palette looks in the front-end.
	 * 
	 * @return  void
	 * 
	 * @since   1.11
	 */
	public function palette_preview()
	{
		?>
		<div style="background: var(--vre-palette-background-primary-color); height: 100vh; padding: 2em;">

			<div style="background: var(--vre-palette-background-primary-color); border: 1px solid var(--vre-palette-background-border-color); border-radius: var(--vre-palette-background-border-radius); padding: 2em; margin-bottom: 2em;">

				<div style="display: flex; gap: 25px; justify-content: space-between;">
					
					<div style="flex: 1;">
						<div style="color: var(--vre-palette-text-primary-color); border: 0; border-bottom: 1px solid var(--vre-palette-background-border-color); padding-bottom: 10px; margin-bottom: 10px;">
							Primary text color over primary background color.
						</div>

						<div style="color: var(--vre-palette-text-secondary-color); border: 0; border-bottom: 1px solid var(--vre-palette-background-border-color); padding-bottom: 10px; margin-bottom: 10px;">
							Secondary text color over primary background color.
						</div>

						<div style="color: var(--vre-palette-text-disabled-color);">
							Disabled text color over primary background color.
						</div>
					</div>

					<div style="display: flex; flex-direction: column; justify-content: center; gap: 10px;">
						
						<input type="text" placeholder="Input text" style="width: 100%;" />

						<div class="vre-select-wrapper" style="width: 100%;">
							<select class="vre-select" style="width: 100%;"><option>Dropdown option</option></select>
						</div>

					</div>

				</div>

			</div>

			<div style="background: var(--vre-palette-background-secondary-color); border-radius: var(--vre-palette-background-border-radius); padding: 2em;">
				
				<div style="display: flex; gap: 25px; justify-content: space-between;">
					
					<div style="flex: 1;">

						<div style="color: var(--vre-palette-text-primary-color); border: 0; border-bottom: 1px solid var(--vre-palette-background-border-color); padding-bottom: 10px; margin-bottom: 10px;">
							Primary text color over secondary background color.
						</div>

						<div style="color: var(--vre-palette-text-secondary-color); border: 0; border-bottom: 1px solid var(--vre-palette-background-border-color); padding-bottom: 10px; margin-bottom: 10px;">
							Secondary text color over secondary background color.
						</div>

						<div style="color: var(--vre-palette-text-disabled-color);">
							Disabled text color over secondary background color.
						</div>

					</div>

					<div style="display: flex; flex-direction: column; justify-content: center; gap: 10px;">
						
						<input type="text" placeholder="Input text" style="width: 100%;" />

						<div class="vre-select-wrapper" style="width: 100%;">
							<select class="vre-select" style="width: 100%;"><option>Dropdown option</option></select>
						</div>

					</div>

				</div>

			</div>
			
		</div>
		<?php
	}

	/**
	 * A preview displaying how the buttons look in the front-end.
	 * 
	 * @return  void
	 */
	public function button_preview()
	{
		JHtml::fetch('vrehtml.assets.fontawesome');

		?>
		<style>
			i.fa-plus-square {
				color: var(--vre-button-success-background);
				cursor: pointer;
			}
			i.fa-plus-square:hover {
				color: var(--vre-button-success-hover-icon-color);
			}
			i.fa-trash {
				color: var(--vre-button-danger-background);
				cursor: pointer;
			}
			i.fa-trash:hover {
				color: var(--vre-button-danger-hover-icon-color);
			}
		</style>
		<div style="background: var(--vre-palette-background-primary-color); color: var(--vre-palette-text-primary-color); height: 100vh; padding: 2em;">
			<div style="display: flex; justify-content: center;">
				<table>
					<thead>
						<tr>
							<th>&nbsp;</th>
							<th style="text-align: center;">Primary</th>
							<th style="text-align: center;">Secondary</th>
							<th style="text-align: center;">Success</th>
							<th style="text-align: center;">Danger</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Small</td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn primary small">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn secondary small">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn success small">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn danger small">Button</button></td>
						</tr>
						<tr>
							<td>Normal</td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn primary">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn secondary">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn success">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn danger">Button</button></td>
						</tr>
						<tr>
							<td>Large</td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn primary large">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn secondary large">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn success large">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn danger large">Button</button></td>
						</tr>
						<tr>
							<td>Big</td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn primary big">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn secondary big">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn success big">Button</button></td>
							<td style="text-align: center; padding: 20px;"><button class="vre-btn danger big">Button</button></td>
						</tr>
						<tr>
							<td>Icon</td>
							<td style="text-align: center; padding: 20px;">&nbsp;</td>
							<td style="text-align: center; padding: 20px;">&nbsp;</td>
							<td style="text-align: center; padding: 20px;"><i class="fas fa-plus-square fa-2x icon-success"></i></td>
							<td style="text-align: center; padding: 20px;"><i class="fas fa-trash fa-2x icon-danger"></i></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<?php
	}

	/**
	 * A preview displaying how the custom fields look in the front-end.
	 * 
	 * @return  void
	 */
	public function custom_fields_preview()
	{
		$app = JFactory::getApplication();

		// fetch layout style from the request
		$style = $app->input->get('layout', '');

		/** @var E4J\VikRestaurants\CustomFields\FieldsCollection */
		$customFields = E4J\VikRestaurants\CustomFields\FieldsCollection::getInstance()
			->filter(new E4J\VikRestaurants\CustomFields\Filters\SpecialDayFilter);

		if (VikRestaurants::isTakeAwayEnabled())
		{
			// display the take-away fields as they usually contain more fields
			$customFields = $customFields->filter(new E4J\VikRestaurants\CustomFields\Filters\TakeAwayGroupFilter);
		}
		else
		{
			// take-away disabled, display the fields for the restaurant
			$customFields = $customFields->filter(new E4J\VikRestaurants\CustomFields\Filters\RestaurantGroupFilter);
		}

		// create custom fields renderer for the restaurant group
		$renderer = new E4J\VikRestaurants\CustomFields\FieldsRenderer($customFields);

		// wrap the field within the chosen control style
		$renderer->setControl('form.control.' . $style);

		?>
		<div style="background: var(--vre-palette-background-primary-color); color: var(--vre-palette-text-primary-color); height: 100%; padding: 2em;">
			<div style="display: flex; justify-content: center;">
				<div class="custom-fields-<?php echo htmlspecialchars($style); ?>"><?php echo $renderer->display(); ?></div>
			</div>
		</div>
		<?php
	}
}
