@extends('template.main')

@section('content')
<section>
    <div class="container">
      <div class="row">
        @if(Request::segment(1) === 'blog')
        <div class="col-lg-8 col-md-12">
          @if(!empty($blogs))
          @php
              $no = 1;
          @endphp
          @foreach($blogs as $b)
          <div class="post list-blog {{ $no == 1 ? '' : 'mt-8' }}" post-date="{{ $b->post }}">
            <div class="post-image">
              <img class="img-fluid h-100 w-100" loading="lazy" src="{{ $b->image ? asset('media/'. $b->image) : asset('soft/images/blog/01.jpg') }}" alt="{{ \app\Http\Controllers\TemplateController::checkALtMedia($b->image) }}"> <a class="post-categories" href="{{ route('template.blog-detail', ['slug' => $b->slug]) }}">{{ $b->category->name }}</a>
            </div>
            <div class="post-desc">
              <div class="post-meta">
                <ul class="list-inline">
                  <li><i class="la la-calendar mr-1"></i> {{ date('d M, Y', strtotime($b->post)) }}</li>
                  <li><i class="la la-user mr-1"></i> By {{ $b->user->name }}</li>
                </ul>
              </div>
              <div class="post-title">
                <h4><a href="{{ route('template.blog-detail', ['slug' => $b->slug]) }}">{{ $b->title }}</a></h4>
              </div>
              <a class="icon-btn mt-4" href="{{ route('template.blog-detail', ['slug' => $b->slug]) }}"> <i class="la la-angle-right"></i>
              </a>
            </div>
          </div>
          @php
            $no++;
          @endphp
          @endforeach
          @if($blogs_count > 5)
          <div class="text-center mt-8">
            <button class="btn btn-theme btn-circle btn-load-more" type="button" data-text="Load More">
              <span>L</span>
              <span>o</span>
              <span>a</span>
              <span>d</span>
              <span> </span>
              <span>M</span>
              <span>o</span>
              <span>r</span>
              <span>e</span>
            </button>
          </div>
          @endif
          @endif
        </div>
        @else
        <div class="col-lg-8 col-md-12">
            <div class="left-side">
              <div class="post">
                <div class="post-image">
		
                  <img class="img-fluid" loading="lazy" src="{{ $blog->image ? asset('media/' . $blog->image) : asset('soft/images/blog/large/01.jpg') }}" alt="{{ \app\Http\Controllers\TemplateController::checkALtMedia($blog->image) }}">
		
                </div>
                <div class="post-desc">
                  <div class="post-meta">
                    <ul class="list-inline">
                      <li><i class="la la-calendar mr-1"></i> {{ $blog->post ? date('d M, Y', strtotime($blog->post)) : '' }}</li>
                      <li><i class="la la-user mr-1"></i> By {{ $blog->user->name }}</li>
                    </ul>
                  </div>
                  <div class="post-title">
                    <h2>{{ $blog->title }}</h2>
                  </div>
                 {!! $blog->content !!}
                  <div class="blog-share d-sm-flex justify-content-between mt-5">
                    {{-- <div class="social-icons">
                      <h4 class="mb-2">Share: </h4>
                      <ul>
                        <li><a href="#"><i class="fab fa-facebook-f"></i></a>
                        </li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a>
                        </li>
                        <li><a href="#"><i class="fab fa-google-plus-g"></i></a>
                        </li>
                      </ul>
                    </div> --}}
                    <div class="post-tags text-sm-left xs-mt-3">
                      <h4 class="mb-2">Tags: </h4>
                      <ul class="list-inline">
                        @php
                            $tags_detail = json_decode($blog->tags, true);
                        @endphp
                        @for($i = 0; $i <= count($tags_detail) - 1; $i++)
                        <li>
                          <a href="{{ route('template.blog') }}?tag={{ $tags_detail[$i] }}">{{ $tags_detail[$i] }}</a>
                        </li>
                        @endfor
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              {{--
              <div class="media-holder mt-5">
                <div class="section-title mb-4">
                  <h2 class="title">All <span>Comments</span></h2>
                </div>
                <div class="media">
                  <img class="img-center mr-3" alt="image" src="{{ asset('soft/images/thumbnail/01.png') }}">
                  <div class="media-body">
                    <h6>Romi kelly</h6> 
                    <div class="comment-date">23 April, 2019</div>
                    <p>Seuismod dissentiunt ne sit, ad eos iudico qualisque adversarium, tota falli et mei. Esse euismod urbanitas ut sed, et duo scaevola pericula splendide. Primis veritus contentiones nec ad, nec et tantas semper delicatissimi.</p>
                    <div class="comment-reply"> <a href="#">Reply</a>
                    </div>
                  </div>
                </div>
                <div class="media inner box-shadow">
                  <img class="img-center mr-3" alt="image" src="{{ asset('soft/images/thumbnail/02.png') }}">
                  <div class="media-body">
                    <h6>James Haldoe</h6> 
                    <div class="comment-date">23 April, 2019</div>
                    <p>Seuismod dissentiunt ne sit, ad eos iudico qualisque adversarium, tota falli et mei. Esse euismod urbanitas ut sed, et duo scaevola pericula splendide. Primis veritus contentiones nec ad, nec et tantas semper delicatissimi.</p>
                    <div class="comment-reply"> <a href="#">Reply</a>
                    </div>
                  </div>
                </div>
                <div class="media">
                  <img class="img-center mr-3" alt="image" src="{{ asset('soft/images/thumbnail/03.png') }}">
                  <div class="media-body">
                    <h6>Amber Lony</h6> 
                    <div class="comment-date">23 April, 2019</div>
                    <p>Seuismod dissentiunt ne sit, ad eos iudico qualisque adversarium, tota falli et mei. Esse euismod urbanitas ut sed, et duo scaevola pericula splendide. Primis veritus contentiones nec ad, nec et tantas semper delicatissimi.</p>
                    <div class="comment-reply"> <a href="#">Reply</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="post-comments mt-5">
                <div class="section-title mb-4">
                  <h2 class="title">Leave A Comment</h2>
                </div>
                <form id="contact-form" method="post" action="contact.php">
                  <div class="messages"></div>
                  <div class="form-group">
                    <input id="form_name" type="text" name="name" class="form-control" placeholder="Name" required="required" data-error="Name is required.">
                    <div class="help-block with-errors"></div>
                  </div>
                  <div class="form-group">
                    <input id="form_email" type="email" name="email" class="form-control" placeholder="Email" required="required" data-error="Valid email is required.">
                    <div class="help-block with-errors"></div>
                  </div>
                  <div class="form-group mb-0">
                    <textarea id="form_message" name="message" class="form-control h-100" placeholder="Your Comment" rows="4" required="required" data-error="Please,leave us a message."></textarea>
                    <div class="help-block with-errors"></div>
                  </div>
                  <button class="btn btn-theme mt-5" data-text="Post Comment"><span>P</span><span>o</span><span>s</span><span>t</span>
                    <span> </span><span>C</span><span>o</span><span>m</span><span>m</span><span>e</span><span>n</span><span>t</span>
                  </button>
                </form>
              </div>
              --}}
            </div>
          </div>
        @endif
        <div class="col-lg-4 col-md-12 sidebar md-mt-5">
          <div class="widget">
            <div class="widget-search">
              <form class="form-inline form" action="{{ route('template.blog') }}" method="GET">
                <div class="widget-searchbox">
                  <button type="submit" class="search-btn"> <i class="fas fa-search"></i>
                  </button>
                  <input type="text" name="title" placeholder="{!! $content->section_2 !!}" class="form-control">
                </div>
              </form>
            </div>
          </div>
          <div class="widget">
            <h5 class="widget-title">{!! $content->section_3 !!}</h5>
            <ul class="widget-categories list-unstyled">
              @if(!empty($category))
              @foreach($category as $c)
              <li> <a href="{{ route('template.blog') }}?category={{$c->slug}}">{{ $c->name }} <span>({{ \App\Blog::where([['blog_category_id', $c->id],['status', 'post']])->count() }})</span></a>
              </li>
              @endforeach
              @endif
            </ul>
          </div>        
          <div class="widget">
            <h5 class="widget-title">{!! $content->section_4 !!}</h5>
            <div class="recent-post">
              <ul class="list-unstyled">
                @if(!empty($recent_post))
                @foreach($recent_post as $r)
                <li class="mb-3">
                  <div class="recent-post-thumb">
                    <img class="img-fluid" loading="lazy" src="{{ $r->image ? asset('media/' . $r->image) : asset('soft/images/blog/blog-thumb/01.jpg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($r->image) }}">
                  </div>
                  <div class="recent-post-desc"> <a href="{{ route('template.blog-detail', ['slug' => $r->slug]) }}">{{ $r->title }}</a> 
                    <div class="post-date">{{ date('d', strtotime($r->post)) }} <span>{{ date('M Y', strtotime($r->post)) }}</span>
                    </div>
                  </div>
                </li>
                @endforeach
                @endif
              </ul>
            </div>
          </div>
          <div class="widget">
            <h5 class="widget-title">{!! $content->section_5 !!}</h5>
            <ul class="widget-tags list-inline">
              @if(!empty($tags))
              @for($i = 0; $i <= count($tags) - 1; $i++)
              <li> 
                <a href="{{ route('template.blog') }}?tag={{ $tags[$i] }}">{{ $tags[$i] }}</a>
              </li>
              @endfor
              @endif
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@section('js')
<script>
$(document).ready(function() {
  $('body').on('click', '.btn-load-more', function() {
    let last_post = $('body').find('.list-blog').last().attr('post-date');
    
    $.ajax({
      type: 'GET',
      url: "{{ route('template.blog-load-more') }}",
      data: {
        _token: "{{ csrf_token() }}",
        last_post,
        category: "{{ isset($_GET['category']) ? $_GET['category'] : NULL }}",
        tag: "{{ isset($_GET['tag']) ? $_GET['tag'] : NULL }}",
        search: "{{ isset($_GET['title']) ? $_GET['title'] : NULL }}"
      },
      beforeSend() {
        $('body').find('.btn-load-more').attr('data-text', 'Loading..')
        $('body').find('.btn-load-more').html(`
          <span>L</span>
          <span>o</span>
          <span>a</span>
          <span>d</span>
          <span>i</span>
          <span>n</span>
          <span>g</span>
          <span>.</span>
          <span>.</span>
        `)
      },
      success(response) {
        if(response) {
          $('body').find('.btn-load-more').attr('data-text', 'Load More')
          $('body').find('.btn-load-more').html(`
            <span>L</span>
            <span>o</span>
            <span>a</span>
            <span>d</span>
            <span> </span>
            <span>M</span>
            <span>o</span>
            <span>r</span>
            <span>e</span>
          `)

          $(response).insertAfter('.list-blog[post-date="' + last_post + '"]')
        } else {
          $('body').find('.btn-load-more').remove()
        }
      }
    })
  })
})
</script>
@endsection