@extends('layouts.app_new')
@section('title')
  Chat
@endsection
@section('content')
<style type="text/css">
	.kt-grid.kt-grid--ver-desktop.kt-grid--desktop
	{
		    background-color: #ffffff !important;
	}
	.kt-portlet .kt-portlet__body
	{
		padding: 19px 11px;
	}
</style>
<div class="container">
    <div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
        <!-- begin:: Content -->
        <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
            <!--Begin::App-->
            <div class="kt-grid kt-grid--desktop kt-grid--ver kt-grid--ver-desktop kt-app">
                <!--Begin:: App Aside-->
                <div class="col-md-3" id="kt_chat_aside">
                    <!--begin::Portlet-->
                    <div class="kt-portlet kt-portlet--last">
                        <div class="kt-portlet__body">
                            <div class="kt-searchbar">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24" />
                                                    <path
                                                        d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z"
                                                        fill="#000000"
                                                        fill-rule="nonzero"
                                                        opacity="0.3"
                                                    />
                                                    <path
                                                        d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z"
                                                        fill="#000000"
                                                        fill-rule="nonzero"
                                                    />
                                                </g>
                                            </svg>
                                        </span>
                                    </div>
                                    <input type="text" class="form-control" placeholder="Search" id="search" aria-describedby="basic-addon1" />
                                </div>
                            </div>
                            <div class="kt-widget kt-widget--users kt-mt-20">
                                <div class="kt-scroll kt-scroll--pull">
                                    

                                        <h4 style="color: #a6a6a6;@if(!(isset($user->id)||  isset($usersChats[0])))display: none;@endif" id="users-title"><i class='bx bx-user' ></i> Users</h4>
                                    

                                    <div class="kt-widget__items" id="chat-container">
                                        @if(isset($user->id))

                                        <div  class="kt-widget__item chat-{{$user->chat_id}} chat-div">
                                            <span class="kt-media kt-media--circle">
                                                @if(!empty($user->image))
                                                        <img src="{{url($user->image)}}" alt="image" />
                                                @else
                                                        <img src="{{url('http://cckhdev.intrazero.com/uploads/Course/QR03A8_dummy-image-landscape-1.jpg')}}" alt="image" />

                                                @endif
                                            </span>
                                            <div class="kt-widget__info">
                                                <div class="kt-widget__section">
                                                    <a href="javascript:;" data-id="{{$user->chat_id}}" data-type="chat" class="kt-widget__username chat-listing chat-name">
                                                        {{$user->title}} {{$user->name}} {{$user->l_name}}
                                                    </a>
                                                </div>
                                                <span class="kt-widget__desc">
                                                    <small>Private chat</small>
                                                </span>
                                            </div>
                                            <div class="kt-widget__action">
                                                <span class="kt-badge kt-badge--success kt-font-bold" style="display: none"  id="chat-number-{{$user->chat_id}}" style="border-radius:50%"></span>
                                            </div>
                                        </div>
                                        @endif

                                        @foreach($usersChats as $usersChat)
                                             @if(Auth::id()==$usersChat->user_id_1 )
                                                            @php $user_id = "user2"; @endphp 
                                                    @else
                                                            @php $user_id = "user1"; @endphp 
                                                    @endif
                                                @if(!isset($user->id) || ($user->id != $usersChat->{$user_id}->id))

                                               

                                        <div  class="kt-widget__item chat-{{$usersChat->id}} chat-div">
                                            <span class="kt-media kt-media--circle">
                                                @if(!empty($usersChat->{$user_id}->image))
                                                        <img src="{{url($usersChat->{$user_id}->image)}}" alt="image" />
                                                @else
                                                        <img src="{{url('http://cckhdev.intrazero.com/uploads/Course/QR03A8_dummy-image-landscape-1.jpg')}}" alt="image" />

                                                @endif
                                            </span>
                                            <div class="kt-widget__info">
                                                <div class="kt-widget__section">
                                                    <a href="javascript:;" data-id="{{$usersChat->id}}" data-type="chat" class="kt-widget__username chat-listing chat-name">
                                                        {{$usersChat->{$user_id}->title}} {{$usersChat->{$user_id}->name}} {{$usersChat->{$user_id}->l_name}}
                                                    </a>
                                                </div>
                                                <span class="kt-widget__desc">
                                                    <small>Private chat</small>
                                                </span>
                                            </div>
                                            <div class="kt-widget__action">
                                                <span class="kt-badge kt-badge--success kt-font-bold" @if($usersChat->count_unread <= 0) style="display: none;border-radius:50%" @endif id="chat-number-{{$usersChat->id}}" style="border-radius:50%">{{$usersChat->count_unread}}</span>
                                            </div>
                                        </div>
                                                @endif

                                        @endforeach
                                    </div>
                                        <hr>
                                    <h4 style="color: #a6a6a6;"><i class='bx bx-group'></i> Groups</h4>

                                    <div class="kt-widget__items" id="group-container">

                                        @foreach($groups as $group)
                                        <div  class="kt-widget__item group-{{$group->id}} group-div">
                                            <span class="kt-media kt-media--circle">
                                                <img src="{{url('assets3/img/favicon.png')}}" alt="image" />
                                            </span>
                                            <div class="kt-widget__info">
                                                <div class="kt-widget__section">
                                                    <a href="javascript:;" data-id="{{$group->id}}" data-type="group" class="kt-widget__username chat-listing group-name">
                                                        {{$group->name}}
                                                    </a>
                                                </div>
                                                <span class="kt-widget__desc">
                                                    <small>Group chat</small>
                                                </span>
                                            </div>
                                            <div class="kt-widget__action">
                                                <span class="kt-badge kt-badge--success kt-font-bold" style="display: none;border-radius:50%"  id="group-number-{{$group->id}}" ></span>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Portlet-->
                </div>

                <!--End:: App Aside-->

                <!--Begin:: App Content-->
                <div class="kt-grid__item kt-grid__item--fluid kt-app__content" style="display:none" id="kt_chat_content">
                    <div class="kt-chat">
                        <div class="kt-portlet kt-portlet--head-lg- kt-portlet--last">
                            <div class="kt-portlet__head">
                                <div class="kt-chat__head">
                                    <div class="kt-chat__center">
                                        <span class="kt-media kt-media--circle">
                                                <img src="http://cckhdev.intrazero.com/assets3/img/favicon.png" id="chat-image" alt="image" />
                                            </span>
                                        <h3 id="chat-title">Group 1 </h3>
                                    </div>
                                </div>
                            </div>
                            <div class="kt-portlet__body" style="padding: 0 11px;">
                                <div class="kt-scroll kt-scroll--pull" data-mobile-height="300">

                                    <div class="kt-chat__messages" id="message-box">
                                       
                                      
                                    </div>
                                </div>
                            </div>
                            <div class="kt-portlet__foot">
                                <div class="kt-chat__input">
                                    <div class="kt-chat__editor">
                                        <textarea style="height: 50px;" id="message" onkeypress="onTestChange();" placeholder="Type here..."></textarea>
                                    </div>
                                    <div class="kt-chat__toolbar">
                                        <div class="kt_chat__actions">
                                            <input type="hidden" id="chat-id" />
                                            <input type="hidden" id="last-id" value="999999999999999" />
                                            <input type="hidden" id="type" />
                                            <button type="button" id="SendMessage" class="btn btn-brand btn-md btn-upper btn-bold kt-chat__reply">Reply</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End:: App Content-->
            </div>
            <!--End::App-->
        </div>
    </div>
    <!-- end:: Content -->
</div>
<audio id="buzzer" src="ring.wav" type="audio/wav"></audio>    

@endsection
@section('script')

<script src="{{ asset('/js/app.js') }}"></script>
<script type="text/javascript">
	window.Echo.channel(`private-chat`)
    .listen('Chat', (e) => {
        websocketChatsResponse(e);
    });
    window.Echo.channel(`private-chat.{{Auth::id()}}`)
    .listen('Chat', (e) => {
        websocketChatsResponse(e);
    });


</script>
<script type="text/javascript">
            var type;
    var MessagePage;
    var noPages;
    var blockAjax =0;



function websocketChatsResponse(e){
          if(e.user.image == null){
               image = "http://cckhdev.intrazero.com/uploads/Course/QR03A8_dummy-image-landscape-1.jpg"
            }else{
                image = e.user.image;
            }

            if($("#chat-id").val() ==  e.chat.id){

              if( e.user.id == {{Auth::id()}}){

                var chatBox = `<div class="kt-chat__message kt-chat__message--right">
                                    <div class="kt-chat__user">
                                        <a href="#" class="kt-chat__username">You</span></a>
                                        <span class="kt-media kt-media--circle kt-media--sm">
                                            <img src="${image}" alt="image">
                                        </span>
                                    </div>
                                    <div class="kt-chat__text kt-bg-light-brand">
                                        ${e.message}
                                    </div>
                                </div>`
            }else{
                var chatBox = `<div class="kt-chat__message">
                                <div class="kt-chat__user">
                                    <span class="kt-media kt-media--circle kt-media--sm">
                                        <img src="${image}" alt="image">
                                    </span>
                                    <a href="{{url('')}}/profile/${e.user.id}" target="_blank" class="kt-chat__username">${e.user.title} ${e.user.name} ${e.user.l_name}</span></a>
                                </div>
                                <div class="kt-chat__text kt-bg-light-success">
                                    ${e.message}
                                </div>
                            </div>`

            }

            $("#message-box").append(chatBox);
            $("#message").val("");


            
            $(".kt-chat__messages").animate({ scrollTop: 9999999 }, "fast");
        }

            if(e.type == "chat"){
            if ($(".chat-"+ e.chat.id)[0]){
                chatss = $(".chat-"+ e.chat.id).clone();

            } else {
               chatss = `  <div  class="kt-widget__item chat-${e.chat.id} chat-div">
                                            <span class="kt-media kt-media--circle">
                                                        <img src="${image}" alt="image" />
                                            </span>
                                            <div class="kt-widget__info">
                                                <div class="kt-widget__section">
                                                    <a href="javascript:;" data-id="${e.chat.id}" data-type="chat" class="kt-widget__username chat-listing chat-name">
                                                        ${e.user.title} ${e.user.name} ${e.user.l_name}
                                                    </a>
                                                </div>
                                                <span class="kt-widget__desc">
                                                    <small>Private chat</small>
                                                </span>
                                            </div>
                                            <div class="kt-widget__action">
                                                <span class="kt-badge kt-badge--success kt-font-bold" style="display: none;border-radius:50%"  id="chat-number-${e.chat.id}" ></span>
                                            </div>
                                        </div>`
            $("#users-title").show();
            }
                $(".chat-"+ e.chat.id).remove();
                $("#chat-container").prepend(chatss);
                numberOfMessages = $("#chat-number-"+ e.chat.id).text();

            }else if(e.type == "group"){
                groupsss = $(".group-"+ e.chat.id).clone();
                $(".group-"+ e.chat.id).remove();
                $("#group-container").prepend(groupsss);



                numberOfMessages = $("#group-number-"+ e.chat.id).text();

            }


            if( e.user.id != {{Auth::id()}}){

                $('#buzzer')[0].play();
            }
            if($("#chat-id").val() != e.chat.id){
    
                if(numberOfMessages){
                        numberOfMessages++;
                }else{
                    numberOfMessages = 1 ; 
                }

                if(e.type == "chat"){
                    $("#chat-number-"+ e.chat.id).show()

                    $("#chat-number-"+ e.chat.id).html(numberOfMessages)

                }else if(e.type == "group"){
                    $("#group-number-"+ e.chat.id).show()

                    $("#group-number-"+ e.chat.id).html(numberOfMessages)
                }
            }
            
}

function MessagePagination (e,Actiontype){

     $.each(e.messages,function(key,value){
                if(value.user.image == null){
                   image = "http://cckhdev.intrazero.com/uploads/Course/QR03A8_dummy-image-landscape-1.jpg"
                }else{
                    image = value.user.image;
                }
            if( value.user.id == {{Auth::id()}}){
                var chatBox = `<div class="kt-chat__message kt-chat__message--right">
                                    <div class="kt-chat__user">
                                        <a href="#" class="kt-chat__username">You</span></a>
                                        <span class="kt-media kt-media--circle kt-media--sm">
                                            <img src="${image}" alt="image">
                                        </span>
                                    </div>
                                    <div class="kt-chat__text kt-bg-light-brand">
                                        ${value.message}
                                    </div>
                                </div>`
            }else{
                var chatBox = `<div class="kt-chat__message">
                                <div class="kt-chat__user">
                                    <span class="kt-media kt-media--circle kt-media--sm">
                                        <img src="${image}" alt="image">
                                    </span>
                                    <a href="{{url('')}}/profile/${value.user.id}" target="_blank" class="kt-chat__username">${value.user.title} ${value.user.name} ${value.user.l_name}</span></a>
                                </div>
                                <div class="kt-chat__text kt-bg-light-success">
                                    ${value.message}
                                </div>
                            </div>`

            }
            $("#message-box").prepend(chatBox);
                last_id = value.id;
            })


            


            if(type == "chat"){

                $("#chat-title").text(e.chat.title+' '+e.chat.name+' '+e.chat.l_name)
                if(e.chat.image == null){
                    $("#chat-image").attr("src","http://cckhdev.intrazero.com/uploads/Course/QR03A8_dummy-image-landscape-1.jpg")
 
                }else{
                    $("#chat-image").attr("src",e.chat.image)

                }

            }else if(type == "group"){
                $("#chat-title").text(e.chat.name)
                $("#chat-image").attr("src","http://cckhdev.intrazero.com/assets3/img/favicon.png")

            }
                if(Actiontype != "scroll"){
                    $("#kt_chat_content").show()
                    $(".kt-chat__messages").animate({ scrollTop: 9999999 }, "fast");
     
                }
            $("#last-id").val(last_id)



}
</script>
<script type="text/javascript">

	_token = $('meta[name="csrf-token"]').attr('content');
	    $( "#SendMessage" ).on("click" , function( event ) {

	          $.ajax({
	            type: 'post',
	            url: "{{url('SendMessage')}}",
			    data:{
			          id:function(){
			          	return $("#chat-id").val()
			          },

			          message:function(){
			          	return $("#message").val()
			          },
			          type:function(){
			          	return $("#type").val()
			          },

			          _token: _token
			     },	          
			 });    
      });
</script>
<script type="text/javascript">
    $('#message-box').on('scroll', function(){

  var $el = $(this);
  if( $(this).scrollTop() <= 2 ){
        if(noPages==0 && blockAjax == 0) {

        blockAjax = 1;
        $.ajax({
            type: 'get',
            url: "{{url('getMessage')}}/"+(MessagePage+1),
            data:{
                  id:function(){
                    return $("#chat-id").val()
                  },

                  type:function(){
                    return $("#type").val()
                  },

                  message_page:function(){
                    return 0;
                  },
                  last_id:function(){
                    return $("#last-id").val()
                  },

                  _token: _token
             },           
        })  
        .done(function(e) {
            blockAjax = 0;

            if(e.noOfMessages  != 0){
                MessagePage++;
                MessagePagination(e,"scroll")
            }else{
                noPages=1;
            }

        })
        }

  }
});



	$(document).on("click",".chat-listing",function(){
         $("#last-id").val(999999999999999)
		id = $(this).data( "id" );
		type = $(this).data( "type" );
		$("#chat-id").val(id);
		$("#type").val(type);
        if(type == "chat"){
            $("#chat-number-"+ id).hide();

        }else if(type == "group"){
            $("#group-number-"+ id).hide();
        }

        $.ajax({
            type: 'get',
            url: "{{url('getMessage/0')}}",
            data:{
                  id:function(){
                    return $("#chat-id").val()
                  },

                  type:function(){
                    return $("#type").val()
                  },

                  message_page:function(){
                    return 0;
                  },

                  last_id:function(){
                    return $("#last-id").val()
                  },
                  _token: _token
             },           
        })  
        .done(function(e) {
                MessagePage = 0;
                noPages = 0;
                $('#message-box').empty();

                MessagePagination(e,"new")


   
	})
                 }); 


	function onTestChange() {
    var key = window.event.keyCode;

    // If the user has pressed enter
    if (key === 13) {
        $("#SendMessage").trigger("click");
        return false;
    }
    else {
        return true;
    }
}

$("#search").on("keyup paste", function() {

    var value = $(this).val().toUpperCase();
    var $rows = $(".group-div");

    if(value === ''){
        $rows.show();
        return false;
    }

    $rows.each(function(index) {

            $row = $(this);

            var column1 = $row.find(".group-name").text().toUpperCase();
            console.log(column1);
            if ((column1.indexOf(value) > -1)) {
                $row.show();
            }
            else {
                $row.hide();
            }
        
    });
    var $rows = $(".chat-div");

    if(value === ''){
        $rows.show();
        return false;
    }

    $rows.each(function(index) {

            $row = $(this);

            var column1 = $row.find(".chat-name").text().toUpperCase();
            console.log(column1);
            if ((column1.indexOf(value) > -1)) {
                $row.show();
            }
            else {
                $row.hide();
            }
        
    });
});

</script>
@endsection