<div class="modal fade" id="blog_comment_unreported" tabindex="-1" role="dialog" aria-labelledby="comment_unreported" aria-hidden="true" data-id="0">
    <div class="modal-dialog mat_box" role="document">
        <div class="modal-content">
			<div class="modal-body">
				<div class="no-track-found" style="padding: 30px 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg> {{LANG The comment report was successfully deleted.}}</div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="blog_report_comment" tabindex="-1" role="dialog" aria-labelledby="blog_report_comment" aria-hidden="true">
    <div class="modal-dialog mat_box create_playlist" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{LANG Report comment.}}</h5>
            </div>
            <form method="post" action="" id="blog-comment-report-form">
                <div class="alert alert-danger alert-empty" id="output-blog-report-comment-errors"></div>
                <div class="create_playlist_innr">
                    <div class="play_info">
                        <div class="form-group mat_input" style="text-align: initial;">
                            <textarea name="comment_description" id="blog_comment_description" rows="5" style="width: 100%;"></textarea><br>
                            <small>{{LANG Please describe whey you want to report this comment.}}</small>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="blog_comment_id" name="id">
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{LANG Cancel}}</button>
                    <button type="submit" class="btn btn-primary btn-mat" id="btn-blog-report-comment-submit">{{LANG Submit}}</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        var options = {
            url: "{{CONFIG ajax_url}}/blog-report-comment?hash_id=" + getHashID(),
            beforeSubmit:  function () {
                $('#output-blog-report-comment-errors').removeClass('alert-success').addClass('alert-danger');
                $('#output-blog-report-comment-errors').empty();
                $("#btn-blog-report-comment-submit").text("{{LANG Please wait..}}");
            },
            success: function (data) {
                $("#btn-blog-report-comment-submit").text("{{LANG Submit}}");
                if (data.status == 200) {
                    $('#output-blog-report-comment-errors').addClass('alert-success').removeClass('alert-danger');
                    $('#output-blog-report-comment-errors').text("Thanks for your submission, we will review your request shortly.");
                    setTimeout(function () {
                        $('#blog-comment-report-form')[0].reset();
                        $('#blog_report_comment').modal('hide');
                        closeModal();
                        var comment_id = $('#blog_comment_id').val();
                        $('.blog_comment_report[data-comment-id="'+comment_id+'"]').hide();
                        $('.blog_comment_unreport[data-comment-id="'+comment_id+'"]').css({'visibility':'inherit'});
                        $('.blog_comment_unreport[data-comment-id="'+comment_id+'"]').show();

                        $('#output-blog-report-comment-errors').empty();
                    }, 3000);
                } else if (data.status == 400) {
                    var errros = data.errors.join("<br>");
                    $('#output-blog-report-comment-errors').html(errros);
                }
            }
        };

        $('#blog-comment-report-form').ajaxForm(options);
    });
</script>