@extends('layouts.app')

@section('content')
	<div class="col-md-9">
    <div class="panel panel-success">
        @include('includes.flash')
    </div>


    <link rel="stylesheet" href="http://cdn.rawgit.com/tabalinas/jssocials/v1.4.0/dist/jssocials.css">
    <link rel="stylesheet" href="http://cdn.rawgit.com/tabalinas/jssocials/v1.4.0/dist/jssocials-theme-flat.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.rawgit.com/tabalinas/jssocials/v1.4.0/dist/jssocials.min.js"></script>


		<div class="card animated fadeInLeftTiny animation-delay-5">
		    <div class="card-block card-block-big">
    		    <h1 class="no-mt">{{$post->post_title}}</h1>
    		    <div class="mb-4"><!-- 
    		      <img src="uploads/bigImage/{{$post->image_path}}" alt="..." class="img-circle mr-1"> --> by
    		      <a href="javascript:void(0)">{{$post->User->name}}</a> <!-- in
    		      <a href="javascript:void(0)" class="ms-tag ms-tag-info">Design</a> -->
    		      <span class="ml-1 hidden-xs">
    		        <i class="zmdi zmdi-time mr-05 color-info"></i>
    		        <span class="color-medium-dark">{{ $post->created_at->diffForHumans()}}</span>
    		      </span>
    		      <span class="ml-1">
    		        <i class="zmdi zmdi-comments color-royal mr-05"></i>{{$comments->count()}}</span>
    		    </div>
    		    <img src="../uploads/bigImage/{{$post->image_path}}" alt="" class="img-responsive mb-4">
    		    <p id="message" style="text-align:justify;">
                    {!! $post->message !!}
                </p>


             <h3>Share Post</h3>
            <div id="shareIconsCountInside"></div>
    		    <hr>
                <h3>Comments</h3>
                    @if ($comments->isEmpty())
                        <p>No Comments on this post.</p>
                        <hr>
                    @else
                        <h5><span class="ml-1">
                        <i class="zmdi zmdi-comments color-royal mr-05"></i>{{ $comments->count()}} </span>Comments</h5>

                        <div class="comments">
<!--                             @foreach ($comments as $comment)
 -->                                <!-- <div class="panel panel-primary">                                    
                                    <div class="panel panel-heading">                                        
                                        <span class=""> -->
                                            <!-- {{$comment->created_at->format('Y-m-d') }}
                                        </span>
                                    </div>

                                    <div class="panel-body">
                                        {{$comment->comment }}     
                                    </div> -->

                                    <!-- reply box -->

                                    <!-- <div class="reply-box reply-box-{{$comment->id}}">
                                        <form method="post" action="{{$comment->id}}/reply">
                                            <div class="form-group">
                                                <textarea style="padding: 15px;" id="reply" class="form-control" placeholder="Reply this comment" name="reply"></textarea>
                                                <button type="submit" class="btn btn-primary" data-expand="reply-box-{{$comment->id}}">
                                                    reply
                                                </button>
                                            </div>                                        
                                        </form>
                                    </div> -->

                                    <!-- reply box ends -->
                                    <!-- <div class="panel-footer">
                                        <div class="" style="">
                                            <span style="margin-left: 15px;" class="comment-reply" data-reply="{{$comment->id}}" href="">reply</span>
                                        </div>
                                    </div> -->
                                <!-- </div> -->
                           <!--  @endforeach -->
                        </div>
                    @endif
                <div class="comment-form">
                    <div class="fb-comments" data-href="http://blog.happyworldmealgate.org/{{'post/'.$post->id}}" data-width="100%" data-numposts="5"></div>

                </div>
            </div>
            <div class="row nomargins">
                @foreach($posts as $pst)
                    <div class="col-md-4 col-sm-6 mix food-colection">
                        <div class="card">
                        <a href="{{url('/post/'.$pst->id)}}">
                          <figure class="ms-thumbnail">
                            <img src="../uploads/thumbImage/{{$pst->image_path}}" alt="" class="img-responsive">
                          </figure>
                          <div class="card-block text-center portfolio-item-caption ">
                            <h6 class="color-primary no-mt">{{str_limit($pst->post_title, 25)}}</h6>
                          </div>
                        </a>
                        </div>
                    </div>
                @endforeach
            </div>
		</div>

        @include('includes.videos')
	</div>



    <script>
        var url = (window.location);
        var message = $("#messaeg").next().html();
            $("#shareIconsCountInside").jsSocials({
            url: url,
            text: message,
            shareIn: "popup",
            showLabel: false,
            showCount: "inside",
            shares: ["twitter", "facebook", "googleplus", "linkedin"]
        });
</script>



@endsection