@extends('theme::layouts.app')


@section('content')
	<h2 class="dashboard-title">{{ __("Settings") }}</h2>

	<div class="tabs-navigation blue-tabs">
		<ul>
			<li class="active"><a href="#" class="js-tab-navigate py-4" data-id="#preferred-setting"><img class="dashboard-detail-image max-25" src="{{ asset('themes/tailwind/images/preferred.svg') }}"> {{ __("Preferred Settings") }} </a></li>
			<li><a href="#" class="js-tab-navigate py-4" data-id="#password"><img class="dashboard-detail-image max-25" src="{{ asset('themes/tailwind/images/password.svg') }}"> {{ __("Password") }} </a></li>
			<li><a href="#" class="js-tab-navigate py-4" data-id="#api-key"><img class="dashboard-detail-image max-25" src="{{ asset('themes/tailwind/images/api.svg') }}"> {{ __("API Key") }} </a></li>
			<li><a href="#" class="js-tab-navigate py-4" data-id="#online-help"><img class="dashboard-detail-image max-25" src="{{ asset('themes/tailwind/images/online-help.svg') }}"> {{ __("Online Help") }} </a></li>
			<li><a href="#" class="js-tab-navigate py-4" data-id="#contact-us"><img class="dashboard-detail-image max-25" src="{{ asset('themes/tailwind/images/contact-us.svg') }}"> {{ __("Contact Us") }} </a></li>
		</ul>
	</div>

	<div class="tabs-content">
		<div class="tabs-content-item" id="preferred-setting">
			<form id="updateNotificationSettingsFrm" action="{{ route('cms.settings.update-notification-settings') }}" method="POST">
				<div class="setting-field">
					<h3>{{ __("Push Notification") }}</h3>
					<ul class="setting-item flex">
						<li class="flex space-between">
							<span>{{ __("Queue status") }}</span>
							<label class="setting-item-field setting-item-ticker-check">
								<input type="checkbox" name="notifications[]" value="queue_status" {{ auth()->user()->notificationSettings->where('is_active', true)->contains('notification', 'queue_status') ? 'checked' : '' }}>
								<div class="setting-ticker-check">
									<i class="setting-ticker-circle"></i>
								</div>
							</label>
						</li>
						<li class="flex space-between">
							<span>{{ __("App update") }}</span>
							<label class="setting-item-field setting-item-ticker-check">
								<input type="checkbox" name="notifications[]" value="app_update" {{ auth()->user()->notificationSettings->where('is_active', true)->contains('notification', 'app_update') ? 'checked' : '' }}>
								<div class="setting-ticker-check">
									<i class="setting-ticker-circle"></i>
								</div>
							</label>
						</li>
						<li class="flex space-between">
							<span>{{ __("New enquiry") }}</span>
							<label class="setting-item-field setting-item-ticker-check">
								<input type="checkbox" name="notifications[]" value="new_enquiry" {{ auth()->user()->notificationSettings->where('is_active', true)->contains('notification', 'new_enquiry') ? 'checked' : '' }}>
								<div class="setting-ticker-check">
									<i class="setting-ticker-circle"></i>
								</div>
							</label>
						</li>
					</ul>
				</div>

				<div class="text-center">
					<div class="flex button-group">
						<button type="submit" class="btn primary-button">{{ __("Save") }}</button>
						<button type="reset" class="btn btn-error">{{ __("Reset") }}</button>
					</div>
				</div>
			</form>
		</div>
		<div class="tabs-content-item" id="password" style="display: none;">
			<div class="password-setting">
				<form id="changePassFrm" action="{{ route('cms.settings.update-password') }}" method="POST">
					@csrf

					<div class="flex align-center gap-30">
						<img src="{{ asset('themes/tailwind/images/lock.svg') }}">
						<div class="password-setting__content">
							<div class="form-tabs white-input">
								<div class="flex mb-4">
									<div class="label-field password-field"><label>
										<span>{{ __("Current Password") }}</span>
										<input type="password" placeholder="" value="" name="current_password" required>
										<button type="button" class="eye-clicker password-hide-show"><img src="{{ asset('themes/tailwind/images/eye.svg') }}"></button>
									</label></div>
								</div>
								<div class="flex mb-4">
									<div class="label-field password-field"><label>
										<span>{{ __("New Password") }}</span>
										<input type="password" placeholder="" value="" name="new_password" required>
										<button type="button" class="eye-clicker password-hide-show"><img src="{{ asset('themes/tailwind/images/eye.svg') }}"></button>
									</label></div>
								</div>
								<div class="flex mb-4">
									<div class="label-field password-field"><label>
										<span>{{ __("Confirm Password") }}</span>
										<input type="password" placeholder="" value="" name="new_password_confirmation" required>
										<button type="button" class="eye-clicker password-hide-show"><img src="{{ asset('themes/tailwind/images/eye.svg') }}"></button>
									</label></div>
								</div>
							</div>
						</div>
					</div>

					<div class="text-center">
						<div class="flex button-group">
							<button type="submit" class="btn primary-button">{{ __("Save") }}</button>
						</div>
					</div>
				</form>

			</div>
		</div>
		<div class="tabs-content-item" id="api-key" style="display: none;">
			<form class="form-tabs white-input" id="apiKeyFrm" action="{{ route('cms.settings.update-api-key') }}" method="POST">
				<div class="setting-field">
					<h3>{{ __("Google drive API Key") }}</h3>
					<div class="flex">
						<div class="label-field password-field"><label>
							<span>{{ __("Enter your Google drive API Key") }}</span>
							<input type="text" placeholder="" value="{{ $siteSetting ? $siteSetting->google_drive_api_key : '' }}" name="google_drive_api_key" required>
						</label></div>
					</div>
				</div>

				<div class="text-center">
					<div class="flex button-group">
						<button type="submit" class="btn primary-button">{{ __("Save") }}</button>
					</div>
				</div>
			</form>
		</div>
		<div class="tabs-content-item no-box-shadow" id="online-help" style="display: none;">
			<div id="onlineHelpTableWrapper" class="">
				<table id="onlineHelpTable" class="">
					<thead>
						<tr>
							<td>{{ __("Category") }}</td>
							<td>{{ __("No.") }}</td>
							<td>{{ __("Title") }}</td>
							<td>{{ __("Action") }}</td>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
				<div class="text-center">
					<div class="flex button-group">
						<button type="button" class="btn primary-button show-online-help-frm">{{ __("Add New") }}</button>
					</div>
				</div>
			</div>
			<form class="form-tabs white-input" id="onlineHelpFrm" style="display:none;" action="{{ route('cms.settings.store-online-help') }}" data-store-url="{{ route('cms.settings.store-online-help') }}" data-update-url="{{ route('cms.settings.update-online-help', ':onlineHelpId') }}">
				@csrf
				<div class="flex mb-4">
					<div class="label-field password-field"><label>
						<span>{{ __("Category") }}</span>
						<select class="w-fit-content" name="category" required>
							<option value="online_documents">{{ __("Online Documents") }}</option>
							<option value="faq">{{ __("FAQ") }}</option>
						</select>
					</label></div>
				</div>
				<div class="flex mb-4">
					<div class="label-field"><label>
						<span>{{ __("Title(English)") }}</span>
						<input type="text" placeholder="" value="" name="title_english" required>
					</label></div>
					<div class="label-field"><label>
						<span>{{ __("Title(Chinese)") }}</span>
						<input type="text" placeholder="" value="" name="title_chinese" required>
					</label></div>
				</div>
				<div class="flex mb-4">
					<div class="label-field"><label class="direction-column">
						<span>{{ __("Details(English)") }}</span>
						<textarea class="tinymce-custom" id="details_english" name="details_english"></textarea>
					</label></div>
				</div>
				<div class="flex mb-4">
					<div class="label-field"><label class="direction-column">
						<span>{{ __("Details(Chinese)") }}</span>
						<textarea class="tinymce-custom" id="details_chinese" name="details_chinese"></textarea>
					</label></div>
				</div>
				<div class="flex mb-4">
					<div class="label-field w-fit-content"><label>
						<span>{{ __("Sort") }}</span>
						<input type="number" placeholder="" value="" name="sort" required>
					</label></div>
				</div>

				<div class="text-center">
					<div class="flex button-group">
						<button type="submit" class="btn primary-button">{{ __("Save") }}</button>
						<button type="button" class="btn btn-error hide-online-help-frm">{{ __("Back") }}</button>
					</div>
				</div>
			</form>
		</div>
		<div class="tabs-content-item" id="contact-us" style="display: none;">
			<form class="form-tabs white-input" id="contactUsFrm" action="{{ route('cms.settings.update-contact-us') }}" method="POST">
				@csrf

				<div class="flex mb-4">
					<div class="label-field">
						<label>
							<span>{{ __("Contact number") }}</span>
							<input type="text" name="phone" placeholder="" value="{{ $siteSetting ? $siteSetting->phone : '' }}" required>
						</label>
					</div>
					<div class="label-field">
						<label>
							<span>{{ __("Whatsapp") }}</span>
							<input type="text" name="whatsapp" placeholder="" value="{{ $siteSetting ? $siteSetting->whatsapp : '' }}" required>
						</label>
					</div>
				</div>
				<div class="flex mb-4">
					<div class="label-field"><label>
						<span>{{ __("Email") }}</span>
						<input type="email" name="email" placeholder="" value="{{ $siteSetting ? $siteSetting->email : '' }}" required>
					</label></div>
				</div>
				<div class="flex mb-4">
					<div class="label-field"><label>
						<span>{{ __("Office hour(English)") }}</span>
						<input type="text" name="office_hour_english" placeholder="" value="{{ $siteSetting ? $siteSetting->office_hour_english : '' }}" required>
					</label></div>
					<div class="label-field"><label>
						<span>{{ __("Office hour(Chinese)") }}</span>
						<input type="text" name="office_hour_chinese" placeholder="" value="{{ $siteSetting ? $siteSetting->office_hour_chinese : '' }}" required>
					</label></div>
				</div>
				<div class="flex mb-4">
					<div class="label-field"><label>
						<span>{{ __("Address(English)") }}</span>
						<input type="text" name="address_english" placeholder="" value="{{ $siteSetting ? $siteSetting->address_english : '' }}" required>
					</label></div>
				</div>
				<div class="flex mb-4">
					<div class="label-field"><label>
						<span>{{ __("Address(Chinese)") }}</span>
						<input type="text" name="address_chinese" placeholder="" value="{{ $siteSetting ? $siteSetting->address_chinese : '' }}" required>
					</label></div>
				</div>
				<div class="text-center">
					<div class="flex button-group">
						<button type="submit" class="btn primary-button">{{ __("Save") }}</button>
					</div>
				</div>
			</form>
		</div>
	</div>

@endsection

@section('script')

<script>
	$(document).ready( function () {
    	var currentLanguage = $('#currentLanguage').val();

		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});

	    $(".js-tab-navigate").click(function(e){
	    	e.preventDefault();
	    	var id = jQuery(this).data('id');
	    	jQuery(this).closest('.tabs-navigation').next().find('.tabs-content-item').hide();
	    	jQuery(id).show();
	    	jQuery(this).closest('.tabs-navigation').find('li').removeClass('active');
	    	jQuery(this).parent().addClass('active');
	    });

		// Notification Settings
		$('#updateNotificationSettingsFrm').submit(function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var buttonHtml = button.html();

			if (!button.is(':disabled') && action) {
				button.attr('disabled', 'disabled');
				button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

				$.ajax({
					url: action,
					type: "post",
					data: $(this).serialize(),
					dataType: 'json',
					success:function(data) {
						button.removeAttr('disabled');
						button.html(buttonHtml);

						if (data.success) {
							popToast('success', data.message);
						}
						else {
							popToast('danger', data.message);
						}
					}
				});
			}
		});

		// API Key
		$('#apiKeyFrm').submit(function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var buttonHtml = button.html();

			if (!button.is(':disabled') && action) {
				button.attr('disabled', 'disabled');
				button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

				$.ajax({
					url: action,
					type: "post",
					data: $(this).serialize(),
					dataType: 'json',
					success:function(data) {
						button.removeAttr('disabled');
						button.html(buttonHtml);

						if (data.success) {
							popToast('success', data.message);
						}
						else {
							popToast('danger', data.message);
						}
					}
				});
			}
		});

		// Contact Us
		$('#contactUsFrm').submit(function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var buttonHtml = button.html();

			if (!button.is(':disabled') && action) {
				button.attr('disabled', 'disabled');
				button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

				$.ajax({
					url: action,
					type: "post",
					data: $(this).serialize(),
					dataType: 'json',
					success:function(data) {
						button.removeAttr('disabled');
						button.html(buttonHtml);

						if (data.success) {
							popToast('success', data.message);
						}
						else {
							popToast('danger', data.message);
						}
					}
				});
			}
		});

		// Password
		$('.password-hide-show').click(function() {
			var type = $(this).parent().find('input').attr('type');

			if (type == 'password') {
				$(this).parent().find('input').attr('type', 'text');
			}
			else {
				$(this).parent().find('input').attr('type', 'password');
			}
		});

		$('#changePassFrm').submit(function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var buttonHtml = button.html();

			if (!button.is(':disabled') && action) {
				button.attr('disabled', 'disabled');
				button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

				$.ajax({
					url: action,
					type: "post",
					data: $(this).serialize(),
					dataType: 'json',
					success:function(data) {
						button.removeAttr('disabled');
						button.html(buttonHtml);

						if (data.success) {
							popToast('success', data.message);
						}
						else {
							popToast('danger', data.message);
						}
					}
				});
			}
		});

		// Online Help
		var onlineHelpTable = $("#onlineHelpTable").DataTable({
			processing: true,
			serverSide: true,
			ajax: {
				url: '{{ route("cms.settings.table-online-help") }}',
				type: 'post',
				"dataSrc": function ( json ) {
					for (var i = 0; i < json.data.length; i++) {
						$.each( json.data[i], function( key, value ) {
							json.data[i][key] = value ? value : '-';
						});
					}

					return json.data;
				}    
			},
			columns: [
				{data: 'category_name_display', name: 'category'},
				{data: 'sort', name: 'sort'},
        		(currentLanguage == 'zh_hk' ? {data: 'title_chinese', name: 'title_chinese'} : {data: 'title_english', name: 'title_english'}),
				{data: 'actions', name: 'actions', searchable: false, sortable: false}
			],
			order: [[0, "asc"]],
			searchDelay: 500,
		    "language": {
			      "paginate": {
			        "next": ">",         // Text for the "Next" page button
			        "previous": "<"  // Text for the "Previous" page button
			      },
      				"emptyTable": '{{ __("No data available in table") }}'
			      // Add more text customizations if needed
			    }
		});

		$(document).on('click', '.show-online-help-frm', function(e) {
			e.preventDefault();
			tinymce.init({
				selector:'.tinymce-custom',
				menubar: false,
				toolbar: "undo redo spellcheckdialog  | blocks fontsize | bold italic | link image | alignleft aligncenter alignright alignjustify | indent outdent",
				setup: function (editor) {
					editor.on('change', function () {
						tinymce.triggerSave();
					});
				}
			});

			var frmType = $(this).attr('data-frm-type') ? $(this).attr('data-frm-type') : 'add';
			$('#onlineHelpTableWrapper').hide();
			$('#onlineHelpFrm').show();

			if (frmType == 'edit' || frmType == 'view') {
				var id = $(this).attr('data-id');
				var fields = JSON.parse($(this).attr('data-fields'));
				var url = $('#onlineHelpFrm').attr('data-update-url');
				url = url.replace(':onlineHelpId', id);
				
				$('#onlineHelpFrm').attr('action', url);
				$('#onlineHelpFrm select[name="category"]').val(fields.category);
				$('#onlineHelpFrm input[name="title_english"]').val(fields.title_english);
				$('#onlineHelpFrm input[name="title_chinese"]').val(fields.title_chinese);
				$('#onlineHelpFrm textarea[name="details_english"]').val(fields.details_english);
				$('#onlineHelpFrm textarea[name="details_chinese"]').val(fields.details_chinese);
				$('#onlineHelpFrm input[name="sort"]').val(fields.sort);
				tinyMCE.get('details_english').setContent(fields.details_english);
				tinyMCE.get('details_chinese').setContent(fields.details_chinese);

				if (frmType == 'view') {
					$('#onlineHelpFrm input').attr('disabled', 'disabled');
					$('#onlineHelpFrm select').attr('disabled', 'disabled');
					setTimeout(() => {
						tinymce.get('details_english').getBody().setAttribute('contenteditable', false);
						tinymce.get('details_chinese').getBody().setAttribute('contenteditable', false);
					}, 500);
				}
				else {
					$('#onlineHelpFrm input').removeAttr('disabled');
					$('#onlineHelpFrm select').removeAttr('disabled');
					setTimeout(() => {
						tinymce.get('details_english').getBody().setAttribute('contenteditable', true);
						tinymce.get('details_chinese').getBody().setAttribute('contenteditable', true);
					}, 500);
				}
			}
			else {
				$('#onlineHelpFrm').attr('action', $('#onlineHelpFrm').attr('data-store-url'));
			}
		});
		$('.hide-online-help-frm').click(function() {
			$('#onlineHelpTableWrapper').show();
			$('#onlineHelpFrm').hide();
		});

		$('#onlineHelpFrm').submit(function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var buttonHtml = button.html();

			if (!button.is(':disabled') && action) {
				button.attr('disabled', 'disabled');
				button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

				var detailsEnglish = tinyMCE.get('details_english').getContent();
				var detailsChinese = tinyMCE.get('details_chinese').getContent();
				if (detailsEnglish == '' || detailsChinese == '') {
					popToast('danger', '{{ __("Fill up all required fields") }}');
					return false;
				}

				$.ajax({
					url: action,
					type: "post",
					data: $(this).serialize(),
					dataType: 'json',
					success:function(data) {
						button.removeAttr('disabled');
						button.html(buttonHtml);

						if (data.success) {
							popToast('success', data.message);
							$('.hide-online-help-frm').click();
							onlineHelpTable.ajax.reload();
						}
						else {
							popToast('danger', data.message);
						}
					},
					error: function(data) {
						var errors = data.responseJSON.errors;
						$.each(errors, function(index, error) {
							popToast('danger', errors[0]);
							return false;
						});

						button.removeAttr('disabled');
						button.html(buttonHtml);
					}
				});
			}
		});

		$(document).on('click', '#onlineHelpTable .delete-online-help', function(e) {
			var action = $(this).attr('data-action');

			if (action) {
				Swal.fire({
					title: '{{ __("Are you sure?") }}',
					text: "You would not be able to revert this!",
					icon: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: '{{ __("Yes") }}',
					cancelButtonText: '{{ __("Cancel") }}'
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url: action,
							type: "post",
							data: {},
							dataType: 'json',
							success:function(data) {
								if (data.success) {
									popToast('success', data.message);
									onlineHelpTable.ajax.reload();
								}
							},
							error: function(data) {
								var errors = data.responseJSON.errors;
								$.each(errors, function(index, error) {
									popToast('danger', errors[0]);
									return false;
								});
							}
						});
					}
				});
			}
		});
	});
</script>

@endsection