@extends('layouts.landing')

@section('title')
    {{ __('message.Lihat Blog') }}
@endsection

@section('content')
    <section class="wrapper bg-soft-primary position-relative">
        <div class="container pt-20 pb-17 pt-md-20 text-center">
            <div class="row">
                <div class="col-lg-8 mx-auto mb-5">
                    {{-- <h1 class="fs-15 text-uppercase text-muted mb-3"></h1> --}}
                    <h3 class="display-1 mb-6">{{ $blog->title }}</h3>
                    <a href="{{ route('landing.blog') }}" class="btn btn-primary">{{ __('message.Kembali') }}</a>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
        <div class="overflow-hidden">
            <div class="divider text-light mx-n2">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60">
                    <path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z" />
                </svg>
            </div>
        </div>
    </section>
    <section class="wrapper bg-light">
        <div class="container pb-15 pb-md-17">
            <div class="row gx-md-5 gy-5 mt-n18 mt-md-n19">
                <div class="card lift">
                    <div class="card-body">
                        <div class="row gx-lg-8 gx-xl-12">
                            <div class="col-lg-8">
                                <!-- /.blog -->
                                <figure class="card-img-top"><img
                                        src="{{ asset('uploads/landing-page/blog/thumbnail/' . $blog->thumbnail) }}"
                                        alt="" />
                                </figure>
                                <div class="blog single">
                                    <div class="classic-view">
                                        <article class="post">
                                            <div class="post-content mb-5 mt-5">
                                                <h2 class="h1 mb-4">{!! $blog->title !!}</h2>
                                                {{-- <p style="text-align: justify">{!! Helper::lang($blog->description) !!}</p> --}}
                                                <p style="text-align: justify">{!! $blog->description !!}</p>
                                            </div>
                                            <!-- /.post-content -->
                                            {{-- <div
                                                class="post-footer d-md-flex flex-md-row justify-content-md-between align-items-center mt-8">
                                                <div>
                                                    <ul class="list-unstyled tag-list mb-0">
                                                        <li><a href="#"
                                                                class="btn btn-soft-ash btn-sm rounded-pill mb-0">Still
                                                                Life</a></li>
                                                        <li><a href="#"
                                                                class="btn btn-soft-ash btn-sm rounded-pill mb-0">Urban</a>
                                                        </li>
                                                        <li><a href="#"
                                                                class="btn btn-soft-ash btn-sm rounded-pill mb-0">Nature</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="mb-0 mb-md-2">
                                                    <div class="dropdown share-dropdown btn-group">
                                                        <button
                                                            class="btn btn-sm btn-red rounded-pill btn-icon btn-icon-start dropdown-toggle mb-0 me-0"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false">
                                                            <i class="uil uil-share-alt"></i> Share </button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#"><i
                                                                    class="uil uil-twitter"></i>Twitter</a>
                                                            <a class="dropdown-item" href="#"><i
                                                                    class="uil uil-facebook-f"></i>Facebook</a>
                                                            <a class="dropdown-item" href="#"><i
                                                                    class="uil uil-linkedin"></i>Linkedin</a>
                                                        </div>
                                                        <!--/.dropdown-menu -->
                                                    </div>
                                                    <!--/.share-dropdown -->
                                                </div>
                                            </div> --}}
                                            <!-- /.post-footer -->
                                        </article>
                                        <!-- /.post -->
                                    </div>
                                    <!-- /.classic-view -->
                                    <hr />

                                    <!--<nav class="nav social">-->
                                    <!--    <a href="#"><i class="uil uil-twitter"></i></a>-->
                                    <!--    <a href="#"><i class="uil uil-facebook-f"></i></a>-->
                                    <!--    <a href="#"><i class="uil uil-dribbble"></i></a>-->
                                    <!--    <a href="#"><i class="uil uil-instagram"></i></a>-->
                                    <!--    <a href="#"><i class="uil uil-youtube"></i></a>-->
                                    <!--</nav>-->
                                    <!-- /.social -->
                                    <hr />
                                    <h3 class="mb-6">{{ __('message.Rekomendasi untuk kamu') }}</h3>
                                    <div class="swiper-container blog grid-view mb-16" data-margin="30" data-dots="true"
                                        data-items-md="2" data-items-xs="1">
                                        <div class="swiper">
                                            <div class="swiper-wrapper">
                                                @foreach ($randomBlog as $key => $value)
                                                    <div class="swiper-slide">
                                                        <article>
                                                            <figure class="overlay overlay-1 hover-scale rounded mb-5">
                                                                <a
                                                                    href="{{ route('landing.blog.show', ['slug' => $value->slug]) }}">
                                                                    <img src="{{ asset('uploads/landing-page/blog/thumbnail/' . $value->thumbnail) }}"
                                                                        alt="" /></a>
                                                                <figcaption>
                                                                    <h5 class="from-top mb-0">
                                                                        {{ __('message.Selengkapnya') }}</h5>
                                                                </figcaption>
                                                            </figure>
                                                            <div class="post-header">
                                                                <div class="post-category text-line">
                                                                    <a href="#" class="hover"
                                                                        rel="category">{{ __('message.' . $value->blogCategory->name) }}</a>
                                                                </div>
                                                                <!-- /.post-category -->
                                                                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark"
                                                                        href="{{ route('landing.blog.show', ['slug' => $value->slug]) }}">{{ $value->title }}</a>
                                                                </h2>
                                                            </div>
                                                            <!-- /.post-header -->
                                                            <div class="post-footer">
                                                                <ul class="post-meta mb-0">
                                                                    <li class="post-date"><i
                                                                            class="uil uil-calendar-alt"></i><span>{{ date('d M Y', strtotime($value->created_date)) }}</span>
                                                                    </li>

                                                                </ul>
                                                                <!-- /.post-meta -->
                                                            </div>
                                                            <!-- /.post-footer -->
                                                        </article>
                                                        <!-- /article -->
                                                    </div>
                                                @endforeach

                                            </div>
                                            <!--/.swiper-wrapper -->
                                        </div>
                                        <!-- /.swiper -->
                                    </div>
                                    <!-- /.swiper-container -->

                                    <!-- /.card -->
                                </div>

                            </div>
                            <!-- /column -->
                            <aside class="col-lg-4 sidebar mt-8 mt-lg-6">

                                <div class="widget">
                                    <h4 class="widget-title mb-3">{{ __('message.Postingan Terbaru') }}</h4>
                                    <ul class="image-list">
                                        @forelse ($blogs as $key => $value)
                                            <li>
                                                <figure class="rounded"><a
                                                        href="{{ route('landing.blog.show', ['slug' => $value->slug]) }}"><img
                                                            src="{{ asset('uploads/landing-page/blog/thumbnail/' . $value->thumbnail) }}"
                                                            alt="" /></a>
                                                </figure>
                                                <div class="post-content">
                                                    <h6 class="mb-2"> <a class="link-dark"
                                                            href="{{ route('landing.blog.show', ['slug' => $value->slug]) }}">{{ $value->title }}</a>
                                                    </h6>
                                                    <ul class="post-meta">
                                                        <li class="post-date"><i
                                                                class="uil uil-calendar-alt"></i><span>{{ date('d M Y', strtotime($value->created_date)) }}</span>
                                                        </li>

                                                    </ul>
                                                    <!-- /.post-meta -->
                                                </div>
                                            </li>

                                        @empty
                                        @endforelse
                                    </ul>
                                    <!-- /.image-list -->
                                </div>

                            </aside>

                            <!-- /column .sidebar -->
                        </div>
                    </div>
                    <!--/.card-body -->
                </div>
            </div>
        </div>
        <!-- /.container -->
    </section>
@endsection