@extends('layouts.layout-inner')

@section('content')
<div class="container-fluid no-padding">
  <div class="inner-page-title-wrap">
    <div class="inner-page-title">
      <h2>Blog</h2>
    </div>
    <div class="inner-page-title-pointer"></div>
  </div>
</div>

<div id="contentPage" class="container top-bot-spacer-40">
  <div class="row">
    <div class="col-md-9"> 
      <!-- blog list start -->
      <div class="blog-list">
        <div class="blog-list-ls">
          <div class="blg-date">{{  date('d', strtotime($post->created_at)) }}</div>
          <div class="blg-year">{{  date('M Y', strtotime($post->created_at)) }}</div>
        </div>
        <div class="blog-list-rs">
          <div class="blg-detail blg-single">
            <h2><a href="">{{ $post->title }}</a></h2>
            @if ($post->image)
            <img src="{{ asset('uploads/blog/' . $post->image) }}" alt="{{ $post->title }}">
            @endif
            {!! $post->body !!}
          </div>
          <div class="blg-share">
            <div class="blg-share-ls">
              <div class="sharethis-inline-share-buttons"></div>
            </div>
            <div class="blg-share-rs"> 
              <!--<a href="" class="blg-rd-more">Read More</a>--> 
            </div>
          </div>
        </div>
      </div>
      <!-- blog list end --> 
      <a href="{{ route('frontend.blog') }}" class="scti-small-btn pull-left margin-lft-70">Back to Blog</a>
      <div class="clearfix"></div>
      <!-- comment section start --> 
      @if ($post->comment_on)
      <div class="blog-comment" ng-controller="commentsCtrl">
        
        <!-- alert message -->
            <div ng-if="commentFlag.length > 0" ng-class="commentFlag == 'success' ? 'alert alert-success alert-dismissable' : 'alert alert-warning alert-dismissable'">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong>Success!</strong> <% statusMsg %>
            </div>
        <!-- end -->

        <h2 class="blg-pg-hds">Comments <span>{{ count($comments) }}</span></h2>
        <!-- comments 1 start -->
        @if (isset($comments))
          @foreach ($comments as $key => $comment)
          <div class="blog-comment-list">
              <div class="avatar color1">{{ substr($comment->name, 0, 1) }}</div>
              <div class="comments-cont">
                  <h3>{{ $comment->title }}<br><span>{{ $comment->name }} | {{ date('d M Y', strtotime($comment->created_at)) }}</span></h3>
                  <p>{{ $comment->content }}</p>
              </div>
          </div>
          @endforeach
        @endif
        <!-- comments 1 end -->
        <!-- comments 2 start -->
        <!--<div class="blog-comment-list">
        <div class="avatar color2">J</div>
        <div class="comments-cont">
        <h3>First Aid training<br><span>Johansson Pontus | 30 Jun 2017</span></h3>
        <p>Vestibulum molestie elit at ligula commodo rutrum. Quisque nec aliquet metus. Nam semper est ut commodo placerat. Quisque in semper nibh. Maecenas pretium ullamcorper luctus.</p>
        </div>
        </div>-->
        <!-- comments 2 end -->
        <a href="#blgcommentPopup" data-toggle="modal" data-dismiss="modal" class="blg-rd-more pull-left">Post Your Comment</a>

<div id="blgcommentPopup" class="modal fade" role="dialog" aria-hidden="true">
  <div class="modal-dialog fadeInUpQuick animated"> 
    
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
        <h2>{{ $post->title }} <span>( {{ count($comments) }} Comments )</span></h2>
        <button type="button" class="close" data-dismiss="modal"></button>
      </div>
      
      <div class="modal-body">
        <h3>Comment this article</h3>
        <form method="post" name="formComment" id="formComment" ng-submit="postComment(commentFields)">
            <div class="input-placeholder">
                <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" ng-model="commentFields.name" type="text" name="name" id="name" placeholder="Name" ng-minlength="3" ng-maxlength="150" required/>
                <div class="help-block has-error" ng-messages="formComment.name.$error" ng-if="formComment.name.$touched">
                  @include('frontend.partials.errormessages')
                </div>
            </div>
            <div class="input-placeholder">
                <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" ng-model="commentFields.email" type="email" name="email" id="email" placeholder="Email" ng-minlength="3" ng-maxlength="150" required/>
                <div class="help-block has-error" ng-messages="formComment.email.$error" ng-if="formComment.email.$touched">
                  @include('frontend.partials.errormessages')
                </div>
            </div>
            <div class="input-placeholder">
                <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" ng-model="commentFields.title" type="text" name="title" id="title" placeholder="Title" ng-minlength="3" ng-maxlength="150" required/>
                <div class="help-block has-error" ng-messages="formComment.title.$error" ng-if="formComment.title.$touched">
                  @include('frontend.partials.errormessages')
                </div>
            </div>
            <div class="input-placeholder">
                <textarea name="content" ng-model="commentFields.content" cols="" rows="" placeholder="Comment" ng-minlength="5" ng-maxlength="255" required></textarea>
                <div class="help-block has-error" ng-messages="formComment.content.$error" ng-if="formComment.content.$touched">
                  @include('frontend.partials.errormessages')
                </div>
            </div>
            <input type="hidden" ng-init="commentFields.post_id = {{ $post->id }}" ng-model="commentFields.post_id">
            {!! csrf_field() !!}
            <button type="submit" class="btn popup-login-btn pull-left" ng-disabled="formComment.$invalid">Submit</button>
            <div class="clearfix"></div>
        </form>
      </div>
    </div>
  </div>
</div>


      </div>
      @endif
      <!-- comment section end --> 
      </div>
      
    <div class="col-md-3">
      <!-- recent posts -->
        @widget('recentPosts')
      <!-- end -->
      <div class="blg-pg-spacer"></div>
       <div class="clearfix"></div>
      <!-- recent acchive years -->
        @widget('archiveYears')
      <!-- end -->
    </div>
  </div>
  <div class="clearfix"></div>
</div>


@endsection