@extends('layouts.admin')

@section('content')
<div id="frame">
	<div id="sidepanel">
		<div id="profile">
			<div class="wrap">
				<div class="pull-left msg-initial"><p>{{ $user->avatar }}</p></div>
				<p>{{ $user->name }}</p>
				{{ csrf_field() }}
			</div>
		</div>
		<div id="contacts">
			<ul>
				@foreach($members as $member)
				<li class="contact" id="contact-{{ $member['id'] }}" contact-id="{{ $member['id'] }}" data-member="{{ $member['role'] }}" >
					<div class="wrap">
						<div class="msg-initial"><p>{{ $member['avatar'] }}</p></div>
						<div class="meta">
							<div class="name contactdetails">
								<p class="contact-name">{{ $member['name'] }}</p>
								<p class="preview">
								@if(!empty($member['messages']))
								<br />
<b>Warning</b>:  end() expects parameter 1 to be array, null given in <b>/home/infusionapi/public_html/resources/views/admin/messages/messages.blade.php</b> on line <b>26</b><br />
								@if($lastMessage)
								@if($lastMessage->user_id == $user->id)
								<span>You:</span>
								@endif
								{{ $lastMessage->message }}
								@endif
								@endif
							    </p>
						</div>
						
						@if(isset($member['unseen_count']) && ($member['unseen_count'] > 0)) 
						<p class="msgcnt">{{ $member['unseen_count'] }}</p>
						@endif
						<div class="clearfix"></div>

						</div>
					</div>
				</li>
				@endforeach
			</ul>
		</div>
	</div>
	<div class="content">
		<div class="contact-profile">
			<i class="voyager-angle-left chat_back"></i>
			<div id="main-contact-avatar-box" style="display:none;"><div class="msg-initial"><p id="main-contact-avatar" style="text-align:center;"></p></div></div>
			<p id="main-contact-name"></p>
			{{-- <img id="more-icon" src="{{asset('/front/img/more-info-icon-grey.png')}}" class="more-icon more-show-right" alt="x" /> --}}
		</div>

		@foreach($members as $member)
		<div class="messages" id="messages-{{ $member['id'] }}" user-id="{{ $member['id'] }}" style="display:none;">
			@if((isset($member['message_count'])) && ($member['message_count'] > 5))
				<div class="load-more"><button class="">Load More</button></div>
			@endif
			<ul>
				@if(!empty($member['messages']))
				@foreach($member['messages'] as $message)
				<li class="@if($message->user_id == $user->id) sent @else replies @endif" message-id="{{ $message->id}}">
					<div class="msgbox">
						<p>{{ $message->message }}</p>
						<span>
						@if((date('Y-m-d') == date('Y-m-d', strtotime($message->created_at))))
						{{ date('h:iA', strtotime($message->created_at)) }}
						@else
						{{ date('m/d/Y h:iA', strtotime($message->created_at)) }}
						@endif
						</span>
					</div>
				</li>
				@endforeach
				@endif
			</ul>
		</div>
		@endforeach
		<div class="message-input" style="display:none;">
			<div class="wrap">
			<input type="text" placeholder="Write your message..." />
			<button class="submit"><i class="md md-send"></i></button>
			</div>
		</div>
	</div>
</div>
@stop

@section('styles')
<link href="{{asset('backend/css/messages.min.css?v=1.0')}}" rel="stylesheet" />
@stop'

@section('scripts')
<script>
$(function() {
	
	// Bring users with unread messages to top
	$("p.msgcnt").each(function() {
		var contact_div = $( this ).closest('.contact');
		var member  = contact_div.data('member');
		contact_div.insertBefore($('.contact[data-member="Admin"]:first'));
		//$( this ).closest('.contact').prependTo('#contacts ul');
	});

	 var currentContactId = null;

	  if($(window).width()<769){
	 	 $(".container-fluid:last").css('padding','0px');
	 	 $(".container-fluid:last .side-body").css('margin','0px');
	 	 $(".app-container:first").css('background-color','#fff');
	 	 $('#frame').css('height',$( window ).height()-62+'px');
	  }

	 $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        }
	 });
	 
	 $('#frame .chat_back').click(function(){
		$("#frame .content").css('display','none');
		$("#frame #sidepanel #contacts ul li.contact .wrap .meta").css('display','inline-block');
		$("#frame #sidepanel").css({'width':'100%','min-width':'100%'});
	 });

	 $('#frame').on('click', '.contact', function(){
 		
 		if($(window).width()<736){
 		 	$("#frame .content").css({'display':'block','width':'calc(100% - 0px)'});
 		 	$("#frame #sidepanel #contacts ul li.contact .wrap .meta").css('display','none');
 		 	$("#frame #sidepanel").css({'width':'0px','min-width':'0px'});
 		}
	 	var contactId = $(this).attr('contact-id');
	 	currentContactId = contactId;

	 	$('.contact').removeClass('active');
	 	$(this).addClass('active');

		$('#main-contact-avatar-box').show();
	 	$('#main-contact-avatar').html($(this).find(".msg-initial").text());
	 	$('#main-contact-name').html($(this).find(".contact-name").html());

	 	$('.messages').hide();
	 	$('.message-input').hide();

		$('#messages-'+contactId).show();
		$('.message-input').show();

		if($(this).find('.msgcnt').length)
		{
			makeSeen(contactId);
			$(this).find('.msgcnt').remove();
		}
	 });

	 // Check if came by clicking message from navbar (has message_by requet parameter)
	 var captured = /message_by=([^&]+)/.exec(location.href);
	 if(captured && captured[1]){
	 	$("#contact-"+captured[1]).click();
	 }

	 function makeSeen(userId)
	 {
		$.ajax({
			type: 'POST',
            url:  baseUrl+"/messages/makeseen",
			data: {user_id:userId},
            dataType: 'json',
            success: function (data) {
            	if(data.status == 'success') {
            	}
            }
        });	 	
	 }

	function newMessage() {
		message = $(".message-input input").val();
		if($.trim(message) == '') {
			return false;
		}

		$('.message-input input').val(null);

		$.ajax({
			type: 'POST',
            url:  baseUrl+"/messages/send",
			data: {message:message, _id:currentContactId },
            dataType: 'json',
            success: function (data) {

            	if(data.status == 'success') {

					//$('<li class="sent"><img src="'+$('#profile-img').attr('src')+'" alt="" /><p>' + message + '</p><span>'+data.date+'</span></li>').appendTo($('#messages-'+data.to_user_id+' ul'));
					$('<li class="sent"><div class="msgbox"><p>' + message + '</p><span>'+data.date.split(' ')[1]+'</span></div></li>').appendTo($('#messages-'+data.to_user_id+' ul'));
					
					$('#contact-'+data.to_user_id+' .preview').html(message);
					$(".messages").animate({ scrollTop: $(document).height() }, "fast");

            	}
            }
        });
	};

	$('#frame').on('click', '.load-more', function(){
		var userId        = $(this).parent().attr('user-id');
		var lastMessageId = $(this).next('ul').find('>li:first').attr('message-id');

		$(this).find('button').text('Loading...');

		$.ajax({
			type: 'POST',
            url:  baseUrl+"/messages/more",
			data: {user_id:userId, last_message_id:lastMessageId},
            dataType: 'json',
            success: function (data) {

            	if(data.status == 'success') {

            		if(!data.show_load_more) {
            			$('#messages-'+data.to_user_id).find(".load-more").remove();
            		}
            		else {
            			$('#messages-'+data.to_user_id).find(".load-more button").text('Load More');
            		}

            		if(data.messages) {
            			jQuery.each( data.messages, function( i, message ) {

            				console.log(message);

            				var liClass = null;
            				var userPic = null;
            				if(message.user_id == data.from_user_id) {
            					liClass = 'sent';
            					userPic = $('#profile-img').attr('src');
            				}
            				else {
            					liClass = 'replies';
            					userPic = $('#main-contact-pic').attr('src');
            				}
							
							var dateParts = message.created_at.split(' ');
							var dateText  = '';
							console.log(dateParts[0]+'-'+moment().format('MM/DD/YYYY'));
							if(dateParts[0] == moment().format('MM/DD/YYYY')){
								dateText = dateParts[1];
							}
							else{
								dateText = message.created_at;
							}

            				//$('<li class="'+liClass+'" message-id="'+message.id+'"><img src="'+userPic+'" alt="" /><p>' + message.message + '</p><div class="clearfix"></div><span>'+message.created_at+'</span></li>').prependTo($('#messages-'+data.to_user_id+' ul'));
							$('<li class="'+liClass+'" message-id="'+message.id+'"><div class="msgbox"><p>' + message.message + '</p><span>'+dateText+'</span></div></li>').prependTo($('#messages-'+data.to_user_id+' ul'));
						  
						});
            		}

            	}
            }
        });
	});
	
	$(".messages").animate({ scrollTop: $(document).height() }, "fast");

	$('.submit').click(function() {
	  newMessage();
	});

	$(window).on('keydown', function(e) {
	  if (e.which == 13) {
	    newMessage();
	    return false;
	  }
	});
});
</script>
@stop