Files
numstation-web/resources/views/themes/tailwind/cms/settings/index.blade.php

587 lines
20 KiB
PHP
Raw Normal View History

2023-12-22 12:35:55 +08:00
@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