<?php if ($pt->config->comment_system == 'default' || $pt->config->comment_system == 'both') { ?>
    <div class="comments-content content">
        <div class="comments-header">
            <b>{{COUNT_COMMENTS}}</b> {{LANG comments}}
            <span class="dropdown sort-comments-dropdown">
              <span class="dropdown-toggle pointer" type="button" data-toggle="dropdown">
                <i class="material-icons">sort</i> {{LANG sort_by}}
              </span>
              <ul class="dropdown-menu">
                <li class="sort-comments" id="1">
                  <a href="javascript:void(0);">{{LANG top_commnets}}</a>
                </li>
                <li class="sort-comments" id="2">
                  <a href="javascript:void(0);">{{LANG last_commnets}}</a>
                </li>
              </ul>
            </span>
        </div>
        <div class="comment-box">
            <textarea name="comment" id="comment-textarea" cols="30" rows="2" class="form-control" placeholder="{{LANG write_your_comment}}"></textarea>
        </div>
        <div class="comment-button">
            <div class="pull-right">
                <button class="btn btn-main btn-sm" onclick="PT_PostComment(this)">{{LANG publish}}</button>
            </div>
            <div class="clear"></div>
            <hr>
            <div class="user-comments" id="video-pinned-comments">
              <div id="pinned-comment">
                {{PINNED_COMMENTS}}
              </div>
            </div>
        </div>
        <div class="comments-loading hidden">
          <i class="fa fa-circle-o-notch spin"></i>
        </div>
        <div class="user-comments" id="video-user-comments">
          {{COMMENTS}}
        </div>
        
        <?php if ($pt->count_comments > 0): ?>
            <div class="watch-video-show-more comments-load">
              {{LANG show_more}}
            </div>
        <?php endif; ?>
    </div>
<?php } ?>
<?php if ($pt->config->comment_system == 'fb' || $pt->config->comment_system == 'both') { ?>
    <div class="content">
        <div class="comments-header">
            {{LANG fb_comments}}
        </div>
        <div class="comment-box">
            <div class="fb-comments" data-href="{{URL}}" data-numposts="5" width="100%"></div>
        </div>
    </div>
<?php } ?>
<input type="hidden" id="video-id" value="{{VIDEO_ID}}">

<script>

jQuery(document).ready(function($) {

    var sort_comments_by = 2;

    $("li.sort-comments").click(function(event) {
      sort_comments_by = $(this).attr('id');
      var video_id     = $('#video-id').val();
      var data_obj     = {
        video_id:video_id,
        sort_by:sort_comments_by
      };

      $('#video-user-comments').empty();
      $(".comments-loading").removeClass('hidden');

      $.post('{{LINK aj/sort-comments}}',data_obj, function(data, textStatus, xhr) {
        if (data.status == 200) {
          PT_Delay(function(){
            $(".comments-loading").addClass('hidden');
            $('#video-user-comments').html(data.comments);
          },200);
        }
        else{
          PT_Delay(function(){
            $(".comments-loading").addClass('hidden');
          },200);
        }
      }); 

    });

    $.fn.scrollTo = function (speed) {
      if (typeof(speed) === 'undefined')
          speed = 500;

      $('html, body').animate({
          scrollTop: ($(this).offset().top - 100)
      }, speed);

      return $(this);
    };

    <?php if (!empty($_GET['cl']) && is_numeric($_GET['cl'])): ?>
      if ($('#comment-<?php echo($_GET['cl']); ?>').length) {
        var comment = $('#comment-<?php echo($_GET['cl']); ?>');
        comment.scrollTo().find('p.comment-text').addClass('active');
        PT_Delay(function(){
          comment.find('p.comment-text').removeClass('active')
        },2000);
      }
      else{
        $('#video-user-comments').scrollTo();
      }
    <?php elseif(!empty($_GET['rl']) && is_numeric($_GET['rl'])): ?>
      if ($('#reply-<?php echo($_GET['rl']); ?>').length) {
        var reply  = $('#reply-<?php echo($_GET['rl']); ?>');
        reply.scrollTo().find('p.reply-text').addClass('active');
        PT_Delay(function(){
          reply.find('p.reply-text').removeClass('active');
        },2000);
      }
      else{
        $('#video-user-comments').scrollTo();
      }
    <?php endif; ?>

    $('#comment-textarea').on('click', function(event) {
      event.preventDefault();
      var logged = $('#main-container').attr('data-logged');
      if (!logged) {
        window.location.href = "{{LINK login?to=<?php echo $pt->actual_link;?>}}";
        return false;
      }
      $(this).css('border', '1px solid #888');
    });

    $('.comments-load').on('click', function(event) {
      event.preventDefault();
      var last_id  = $('.main-comment:last').attr('data-id');
      var video_id = $('#video-id').val();
      var data_obj = {
        last_id: last_id,
        video_id:video_id,
        sort_by:sort_comments_by
      };

      if (sort_comments_by == 1) {
        var comment_ids      = [];
        $('.main-comment').each(function(index, el) {
          comment_ids.push($(el).attr('data-id'));
        });

        data_obj['comments'] = comment_ids.join()      
      }

      $.post('{{LINK aj/load-more-comments}}',data_obj, function(data, textStatus, xhr) {
        if (data.status == 200) {
          $('#video-user-comments').append(data.comments);
        } 

        else {
          $('.comments-load').text(data.message);
        }
      });      
   });
});


function PT_PostComment(button) {
   var text = $('#comment-textarea').val();
   if (!text) {
      $('#comment-textarea').css('border', '1px solid red');
      return false;
   }
   var video_id = $('#video-id').val();
   if (!video_id) {
      return false;
   }
   $(button).text("{{LANG please_wait}}");
   $(button).attr('disabled', true);
   $.post('{{LINK aj/add-comment}}', {video_id: video_id, text: text}, function(data, textStatus, xhr) {
      if (data.status == 200) {
         if ($('.no-comments-found').length > 0) {
            $('.no-comments-found').remove();
         }
         $('#comment-textarea').val('');
         $('#video-user-comments').prepend(data.comment);
      }
      $(button).text("{{LANG publish}}");
      $(button).attr('disabled', false);
   });
}


function PT_DeleteComment(id) {
  if (!id) { return false; }
  if (!confirm('{{LANG delete_confirmation}}')) { return false; }
  $('#comment-' + id).slideUp('fast');
  $.post('{{LINK aj/delete-comment}}', {id: id});
}

function PT_PinComment(id,pin){
  if (!id) { return false; }
  let pinned_comments = $('#pinned-comment');

  if (pin) {
    $("#comment-" + id).slideUp(200,function(){
      notif({
        msg: "{{LANG comment_pinned}}",
        type: "default",
        fade:0,
        timeout:1500
      });
    })
  }
  else{
    pinned_comments.empty();
    notif({
      msg: "{{LANG comment_unpinned}}",
      type: "default",
      fade:0,
      timeout:1500
    });
  } 
  
  $.post('{{LINK aj/pin-comment}}', {id: id},function(data){
    if (data.status == 200) {

      $("#comment-" + id).slideUp(100,function(){
        $(this).remove();
        pinned_comments.scrollTo();
      });

      pinned_comments.html(data.html);
    }

    else if(data.status == 304){
      $("#video-user-comments").append(data.html);
    } 
  });
}
</script>