<div class="card card-primary card-outline card-outline-tabs">
	<div class="card-header">
		<h5 class="m-0">Settings</h5>
	</div>
	<div class="card-body">
		<form id="settings" method="post">
			<div class="row">
				<div class="col-md-12">
					<div class="box">
						<div class="box-body">
							<button name="save" type="submit" class="btn btn-primary">Save</button>

							<button form="reset-settings-form" name="reset" type="submit" class="btn btn-warning position-absolute" style="right: 0; top: 0" onclick="return confirm('Are you sure? This will clear all settings for this plugin!')">Reset</button>
						</div>

						<br/>
						{{ settingsParsed|raw }}
					</div>
				</div>
			</div>
		</form>
	</div>
</div>

<form id="reset-settings-form" method="post" action="{{ constant('ADMIN_URL') }}?p=settings&plugin={{ pluginName }}">
	{{ csrf() }}
	<input type="hidden" name="reset" value="1">
</form>

<style>
	.setting-default {
		white-space: pre-wrap;
	}
</style>
<script>
	function doShowHide(el, show)
	{
		if (show) {
			$(el).show()
		}
		else {
			$(el).hide()
		}
	}

{% for key, value in settings %}
	{% if value.show_if is defined %}
		$(function () {
			{% set inputType = 'input' %}

			{% if settings[value.show_if[0]]['type'] == 'options' %}
				{% set inputType = 'select' %}
			{% endif %}

			$('{{ inputType }}[name="settings[{{ value.show_if[0] }}]"]').change(function () {
				performChecks_{{ key }}(this);
			});

			{% if settings[value.show_if[0]]['type'] == 'boolean' %}
			performChecks_{{ key }}('input[name="settings[{{ value.show_if[0] }}]"]:checked');
			{% else %}
			performChecks_{{ key }}('{{ inputType }}[name="settings[{{ value.show_if[0] }}]"]');
			{% endif %}
		});

		function performChecks_{{ key }}(el)
		{
			let success = false;

			let thisVal = $(el).val();
			{% if settings[value.show_if[0]]['type'] == 'options' %}
			thisVal = $(el).find(":selected").val();
			{% endif %}

			let operator = '{{ value.show_if[1]|raw }}';
			if (operator === '>') {
				success = thisVal > Number('{{ value.show_if[2] }}');
			}
			else if (operator === '<') {
				success = thisVal < Number('{{ value.show_if[2] }}');
			}
			else if (operator === '==' || operator === '=') {
				success = thisVal == '{{ value.show_if[2] }}';
			}

			doShowHide('#row_{{ key }}', success);
		}
	{% endif %}
{% endfor %}
</script>
{{ script|raw }}
<!-- jQuery Form Submit No Refresh + Toastify -->
<link rel="stylesheet" type="text/css" href="{{ constant('BASE_URL') }}tools/css/toastify.min.css">
<script type="text/javascript" src="{{ constant('BASE_URL') }}tools/js/toastify.min.js"></script>
{{ include('script.ajax-setup.html.twig') }}

<script>
	const noChangesText = "No changes has been made";

	$('form')
		.each(function(){
			$(this).data('serialized', $(this).serialize())
		})
		.on('change input', function(){
			const disable = $(this).serialize() === $(this).data('serialized');
			$(this)
				.find('button[name="save"]')
				.prop('disabled', disable)
				.prop('title', disable ? noChangesText : '')
			;
		})
		.find('button[name="save"]')
		.prop('disabled', true)
		.prop('title', noChangesText)
	;

	$('#settings').on('submit', function(e) {
		e.preventDefault();

		$.ajax({
			type: 'POST',
			url: '{{ constant('ADMIN_URL') }}tools/settings_save.php?plugin={{ settingsKeyName }}',
			data : $(this).serialize(),
			success : function(response) {
				Toastify({
					position: 'center',
					text: response,
					duration: 3000,
					escapeMarkup: false,
				}).showToast();

				let $settings = $('#settings');
				$settings.data('serialized', $settings.serialize());
				$settings
					.find('button[name="save"]')
					.prop('disabled', true)
					.prop('title', noChangesText);
			},
			error : function(response) {
				Toastify({
					position: 'center',
					text: response.responseText,
					duration: 3000,
					style: {
						background: 'red',
					},
					escapeMarkup: false,
				}).showToast();
			}
		});
	});
</script>

<script>
{% for key, value in settings %}
	{% if value.type == 'password' %}
			$(function () {
				$('#show-hide-{{ key}} a').on('click', function(event) {
					event.preventDefault();

					const $showHideIcon = $('#show-hide-{{ key}} i');
					const $showHideInput = $('#show-hide-{{ key }} input');
					if($showHideInput.attr('type') === 'text'){
						$showHideInput.attr('type', 'password');
						$showHideIcon.addClass('fa-eye-slash');
						$showHideIcon.removeClass('fa-eye');
					}else if($showHideInput.attr("type") === 'password'){
						$showHideInput.attr('type', 'text');
						$showHideIcon.removeClass('fa-eye-slash');
						$showHideIcon.addClass('fa-eye');
					}
				});
			});
	{% endif %}
{% endfor %}
</script>

<script>
	$(function () {
		if ($('.tab-content').length) {

			let url = window.location.href;
			let activeTab = url.substring(url.indexOf("#") + 1);

			let $selector = $('[href="#' + activeTab + '"]')
			if ($selector.length) {
				$selector.tab('show');
			}
		}

		let url = location.href.replace(/\/$/, "");
		$('a[data-toggle="tab"]').on("click", function() {
			let newUrl;
			const hash = $(this).attr("href");
			if(hash === "#home") {
				newUrl = url.split("#")[0];
			} else {
				newUrl = url.split("#")[0] + hash;
			}

			history.replaceState(null, null, newUrl);
		});
	});
</script>
