333 lines
12 KiB
PHP
333 lines
12 KiB
PHP
<style>
|
|
/* The switch - the box around the slider */
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 34px;
|
|
}
|
|
|
|
/* Hide default HTML checkbox */
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* The slider */
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 26px;
|
|
width: 26px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: white;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #2196F3;
|
|
}
|
|
|
|
input:focus + .slider {
|
|
box-shadow: 0 0 1px #2196F3;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(26px);
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
/* Rounded sliders */
|
|
.slider.round {
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.slider.round:before {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.chat{
|
|
transform: translate(15px, 1px);
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
}
|
|
.in_setting{
|
|
display: none !important;
|
|
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
div.inbox-content-wrapper>.inbox-inner-wrapper>.user-box {
|
|
width: 90px;
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 420px) {
|
|
.logout {
|
|
display: none !important;
|
|
}
|
|
.in_setting{
|
|
display: block !important;
|
|
margin-left:12px;
|
|
}
|
|
@media only screen and (max-width: 348px) {
|
|
header .nav-links {
|
|
gap: 17px;
|
|
}
|
|
.chat {
|
|
transform: translate(7px, 1px) !important;
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 525px) {
|
|
div.chat-inbox>.chat-content-wrapper>.chat-message>.single-message-chat>.user-message {
|
|
max-width: 100% !important;
|
|
width: 100% !important;;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 315px) {
|
|
header .nav-links {
|
|
gap: 15px;
|
|
}
|
|
.chat {
|
|
transform: translate(7px, 1px) !important;
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.logout_form {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.logout_form .nav-btn {
|
|
border: none;
|
|
outline: none;
|
|
border-radius: 6.26px;
|
|
height: 38px;
|
|
width: 126.89px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.content-area header .row .col-sm-8 {
|
|
flex-direction: column;
|
|
align-items: center !important;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
.single-message-chat {
|
|
width: 100%;
|
|
height: -webkit-fill-available !important;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
|
<header>
|
|
<div class="row">
|
|
<div class="col-sm-4 user-name-nav-area d-flex align-content-center">
|
|
<div class="dev-toggle-sidebar">
|
|
<img src="https://kundesone.no/images/logo_cropped.png">
|
|
</div>
|
|
<h2 class="d-flex align-items-center">Hello {{auth()->user()->name}} <span>👋🏼</span>,</h2>
|
|
</div>
|
|
<div class="col-sm-8 d-flex justify-content-end align-items-center">
|
|
<div class="search-box d-flex align-items-center">
|
|
<img src="{{ asset('images/icons/search 1.png') }}" alt="">
|
|
<input type="text" class="color-dark-green" placeholder="Search...">
|
|
</div>
|
|
<div class="nav-links d-flex align-items-center">
|
|
<span class="chat">Chat </span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="toggleSwitch" @if(auth()->user()->is_available == 1) checked @endif>
|
|
<span class="slider round">
|
|
</label>
|
|
<form class="logout" method="POST" action="{{route('logout')}}">
|
|
@csrf
|
|
<button class="nav-btn bg-dark-green-color">
|
|
<img height="25" width="50" src="{{ asset('images/logout.png') }}" alt="">
|
|
</button>
|
|
</form>
|
|
<a href="{{ route('chat.setting') }}" class="nav-btn bg-dark-green-color">
|
|
<img src="{{ asset('images/icons/Message_alt_fill.png') }}" alt="">
|
|
</a>
|
|
<a href="{{ route('inbox.setting') }}" class="nav-btn bell-btn bg-dark-green-color">
|
|
<img src="{{ asset('images/icons/notification.svg') }}" alt="">
|
|
</a>
|
|
<div class="ui dropdown options-widget-wrapper">
|
|
<div class="text">
|
|
<button class="nav-btn bg-dark-green-color chat-setting-btn">
|
|
<img src="{{ asset('images/icons/Group 32.png') }}" alt="">
|
|
</button>
|
|
</div>
|
|
<div class="menu chat-setting nav-bar-menu mt-2">
|
|
<div class="item">
|
|
<p class="action-heading-paragraph text-center align-content-center">
|
|
<img src="{{ asset('images/icons/Vector (3).png') }}" alt="">
|
|
<span class="action-label text-white">Inbox</span>
|
|
</p>
|
|
<div class="chat-settings-btn-row text-center">
|
|
<a class="ui secondary basic button tag-btn shadow-none">Tags</a>
|
|
<a
|
|
href="{{ route('inbox.setting') }}" class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<p class="action-heading-paragraph text-center align-content-center">
|
|
<img src="{{ asset('images/icons/chat-round-white.svg') }}" alt="">
|
|
<span class="action-label text-white">Chats</span>
|
|
</p>
|
|
<div class="chat-settings-btn-row text-center">
|
|
<a class="ui secondary basic button tag-btn shadow-none">Tags</a>
|
|
<a
|
|
href="{{ route('chat.setting') }}" class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<p class="action-heading-paragraph text-center align-content-center">
|
|
<img src="{{ asset('images/icons/Group 133630.svg') }}" alt="">
|
|
<span class="action-label text-white">Help Center</span>
|
|
</p>
|
|
<div class="chat-settings-btn-row text-center">
|
|
<i class="external link square alternate icon color-dark-green"></i>
|
|
<a class="ui secondary basic button tag-btn shadow-none">Tags</a>
|
|
<a
|
|
class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<p class="action-heading-paragraph text-center align-content-center">
|
|
<img src="{{ asset('images/icons/question-square-svgrepo-com 2.svg') }}" alt="">
|
|
<span class="action-label text-white">Forum</span>
|
|
</p>
|
|
<div
|
|
class="chat-settings-btn-row text-center d-flex justify-content-center align-items-center">
|
|
<i class="external link square alternate icon color-dark-green"></i>
|
|
<a class="ui secondary basic button tag-btn shadow-none">Tags</a>
|
|
<a
|
|
class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="item">
|
|
<p class="action-heading-paragraph text-center align-content-center">
|
|
<img src="{{ asset('images/icons/question-square-svgrepo-com 2.svg') }}" alt="">
|
|
<span class="action-label text-white">Profile</span>
|
|
</p>
|
|
<div
|
|
class="chat-settings-btn-row text-center d-flex justify-content-center align-items-center">
|
|
<i class="external link square alternate icon color-dark-green"></i>
|
|
<!--<a class="ui secondary basic button tag-btn shadow-none">Tags</a>-->
|
|
<a href="{{ route('profile') }}"
|
|
class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
|
|
</div> <hr >
|
|
|
|
<div class="logout_form">
|
|
<form class="in_setting" method="POST" action="https://kundesone.no/logout">
|
|
<input type="hidden" name="_token" value="18hlNz76CXQJdP55j8LVsnhIf8KpaEi5MXKu9EFV" autocomplete="off"> <button class="nav-btn bg-dark-green-color">
|
|
<img height="25" width="50" src="https://kundesone.no/images/logout.png" alt="">
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
|
|
<!-- Toastr JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
|
|
|
|
<style>
|
|
|
|
.cke_notification.cke_notification_warning{
|
|
display:none!important;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
document.getElementById('toggleButton').addEventListener('click', function() {
|
|
this.classList.toggle('btn-success');
|
|
this.classList.toggle('btn-primary');
|
|
this.textContent = this.classList.contains('btn-success') ? 'On' : 'Off';
|
|
});
|
|
</script>
|
|
|
|
<!--chat avialability ajax-->
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#toggleSwitch').off('change').on('change', function(e) {
|
|
// Prevent default form submission if the toggle is inside a form
|
|
e.preventDefault();
|
|
|
|
const isChecked = $(this).is(':checked');
|
|
let status = isChecked ? 'on' : 'off';
|
|
|
|
// Disable the checkbox to avoid multiple clicks during the AJAX call
|
|
$(this).prop('disabled', true);
|
|
|
|
$.ajax({
|
|
url: 'update/chat-availability',
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': "{{ csrf_token() }}"
|
|
},
|
|
data: {
|
|
status: status
|
|
},
|
|
success: function(response) {
|
|
if(response.success) {
|
|
toastr.success('Chat Availability Updated Successfully');
|
|
}
|
|
// Enable the checkbox again after the AJAX call completes
|
|
$('#toggleSwitch').prop('disabled', false);
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('Error:', error);
|
|
$('#toggleSwitch').prop('disabled', false);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.content-area header .row .col-sm-8 {
|
|
flex-direction: column;
|
|
align-items: center !important;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
|