@extends('frontend.layouts.main')
@section('meta_title', $post->meta_title ?? $post->title)
@section('meta_keywords', $post->meta_keywords ?? 'news, article')
@section('meta_description', $post->meta_description ?? Str::limit(strip_tags($post->content), 150))
@push('styles')
    <style>
        /* .avatar-dummy-icon {
                font-size: 50px;
                color: #ccc;
                vertical-align: middle;
                margin-right: 10px;

            } */
        .avatar-dummy-icon {
            font-size: 50px;
            width: 50px;
            height: 50px;
            color: #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #f0f0f0;
        }
    </style>
    @section('section')
        <!-- Start News Details Area -->
        <section class="news-details-area pb-40">
            <div class="container">
                <ul class="breadcrumb">
                    <li><a href="{{ route('home') }}"><i class="icofont-home"></i> Home</a>
                    </li>
                    <li><i class="icofont-rounded-right"></i></li>
                    <li><a href="{{ $post->category ? route('category', $post->category->slug) : '#' }}"
                            target="_blank">{{ $post->category ? $post->category->name : 'Uncategorized' }}</a></li>
                    {{-- <li><i class="icofont-rounded-right"></i></li> --}}
                    {{-- <li>Style</li> --}}
                </ul>

                <div class="row">
                    <div class="col-lg-8 col-md-12">
                        <div class="news-details">
                            <div class="article-content">
                                <ul class="entry-meta">
                                    <li><i class="icofont-user"></i> <a
                                            href="{{ route('author.profile', $post->author->name) }}">{{ $post->author->name }}</a>
                                    </li>
                                    <li><i class="icofont-eye-alt"></i>{{ $post->views }}</li>
                                    <li><i class="icofont-calendar"></i>{{ $post->published_at->format('M d, Y') }}</li>
                                </ul>
                                <h3 class="mb-0">{{ $post->title }}
                                </h3>
                            </div>

                            <div class="article-img">
                                <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}">
                            </div>

                            <div class="article-content">
                                {!! $post->content !!}
                                <ul class="category">
                                    <li><span>Tags:</span></li>
                                    @forelse($post->tags as $tag)
                                        <li>
                                            <a href="{{ route('tag', $tag->slug) }}">{{ $tag->name }}</a>
                                        </li>
                                    @empty
                                        <li>No Tags</li>
                                    @endforelse
                                </ul>

                            </div>
                        </div>

                        <div class="post-controls-buttons">
                            <div>
                                @if ($previousPost)
                                    <a href="{{ route('post.view', $previousPost->slug) }}">←
                                        {{ Str::limit($previousPost->title, 30) }}</a>
                                @endif
                            </div>

                            <div>
                                @if ($nextPost)
                                    <a href="{{ route('post.view', $nextPost->slug) }}">{{ Str::limit($nextPost->title, 30) }}
                                        →</a>
                                @endif
                            </div>
                        </div>


                        <div class="comments-area">
                            <h3 class="comments-title">{{ $post->comments->count() }} Comments:</h3>

                            <ol class="comment-list">
                                @forelse ($post->comments as $comment)
                                    <li class="comment">
                                        <article class="comment-body">
                                            <footer class="comment-meta">
                                                <div class="comment-author vcard">
                                                    {{-- <img src="./Sinmun - News Magazine &amp; Blogging HTML Template_files/author1.jpg"
                                                    class="avatar" alt="image"> --}}
                                                    <i class="icofont icofont-user-alt-5 avatar-dummy-icon"></i>

                                                    <b class="fn">{{ $comment->name }}</b>
                                                    <span class="says">says:</span>
                                                </div>

                                                <div class="comment-metadata">
                                                    <a href="#">
                                                        <time>{{ $comment->created_at->diffForHumans() }}</time>
                                                    </a>
                                                </div>
                                            </footer>

                                            <div class="comment-content">
                                                <p>{{ $comment->content }}</p>
                                            </div>

                                            <div class="reply">
                                                <a href="#" class="comment-reply-link">Reply</a>
                                            </div>
                                        </article>

                                        <ol class="children">
                                            <li class="comment">
                                                <article class="comment-body">
                                                    <footer class="comment-meta">
                                                        <div class="comment-author vcard">
                                                            <img src="./Sinmun - News Magazine &amp; Blogging HTML Template_files/author1.jpg"
                                                                class="avatar" alt="image">
                                                            <b class="fn">Sinmun</b>
                                                            <span class="says">says:</span>
                                                        </div>

                                                        <div class="comment-metadata">
                                                            <a href="#">
                                                                <time>April 24, 2024 at 10:59 am</time>
                                                            </a>
                                                        </div>
                                                    </footer>

                                                    <div class="comment-content">
                                                        <p>Lorem Ipsum has been the industry’s standard dummy text ever since
                                                            the
                                                            1500s, when an unknown printer took a galley of type and scrambled
                                                            it to
                                                            make a type specimen book.</p>
                                                    </div>

                                                    <div class="reply">
                                                        <a href="#" class="comment-reply-link">Reply</a>
                                                    </div>
                                                </article>
                                            </li>
                                        </ol>
                                    </li>
                                @empty
                                    <p>No comments yet. Be the first to comment!</p>
                                @endforelse


                            </ol>

                            <div class="comment-respond">
                                <h3 class="comment-reply-title">Leave a Reply</h3>

                                <form action="{{ route('post.comments') }}" method="POST" class="comment-form">
                                    @csrf

                                    <input type="hidden" name="post_id" value="{{ $post->id }}">

                                    <p class="comment-notes">
                                        <span id="email-notes">Your email address will not be published.</span>
                                        Required fields are marked <span class="required">*</span>
                                    </p>

                                    {{-- Comment Field --}}
                                    <p class="comment-form-comment">
                                        <label for="comment">Comment <span class="required">*</span></label>
                                        <textarea name="content" id="comment" cols="45" rows="5" class="@error('content') is-invalid @enderror"
                                            required>{{ old('content') }}</textarea>
                                        @error('content')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </p>

                                    {{-- Name Field --}}
                                    <p class="comment-form-author">
                                        <label for="author">Name <span class="required">*</span></label>
                                        <input type="text" id="author" name="name" value="{{ old('name') }}"
                                            class="@error('name') is-invalid @enderror" required>
                                        @error('name')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </p>

                                    {{-- Email Field --}}
                                    <p class="comment-form-email">
                                        <label for="email">Email <span class="required">*</span></label>
                                        <input type="email" id="email" name="email" value="{{ old('email') }}"
                                            class="@error('email') is-invalid @enderror" required>
                                        @error('email')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </p>

                                    {{-- Remember Checkbox (optional frontend only) --}}
                                    <p class="comment-form-cookies-consent">
                                        <input type="checkbox" value="yes" id="remember">
                                        <label for="remember">
                                            Save my name and email in this browser for the next time I comment.
                                        </label>
                                    </p>

                                    <p class="form-submit">
                                        <input type="submit" id="submit" class="submit" value="Post Comment">
                                    </p>
                                </form>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-12">
                        @include('frontend.partials.sidebar')
                    </div>

                </div>
            </div>
        </section>

        @include('frontend.partials.more-news')



    @endsection
