@extends("layout.app")
<style>
    article .article__body p:not(:last-child), article .article__body ul:not(:last-child) {
        margin-bottom: unset!important;
    }
</style>
@section("content")
    <section class="text-center mt-20">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10 col-lg-8">
                    <article>
                        <div class="article__title text-center">
                            <h1 class="h2">{{$blog->title}}</h1>
                            <span>{{$blog->created_at->format("d/m/Y")}} - </span>
                            <span>

                                        <a href="{{route("blog.index",['category'=>$blog->blog_category->slug])}}">{{$blog->blog_category->title}}</a>
                                    </span>
                            <span> - {{$blog->views}} <i class="fa fa-eye"></i></span>
                        </div>
                        <div class="article__body">
                            <img alt="{{$blog->title}}" src="{{$blog->image}}">
                        </div>
                        <div class="article__body">
                            {!! $blog->content !!}
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row justify-content-center">
                <div style="display:flex;justify-content:center;font-weight: bold;font-size: 15px;color: #666666a8">
                    <span style="margin:0 5px"> <span id="views-{{$blog->id}}" style="font-size: 10px">{{$blog->views}}</span> <i class="fa fa-eye" data-id="{{$blog->id}}" style="cursor: pointer"></i></span>

                    <span style="margin:0 5px"> <span id="likes-{{$blog->id}}" style="font-size: 10px">{{$blog->likes}}</span> <i class="far fa-thumbs-up like" data-id="{{$blog->id}}" style="cursor: pointer"></i></span>

                    <span style="margin:0 5px"> <span id="dis-{{$blog->id}}" style="font-size: 10px">{{$blog->dis_likes}}</span> <i class="far fa-thumbs-down dis-like" data-id="{{$blog->id}}" style="cursor: pointer"></i></span>
                </div>
{{--                <div class="col-md-10 col-lg-8" style="margin: 0 auto;--}}
{{--    float: none;">--}}
{{--                    <div class="comments">--}}
{{--                        <h3>التعليقات</h3>--}}
{{--                        <div class="fb-comments" data-href="{{route("blog.details",$blog->id)}}" data-numposts="5" data-width="100%" data-order-by="reverse_time"></div>--}}
{{--                    </div>--}}

{{--                </div>--}}
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
@endsection
@section("scripts")
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2&appId=1455688594751236&autoLogAppEvents=1';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        $(document).ready(function (e) {
            $('.like').on('click',function (){
                let id = $(this).data('id')
                $.ajax({
                    url: "{{route("update-blog-attr")}}",
                    type: "POST",
                    data: { id: id, type:'likes'},
                    success: function(result) {
                        $('#likes-'+id).text(result['likesCount'])
                    },
                    error: function(e) {
                        console.log(e)
                    }
                });
            });
            $('.dis-like').on('click',function (){
                let id = $(this).data('id')
                $.ajax({
                    url: "{{route("update-blog-attr")}}",
                    type: "POST",
                    data: { id: id, type:'disLike'},
                    success: function(result) {
                        $('#dis-'+id).text(result['disLikesCount'])
                    },
                    error: function(e) {
                        console.log(e)
                    }
                });
            });

        });


    </script>
@endsection