@extends('frontend.layouts.main')
@section('content')
<section class="page-about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-about-h">Blog Details</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center">
                        <li class="breadcrumb-item text-center"><a class="breadcrumb-home"
                            href="{{url('/')}}">Home</a></li>
                        <li class="breadcrumb-item active text-center" aria-current="page">Blog</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>

<section class="detail-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="row ">
                    <div class="col-lg-9">
                        <div class="detail-main image">
                            <img src="assests/image/detail.png" class="img-fluid" alt="">
                        </div>
                        <div class="detail-section-body">
                            <h2 class="title-name">{{ $blog->title }}</h2>
                        </div>
                        <div class="row detail-icon">
                            <div class="d-flex">
                                <span class=""> <i class="fa-solid fa-calendar-days blog"></i></span>
                                <p class=" icon-name">{{date("M d Y",strtotime($blog->created_at))}}</p>
                                <span class=""><i class="fa-solid fa-user admin"></i></span>
                                <p class="icon-name">{{$blog->author_name}}</p>
                                <!-- <span class=""> <i class="fa-solid fa-comment blog ms-3"></i></span> -->
                                <!-- <p class=" icon-name">No comments</p> -->
                            </div>
                        </div>
                        <div class="detail-p">
                            {!! $blog->long_description !!}
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="row">
                        <div class="search-box">
                        <div class="d-flex align-items-center ">
                                <form id="searchBlogs" class="d-flex">
                                    @csrf
                                    <input class="form-control me-1" type="search" name="search" placeholder="Search" aria-label="Search" required>
                                    <button class="btn btn-primary" type="submit">Search</button>
                                </form>
                            </div>
                            <div class="card mt-4 border-0" style="display:none;" id="search-blogs">
                                <div class="card-header">
                                    Search Result
                                </div>
                                <ul class="list-group" id="searchResults"></ul>
                            </div>
                        </div>
                        {{--<div class="category-box">
                            <div class="card mt-4 border-0">
                                <div class="card-header">
                                    Categories
                                </div>
                                <ul class="list-group ">
                                    @foreach ($blogCategory as $cat)
                                        @if ($cat->blogs->count() > 0)
                                            <a href="{{route('frontend.blog.index',['category'=>$cat->slug])}}" class="list-group-a">
                                                <li class="list-group-item">{{$cat->title}}</li>
                                            </a>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        </div>--}}
                        <div class="post-box">
                        <div class="related-post-heading pt-4">Related Post</div>
                            @foreach ($relatedBlogs as $blog)
                                <div class="related-post-blog d-flex pt-3">
                                    <div class="related-left-img">
                                        <img src="{{asset($blog->thumbnail)}}" alt="" class="related-blog-img" width="100" height="75">
                                    </div>
                                    <div class="related-post-blog-content ms-2">
                                        <a class="related-post-blog-content-h" href="{{route('frontend.blog-detail.index',$blog->slug)}}">
                                            {{$blog->title}}
                                        </a>
                                        <!-- <div class="related-post-blog-content-p">
                                            {!! $blog->description !!}
                                        </div> -->
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="recent-post">
                        <div class="related-post-heading">Recent Post</div>
                            @foreach ($recentBlogs as $blog)
                                <a class="recent-post pt-3" href="{{route('frontend.blog-detail.index',$blog->slug)}}"> 
                                   <h6>{{ucfirst(strtolower($blog->title))}}</h6>
                                </a>
                            @endforeach
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
<!-- Push script to layout -->
@push('scripts')
<script>
$(document).ready(function() {
  $("#searchBlogs").submit(function(e) {
    e.preventDefault(); 
    var formData = $(this).serialize(); 
    $.ajax({
      type: "POST",
      url: "{{ route('frontend.blogs.search') }}",
      data: formData,
      dataType: 'json', 
      success: function(res) {
        if(res.count > 0){
            $('#search-blogs').show();
            $('#searchResults').empty();
            var html = '';
            res.data.forEach(function(blog) {
                html += '<a href="' + blog.slug + '" class="list-group-a">';
                html += '<li class="list-group-item">' + blog.title + '</li>';
                html += '</a>'; 
            });
            $('#searchResults').html(html);
        }else{
            $('#search-blogs').show();  
                var html = '';
                html += '<a href="#" class="list-group-a">';
                html += '<li class="list-group-item">Opps,No Result Found!!</li>';
                html += '</a>';
            $('#searchResults').html(html);
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.error(errorThrown); 
      }
    });
  });
}); 
</script>
@endpush
<!-- Push script to layout -->