346 lines
18 KiB
PHP
346 lines
18 KiB
PHP
<?php
|
|
|
|
use Illuminate\Support\Facades\Route;
|
|
use Illuminate\Support\Facades\Auth;
|
|
$routeName = Route::currentRouteName();
|
|
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="{{ app()->getLocale() }}">
|
|
<head>
|
|
|
|
{{-- @if(isset($seo->title))
|
|
<title>{{ $seo->title }}</title>
|
|
@else
|
|
<title>{{ setting('site.title', 'Laravel Wave') . ' - ' . setting('site.description', 'The Software as a Service Starter Kit built on Laravel & Voyager') }}</title>
|
|
@endif --}}
|
|
<title>{{ config('app.name', 'Numstation') }}</title>
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- † -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<meta name="url" content="{{ url('/') }}">
|
|
|
|
<link rel="icon" href="{{ setting('site.favicon', '/wave/favicon.png') }}" type="image/x-icon">
|
|
|
|
{{-- Social Share Open Graph Meta Tags --}}
|
|
@if(isset($seo->title) && isset($seo->description) && isset($seo->image))
|
|
<meta property="og:title" content="{{ $seo->title }}">
|
|
<meta property="og:url" content="{{ Request::url() }}">
|
|
<meta property="og:image" content="{{ $seo->image }}">
|
|
<meta property="og:type" content="@if(isset($seo->type)){{ $seo->type }}@else{{ 'article' }}@endif">
|
|
<meta property="og:description" content="{{ $seo->description }}">
|
|
<meta property="og:site_name" content="{{ setting('site.title') }}">
|
|
|
|
<meta itemprop="name" content="{{ $seo->title }}">
|
|
<meta itemprop="description" content="{{ $seo->description }}">
|
|
<meta itemprop="image" content="{{ $seo->image }}">
|
|
|
|
@if(isset($seo->image_w) && isset($seo->image_h))
|
|
<meta property="og:image:width" content="{{ $seo->image_w }}">
|
|
<meta property="og:image:height" content="{{ $seo->image_h }}">
|
|
@endif
|
|
@endif
|
|
|
|
<meta name="robots" content="index,follow">
|
|
<meta name="googlebot" content="index,follow">
|
|
|
|
@if(isset($seo->description))
|
|
<meta name="description" content="{{ $seo->description }}">
|
|
@endif
|
|
|
|
<!-- Styles -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
|
|
<link href="{{ asset('themes/' . $theme->folder . '/css/app.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('themes/' . $theme->folder . '/css/dataTable.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('themes/' . $theme->folder . '/css/style.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('themes/' . $theme->folder . '/css/user-dashboard-style.css') }}" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.min.css">
|
|
@yield('style')
|
|
|
|
<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/tinymce.min.js') }}"></script>
|
|
<script>
|
|
tinymce.init({
|
|
selector:'.tinymce',
|
|
menubar: false,
|
|
toolbar: "undo redo spellcheckdialog | blocks fontsize | bold italic | link image | alignleft aligncenter alignright alignjustify | indent outdent",
|
|
});
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.all.min.js"></script>
|
|
</head>
|
|
<body class="flex flex-col min-h-screen page-{{ $routeName }} @if(Request::is('/')){{ 'bg-white' }}@else{{ 'bg-gray-50' }}@endif @if(config('wave.dev_bar')){{ 'pb-10' }}@endif">
|
|
|
|
<main class="flex-grow overflow-x-hidden">
|
|
<section class="main-section-dashboard">
|
|
@include('theme::user.partials.sidebar')
|
|
<div class="main-content" style="background-image: url({{ asset('themes/tailwind/images/user-dashboard-bg.png') }})">
|
|
@include('theme::user.partials.navigation')
|
|
<div class="main-inside-content">
|
|
@yield('content')
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
@if(config('wave.dev_bar'))
|
|
@include('theme::partials.dev_bar')
|
|
@endif
|
|
|
|
<!-- Full Screen Loader -->
|
|
<div id="fullscreenLoader" class="fixed inset-0 top-0 left-0 z-50 flex flex-col items-center justify-center hidden w-full h-full bg-gray-900 opacity-50">
|
|
<svg class="w-5 h-5 mr-3 -ml-1 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<p id="fullscreenLoaderMessage" class="mt-4 text-sm font-medium text-white uppercase"></p>
|
|
</div>
|
|
<!-- End Full Loader -->
|
|
|
|
{{-- Chat --}}
|
|
<div class="chat-wrapper">
|
|
<div class="chat-box-wrapper" style="display:none;">
|
|
<div class="chat-form-steps" data-step="1" id="formStep1">
|
|
<div class="chat-form-header">
|
|
<div class="d-flex align-items-center justify-content-center">
|
|
<img width="46" class="img-fluid" src="{{ asset('themes/tailwind/images/message-2.png') }}">
|
|
<h2 class="chat-form-title">{{ __("How we can help?") }}</h2>
|
|
</div>
|
|
<p class="chat-form-desc">{{ __("Send us a message and we will reply within 10 minutes.") }}</p>
|
|
</div>
|
|
<div class="chat-service-list">
|
|
<div class="chat-service-box change-chat-form-step" data-title="{{ __("Bookkeeping Service") }}" data-service-type="bookkeeping" data-target="2">
|
|
<img width="28" class="img-fluid chat-service-box-icon" src="{{ asset('themes/tailwind/images/chat-bookkeeping-service.png') }}">
|
|
<span class="chat-service-box-title">{{ __("Bookkeeping Service") }}</span>
|
|
<img width="8" class="img-fluid chat-service-box-chevron" src="{{ asset('themes/tailwind/images/chevron-right-green.png') }}">
|
|
</div>
|
|
<div class="chat-service-box change-chat-form-step" data-title="{{ __("Company Secretary Service") }}" data-service-type="company_secretary" data-target="2">
|
|
<img width="28" class="img-fluid chat-service-box-icon" src="{{ asset('themes/tailwind/images/chat-company-secretary.png') }}">
|
|
<span class="chat-service-box-title">{{ __("Company Secretary Service") }}</span>
|
|
<img width="8" class="img-fluid chat-service-box-chevron" src="{{ asset('themes/tailwind/images/chevron-right-green.png') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-form-steps step2" data-step="2" id="formStep2" style="display:none;">
|
|
<div class="chat-form-header">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center justify-content-center cursor-pointer change-chat-form-step" data-target="1">
|
|
<img width="8" class="img-fluid" src="{{ asset('themes/tailwind/images/chevron-left.png') }}">
|
|
<h2 class="chat-form-title"></h2>
|
|
</div>
|
|
<img width="40" class="img-fluid" src="{{ asset('themes/tailwind/images/customer-service-img.png') }}">
|
|
</div>
|
|
<p class="chat-form-desc">{{ __("Send us a message and we will reply within 10 minutes.") }}</p>
|
|
</div>
|
|
<div class="chat-messages-wrapper">
|
|
<div class="chat-messages-body">
|
|
{{-- <div class="chat-messages-date">18 August 2022</div>
|
|
|
|
<div class="chat-messages-box">
|
|
<div class="chat-messages-bubble">
|
|
Hi. I am Logistics Manager at companyA. My Name is Ellen.
|
|
</div>
|
|
<div class="chat-messages-timespan">1 day ago</div>
|
|
</div>
|
|
<div class="chat-messages-box from-sender">
|
|
<div class="chat-messages-bubble">
|
|
Hi Ellen! Thanks for bearing with us. How may we help you?
|
|
</div>
|
|
<div class="chat-messages-timespan">1 day ago</div>
|
|
</div>
|
|
<div class="chat-messages-box">
|
|
<div class="chat-messages-bubble">
|
|
I can't upload my documents successfully
|
|
</div>
|
|
<div class="chat-messages-timespan">4:34 pm</div>
|
|
</div>
|
|
<div class="chat-messages-box from-sender">
|
|
<div class="chat-messages-bubble">
|
|
What type of documents are you uploading?
|
|
</div>
|
|
<div class="chat-messages-timespan">4:34 pm</div>
|
|
</div> --}}
|
|
</div>
|
|
<form action="{{ route('wave.user.dashboard.sendChat') }}" class="chat-messages-bottom" id="chatFrm">
|
|
@csrf
|
|
<input type="hidden" name="chat_service_type">
|
|
<div class="chat-messages-input-wrapper">
|
|
<input type="file" name="chat_message_file" style="display:none;">
|
|
<img width="15" class="img-fluid upload-file cursor-pointer" src="{{ asset('themes/tailwind/images/camera.png') }}">
|
|
<textarea name="chat_message" placeholder="{{ __("Type message...") }}" rows="1"></textarea>
|
|
<img width="15" class="img-fluid" src="{{ asset('themes/tailwind/images/link.png') }}">
|
|
</div>
|
|
<button type="submit" class="chat-messages-send">
|
|
<img width="23" class="img-fluid" src="{{ asset('themes/tailwind/images/send-icon.png') }}">
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-icon-button">
|
|
<img src="{{ asset('themes/tailwind/images/chat-icon.png') }}">
|
|
</div>
|
|
</div>
|
|
|
|
@vite(['resources/js/app.js'])
|
|
@include('theme::partials.toast')
|
|
@if(session('message'))
|
|
<script>setTimeout(function(){ popToast("{{ session('message_type') }}", "{{ session('message') }}"); }, 10);</script>
|
|
@endif
|
|
@waveCheckout
|
|
<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/jquery.min.js') }}"></script>
|
|
<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/dataTable.js') }}"></script>
|
|
{{-- <script type="module">
|
|
import Echo from 'https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.15.3/echo.js'
|
|
import {Pusher} from 'https://js.pusher.com/8.0.1/pusher.min.js'
|
|
window.Pusher = Pusher;
|
|
window.Echo = new Echo({
|
|
broadcaster: 'pusher',
|
|
key: '{{ env("PUSHER_APP_KEY") }}',
|
|
cluster: '{{ env("PUSHER_APP_CLUSTER") }}' ?? 'mt1',
|
|
wsHost: '{{ env("PUSHER_HOST") }}' ? '{{ env("PUSHER_HOST") }}' : `ws-${'{{ env("PUSHER_APP_CLUSTER") }}'}.pusher.com`,
|
|
wsPort: '{{ env("PUSHER_PORT") }}' ?? 80,
|
|
wssPort: '{{ env("PUSHER_PORT") }}' ?? 443,
|
|
forceTLS: ('{{ env("PUSHER_SCHEME") }}' ?? 'https') === 'https',
|
|
enabledTransports: ['ws', 'wss'],
|
|
});
|
|
</script> --}}
|
|
<script>
|
|
$(function(e) {
|
|
$(document).on('click', '.file-upload-wrapper .file-upload-btn', function(e) {
|
|
$(this).parents('.file-upload-wrapper:first').find('input[type="file"]').trigger('click');
|
|
});
|
|
$(document).on('change', '.file-upload-wrapper input[type="file"]', function(e) {
|
|
$(this).parents('.file-upload-wrapper:first').find('.file-upload-desc').hide();
|
|
if ($(this)[0].files.length) {
|
|
$(this).parents('.file-upload-wrapper:first').find('.file-upload-desc.with-value').text($(this)[0].files[0].name).show();
|
|
}
|
|
else {
|
|
$(this).parents('.file-upload-wrapper:first').find('.file-upload-desc.empty-state').show();
|
|
|
|
}
|
|
});
|
|
|
|
// Chat
|
|
window.Echo.channel(`chat-channel`).listen("ChatEvent", (e) => {
|
|
if ($('.chat-wrapper .chat-box-wrapper').is(':visible') && $('.chat-box-wrapper .chat-messages-body[data-id="' + e.chatId + '"]').length > 0 && e.userId == '{{ auth()->user()->id }}') {
|
|
var serviceType = $('.chat-box-wrapper .chat-messages-body[data-id="' + e.chatId + '"]').attr('data-service-type');
|
|
getMessages(serviceType);
|
|
}
|
|
});
|
|
$('.chat-icon-button').click(function() {
|
|
if ($('.chat-wrapper .chat-box-wrapper').is(':visible')) {
|
|
$('.chat-wrapper .chat-box-wrapper').hide();
|
|
}
|
|
else {
|
|
$('.chat-wrapper .chat-box-wrapper').show();
|
|
}
|
|
});
|
|
$('.change-chat-form-step').click(function() {
|
|
var target = $(this).attr('data-target');
|
|
var serviceType = $(this).attr('data-service-type');
|
|
var currentStep = $('.chat-form-steps:visible').first().attr('id');
|
|
|
|
if (currentStep == 'formStep1') {
|
|
var title = $(this).attr('data-title');
|
|
$('.chat-form-steps[data-step="' + target + '"] .chat-form-title').text(title);
|
|
$('#chatFrm input[name="chat_service_type"]').val(serviceType);
|
|
$('.chat-box-wrapper .chat-messages-body').attr('data-service-type', serviceType);
|
|
getMessages(serviceType);
|
|
}
|
|
|
|
$('.chat-form-steps').hide();
|
|
$('.chat-form-steps[data-step="' + target + '"]').show();
|
|
});
|
|
$(document).on( 'keyup', '#chatFrm textarea', function (){
|
|
$(this).height( 0 );
|
|
$(this).height( this.scrollHeight - 12 );
|
|
}).keypress(function (e) {
|
|
if(e.which === 13 && !e.shiftKey) {
|
|
e.preventDefault();
|
|
|
|
$('#chatFrm').submit();
|
|
}
|
|
});
|
|
$(document).on('click', '#chatFrm .upload-file', function(e) {
|
|
$('#chatFrm input[name="chat_message_file"]').click();
|
|
});
|
|
$(document).on('change', '#chatFrm input[name="chat_message_file"]', function(e) {
|
|
if ($(this).val()) {
|
|
$('#chatFrm').submit();
|
|
}
|
|
});
|
|
$('#chatFrm').submit(function(e) {
|
|
e.preventDefault();
|
|
var action = $(this).attr('action');
|
|
var button = $(this).find('button[type="submit"]');
|
|
var data = new FormData(this);
|
|
|
|
if (!button.is(':disabled') && action && ($('#chatFrm [name="chat_message"]').val() != '' || $('#chatFrm [name="chat_message_file"]').val() != '')) {
|
|
button.attr('disabled', 'disabled');
|
|
$('#chatFrm [name="chat_message"]').val('');
|
|
|
|
$.ajax({
|
|
url: action,
|
|
type: "post",
|
|
data: data,
|
|
dataType: 'json',
|
|
processData: false,
|
|
contentType: false,
|
|
success:function(data) {
|
|
button.removeAttr('disabled');
|
|
getMessages($('#chatFrm input[name="chat_service_type"]').val());
|
|
},
|
|
error: function(data) {
|
|
var errors = data.responseJSON.errors;
|
|
$.each(errors, function(index, error) {
|
|
popToast('danger', errors[0]);
|
|
return false;
|
|
});
|
|
|
|
button.removeAttr('disabled');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
function getMessages(serviceType) {
|
|
var url = "{{ route('wave.user.dashboard.getChatMessages', [':serviceType']) }}";
|
|
url = url.replace(":serviceType", serviceType);
|
|
|
|
$.ajax({
|
|
url: url,
|
|
type: "get",
|
|
dataType: 'json',
|
|
success:function(response) {
|
|
var data = response.data;
|
|
var html = '';
|
|
|
|
data.forEach(function(item) {
|
|
html += '<div class="chat-messages-date">' + item.date + '</div>';
|
|
item.messages.forEach(function(message) {
|
|
html += `
|
|
<div class="chat-messages-box ` + (message.is_own_message ? '' : 'from-sender') + `">
|
|
<div class="chat-messages-bubble">
|
|
` + message.message + `
|
|
</div>
|
|
<div class="chat-messages-timespan">` + message.elapsed_time + `</div>
|
|
</div>
|
|
`;
|
|
});
|
|
});
|
|
|
|
$('.chat-box-wrapper .chat-messages-body').attr('data-id', response.chat_id);
|
|
$('.chat-box-wrapper .chat-messages-body').html(html);
|
|
$('.chat-box-wrapper .chat-messages-body').scrollTop($('.chat-box-wrapper .chat-messages-body')[0].scrollHeight);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@yield('script')
|
|
</body>
|
|
</html>
|