@extends('front.layout.pages-layout')
@section('pageTitle', isset($pageTitle) ? $pageTitle : 'Document Title')
@section('meta_tags')
{!! SEO::generate() !!}
@endsection
@section('content')
<section class="section department-single">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <!-- Blog Posts Section -->
                <section>
                    <div class="container">
                        <!-- Blog Title and Meta -->
                        <div class="mb-4">
                            <h1 class="fw-bold">{{ $post->title }}</h1>
                            <ul class="post-meta list-unstyled small">
                                <li><i class="icofont-user"></i> <a href="{{ route('author_posts', $post->author->username) }}"> {{ $post->author->name }}</a></li>
                                <li><i class="mdi mdi-calendar"></i> {{ date_formatter($post->created_at) }}</li>
                                <li><i class="icofont-list"></i> <a href="{{ route('category_post',$post->post_category->slug) }}">{{ $post->post_category->name }}</a></li>
                                <li><i class="icofont-clock-time"></i> {{ readDuration($post->title,$post->content) }}{{Str::plural('min', readDuration($post->title, $post->content))}}</li>
                            </ul>
                        </div>

                        <!-- Post Image -->
                        <div class="mb-4">
                            <img src="/images/posts/{{ $post->featured_image }}" class="img-fluid rounded-3" alt="Post Image">
                        </div>

                        <!-- Share Icons -->
                        <div class="d-flex mb-4">
                            <div class="me-3"><strong>Share:</strong></div>
                            <div class="social-icons">
                                <a href="http://www.facebook.com/sharer/sharer.php?u={{ urldecode(route('read_post', $post->slug)) }}" target="_blank"><i class="icofont-facebook" ></i></a>
                                <a href="https://twitter.com/intent/tweet?text={{urldecode($post->title)}}&url={{urldecode(route('read_post',$post->slug))}}" target="_blank"><i class="icofont-twitter"></i></a>
                                <a href=" http://linkedin.com/shareArticle?mini=true&url={{urldecode(route('read_post',$post->slug))}}&title={{ urldecode($post->title) }}"><i class="icofont-linkedin"></i></a>
                                <a href="mailto:?subject={{ urldecode('Check out this post: '. $post->title) }}&amp;body={{urldecode('I found this interesting : ' .route('read_post',$post->slug))}}" target="_blank"><i class="icofont-envelope"></i></a>
                            </div>
                        </div>

                        <!-- Post Content -->
                        <div class="mb-5 text-justify me-3">
                            <p>{!! $post->content !!}</p>
                        </div>



                        <!-- Navigation -->
                        <div class="d-flex justify-content-between post-navigation">
                            @if ($prevPost)
                            <h6>Prev</h6>
                            @endif
                            @if ($nextPost)
                            <h6>Next</h6>
                            @endif
                        </div>
                        <div class="d-flex justify-content-between post-navigation">
                            @if ($prevPost)
                            <a href="{{ route('read_post',$prevPost->slug) }}" class="text-decoration-none text-prim">&laquo;{{ $prevPost->title }}
                            </a>
                            @endif
                            @if ($nextPost)
                            <a href="{{ route('read_post',$nextPost->slug) }}" class="text-decoration-none text-prim">{{ $nextPost->title }} &raquo;</a>
                            @endif
                        </div>


                    </div>
                    @if ($relatedPosts)
                    
                   
                    <div class="container mt-5">
                        <section class="section">
                        <h1>Related Posts</h1>
                        <hr>
                        @foreach ($relatedPosts as $related)
                        <div class="row mb-4 align-items-stretch">
                                    <!-- Image -->
                                    <div class="col-md-4 d-flex p-3">
                                        <img src="{{ asset('/images/posts/resized/resized_' . $related->featured_image) }}"
                                            class="img-fluid rounded-3 w-100 object-fit-cover"
                                            style="height: 100%; max-height: 250px; object-fit: cover;"
                                            alt="{{ $related->title ?? 'Post Image' }}">
                                    </div>

                                    <!-- Content -->
                                    <div class="col-md-8">
                                        <div class="card-body h-100 d-flex flex-column justify-content-between">
                                            <div>
                                                <h5 class="card-title fw-bold">
                                                    <a href="{{ route('read_post', $related->slug) }}">{{ $related->title }}</a>
                                                </h5>

                                                <div class="text-muted small mb-2 card-details">
                                                    <i class="icofont-ui-user"></i>
                                                    <a href="{{ route('author_posts', $related->author->username) }}">{{ $related->author->name }}</a> &nbsp;
                                                    <i class="mdi mdi-calendar-badge"></i> {{ date_formatter($related->created_at) }} &nbsp;
                                                    <i class="icofont-category"></i>
                                                    <a href="{{ route('category_post', $related->post_category->slug) }}" class="ml-1">{{ $related->post_category->name }}</a>
                                                </div>

                                                <p class="card-text">
                                                    {!! Str::ucfirst(words($related->content, 25)) !!}
                                                </p>
                                            </div>

                                            <div>
                                                <a href="{{ route('read_post', $related->slug) }}">Read More...</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                </section>
                            </div>
                    @endif
                </section>
                <!-- /Blog Pagination Section -->
            </div>
            <div class="col-lg-4 sidebar">

                <div class="widgets-container">

                    <!-- Search Widget -->
                    <x-sidebar-search></x-sidebar-search>
                    <!--/Search Widget -->

                    <!-- Categories Widget -->
                   <x-sidebar-categories></x-sidebar-categories>

                    <!--/Categories Widget -->

                    <!-- Recent Posts Widget -->
                    <div class="recent-posts-widget widget-item mt-5">

                        <h3 class="widget-title">Recent Posts</h3>
                        @foreach (sidebar_latest_posts() as $item)

                        <div class="post-item">
                            <img src="/images/posts/resized/resized_{{ $item->featured_image }}" alt="{{ $item->title }}" class="img-fluid" style="max-height: 100px; object-fit: cover;">
                            <div>
                                <h4 style="line-height: 1.5rem;"><a href="{{ route('read_post', $item->slug) }}">{{ $item->title }}</a></h4>
                                <time>{{ date_formatter($item->created_at) }}</li></time>
                            </div>
                        </div>
                        @endforeach
                        <!-- End recent post item-->
                    </div><!--/Recent Posts Widget -->

                    <!-- Tags Widget -->
                     <x-sidebar-tags></x-sidebar-tags>
                   <!--/Tags Widget -->

                </div>

            </div>
        </div>
    </div>
</section>
@endsection
@push('stylesheets')
<style>
    .social-icons a {
        display: inline;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        color: #6c757d;
    }

    .post-meta li {
        display: inline;
        margin-right: 1rem;
        color: #6c757d;
    }

    .post-navigation a {
        text-decoration: none;
    }

    .text-prim {
        color: #1691b6;
    }
</style>
@endpush
@push('scripts')
<script>
    $(document).on('click', '.social-icons > a', function(e){
        e.preventDefault();
        window.open($(this).attr('href'),'','height=450,width=450,top='+($(window).height()/2-275)+', left='+($(window).width()/2-225)+', toolbar=0, location=0, menubar=0, directionaries=0, scrollbars=0');
        return false;
    })
</script>
@endpush