262 lines
9.9 KiB
PHP
262 lines
9.9 KiB
PHP
@extends('Admin.layouts.master')
|
|
@section('style')
|
|
<style>
|
|
.active {
|
|
color: #c18948 !important
|
|
}
|
|
</style>
|
|
@endsection
|
|
@section('title', 'Manage Chats')
|
|
@section('content')
|
|
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
|
|
<div class="d-flex flex-column flex-column-fluid">
|
|
<div id="kt_app_content_container" class="app-container container-xxl">
|
|
<div class="chat-box">
|
|
<div class="row max-w-100 h-100">
|
|
<div class="col-md-4 p-0 users_list h-100" style="height:45rem;overflow:auto">
|
|
<div class="card h-100">
|
|
<div class="card-header pt-5" id="kt_chat_contacts_header">
|
|
<form class="w-100 position-relative" autocomplete="off">
|
|
<span
|
|
class="svg-icon svg-icon-2 svg-icon-lg-1 svg-icon-gray-500 position-absolute top-50 ms-5 translate-middle-y"
|
|
style="margin-top:-5px;">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
|
|
rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
|
|
<path
|
|
d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
|
|
fill="currentColor" />
|
|
</svg>
|
|
</span>
|
|
<input type="text" class="form-control form-control-solid px-15" name="search"
|
|
value="" oninput="searchData(this.value)" id="search"
|
|
placeholder="Search" />
|
|
</form>
|
|
</div>
|
|
<div class="card-body pt-5" id="kt_chat_contacts_body">
|
|
<div class="scroll-y me-n5 pe-5 h-lg-auto user_Detail" data-kt-scroll="true"
|
|
data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto"
|
|
data-kt-scroll-dependencies="#kt_header, #kt_toolbar, #kt_footer, #kt_chat_contacts_header"
|
|
data-kt-scroll-wrappers="#kt_content, #kt_chat_contacts_body"
|
|
data-kt-scroll-offset="5px">
|
|
{{-- @foreach ($use overflow: scroll;overflow: scroll;rs as $user)
|
|
<div class="d-flex flex-stack py-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="symbol symbol-45px symbol-circle">
|
|
@if ($user->profile_image)
|
|
<?php
|
|
$img = 'public/uploads/profile/img/' . $user->getAttributes()['profile_image'];
|
|
?>
|
|
@else
|
|
@php($img ='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png')
|
|
@endif
|
|
<img alt="Pic" src="{{$img}}" />
|
|
@if ($user->total_count)
|
|
<span class="symbol-badge badge badge-sm badge-circle badge-white badge-outline bg-danger start-100">{{$user->total_count}}</span>
|
|
@endif
|
|
</div>
|
|
<div class="ms-5">
|
|
<a href="javascript:void(0)" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2" onclick="getUser({{$user->id}})">{{$user->name}}</a>
|
|
<div class="fw-semibold text-muted">{{$user->email}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach --}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-5 p-0 chat_screen h-100">
|
|
|
|
<div class="card w-100 rounded-0 border-0" id="kt_drawer_chat_messenger"
|
|
style="overflow-x:hidden;background-color: #cccccc1a;position: relative;height: 100%;">
|
|
<div class="chat-msgs h-100">
|
|
<img src="{{ asset('/public/assets/media/FrontendImages/menu-logo.png') }}"/>
|
|
<p></p>
|
|
</div>
|
|
<div class="card-footer d-flex align-items-center me-2 p-0 d-none"
|
|
id="kt_drawer_chat_messenger_footer">
|
|
<textarea class="form-control form-control-flush resize-none" rows="1" data-kt-element="input" name="message"
|
|
id="message" placeholder="Type a message" style="background-color: #dfdfdf;"></textarea>
|
|
<input type="hidden" name="user_id" id="user_id">
|
|
<div class="btn" data-kt-element="send"><i class="fa-solid fa-paper-plane" title="send"
|
|
onclick="sendMsg()"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 p-0 active_user_details show-user" style="background-color: #fff;height: 100%;overflow: scroll;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
@section('scripts')
|
|
<script>
|
|
$(function() {
|
|
userList();
|
|
})
|
|
setInterval(function() {
|
|
if ($('#user_id').val()) {
|
|
// $(`#user_${$('#user_id').val()}`).addClass('active');
|
|
getUser($('#user_id').val());
|
|
// $('.spanName').each(function() {
|
|
// $(this).removeClass('active');
|
|
// })
|
|
}
|
|
}, 4000);
|
|
|
|
setInterval(function() {
|
|
userList();
|
|
}, 5000)
|
|
|
|
function searchData(search) {
|
|
// alert(search)
|
|
$.ajax({
|
|
url: "{{ route('search-user-data') }}",
|
|
type: "GET",
|
|
data: {
|
|
search: search
|
|
},
|
|
success: function(result) {
|
|
if (result) {
|
|
$('.user_Detail').html('').append(result);
|
|
} else {
|
|
$('.user_Detail').html('').append("No data found");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// sending message on click on enter
|
|
$('#message').keyup(function(event) {
|
|
if (event.keyCode === 13) {
|
|
sendMsg();
|
|
}
|
|
});
|
|
|
|
|
|
function sendMsg() {
|
|
|
|
let msg = $('#message').val();
|
|
|
|
let user_id = $('#user_id').val();
|
|
// alert(user_id);
|
|
|
|
$.ajaxSetup({
|
|
|
|
headers: {
|
|
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$.ajax({
|
|
|
|
cache: false,
|
|
|
|
url: "{{ route('send-admin-msg') }}",
|
|
|
|
type: "POST",
|
|
|
|
data: {
|
|
|
|
message: msg,
|
|
|
|
user_id: user_id
|
|
|
|
},
|
|
|
|
dataType: "json",
|
|
|
|
success: function(result) {
|
|
|
|
if (result.status == 200) {
|
|
|
|
getUser($('#user_id').val());
|
|
|
|
$('#message').val('')
|
|
|
|
}
|
|
|
|
if (result.status == 400) {
|
|
|
|
toastr.warning(result.message);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function getUser(id) {
|
|
$('.spanName').each(function() {
|
|
$(this).removeClass('active');
|
|
})
|
|
$(`#user_${id}`).addClass('active');
|
|
$('#user_id').val(id);
|
|
|
|
|
|
$.ajax({
|
|
|
|
url: "{{ route('get-user-for-chat') }}",
|
|
|
|
type: "GET",
|
|
|
|
data: {
|
|
|
|
id: id,
|
|
|
|
},
|
|
|
|
success: function(result) {
|
|
|
|
$('.show-user').html('');
|
|
|
|
$('.chat-msgs').html('');
|
|
|
|
$('.show-user').append(result.user);
|
|
|
|
$('.chat-msgs').append(result.chat);
|
|
|
|
$('#kt_drawer_chat_messenger_footer').removeClass('d-none');
|
|
|
|
if (result.status == 400) {
|
|
|
|
toastr.warning(result.message);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function userList() {
|
|
let search = $('#search').val();
|
|
if (search) {
|
|
return;
|
|
}
|
|
$.ajax({
|
|
url: "{{ route('get-user-list') }}",
|
|
type: "GET",
|
|
// dataType : 'json',
|
|
success: function(result) {
|
|
if (result) {
|
|
$('.user_Detail').html('').append(result);
|
|
}
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
@endsection
|