<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>STEMChat</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <link rel="stylesheet" href="/css/quill.css">
  <link href="/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/chat.css">
</head>

<body>
  <div style="display: none;" id="curr_user" name='<%=curr_user.username%>'>
  </div>
  <div style="display: none;" id="curr_user_id" name='<%=curr_user.id%>'>
  </div>
  <div style="display: none;" id="url" name='<%=url%>'>
  </div>
  <div style="display: none;" id="tid">
  </div>

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

  <div class="container">
    <div id="mySidebar" class="sidebar">

      <a href="/">Home</a>
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">‚úñ</a>

      <a href='<%=about%>'>About</a>
      <a href='<%=home%>'>Chat</a>
      <a href='<%=blog%>'>Blogs</a>
      <a href='<%=project%>'>Projects</a>

      <a href='<%=feedback%>'>Feedback</a>
      <a href='<%=profile%>'>Profile</a>

      <a href="<%=logout%>">Logout</a>


    </div>

    <div class="panel messages-panel">
      <div class="contacts-list">
        <div class="header">
          <button class="openbtn" onclick="openNav()">‚ò∞</button>
        </div>
        <div class="inbox-categories">

          <div data-toggle="tab" data-target="#inbox" class="active _right" id="new_message"
            class="btn btn btn-success new-message"> <i class="fa fa-envelope"></i> </div>

        </div>
        <div class="dropdown-menu_">
          <button id="menu_active" class="menu-btn">Categories</button>
          <div class="menu-content">
            <div id="private_click" class="pointer links" onClick='function_pvt()'>
              <li id="private" class="" data-toggle="" data-target="">
                <h3 class="">
                  <i class="fa fa-user" aria-hidden="true"></i>

                  <b>Private Messages</b></h3>
                <h5>
                </h5>
              </li>
            </div>
            <div id="group_click" class="pointer links" onClick='function_category()'>
              <li id="group" class="" data-toggle="" data-target="">
                <h3 class="">
                  <i style="font-size:24px" class="fa">&#xf0c0;</i>

                  <b>Groups</h3>
                <h5>
                </h5>
              </li>
            </div>
            <div id="category_click" class="pointer links" onClick='function_category_common()'>
              <li id="category" class="" data-toggle="" data-target="">
                <h3 class="">
                  <i class="fa fa-list-alt" aria-hidden="true"></i>

                  <b>Categories</b></h3>
                <h5>
                </h5>
              </li>
            </div>

          </div>
        </div>
        <div class="tab-content">


          <div id="inbox" class="contacts-outter-wrapper tab-pane active">
            <form class="panel-search-form info form-group has-feedback no-margin-bottom">
              <input type="text" id="myInput" onkeyup="myFunc()" class="form-control" name="search"
                placeholder="Search">
              <span class="fa fa-search form-control-feedback"></span>
            </form>

            <div class="contacts-outter">

              <ul id="myUL" class="list-unstyled contacts">




                <div id="holder2">


                </div>
                <div id="holder4">


                </div>
                <div id="holder5">


                </div>
                <div id="holder6">


                </div>
              </ul>
            </div>

          </div>

        </div>
      </div>

      <div class="tab-content">
        <div class="tab-pane message-body" id="inbox-message-1">
          <div class="message-top">
            <center>
              <div id="slug">
              </div>
            </center>

            <button id="back_" class="openbtn" onclick="my_func2()">‚¨ÖÔ∏è Back</button>
            <div class="new-message-wrapper">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Send message to...">
                <a class="btn btn-danger close-new-message" href="#"><i class="fa fa-times"></i></a>
              </div>

              <div class="chat-footer new-message-textarea">
                <textarea class="send-message-text"></textarea>
                <label class="upload-file">
                  <input type="file" required="">
                  <i class="fa fa-share-alt"></i>
                </label>
                <button type="button" class="send-message-button btn-info"> <i class="fa fa-send"></i> </button>
              </div>
            </div>
          </div>

          <div class="message-chat">
            <div id="chat_" class="chat-body">
              <div id="holder3">



              </div>

            </div>
            <center>
              <div class="chat-footer">
                <button type="button" name="show_toolbar" id="show_toolbar" style="display: none;">üëá</button>
                <button type="button" name="hide_toolbar" id="hide_toolbar" style="display:none;">üëÜ</button>
                <div contenteditable="true" class="edit" id='editor'></div>
                <textarea id="temp_editor" class="send-message-text" onclick="showDiv()"></textarea>
                <form class="" action='/reply' method="post" id='reply_form'>
                  <input type="text" name="body" value="" id='reply_data' style="display: none;">
                  <button type="button" name="post" id='saveDelta' class="send-message-button btn-info"> <i
                      class="fa fa-send"></i></button>
                </form>

              </div>
            </center>
          </div>
        </div>




      </div>
    </div>
  </div>
  <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <span style="cursor:pointer" class="closes">‚úñ</span>
      <center>
        <h1 class="head_">Start discussion</h1>
        <form action="/chatpost" method="POST" id='pvt_msg_form'>

          <input type="text" name="title" required='' autocomplete="off" placeholder="Title"> <br>
          <textarea name="desc" required='' autocomplete="off" placeholder="Description"></textarea> <br>

          <input type="text" name="user_search" placeholder="Add User" list="users1" autocomplete="off" required=''>
          <datalist id='users1'>

          </datalist>
          <br>

          <p align="right">
            <button class="button-secondary" type="submit" id='on_but' name="compose">Compose</button>
          </p>
        </form>
      </center>

    </div>

  </div>



  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    var myUrl=$('#url').attr('name');
    myUrl=myUrl.substring(0,myUrl.length-1);
  </script>
  <script src="/js/chat.js" charset="utf-8"></script>
  <script src="/js/quill.js"></script>
  <script>
  //Editor and posting

      document.getElementById('editor').style.display = "none";
      function showDiv() {
        $(".chat-body").animate({ scrollTop: $('.chat-body').prop("scrollHeight") }, 1000);
        //  alert("hi");
        $(".chat-footer").css('height', "30%");
        $(".chat-body").css('height', "70vh");
        // alert("hello");

        document.getElementById('editor').style.display = "inline-block";
        document.getElementById('temp_editor').style.display = "none";
        $('#show_toolbar').show();
        //document.querySelector('.ql-toolbar.ql-snow').style.display = "inline-block";
      }

      $('#show_toolbar').click(() => {
        $('#show_toolbar').hide();
        $('#hide_toolbar').show();
        document.querySelector('.ql-toolbar.ql-snow').style.display = "inline-block";
      });
      $('#hide_toolbar').click(() => {
        $('#hide_toolbar').hide();
        $('#show_toolbar').show();
        document.querySelector('.ql-toolbar.ql-snow').style.display = "none";
      });
      var options = [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ 'header': 1 }, { 'header': 2 }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'direction': 'rtl' }],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'font': [] }],

        ['link', 'image', 'video']
      ];


      var quill = new Quill('#editor', {
        modules: {
          toolbar: options,

        },
        placeholder: "Type your message",
        scrollingContainer: '#editor',
        theme: 'snow'
      });
      document.getElementById('saveDelta').addEventListener('click', function () {
        var body = document.querySelector('div.ql-editor').innerHTML;
        var topic_id = $('#tid').attr('name');
        var topic_slug = $('#slug').attr('name');
        var url = '/reply/' + topic_slug + '/' + topic_id;
        $('#reply_data').val(body);
        quill.setContents('');
        $.ajax(url,{
          type:'POST',
          data:{
            slug:topic_slug,
            tid:topic_id,
            body:body
          },
          success:function (data,status,xhr) {   // success callback function
            setTimeout(function(){
              $('#holder3').html('');
              $('.pointer.links.active-tab').click();
              load_posts(topic_slug+'/'+topic_id+'/1');
              setTimeout(()=>{
                    $(".chat-body").animate({ scrollTop: $('.chat-body').prop("scrollHeight") }, 500);
              },500);
            },1000);
         },
          error:function(jqXhr, textStatus, errorMessage){alert('Failed to send message '+ errorMessage);}
        });
      });

  </script>
</body>

</html>
