<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html>
  <head>
    <title>Percakapan dengan <?php echo html_escape($phone);?></title>
    <?php include_once(VIEWPATH. 'includes/head.php'); ?>
    <style type="text/css">
    .chat-box-left,.chat-box-right{width:100%;height:auto;padding:15px;font-size:12px}
    .chat-box-left:after,.chat-box-right:after{top:100%;content:" "}
    .chat-box-left{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:relative;border:1px solid #ddd}
    .chat-box-left:after{left:10%;border:solid transparent;position:absolute;border-top-color:#ddd;border-width:15px;margin-left:-15px}
    .chat-box-name-left{margin-top:20px;margin-left:35px;text-align:left;color:#049E64;margin-bottom:15px}
    .chat-box-right{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:relative;border:1px solid #ddd;background-color:#f9f9f9}
    .chat-box-right:after{right:10%;border:solid transparent;position:absolute;border-top-color:#ddd;border-width:15px;margin-left:-15px}
    .chat-box-name-right{color:#354EA0;margin-top:20px;margin-right:35px;margin-bottom:15px;text-align:right}
    .blink{animation:blink-animation 1s steps(5,start) infinite;-webkit-animation:blink-animation 1s steps(5,start) infinite}
    @keyframes blink-animation{to{visibility:hidden}}
    @-webkit-keyframes blink-animation{to{visibility:hidden}}
    .blink:hover{animation:none;-webkit-animation:none}
    </style>
  </head>
  <body>
    <?php include_once(VIEWPATH. 'admin/_navbar.php'); ?>
    <div class="container">
      <ul class="breadcrumb">
        <li><a href="<?php echo site_url();?>"><i class="fa fa-home"></i></a></li>
        <li><a href="<?php echo site_url('admin');?>">Admin Panel</a></li>
        <li><a href="<?php echo site_url('admin/sms');?>">SMS &amp; Jabber</a></li>
        <li class="active"><span>Percakapan</span></li>
      </ul>
      <div class="row">
        <div class="col-sm-4 col-md-3">
          <?php
          $params = array(array(
            'title' => 'SMS &amp; Jabber',
            'icon' => 'fa fa-envelope',
            'links' => array(
                array('Kotak Masuk', site_url('admin/sms/kotak-masuk'), 'fa fa-inbox'),
                array('Kotak Keluar', site_url('admin/sms/kotak-keluar'), 'fa fa-paper-plane'),
            )
          ));
          echo sidebar_menu($params);
          ?>
        </div>
        <div class="col-sm-8 col-md-9">
          <div class="panel panel-default">
            <div class="panel-heading">
              <div class="dropdown pull-right">
                <a id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="font-size: 18px;color:#333;cursor:pointer;" title="Pengaturan">
                  <i class="fa fa-cog"></i>
                </a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li class="dropdown-header">Auto Refresh</li>
                  <li class="<?php echo $intval == 5000 ? 'active' : '';?>"><a href="<?php echo site_url('admin/sms/percakapan?phone='.urlencode($phone).'&amp;refresh=5');?>">5 detik</a></li>
                  <li class="<?php echo $intval == 10000 ? 'active' : '';?>"><a href="<?php echo site_url('admin/sms/percakapan?phone='.urlencode($phone).'&amp;refresh=10');?>">10 detik</a></li>
                  <li class="<?php echo $intval == 15000 ? 'active' : '';?>"><a href="<?php echo site_url('admin/sms/percakapan?phone='.urlencode($phone).'&amp;refresh=15');?>">15 detik</a></li>
                  <li class="<?php echo $intval == 20000 ? 'active' : '';?>"><a href="<?php echo site_url('admin/sms/percakapan?phone='.urlencode($phone).'&amp;refresh=20');?>">20 detik</a></li>
                  <li class="<?php echo $intval == 25000 ? 'active' : '';?>"><a href="<?php echo site_url('admin/sms/percakapan?phone='.urlencode($phone).'&amp;refresh=25');?>">25 detik</a></li>
                  <li class="<?php echo $intval == 30000 ? 'active' : '';?>"><a href="<?php echo site_url('admin/sms/percakapan?phone='.urlencode($phone).'&amp;refresh=30');?>">30 detik</a></li>
                </ul>
              </div>
              <h3><i class="fa fa-comments-o"></i> <?php echo html_escape($phone);?></h3>
              <div class="clearfix"></div>
            </div>
            <div class="panel-body" id="chat-box-container" style="height: 500px;overflow-y: auto;overflow-x: hidden;">
              <div class="text-center"><img src="<?php echo base_url('assets/ajax-loader.gif');?>"/></div>
            </div>
            <?php if ($reply): ?>
            <div class="panel-footer">
              <form id="chat-form" action="javascript:;">
                <div class="input-group">
                  <input type="text" class="form-control" id="new_message" placeholder="Tulis pesan..." value="" required="required" autocomplete="off"/>
                  <span class="input-group-btn">
                    <button type="submit" id="btn-chat" class="btn btn-primary"><i class="fa fa-paper-plane-o"></i> Kirim</button>
                  </span>
                </div>
              </form>
            </div>
            <?php endif;?>
          </div>
          <span id="chat-config" style="display: none;" data-lastid="0" data-height="0" data-autorefresh="1"></span>
          <div style="top:70px;right:30px;position: fixed;display: none;" id="chat-alert"><a class="text-danger blink" href="" title="Pesan baru!"><i class="fa fa-envelope fa-2x"></i></a></div>
        </div>
      </div>
    </div>
    <?php include_once(VIEWPATH.'includes/foot.php'); ?>
    <script type="text/javascript">
      var chatConfig = $("#chat-config");
      var autorefresh = chatConfig.attr('data-autorefresh');
      function updateScroll(doc_height = 0) {
        var height = 0;
        $('#chat-box-container .chat-box').each(function(i, value){
            height += parseInt($(this).height());
        });
        height += '';
        var new_height = parseInt(height) - (autorefresh == '1' ? 0 : doc_height);
        chatConfig.attr('data-height', height);
        $('#chat-box-container').animate({scrollTop: new_height});
      }
      function refreshChat() {
        $.get("<?php echo site_url('admin/sms/percakapan/pesan?phone='.urlencode($phone));?>", function(data) {
          if (data == '') {
            return;
          }
          var last_id = '';
          var type = '';
          $(data).filter('.chat-box').each(function(k, v){
            last_id = $(this).attr('id');
            type = $(this).attr("data-type");
          })
          var current_id = chatConfig.attr('data-lastid');;
          if (current_id != last_id) {
            if (type == "inbox" && chatConfig.attr('data-height') != "0"){
              var audio = new Audio('<?php echo base_url('assets/message-tone.mp3');?>');
              audio.play();
            }
            if (autorefresh == '1') {
              $("#chat-box-container").html(data);
              chatConfig.attr('data-lastid', last_id);
              updateScroll(parseInt(chatConfig.attr('data-height')));
            } else {
                $("#chat-alert").css('display','');
            }
          }
        });
        
      }
      refreshChat();
      setInterval(refreshChat, <?php echo $intval;?>);
      $(document).on('click','#chat-prev a',function() {
        var page = $(this).data('page');
        $(this).parent().html('<img src="<?php echo base_url('assets/ajax-loader.gif');?>"/>');
        $.get("<?php echo site_url('admin/sms/percakapan/pesan?phone='.urlencode($phone).'&page=');?>"+page, function(data) {
          if (data == '') {
            return;
          }
          $('#chat-prev').remove();
          $("#chat-box-container").prepend(data);
          updateScroll(parseInt(chatConfig.attr('data-height')));
        });
        chatConfig.attr('data-autorefresh', '0');
        return false;
      })
      <?php if ($reply):?>
      $('#chat-form').submit(function(event) {
        var textArea = $("#new_message");
        var message = textArea.val();
        if (message != '') {
          textArea.attr("disabled", "disabled");
          $.get("<?php echo site_url('admin/sms/kirim/ajax?phone='.urlencode($phone));?>&message="+encodeURIComponent(message), function(data) {
            textArea.removeAttr("disabled");
            if (data != 'OK') {
              alert(data);
            } else {
              textArea.val("");
              chatConfig.attr('data-height', '0');
              chatConfig.attr('data-autorefresh', '1');
              refreshChat();
            }
          });
        }
        return false;
      })
      <?php endif;?>
      $(document).on('click','#chat-alert a',function() {
        chatConfig.attr('data-height', '0');
        chatConfig.attr('data-autorefresh', '1');
        refreshChat();
        $(this).parent().css('display','none');
        return false;
      })
    </script>
  </body>
</html>