@extends('admin')
@section('styles')
    <link href="/assets/ht/css/main.css" rel="stylesheet" type="text/css"/>
@endsection
@section('content')
    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif
    @if (session()->has('success'))
        <div class="alert alert-success">{{ session()->get('success') }}</div>
    @endif
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif


    <div class="portlet-title">

    </div>

    <div class="ht-inner clearfix">
        <div class="feedback-wrapper">
            <div class="ht-section ht-depth-1 full-width" id="first-post">
                <form action="#" class="social-post-form " id="post-form">
                    <div class="form-group">
                        <div class="user-avatar"></div>
                        <textarea class="post-content-input post-input-change-row form-control ht-form-control" rows="2"
                                  placeholder="Viết thảo luận trong cộng đồng" name="content"></textarea>
                    </div>
                    <div class="attachment-preview">

                    </div>
                    <hr>
                    <div class="flex justify-content-between align-items-center">
                        <div>
                            <label class="add-attachment-btn ht-btn ht-btn ht-btn-grey btn-xs"><input type="file"
                                                                                                      id="files-post"
                                                                                                      name="images-post[]"
                                                                                                      multiple
                                                                                                      class="hidden"><i
                                        class="fa fa-picture-o ht-mgr8 ht-fz12"></i>Thêm ảnh</label>
                        </div>
                        <div>
                            <button type="submit" class="post-submit ht-btn ht-btn ht-btn-blue">Đăng bài viết <i id="load-more-comment-0" style="display: none" class="fa fa-spinner fa-pulse fa-fw color-grey-400 ht-mgl8"></i></button>
                        </div>
                    </div>
                </form>
            </div>
            <div id="main-list"></div>
            {{--<div class="on-loading-content"></div>--}}
        </div>

    </div>
@endsection

@push('scripts')
<script>

    var page = 1;

    $(document).on('click', '.post-like', function(e) {
       e.preventDefault();
        var post_id = $(this).attr('data-post-id');

       $.ajax({
           url: '{{ url('admin/internal-contact/like') }}'+'/'+post_id,
           type: 'POST',
           dataType: 'json',
           success: function(response) {
               if(response.status == 1)
               {
                    $('#like-'+post_id).html(response.html);
               }
           },
           error: function(xhr, result, errorThrown){
               // alert('Request failed.');
           }
       });

    });

    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            var last_p_id = $('#main-list > .ht-section').last().attr('data-post-id');
            $.ajax({
                url: '{{ url('admin/internal-contact/posts') }}',
                type: 'get',
                data: {
                    last_id: last_p_id
                },
                dataType: 'json',
                success: function (response) {
                    $('#main-list').append(response.html);
                }
            });

        }
    });

    $(document).on('click', '.load-more-reply-2', function(e) {
        e.preventDefault();
        var post_id = $(this).attr('data-post-id');

        var last_id = $('#list-comment-'+post_id+' > .data-comment').last().attr('data-comment-id');

        $.ajax({
            url: '{{ url('admin/internal-contact/comment') }}',
            data: {
                last_id: last_id,
                post_id: post_id
            },
            beforeSend: function()
            {
                $('#load-more-comment-'+post_id).show();
            },
            type: 'get',
            dataType: 'json',
            success: function (response) {
                $('#list-comment-'+post_id).append(response.html);
                $('#load-more-comment-'+post_id).hide();
            }

        });

    });

    $(document).on('keypress', '.reply-input', function(e) {
        var post_id = $(this).attr('data-post-id');
       if(e.which == 13)
       {
           e.preventDefault();
           $.ajax({
               url: '{{ url('admin/internal-contact/comment') }}'+'/'+post_id,
               type: 'POST',
               contentType:false,
               processData: false,
               // pass the form in the FormData constructor to send all the data inside the form
               data: new FormData($('#add-comment-form-'+post_id)[0]),
               dataType: 'json',
               success: function(response) {
                   if(response.status == 1)
                   {
                       $('.reply-input').val('');
                        $('#list-comment-'+post_id).prepend(response.html);
                        $('.image-preview').html('');
                   }
               },
               error: function(xhr, result, errorThrown){
                  // alert('Request failed.');
               }
           });
       }
    });

    $("#post-form").submit(function(e){
        // prevent the form from submitting
        e.preventDefault();
        $.ajax({
            url: '{{ url('admin/internal-contact/post') }}',
            type: 'POST',
            beforeSend: function()
            {
                $('#load-more-comment-0').show();
            },
            contentType:false,
            processData: false,
            // pass the form in the FormData constructor to send all the data inside the form
            data: new FormData(this),
            dataType: 'json',
            success: function(response) {
                if(response.status == 1)
                {
                    $('#main-list').prepend(response.html);
                    $('.post-content-input').val('');
                    $('.attachment-preview').html('');
                    $('#load-more-comment-0').hide();
                }
            },
            error: function(xhr, result, errorThrown){
                alert('Request failed.');
            }
        });
    });

    $(document).ready(function () {
        $.ajax({
            url: '{{ url('admin/internal-contact/posts') }}',
            data: {
                page: page
            },
            type: 'get',
            dataType: 'json',
            success: function (response) {
                $('#main-list').append(response.html);
            }

        });
    });

    $(document).on('change', '#files', function (e) {
        var postId = $(this).attr('data-post-id');
        var files = e.target.files,
            filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function (e) {
                var file = e.target;

                $(("#image-comment-"+postId)).append(
                    "<div class=\"single-image\">" +
                    "<img src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                    "<a href='' class='delete-file'><i class='fa fa-close'></i></a>" +
                    "</div>");
                $(".delete-file").click(function (e) {
                    e.preventDefault();
                    $(this).parent(".single-image").remove();
                });
            });
            fileReader.readAsDataURL(f);
        }
    });

    $(document).on('change', '#files-post', function (e) {
        var files = e.target.files,
            filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function (e) {
                var file = e.target;
                $('.attachment-preview').append(
                    '<div class="single-item ht-bgcover" style="background-image: url('+e.target.result+')"><a href="#" class="delete-item-btn"><i class="fa fa-close"></i></a></div>'
                );

                $(".delete-file").click(function (e) {
                    e.preventDefault();
                    $(this).parent(".single-image").remove();
                });
            });
            fileReader.readAsDataURL(f);
        }
    });

</script>
@endpush