@extends('layouts.landing')

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

@push('css')
    <style>
        .banner {
            width: 250px;
            height: 250px;
            background: #45c4a0;
            object-fit: cover;
        }

        .smart-banner-temp img {
            width: 250px;
            height: 250px;
        }
    </style>
@endpush
@section('content')
    <section class="wrapper bg-light">
        <div class="container py-20 py-md-20">
            <div class="row gx-lg-8 gx-xl-12">
                <div class="col-lg-8">
                    <form class="filter-form mt-5" method="GET">
                        <div class="row">
                            <div class="col-md-10 mb-3">
                                <div class="py-0">
                                    <select class="form-select" name="blogCategory" aria-label="">
                                        <option value="" selected="">{{ __('message.Semua Kategori') }}</option>
                                        @foreach ($bc as $key => $value)
                                            <option
                                                value="{{ $value->name }}"{{ request('blogCategory') === $value->name ? 'selected' : null }}>
                                                {{ __('message.' . $value->name) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <button type="=submit" class="btn  btn-outline-primary">{{ __('message.Cari') }}</button>
                            </div>
                        </div>
                    </form>
                    <!-- /.blog -->
                    <div class="blog grid grid-view">
                        @if (isset($latest->slug))
                            <div class="row isotope gx-md-8 gy-8 mb-8">
                                <article class="item post col-12">
                                    <div class="card">
                                        <figure class="overlay overlay-1 hover-scale h-22 "><a
                                                href="{{ route('landing.blog.show', ['slug' => $latest->slug]) }}"> <img
                                                    class="h-25"
                                                    src="{{ asset('uploads/landing-page/blog/thumbnail/' . $latest->thumbnail) }}"
                                                    alt="" /></a>
                                            <figcaption>
                                                <h5 class="from-top mb-0">{{ __('message.Selengkapnya') }}</h5>
                                            </figcaption>
                                        </figure>
                                        <div class="card-body">
                                            <div class="post-header">
                                                <div class="post-category text-line">
                                                    <a href="javascript:void(0)" class="hover"
                                                        rel="category">{{ $latest->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' => $latest->slug]) }}">{{ $latest->title }}</a>
                                                </h2>
                                            </div>
                                            <!-- /.post-header -->
                                            <div class="post-content">
                                                <p>{!! Str::words(strip_tags($latest->description), 15, '....') !!}
                                                </p>
                                            </div>
                                            <!-- /.post-content -->
                                        </div>
                                        <!--/.card-body -->
                                        <div class="card-footer">
                                            <ul class="post-meta d-flex mb-0">
                                                <li class="post-date"><i
                                                        class="uil uil-calendar-alt"></i><span>{{ date('d M Y', strtotime($latest->created_date)) }}</span>
                                                </li>

                                                <li class="post-likes ms-auto"><a href="javascript:void(0)"><i
                                                            class="uil uil-user"></i>{{ $latest->user->name }}</a></li>
                                            </ul>
                                            <!-- /.post-meta -->
                                        </div>
                                        <!-- /.card-footer -->
                                    </div>
                                    <!-- /.card -->
                                </article>
                                <div class="card-group">
                                    @forelse ($blogs as $key => $value)
                                        <article class="item post col-12 col-md-6">
                                            <div class="card mx-4 my-3 ">
                                                <figure class="card-img-top overlay overlay-1 hover-scale h-20"><a
                                                        href="{{ route('landing.blog.show', ['slug' => $value->slug]) }}">
                                                        <img class="h-22"
                                                            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="card-body d-flex flex-column h-100">
                                                    <div class="post-header">
                                                        <div class="post-category text-line">
                                                            <a href="javascript:void(0)" class="hover"
                                                                rel="category">{{ $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]) }}">{{ Str::substr($value->title, 0, 45) . '...' }}</a>
                                                        </h2>
                                                    </div>
                                                    <!-- /.post-header -->
                                                    <div class="post-content flex-grow-1">
                                                        <p>{!! Str::words(strip_tags($value->description), 12, '....') !!}
                                                        </p>
                                                    </div>
                                                    <!-- /.post-content -->
                                                </div>
                                                <!--/.card-body -->
                                                <div class="card-footer">
                                                    <ul class="post-meta d-flex mb-0 flex-grow-1">
                                                        <li class="post-date"><i
                                                                class="uil uil-calendar-alt"></i><span>{{ date('d M Y', strtotime($value->created_date)) }}</span>
                                                        </li>

                                                        <li class="post-likes ms-auto"><a href="javascript:void(0)"><i
                                                                    class="uil uil-user"></i>{{ $value->user->name }}</a>
                                                        </li>
                                                    </ul>
                                                    <!-- /.post-meta -->
                                                </div>
                                                <!-- /.card-footer -->
                                            </div>
                                            <!-- /.card -->
                                        </article>
                                    @empty
                                        <div class="text-center">
                                            <p>{{ __('message.Tidak ada data') }}</p>
                                        </div>
                                    @endforelse
                                </div>

                            </div>
                        @endif
                        <!-- /.row -->
                    </div>
                    <!-- /.blog -->
                    {{-- <nav class="d-flex" aria-label="pagination">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true"><i class="uil uil-arrow-left"></i></span>
                                </a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true"><i class="uil uil-arrow-right"></i></span>
                                </a>
                            </li>
                        </ul>
                        <!-- /.pagination -->
                    </nav> --}}
                    @if ($blogs->hasPages())
                        <div class="row">
                            <div class="col">
                                {{ $blogs->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    @endif
                    <!-- /nav -->
                </div>
                <!-- /column -->
                <aside class="col-lg-4 sidebar mt-8 mt-lg-6">
                    <div class="widget">
                        <form class="search-form" method="GET">
                            <div class="form-floating mb-0">
                                <input id="search-form" type="text" class="form-control" name="keyword"
                                    value="{{ request('keyword') }}" placeholder="{{ __('message.Cari') }}">
                                <label for="search-form">{{ __('message.Cari') }}</label>
                            </div>
                        </form>
                        <!-- /.search-form -->
                    </div>

                    <div class="widget">
                        <h4 class="widget-title mb-3">{{ __('message.Rekomendasi Untuk Anda') }}</h4>
                        <ul class="image-list">
                            @forelse ($random 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
                                <p>{{ __('message.Tidak ada data') }}</p>
                            @endforelse
                        </ul>
                        <!-- /.image-list -->
                    </div>
                    <div class="col-lg-12 mt-3">
                        @foreach ($iklan as $key => $value)
                            <div class="mt-4 banner">
                                <x-smart-ad-component slug="{{ $value->slug }}" />
                            </div>
                        @endforeach
                    </div>
                </aside>
                <!-- /column .sidebar -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
@endsection