@extends('layouts.master')

@section('title', \Lang::get('business_matching.business_matching'))

@section('css')
<link rel="stylesheet" href="{{ URL::asset('public/css/business_matching.css') }}">
<style type="text/css">
</style>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-database.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#config-web-app -->

<script>
  var myName = "";
  var attendee_id = "";
  var fullname = "";
  var i = 0;

  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyB60_wRcODjpoY4sH5yjT_XPc1h8Jmibm0",
    authDomain: "miceapps-992.firebaseapp.com",
    databaseURL: "https://miceapps-992.firebaseio.com",
    projectId: "miceapps-992",
    storageBucket: "miceapps-992.appspot.com",
    messagingSenderId: "379372204525",
    appId: "1:379372204525:web:efabaabb3999a0e874f7e4",
    measurementId: "G-TRH453P66E"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();


  firebase.database().ref("ITB_Asia_Chat_v2"/+myName+"/message").on("child_removed", function (snapshot) {
    document.getElementById("message-" + snapshot.key).innerHTML = "Message removed";
  });

  // function deleteMessage(self) {
  //   var messageId = self.getAttribute("data-id");
  //   firebase.database().ref("ITB_Asia_Chat_v2/"+myName+"/message").child(messageId).remove();
  //   document.getElementById("message-" + messageId).innerHTML = "Message removed";
    
  // }

  function sendMessage(myName, other_attendee_id) {
    var message = document.getElementById("message-"+myName+"-"+other_attendee_id).value;
    //alert(myName);
    firebase.database().ref("ITB_Asia_Chat_v2/"+myName+"/message").push().set({
      "message_body": message,
      "create_by": attendee_id,
      "fullname": fullname,
      "timestamp": firebase.database.ServerValue.TIMESTAMP
    });
    $('#messages-'+myName).animate({
	        scrollTop: $('#messages-'+myName)[0].scrollHeight}, 1000);
    return false;
  }
</script>

<style>
  .btn-delete {
    background: red;
    color: white;
    border: none;
    margin-left: 10px;
    border-radius: 5px;
  }
</style>
@stop

@section('content')

<div class="container" style="margin-bottom: 5%;">
	<h3 class="text-center">Online Chat Messages</h3>
	
	<div class="my-schedule-bydate">
		No Existing Appointment(s)	</div>
			
</div>
@stop
@section('javascript')
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-143269914-1"></script>
<script src="{{ URL::asset('public/js/agora/vendor/jquery.min.js') }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-143269914-1');
</script>

<script>
    //start of firebase
    function updateScrollbar() {
      $messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
        scrollInertia: 10,
        timeout: 0
      });
    }

    function insertMessage(myName, other_attendee_id) {
      msg = $('#message-'+myName+'-'+other_attendee_id).val();
      
      if ($.trim(msg) == '') {
        return false;
      }

      sendMessage(myName, other_attendee_id);
    }

     $('body').on('click', '.message-submit' ,function(){
      var myName = $(this).attr('data-appointment-id');
      var other_attendee_id = $(this).attr('data-attendee-id');
     
      insertMessage(myName, other_attendee_id);
    });

    $(window).on('keydown', function(e) {
    	var myName = $(this).attr('data-appointment-id');
	    var other_attendee_id = $(this).attr('data-attendee-id');
	    if (e.which == 13) {
	       insertMessage(myName, other_attendee_id);
	       return false;
	    }
    });

    function PullAllMessages(myName, attendee_id, fullname) {
    	firebase.database().ref("ITB_Asia_Chat_v2/"+myName+"/message").on("child_added", function (snapshot) {
			if (snapshot.val().create_by == attendee_id) {
				$('<div style="color:blue;" class="message message-personal"><div id="message-' + snapshot.key + '">Me: ' + snapshot.val().message_body + '</div></div>').appendTo($('.mCSB_container_'+myName)).addClass('new');
					$('.message-input').val(null);
			} else {
				$('<div class="message new"><div id="message-' + snapshot.key + '">' + snapshot.val().fullname + ': ' + snapshot.val().message_body + '</div></div>').appendTo($('.mCSB_container_'+myName)).addClass('new');
			}									          
		});		
		$('#messages-'+myName).animate({
	        scrollTop: $('#messages-'+myName)[0].scrollHeight}, 1000);

    }

   
    //end of firebase
  </script>
@stop