@extends('layouts.public')
@section('title', 'Post')
@section('content')
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-header-inner text-center">
                        {{-- <h1 class="page-title">
                            Single Post
                        </h1> --}}
                        <ul>
                            <li>
                                <a class="active" href="{{ route('welcome') }}">Home</a>
                            </li>
                            <li>Post</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section id="content" class="section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-12 col-xs-12">

                    <div class="blog-post single-gallery">

                        <div class="feature-inner">
                            <a class="lightbox" href="{{ asset('storage/posts/' . $post->post_image) }}"><img
                                    src="{{ asset('storage/posts/' . $post->post_image) }}" alt=""></a>
                        </div>


                        <div class="post-content">
                            <div class="meta">
                                <span class="meta-part"><a href="#"><i class="lni-user"></i> Admin</a></span>
                                <span class="meta-part"><a href="#"><i class="lni-calendar"></i>
                                        {{ date('jS M Y', strtotime($post->created_at)) }}</a></span>
                                <span class="meta-part"><a href="#"><i class="lni-ticket-alt"></i> Category</a></span>
                                <span class="meta-part"><a href="#"><i class="lni-comment"></i>
                                        {{ $post->user->name }}</a></span>
                            </div>
                            <h3 class="post-title"><a href="#">{{ $post->title }}</a></h3>
                            {!! $post->post !!}

                            <div class="share">
                                <div class="social-link">
                                    <span>Share this Post</span>
                                    <a class="twitter" href="#"><i class="lni-twitter-filled"></i></a>
                                    <a class="facebook" href="#"><i class="lni-facebook-filled"></i></a>
                                    <a class="google" href="#"><i class="lni-google-plus"></i></a>
                                    <a class="linkedin" href="#"><i class="lni-linkedin-filled"></i></a>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div id="comments" class="d-none">
                        <h2 class="comments-title"><i class="icon-bubbles"></i> Comments</h2>
                        <ol class="comments-list">
                            <li>
                                <div class="comment-box clearfix">
                                    <div class="avatar"><a href="#"><img alt=""
                                                src="assets/img/blog/user1.jpg"></a></div>
                                    <div class="comment-content">
                                        <div class="comment-meta">
                                            <h4 class="comment-by">
                                                <a href="#">John Doe</a>
                                            </h4>
                                            <span class="comment-date">August 27,2016 at 02:30am | <a href="#"
                                                    class="reply-link"><i class="lni-reply"></i></a></span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor
                                            incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                </div>
                                <ul>
                                    <li>
                                        <div class="comment-box clearfix">
                                            <div class="avatar">
                                                <a href="#"><img alt="" src="assets/img/blog/user2.jpg"></a>
                                            </div>
                                            <div class="comment-content">
                                                <div class="comment-meta">
                                                    <h4 class="comment-by">
                                                        <a href="#">Jane Smith</a>
                                                    </h4>
                                                    <span class="comment-date">May 15, 2020 at 7:39 pm | <a href="#"
                                                            class="reply-link"><i class="lni-reply"></i></a></span>
                                                </div>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod
                                                    tempor incididunt ut labore et dolore magna aliqua.</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div class="comment-box clearfix">
                                    <div class="avatar"><a href="#"><img alt=""
                                                src="assets/img/blog/user3.jpg"></a></div>
                                    <div class="comment-content">
                                        <div class="comment-meta">
                                            <h4 class="comment-by">
                                                <a href="#">Jane Smith</a>
                                            </h4>
                                            <span class="comment-date">May 15, 2020 at 7:39 pm | <a href="#"
                                                    class="reply-link"><i class="lni-reply"></i></a></span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor
                                            incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                </div>
                            </li>
                        </ol>

                        <div id="respond">
                            <form action="#">
                                <div class="row">
                                    <div class="col-lg-4 col-md-12 col-xs-12 mb-4">
                                        <input id="author" class="form-control" name="author" type="text"
                                            value="" placeholder="Full Name">
                                    </div>
                                    <div class="col-lg-4 col-md-12 col-xs-12 mb-4">
                                        <input id="email" class="form-control" name="author" type="text"
                                            value="" placeholder="Email Address">
                                    </div>
                                    <div class="col-lg-4 col-md-12 col-xs-12 mb-4">
                                        <input id="url" class="form-control" name="url" type="text"
                                            value="" placeholder="Website">
                                    </div>
                                    <div class="col-12">
                                        <textarea id="comment" class="form-control mb-3" name="comment" cols="102" rows="8"
                                            placeholder="Messages"></textarea>
                                        <button type="submit" id="submit" class="btn btn-common">Submit
                                            Review</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>

                <aside id="sidebar" class="col-lg-4 col-md-12 col-xs-12 right-sidebar">

                    <div class="widget widget-search">
                        <form action="#">
                            <input class="form-control" type="search" placeholder="Start Searching...">
                            <button class="search-btn" type="submit"><i class="lni-search"></i></button>
                        </form>
                    </div>

                    <div class="widget widget-popular-posts">
                        <h5 class="widget-title">Recent Posts</h5>
                        @if (isset($recent_posts) && count($recent_posts) > 0)
                            <ul class="posts-list">
                                @foreach ($recent_posts as $item)
                                    <li>
                                        <div class="widget-thumb">
                                            <a href="{{ route('view.post', $item->post_slug) }}">
                                                <img height="70"
                                                    src="{{ asset('storage/posts/' . $item->post_image) }}"
                                                    alt="Post Image">
                                            </a>
                                        </div>
                                        <div class="widget-content">
                                            <a href="{{ route('view.post', $item->post_slug) }}">{{ $item->title }}</a>
                                            <span><i
                                                    class="icon-calendar"></i>{{ date('Sj M Y', strtotime($item->created_at)) }}</span>
                                            <span><i class="icon-folder"></i>Category</span>
                                        </div>
                                        <div class="clearfix"></div>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <div class="p-3">
                                No recent posts
                            </div>
                        @endif
                    </div>

                    <div class="widget widget-categories">
                        <h5 class="widget-title">Categories</h5>
                        <ul class="cat-list">
                            <li>
                                <a href="#">Life Style</a>
                                <span class="num-posts">09</span>
                            </li>
                            <li>
                                <a href="#">Blog</a>
                                <span class="num-posts">15</span>
                            </li>
                            <li>
                                <a href="#">Fasion</a>
                                <span class="num-posts">21</span>
                            </li>
                            <li>
                                <a href="#">Sports</a>
                                <span class="num-posts">05</span>
                            </li>
                            <li>
                                <a href="#">Finance</a>
                                <span class="num-posts">29</span>
                            </li>
                            <li>
                                <a href="#">Political</a>
                                <span class="num-posts">17</span>
                            </li>
                        </ul>
                    </div>

                    <div class="widget d-none">
                        <h5 class="widget-title">Post Carousel</h5>
                        <div id="post-carousel" class="post-slide">
                            <div class="item">
                                <a class="lightbox" href="assets/img/blog/img1.jpg"><img src="assets/img/blog/img1.jpg"
                                        alt=""></a>
                                <div class="post-content">
                                    <div class="meta">
                                        <span class="meta-part"><a href="#"><i class="lni-calendar"></i> Fabruary
                                                25, 2020</a></span>
                                        <span class="meta-part"><a href="#"><i class="lni-ticket-alt"></i>
                                                Events</a></span>
                                    </div>
                                    <h3><a href="#">Brooklyn Beta was the most important conference</a></h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quo harum ipsa
                                        eaque laudantium sed eligendi nostrum nemo tempore recusandae.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="widget widget-social">
                        <h5 class="widget-title">Social Media</h5>
                        <div class="social-link">
                            <a class="twitter" target="_blank" href="#"><i class="lni-twitter"></i></a>
                            <a class="facebook" target="_blank" href="#"><i class="lni-facebook"></i></a>
                            <a class="google" target="_blank" href="#"><i class="lni-google-plus"></i></a>
                            <a class="linkedin" target="_blank" href="#"><i class="lni-linkedin"></i></a>
                        </div>
                    </div>

                    <div class="widget tag">
                        <h5 class="widget-title">Tag Cloud</h5>
                        @if (!empty(json_decode($post->post_tags)))
                            <div class="tag-item">
                                @foreach (json_decode($post->post_tags) as $tag)
                                    <a href="#"><i class="fa fa-tag"></i> {{ $tag }}</a>
                                @endforeach
                            </div>
                        @else
                            <!-- Handle the case where the JSON column is empty or not valid -->
                        @endif

                    </div>
                </aside>

            </div>
        </div>
    </section>
@endsection