@extends('frontend.layouts.master')
@section('meta_title', $model->title . ' || ' . $setting->app_name)

@push('custom_meta')
<meta name="description" content="{{ $model->seo_description }}">
<meta property="og:title" content="{{ $model->seo_title }}" />
<meta property="og:description" content="{{ $model->seo_description }}" />
<meta property="og:image" content="{{ asset($model->image) }}" />
<meta property="og:URL" content="{{ url()->current() }}" />
<meta property="og:type" content="website" />
@endpush
@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/css/shareon.min.css') }}">
@endpush
@section('meta_title', $setting->app_name . ' | ' . $model->title)
@section('contents')
<!-- breadcrumb-area -->
<x-frontend.breadcrumb :title="__(' ')" :links="[
        ['url' => route('home'), 'text' => __('Home')],
        ['url' => route('forums'), 'text' => __('Forums')],
        ['url' => '', 'text' => $model->title],
    ]" />
<!-- breadcrumb-area-end -->

<!-- blog-details-area -->
<section class="blog-details-area section-py-120">
    <div class="container">
        <div class="row">
            <div class="col-xl-9 col-lg-8">
                <div class="blog__details-wrapper">
                    <div class="blog__details-thumb">
                        <img src="{{ asset($model->image) }}" alt="img">
                    </div>
                    <div class="blog__details-content">
                        <div class="blog__post-meta">
                            <ul class="list-wrap">
                                <li><i class="flaticon-calendar"></i> {{ formatDate($model->created_at) }}</li>
                                <li><i class="flaticon-user-1"></i> {{ __('by') }} <a
                                        href="javascript:;">{{ @$model->author->name }}</a></li>
                                <li><i class="flaticon-clock"></i>
                                    {{ calculateReadingTime($model->description) }} {{ __('Min Read') }}
                                </li>
                                <li><i class="far fa-comment-alt"></i> {{ count($comments) }} {{ __('Comments') }}
                                </li>
                            </ul>
                        </div>
                        <h3 class="title">{{ $model->title }}</h3>
                        <p>
                            {!! clean($model->description) !!}
                        </p>
                        <div class="blog__details-bottom">
                            <div class="row">
                                <div class="col-xl-6 col-md-7">
                                     
                                </div>
                                <div class="col-xl-6 col-md-5">
                                    <div class="tg-post-social justify-content-start justify-content-md-end">
                                        <h5 class="social-title">{{ __('Share') }} :</h5>
                                        <ul class="list-wrap p-0 mb-0">
                                            <div class="shareon">
                                                <a class="facebook"></a>
                                                <a class="linkedin"></a>
                                                <a class="pinterest"></a>
                                                <a class="telegram"></a>
                                                <a class="twitter"></a>
                                            </div>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="blog__post-author">
                    <div class="blog__post-author-thumb">
                        <a href="#"><img src="{{ asset(@$model->author->image) }}" alt="img"></a>
                    </div>
                    <div class="blog__post-author-content">
                        <span class="designation">{{ __('Author') }}</span>
                        <h5 class="name">{{ @$model->author->name }}</h5>
                        <p>{{ @$model->author->bio }}</p>
                    </div>
                </div>
                <div class="blog-post-comment">
                    <div class="comment-wrap">
                        @if(count($comments) > 0)
                        <div class="comment-wrap-title">
                            <h4 class="title">{{ count($comments) }} {{ __('Comments') }}</h4>
                        </div>
                        @endif
                        <div class="latest-comments">
                            @foreach ($comments as $comment)
                            <ul class="list-wrap">
                                <li>
                                    <div class="comments-box">
                                        <div class="comments-avatar">
                                            <img src="{{ asset($comment->user->image) }}" alt="img">
                                        </div>
                                        <div class="comments-text">
                                            <div class="avatar-name">
                                                <h6 class="name">{{ $comment->user->name }}</h6>
                                                <span class="date">{{ formatDate($comment->created_at) }}</span>
                                            </div>
                                            <p>{{ $comment->comment }}</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <hr class="col-12 border">
                            @endforeach
                        </div>
                    </div>
                    @auth
                    <div class="comment-respond">
                        <h4 class="comment-reply-title">{{ __('Post a comment') }}</h4>
                        <div class="comment-note">
                            <p>{{ __('Please keep your comment under 1000 characters') }}</p>
                        </div>
                        <form action="{{ route('forums.submit-comment') }}" class="comment-form" method="post">
                            @csrf
                            <input type="hidden" name="blog_id" value="{{ $model->id }}">
                            <div class="comment-field">
                                <textarea placeholder="{{ __('Comment') }}" name="comment"></textarea>
                            </div>
                            <!-- g-recaptcha -->
                            @if (Cache::get('setting')->recaptcha_status === 'active')
                            <div class="form-grp mt-3">
                                <div class="g-recaptcha"
                                    data-sitekey="{{ Cache::get('setting')->recaptcha_site_key }}"></div>
                            </div>
                            @endif

                            <p class="form-submit"></p>
                            <button class="btn btn-two arrow-btn">{{ __('Post Comment') }} <img
                                    src="{{ asset('frontend/img/icons/right_arrow.svg') }}" alt="img"
                                    class="injectable"></button>
                        </form>
                    </div>
                    @else
                    <div class="alert alert-primary d-flex align-items-center" role="alert">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                            class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16"
                            role="img" aria-label="Warning:">
                            <path
                                d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                        </svg>
                        <div>
                            {{ __('Please login to comment') }}
                        </div>
                    </div>
                    @endauth
                </div>

            </div>
            <div class="col-xl-3 col-lg-4">
                <aside class="blog-sidebar">
                    <div class="blog-widget widget_search">
                        <div class="sidebar-search-form">
                            <form action="{{ route('forums') }}" method="get">
                                <input type="text" placeholder="{{ __('Search here') }}" name="search">
                                <button type="submit"><i class="flaticon-search"></i></button>
                            </form>
                        </div>
                    </div>
                    <div class="blog-widget">
                        <h4 class="widget-title">{{ __('Categories') }}</h4>
                        <div class="shop-cat-list">
                            <ul class="list-wrap">
                                @foreach ($categories as $category)
                                <li>
                                    <a href="{{ route('forums', ['category' => $category->slug]) }}"><i
                                            class="flaticon-angle-right"></i>{{ $category->title }}</a>
                                </li>
                                @endforeach

                            </ul>
                        </div>
                    </div>
                    <div class="blog-widget">
                        <h4 class="widget-title">{{ __('Latest Post') }}</h4>
                        @forelse($latestBlogs as $blog)
                        <div class="rc-post-item">
                            <div class="rc-post-thumb">
                                <a href="{{ route('forums.show', ['slug' => Str::slug($model->title),'id' => $model->id]) }}">
                                    <img class="h_60px" src="{{ asset($model->image) }}" alt="img">
                                </a>
                            </div>
                            <div class="rc-post-content">
                                <span class="date"><i class="flaticon-calendar"></i>
                                    {{ formatDate($model->created_at) }}</span>
                                <h4 class="title"><a
                                        href="{{ route('forums.show', ['slug' => Str::slug($model->title),'id' => $model->id]) }}">{{ truncate($model->title, 30) }}</a>
                                </h4>
                            </div>
                        </div>
                        @empty
                        <p>{{ __('No latest post yet') }}.</p>
                        @endforelse
                    </div>
                </aside>
            </div>
        </div>
    </div>
</section>
<!-- blog-details-area-end -->
@endsection

@push('scripts')
<script src="{{ asset('frontend/js/shareon.iife.js') }}"></script>

<script>
    Shareon.init();
</script>
@endpush

@push('scripts')
<style>
    .breadcrumb__bg {
        padding: 20px 0;
    }

    .courses__item {
        min-height: 388px;
        max-height: 388px;
    }

    .section-py-120 {
        padding: 60px 0;
    }

    .btn.btn-primary:hover {
        color: #ffffff;
    }

    .instructor__area {
        padding: 30px 0 50px;
    }
</style>

@endpush