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


@section('content')
	
	<h2 class="dashboard-title">{{ __("Service Chat") }}</h2>
	<div class="card-chat">
		<div class="flex h-100">
			<div class="chat-room-area">
				<h3 class="h2-title text-left">{{ __("Chat Room") }}</h3>
				<div class="accordion-lists">
					<div class="accordion-box">
						<div class="accordion-title">
							<span class="text-uppercase">{{ __("Recent") }}</span>
							<img src="{{ asset('themes/tailwind/images/arrow-down.svg') }}">
							{{-- <button class="accordion-button"><img src="{{ asset('themes/tailwind/images/arrow-down.svg') }}"></button> --}}
						</div>
						<div class="accordion-items chat-lists">
							{{-- <div class="accordion-item">
								<div class="accordion-content">
									<h4>Site Alpha</h4>
									<span>Client: Company A</span>
								</div>
								<div class="accordion-notif">
									<span class="number-item">4</span>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>Site Alpha</h4>
									<span>Client: Company A</span>
								</div>
								<div class="accordion-notif">
									<span class="number-item">4</span>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>Site Alpha</h4>
									<span>Client: Company A</span>
								</div>
								<div class="accordion-notif">
									<span class="number-item">4</span>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>Site Alpha</h4>
									<span>Client: Company A</span>
								</div>
								<div class="accordion-notif">
									<span class="number-item">4</span>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>Site Alpha</h4>
									<span>Client: Company A</span>
								</div>
								<div class="accordion-notif">
									<span class="number-item">4</span>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>Site Alpha</h4>
									<span>Client: Company A</span>
								</div>
								<div class="accordion-notif">
									<span class="number-item">4</span>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>Site Alpha</h4>
									<span>Client: Company A</span>
								</div>
								<div class="accordion-notif">
									<span class="number-item">4</span>
								</div>
							</div> --}}
						</div>
					</div>
				</div>
			</div>
			<div class="chat-area" style="display:none;">
				<div class="flex">
					<div class="chat-topic">
						<h3 class="topic-title text-uppercase">{{ __("Service Topic") }}</h3>
						<div class="topic-lists">
							{{-- <div class="topic-list">
								<div class="topic-head">
									<h4>Copmany Secretary Service</h4>
									<time>21/04/2023</time>
								</div>
								<div class="topic-body">
									<p>Client: Hi, I can't upload my documents successfully</p>
									<span class="number-item">4</span>
								</div>
							</div>
							<div class="topic-list">
								<div class="topic-head">
									<h4>Copmany Secretary Service</h4>
									<time>21/04/2023</time>
								</div>
								<div class="topic-body">
									<p>Client: Hi, I can't upload my documents successfully</p>
									<span class="number-item">4</span>
								</div>
							</div>
							<div class="topic-list">
								<div class="topic-head">
									<h4>Copmany Secretary Service</h4>
									<time>21/04/2023</time>
								</div>
								<div class="topic-body">
									<p>Client: Hi, I can't upload my documents successfully</p>
									<span class="number-item">4</span>
								</div>
							</div>
							<div class="topic-list">
								<div class="topic-head">
									<h4>Copmany Secretary Service</h4>
									<time>21/04/2023</time>
								</div>
								<div class="topic-body">
									<p>Client: Hi, I can't upload my documents successfully</p>
									<span class="number-item">4</span>
								</div>
							</div>
							<div class="topic-list">
								<div class="topic-head">
									<h4>Copmany Secretary Service</h4>
									<time>21/04/2023</time>
								</div>
								<div class="topic-body">
									<p>Client: Hi, I can't upload my documents successfully</p>
									<span class="number-item">4</span>
								</div>
							</div> --}}
						</div>
					</div>
					<div class="chat-inside-content" style="display:none;s">
						<div class="chat-inside-head">
							 <h5 class="topic-title">-</h5>
							 <button class="more-item" type="button"><img src="{{ asset('themes/tailwind/images/more-plain.svg') }}"></button>
						</div>
						<div class="chat-inside-body">
							{{-- <div class="chat-box chat-sender">
								<div class="chat-label">LM</div>
								<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
							</div>
							<div class="chat-box">
								<div class="chat-label">CS</div>
								<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
							</div>
							<div class="chat-box chat-sender">
								<div class="chat-label">LM</div>
								<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
							</div>
							<div class="chat-box">
								<div class="chat-label">CS</div>
								<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
							</div>
							<div class="chat-box chat-sender">
								<div class="chat-label">LM</div>
								<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
							</div>
							<div class="chat-box chat-sender">
								<div class="chat-label">LM</div>
								<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
							</div>
							<div class="chat-box">
								<div class="chat-label">CS</div>
								<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
							</div>
							<div class="chat-messages-date">
								<span>Today</span>
							</div> --}}
						</div>
						<div class="chat-inside-footer">
							<div class="chat-message-box">
                   			<form action="{{ route('cms.chat.send-message', ':id') }}" class="chat-message-box w-100" id="chatFrm">
								<input type="file" name="chat_message_file" style="display:none;">
								<button type="button" class="chat-file"><img src="{{ asset('themes/tailwind/images/Attachment.svg') }}"></button>
								<button type="button" class="chat-smile"><img src="{{ asset('themes/tailwind/images/Smile.svg') }}"></button>
								<textarea name="chat_message" placeholder="Type a message here..." rows="1"></textarea>
								<button type="submit" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="chat-side-area" style="display:none;">
				<div class="chat-side-head">
					<img src="{{ asset('themes/tailwind/images/company.svg') }}">
					<h3 class="text-uppercase">{{ __("Company Info") }}</h3>
				</div>
				<div class="company-info-wrapper">
					<div class="chat-side-info">
						<label class="text-uppercase">{{ __("User Email") }}</label>
						<p class="user-email">-</p>
					</div>
					<div class="chat-side-info">
						<label class="text-uppercase">{{ __("Phone") }}</label>
						<p class="user-phone">-</p>
					</div>
					<div class="chat-side-info">
						<label class="text-uppercase">{{ __("Location") }}</label>
						<p class="company-address">-</p>
					</div>
				</div>
				<div class="chat-side-scroll">
					<div class="accordion-box">
						<div class="accordion-title accordion-title__image">
							<img src="{{ asset('themes/tailwind/images/simcard.svg') }}">
							<span class="text-uppercase">{{ __("Form List") }}</span>
							<img src="{{ asset('themes/tailwind/images/arrow-down.svg') }}">
							{{-- <button class="accordion-button"><img src="http://127.0.0.1:8000/themes/tailwind/images/arrow-down.svg"></button> --}}
						</div>
						<div class="accordion-items">
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>{{ __("Incorporation of Hong Kong Limited") }}</h4>
								</div>
								<div class="accordion-notif">
									<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>{{ __("Change Company Name") }}</h4>
								</div>
								<div class="accordion-notif">
									<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>{{ __("Change Company Address") }}</h4>
								</div>
								<div class="accordion-notif">
									<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>{{ __("Change of Company and Director (Appointment / Cessation)") }}</h4>
								</div>
								<div class="accordion-notif">
									<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>{{ __("Change of Company Secretary (Appointment / Cessation)") }}</h4>
								</div>
								<div class="accordion-notif">
									<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>{{ __("Change in Particulars of Company Secretary or Director") }}</h4>
								</div>
								<div class="accordion-notif">
									<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
								</div>
							</div>
							<div class="accordion-item">
								<div class="accordion-content">
									<h4>{{ __("Resignation of Reserve Director") }}</h4>
								</div>
								<div class="accordion-notif">
									<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>



@endsection

@section('script')
<script>
	$(document).ready( function () {
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
		
		window.Echo.channel(`chat-channel`).listen("ChatEvent", (e) => {
			getChats();
			if ($('.show-messages[data-id="' + e.chatId + '"]').hasClass('active') && e.toAdmin) {
				var url = "{{ route('cms.chat.get-messages', [':id']) }}";
				url = url.replace(":id", e.chatId);
				showMessages(url);
			}
		});

		$(document).on('click', '.show-topics', function(e) {
			var userId = $(this).attr('data-user-id');
			var companyId = $(this).attr('data-company-id');
			var activeId = $('.show-messages.active').attr('data-id');	

			if (! $(this).hasClass('active')) {
				$('.show-topics').removeClass('active');
				$(this).addClass('active');
			}
			
			$.ajax({
				url: "{{ route('cms.chat.get-topics') }}",
				type: "post",
				data: {
					userId: userId,
					companyId: companyId,
				},
				dataType: 'json',
				success:function(data) {
					var chats = data.chats;
					var html = '';

					chats.forEach(function(chat) {
						html += `
							<div class="topic-list show-messages ` + (activeId == chat.id ? 'active' : '') + `" data-id="` + chat.id + `" data-title="` + chat.topic + `">
								<div class="topic-head">
									<h4>` + chat.topic + `</h4>
									<time>` + chat.date + `</time>
								</div>
								<div class="topic-body">
									<p>Client: ` + chat.first_message + `</p>
									` + (chat.unread_count > 0 ? `<span class="number-item">` + chat.unread_count + `</span>` : '') + `
								</div>
							</div>
						`;
					});

					$('.topic-lists').html(html);
					$('.company-info-wrapper .user-email').html(data.user.email ? data.user.email : '-');
					$('.company-info-wrapper .user-phone').html(data.user.phone ? data.user.phone : '-');
					$('.company-info-wrapper .company-address').html(data.company.address ? data.company.address : '-');
					$('.chat-area').show();
					$('.chat-side-area').show();
				}
			});
		});

		$(document).on('click', '.show-messages', function(e) {
			var title = $(this).attr('data-title');
			var id = $(this).attr('data-id');
			var url = "{{ route('cms.chat.get-messages', [':id']) }}";
			url = url.replace(":id", id);

			$('.show-messages').removeClass('active');
			$(this).addClass('active');
			
			showMessages(url, title);
		});

		$(document).on('click', '#chatFrm .chat-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();
			}
		});

		$(document).on('submit', '#chatFrm', function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var data = new FormData(this);
			var id = $('.show-messages.active').attr('data-id');
			action = action.replace(":id", id);

			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('');
				$('#chatFrm [name="chat_message_file"]').val('');

				$.ajax({
					url: action,
					type: "post",
					data: data,
					dataType: 'json',
					processData: false,
					contentType: false,
					success:function(data) {
						button.removeAttr('disabled');
						$('.show-messages.active').click();
					},
					error: function(data) {
						var errors = data.responseJSON.errors;
						$.each(errors, function(index, error) {
							popToast('danger', errors[0]);
							return false;
						});

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

		$(document).on( 'keyup', '#chatFrm textarea', function (){
			$(this).height( 0 );
			$(this).height( this.scrollHeight );
		}).keypress(function (e) {
			if(e.which === 13 && !e.shiftKey) {
				e.preventDefault();
			
				$('#chatFrm').submit();
			}
		});

		getChats();

		function getChats() {
			var activeId = $('.show-topics.active').attr('data-id');	
		
			$.ajax({
				url: "{{ route('cms.chat.get-chats') }}",
				type: "get",
				data: {},
				dataType: 'json',
				success:function(data) {
					var chats = data.chats;
					var html = '';

					chats.forEach(function(chat) {
						html += `
							<div class="accordion-item cursor-pointer show-topics ` + (activeId == chat.id ? 'active' : '') + `" data-user-id="` + chat.user_id + `" data-company-id="` + chat.company_id + `" data-id="` + chat.id + `">
								<div class="accordion-content">
									<h4>` + chat.user_first_name + ` ` + chat.user_last_name + `</h4>
									<span>Client: ` + chat.company_name + `</span>
								</div>
						`;

						if (chat.unread_count > 0) {
							html += `
								<div class="accordion-notif">
									<span class="number-item">` + chat.unread_count + `</span>
								</div>
							`;
						}
						html += '</div>';
					});

					$('.chat-lists').html(html);

					if (activeId) {
						$('.show-topics[data-id="' + activeId + '"]').click();
					}
				}
			});
		}
		function showMessages(url, title = '') {
			$.ajax({
				url: url,
				type: "get",
				data: {},
				dataType: 'json',
				success:function(response) {
					var data = response.data;
					var html = '';

					data.forEach(function(item) {
						html += `
							<div class="chat-messages-date">
								<span>` + (item.is_today ? 'Today' : item.date) + `</span>
							</div>
						`;
						item.messages.forEach(function(message) {
							html += `
								<div class="chat-box ` + (message.is_own_message ? 'chat-sender' : '') + `">
									<div class="chat-label">` + message.initials + `</div>
									<div class="chat-content"><time>` + message.elapsed_time + `</time>` + message.message + `</div>
								</div>
							`;
						});
					});

					if (title) {
						$('.chat-inside-content .topic-title').html(title);
					}

					$('.chat-inside-content .chat-inside-body').html(html);
					$('.chat-inside-content').show();
					$('.chat-inside-content .chat-inside-body').scrollTop($('.chat-inside-content .chat-inside-body')[0].scrollHeight);
				}
			});
		}
	} );
</script>
@endsection