{% if api.can_chat %}
<div class="menu"><form action="{{ chat_data.form_url }}" method="post" id="chat-form">
    <textarea name="text" id="chat-input"></textarea>
    <input type="hidden" name="token" value="{{ chat_data.form_token }}" />
    <input type="submit" name="submit" value="Gửi" />
    {% if api.device != 'old_phone' %}<a class="btn" href="#" id="img-button">Đăng ảnh</a><span id="img-status"></span>{% endif %}
    </form><input type="file" id="img-select" class="hide" accept="image/*" /></div>
    <div class="menu hide" id="img-result"></div>
{% endif %}

{% if api.device != 'old_phone' %}
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  var imgs = '';
    $(document).ready(function(){
      $('#img-button').click(function(){$('#img-select').trigger('click');return !1});
      $('#img-select').change(function(){upload(this.files[0])});
      $('#chat-form').submit(function(e){
      var _this = $(this);
      if (imgs.length > 0) {
        e.preventDefault();
        $.post(_this.attr('action'), {text: ($('#chat-input').val() + imgs), token: _this.find('input[name="token"]').val()}, function(){
          window.location.reload();
        })
      }});
  });
  function upload(file) {
    if(file && file.type.match(/image.*/)){
      var fd = new FormData();
      fd.append("image", file);
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "https://api.imgur.com/3/image.json");
      xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
          var percent = Math.floor((e.loaded / e.total) * 100) + '%';
          $("#img-status").html("Đang tải ("+percent+")");
        }
      };
      xhr.onload = function() {
        try{
        var res = JSON.parse(xhr.responseText);
        if (res.status === 200 && res.success === true) {
          var data = res.data;
       $("#img-status").html("Đang xử lí...");
 
          $('#img-result').show();
          imgs += '\r\n[url=' + data.link + '][img]' + data.link.replace(/\.([a-z]+)$/, 'm.$1') + '[/img][/url]';
          $("#img-result").append('<img src="' + data.link.replace(/\.([a-z]+)$/, 'b.$1') + '" class="img-thumb">');
          $("#img-status").html('');
        } else {
          window.alert('Lỗi: tải lên thất bại');
          $("#img-status").html('');
        }
        } catch (e) {
          window.alert('Lỗi: tải lên thất bại');
          $("#img-status").html('');
 
        }
      }
      xhr.setRequestHeader('Authorization', 'Client-ID 21ca8b31c6adc09');
      xhr.send(fd);
    } else {
      window.alert('Chỉ cho phép chọn ảnh');
    };
  };
</script>
{% endif %}

.hide {display:none}