<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-functions.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
  const firebaseConfig = {
    apiKey: "AIzaSyA6KZpE6WJvtFGorJw8qWPICaSBmi8J0mo",
    authDomain: "yahlove-6f1b3.firebaseapp.com",
    projectId: "yahlove-6f1b3",
    storageBucket: "yahlove-6f1b3.appspot.com",
    messagingSenderId: "21273045598",
    appId: "1:21273045598:web:425cdbe07b05e61f0f62cf",
    measurementId: "G-8LW1CGS161"
  };

  firebase.initializeApp(firebaseConfig);
  var db = firebase.firestore();
  db.settings({
    timestampsInSnapshots: true
  })

  var auth = firebase.auth();
  var storageRef = firebase.storage().ref();
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script>
  var chatid = '<?php echo $chatId ?>';
  var myid = '<?php echo $adminId; ?>';
  var imageUrl = '<?php echo $userImage; ?>';
  var currentConversationID = '<?php echo $chatId ?>';


  function fetchMessages() {
    const vm = this;
    db.collection('Chats').doc(chatid).collection('Conversations').orderBy('timestamp').onSnapshot((querySnapshot) => {
      const allMessages = []
      querySnapshot.forEach((doc) => {
        console.log(doc.data);
        if (doc) allMessages.push(doc.data())
      })
      vm.messages = allMessages
    })
    if (vm.messages != "undefined" && vm.messages != "" && vm.messages != null) {
      $('.messages-content').empty();

      vm.messages.forEach(function(message) {
        console.log(message);
        if (message.fromID == myid) {
          if (message.type == "text") {
            $('<li class="replies"><img src="<?= base_url() ?>assets/uploads/6-small.png" alt="" /><p>' + message.content + '&nbsp;&nbsp;<i class="fa fa-trash deletechatid" onclick="deleteMessage(' + message.messageId + ')" data-id=' + message.messageId + ' aria-hidden="true"></i></p></li>').appendTo($('.messages-content'));
          } else {
            $('<li class="replies"><img src="<?= base_url() ?>assets/uploads/6-small.png" alt="" /><img src="' + message.image + '" style="height:200px;width:200px;"/>&nbsp;&nbsp;<i class="fa fa-trash deletechatid" onclick="deleteMessage(' + message.messageId + ')" data-id=' + message.messageId + ' aria-hidden="true"></i></li>').appendTo($('.messages-content'));
          }


          $('.message-input').val(null);
        } else {
          $('<li class="sent"><img src="' + imageUrl + '" alt="" /><p>' + message.content + '</p></li>').appendTo($('.messages-content'));
        }
      });
    }
    $('.messages').scrollTop($('.messages')[0].scrollHeight);


    setDate();
  }

  async function deleteMessage(msgId) {
    msgId = String(msgId);
    //alert(msgId);
    await db.collection('Chats').doc(chatid).collection('Conversations').doc(msgId).delete();
  }

  function sendMessage() {
    var messageText = document.getElementById("textmessage").value;
    if (messageText.trim()) {
      var msgId = Date.now();
      const message = {
        "content": messageText,
        "timestamp": msgId,
        "messageId": msgId.toString(),
        "fromID": myid,
        "toID": myid,
        "isRead": false,
        "type": "text"
      }
      return new Promise((resolve, reject) => {
          db.collection('Chats')
            .doc(chatid)
            .collection('Conversations')
            .doc(msgId.toString())
            .set(message)
            .then(function(docRef) {
              // db.collection('AdminGroupChats')
              //   .doc(chatid)
              //   .update({
              //     lastMessage: message
              //   });
              /*
                              db.collection('AdminGroup')
                              .doc(chatid)
                              .update({
                                lastmessage: messageText
                              });
                */
            }).then(function(docd) {
              resolve(Promise);
              $('#textmessage').val("");
              $('.messages').scrollTop($('.messages')[0].scrollHeight);
            })
        })
        .catch(function(error) {
          reject(error)
        })
    }

  }

  function imageUpload(input) {
    alert();
    shakti();
    //    $("#imgform").submit();
  }

  function shakti() {
    let file = document.getElementById("imgupload").files[0];
    let fileName = file.name;
    let nameParts = fileName.split('.');
    let ext = nameParts[nameParts.length - 1];
    let newFileName = Date.now().toString();
    newFileName = newFileName + '.' + ext;
    var msgId = Date.now();
    let uploadTask = storageRef.child('chats/' + newFileName).put(file);
    //    let bar = new ldBar("#imgUploadProgress");


    uploadTask.on('state_changed',
      (snapshot) => {

        progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        //          bar.set(progress);

      },
      (error) => {
        console.log('Error message : ' + error.message)
      },
      async () => {
        await uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
          alert(downloadURL)
          jQuery.ajax({
            type: "POST",
            url: "<?php echo base_url(); ?>" + "chat/chatimageupload",
            data: {

              conversationId: chatid,
              fileUrl: downloadURL,
              myid: myid,
              msgId: msgId
            },
            cache: false,
            success: function(res) {
              alert(res);
              if (res) {
                console.log(res);
              }
            }
          });
        });
        $("#overlay").hide('slow');
        document.getElementById("imgupload").value = null;


      }
    );
  }

  $("#imgform").on("submit", (e) => {

    e.preventDefault();
    alert("b");
    $("#overlay").show('slow');



  });
</script>

<script>
  var $messages = $('.messages-content'),
    d, h, m,
    i = 0;

  function setDate() {
    d = new Date()
    if (m != d.getMinutes()) {
      m = d.getMinutes();
      $('<div class="timestamp">' + d.getHours() + ':' + m + '</div>').appendTo($('.message:last'));
    }
  }

  function insertMessage() {
    msg = $('#textmessage').val();
    if ($.trim(msg) == '') {
      return false;
    }

    sendMessage();
  }


  $('.message-submit').click(function() {
    alert();
    insertMessage();
  });

  $('#OpenImgUpload').click(function() {

    alert();
    $('#imgupload').trigger('click');
  });

  function insertImageMessage() {
    alert();
    $('#imgupload').trigger('click');

  }

  $(window).on('keydown', function(e) {
    if (e.which == 13) {
      insertMessage();
      return false;
    }
  });
</script>
<div class="row" style="float: right;margin-right: 1%;">

  <a href="<?php echo base_url() . 'chat/deleteroomchat/' . $chatId ?>" class="btn btn-danger">Delete Chat</a>

</div>
<div class="content w-100">
  <div class="contact-profile">
    <img src="<?= $userImage ?>" alt="" />
    <p><?= $userName ?></p>
    <div class="social-media d-none">
      <i class="fa fa-facebook" aria-hidden="true"></i>
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <i class="fa fa-instagram" aria-hidden="true"></i>
    </div>
  </div>
  <input type="hidden" value="<?= $userImage ?>" id="imageUrl">
  <input type="hidden" value="<?= $chatId ?>" id="chatid">
  <div class="messages w-100" style="margin-bottom:50px; max-height:calc(100vh - 220px)">
    <ul>
      <div class="messages-content"></div>
    </ul>
  </div>
  <form id="imgform" method="post" enctype="multipart/form-data">
    <div class="message-input">
      <div class="wrap">
        <input type="text" name="message" id="textmessage" placeholder="Write your message..." />
        <input type="file" name="imgfile" id="imgupload" style="display:none" onchange="imageUpload(this.value)" />
        <span id="OpenImgUpload" onclick="insertImageMessage()">
          <i class="fa fa-paperclip attachment babyrunit" aria-hidden="true"></i>
        </span>
        <button class="submit" onclick="insertMessage()"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
      </div>
    </div>
  </form>

</div>


<style>
  .content {
    float: right;
    width: 60%;
    height: 100%;
    overflow: hidden;
    position: relative;
    min-height: calc(100vh - 60px);
    max-height: calc(100vh - 60px);

  }

  @media screen and (max-width: 735px) {
    .content {
      width: calc(100% - 58px);
      min-width: 300px !important;
    }
  }

  @media screen and (min-width: 900px) {
    .content {
      width: calc(100% - 340px);
    }
  }

  .content .contact-profile {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #f5f5f5;
  }

  .content .contact-profile img {
    width: 40px;
    border-radius: 50%;
    float: left;
    margin: 9px 12px 0 9px;
  }

  .content .contact-profile p {
    float: left;
  }

  .content .contact-profile .social-media {
    float: right;
  }

  .content .contact-profile .social-media i {
    margin-left: 14px;
    cursor: pointer;
  }

  .content .contact-profile .social-media i:nth-last-child(1) {
    margin-right: 20px;
  }

  .content .contact-profile .social-media i:hover {
    color: #435f7a;
  }

  .content .messages {
    height: auto;
    min-height: calc(100% - 93px);
    max-height: calc(100% - 93px);
    overflow-y: scroll;
    overflow-x: hidden;
  }

  @media screen and (max-width: 735px) {
    .content .messages {
      max-height: calc(100% - 105px);
    }
  }

  .content .messages::-webkit-scrollbar {
    width: 8px;
    background: transparent;
  }

  .content .messages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .content .messages ul li {
    display: inline-block;
    clear: both;
    float: left;
    margin: 15px 15px 5px 15px;
    width: calc(100% - 25px);
    font-size: 0.9em;
  }

  .content .messages ul li:nth-last-child(1) {
    margin-bottom: 20px;
  }

  .content .messages ul li.sent img {
    margin: 6px 8px 0 0;
  }

  .content .messages ul li.sent p {
    background: #435f7a;
    color: #f5f5f5;
  }

  .content .messages ul li.replies img {
    float: right;
    margin: 6px 0 0 8px;
  }

  .content .messages ul li.replies p {
    background: #f5f5f5;
    float: right;
  }

  .content .messages ul li img {
    width: 22px;
    border-radius: 50%;
    float: left;
  }

  .content .messages ul li p {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 205px;
    line-height: 130%;
  }

  @media screen and (min-width: 735px) {
    .content .messages ul li p {
      max-width: 300px;
    }
  }

  .content .message-input {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 99999999;
    background-color: #ffffff;
  }

  .content .message-input .wrap {
    position: relative;
  }

  .content .message-input .wrap input {
    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
    float: left;
    border: none;
    width: calc(100% - 90px);
    padding: 11px 32px 10px 8px;
    font-size: 0.8em;
    color: #32465a;
  }

  @media screen and (max-width: 735px) {
    .content .message-input .wrap input {
      padding: 15px 32px 16px 8px;
    }
  }

  .content .message-input .wrap input:focus {
    outline: none;
  }

  .content .message-input .wrap .attachment {
    position: absolute;
    right: 60px;
    z-index: 4;
    margin-top: 10px;
    font-size: 1.1em;
    color: #435f7a;
    opacity: .5;
    cursor: pointer;
  }

  @media screen and (max-width: 735px) {
    .content .message-input .wrap .attachment {
      margin-top: 17px;
      right: 65px;
    }
  }

  .content .message-input .wrap .attachment:hover {
    opacity: 1;
  }

  .content .message-input .wrap button {
    float: right;
    border: none;
    width: 50px;
    padding: 12px 0;
    cursor: pointer;
    background: #32465a;
    color: #f5f5f5;
  }

  @media screen and (max-width: 735px) {
    .content .message-input .wrap button {
      padding: 16px 0;
    }
  }

  .content .message-input .wrap button:hover {
    background: #435f7a;
  }

  .content .message-input .wrap button:focus {
    outline: none;
  }
</style>

<script>
  // fetchMessages();
  $(window).load(function() {
    setInterval(fetchMessages, 1000);
  })
</script>