@extends('template.master')
@section('body')

@section('title', 'Artikel')
@section('description', 'Semua Artikel Onebox Contact Center Omnichanel')

<!-- /header -->
<section class="wrapper bg-light">
    <div class="container py-14 py-md-12">
        <div class="row gx-lg-8 gx-xl-12 heading-blog align-items-center">
            <div class="col-lg-8">
                <h4 class="display-1">Our Blog and Insight</h4>
                <p class="mb-8">Jelajahi Blog & Insight kami untuk tren terkini, analisis mendalam, dan ide-ide inspiratif di dunia
                    teknologi dan desain. Temukan wawasan berharga yang siap membantu Anda berkembang!</p>

                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-4">
                        <li class="breadcrumb-item"><a href="{{url('/')}}" title="Beranda">Beranda</a></li>
                        {{-- <li class="breadcrumb-item"><a href="#" title="Resources">Resources</a></li> --}}
                        <li class="breadcrumb-item active" aria-current="page">List blog</li>
                    </ol>
                </nav>
            </div>
            <div class="col-lg-4">
                <img src="../assets/img/illustrations/blog-illustration.png" alt="onebox" loading="lazy">
            </div>
        </div>

        <hr class="my-5">

        <div class="row gx-lg-8 gx-xl-12 pt-5">
            <div class="col-lg-9 order-lg-2 blog-index">
                @if ($blog->currentPage() == 1)
                    <div id="blog" class="splide" role="group" aria-label="Splide Basic HTML Example">
                        <div class="splide__track">
                            <ul class="splide__list">
                                <li class="splide__slide headline">
                                    <div class="headline swiper-slide swiper-slide-active" role="group" aria-label="3 / 3"
                                        style="width: 886px; margin-right: 24px;">
                                        <div class="event-card">
                                            <div class="thumbnail-post">
                                                <a href="{{ url('/detail-blog') . '/' . $blogAtas[0]->slug_title }}" aria-label="">
                                                    <img src="https://cms.ciptadrasoft.com/upload/{!! $blogAtas[0]->lampiran !!}"
                                                        alt="Customer Experience" width="100%" loading="lazy" />
                                                </a>
                                            </div>
                                        </div>
                                        <div class="details-wrapper">
                                            <div class="details">
                                                <div class="wrap">
                                                    <a href="#" id="250899Q_section_1_25_25">
                                                        <div class="category-name">
                                                            {{ Carbon\Carbon::parse($blogAtas[0]->tgl_publish)->locale('id')->isoFormat('dddd') }}
                                                        </div>
                                                    </a>
                                                    <div class="ellipse"></div>
                                                    <div class="text-read-time">
                                                        {{ Carbon\Carbon::parse($blogAtas[0]->tgl_publish)->format('d F Y') }}
                                                    </div>
                                                </div>
                                                <div class="title">
                                                    <a href="{{ url('/detail-blog') . '/' . $blogAtas[0]->slug_title }}" alt="#">
                                                        <h2 class="mb-0">{!! substr(strip_tags( $blogAtas[0]->title),0, 50).'...'!!}</h2>
                                                    </a>
                                                </div>
                                                <div>
                                                    <span>{{ Carbon\Carbon::parse($blogAtas[0]->tgl_publish)->format('d F Y') }}</span>
                                                </div>
                                                <div class="desc">
                                                    <p class="desc_wrap">
                                                        {!! substr(strip_tags($blogAtas[0]->content),0, 100).'...'!!}</p>
                                                </div>
                                                <div class="wrap justify-content-between">
                                                    <div class="author">
                                                        <a href="#">
                                                            <img alt=''
                                                                src='https://secure.gravatar.com/avatar/db6910013a8632307d40a4c167d8c491?s=24&#038;d=mm&#038;r=g'
                                                                srcset='https://secure.gravatar.com/avatar/db6910013a8632307d40a4c167d8c491?s=48&#038;d=mm&#038;r=g 2x'
                                                                class='avatar avatar-24 photo wt-author-img avatar-author'
                                                                height='24' width='24' loading='lazy'
                                                                decoding='async' />
                                                            <div class="author-name">{{ $blogAtas[0]->Author }}<div class="post-date sm">04 Sep
                                                                    2023</div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                @endif
                <!-- /.blog -->
                <div class="blog grid grid-view">
                    <div id="search-results">
                        <div class="row gx-md-8 gy-8 pb-4">
                            @foreach ($blog as $item)
                                <div class="col-lg-4 ps-0">
                                    <article class="blog-item wow fadeInUp delay-0-4s p-0 mb-0">
                                        <figure class="card-img-top overlay overlay-1 hover-scale" style="height: 100%;">
                                            <a href="{{ url('/detail-blog') . '/' . $item->slug_title }}" title="Artikel">
                                                <img src="https://cms.ciptadrasoft.com/upload/{!! $item->lampiran !!}" alt="">
                                                <span class="bgv"></span><span class="bg"></span>
                                            </a>
                                            <figcaption>
                                                <h5 class="from-top mb-0">Baca Selengkapnya</h5>
                                            </figcaption>
                                        </figure>

                                        <div class="blog-content px-4 py-2">
                                            <div class="d-flex justify-content-between my-2">
                                                <a href="{{ route('listBlog', ['category' => $item->category_id]) }}">
                                                    <span class="tanggal cat text-blue"># {!! substr(strip_tags($item->Category), 0, 16) !!}</span>
                                                </a>
                                                <span class="tanggal">
                                                    <i class="bx bx-calendar"></i> {!! \Carbon\Carbon::parse($item->tgl_publish)->locale('id')->isoFormat('D MMMM Y') !!}
                                                </span>
                                            </div>

                                            <div class="content">
                                                <h5 class="h5-artikel pt-0">
                                                    <a href="{{ url('/detail-blog') . '/' . $item->slug_title }}" title="Artikel">
                                                        {!! substr(strip_tags($item->title), 0, 50) . '...' !!}
                                                    </a>
                                                </h5>
                                                <p class="p-artikel">
                                                    {!! substr(strip_tags($item->content), 0, 100) . '...' !!}
                                                </p>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Pagination --}}
                    <nav aria-label="Page navigation">
                        {{ $blog->links('pagination::bootstrap-5') }} {{-- Menggunakan template Bootstrap 5 --}}
                    </nav>

                    <script>
                        $(document).ready(function() {
                            $('#liveSearchForm').on('input', function(e) {
                                e.preventDefault();

                                var query = $('#search-form').val(); // Get the value from the search input field

                                if (query.length > 2) { // Start searching after typing 3 characters
                                    $.ajax({
                                        url: '{{ route("search.blog") }}',
                                        method: 'GET',
                                        data: { query: query }, // Send the query parameter to the server
                                        success: function(response) {
                                            // Clear the previous search results
                                            $('#search-results').html('');

                                            if (response.blog.length > 0) {
                                                // Populate search results if there are results
                                                $.each(response.blog, function(index, item) {
                                                    var content = `
                                                    <div class="row gx-md-8 gy-8">
                                                        <div class="col-lg-4 ps-0">
                                                            <article class="blog-item wow fadeInUp delay-0-4s mb-0">
                                                                <figure class="card-img-top overlay overlay-1 hover-scale" style="height: 100%;">
                                                                    <a href="/detail-blog/${item.slug_title}" title="Artikel">
                                                                        <img src="https://cms.ciptadrasoft.com/upload/${item.lampiran}" alt="">
                                                                        <span class="bgv"></span><span class="bg"></span>
                                                                    </a>
                                                                    <figcaption>
                                                                        <h5 class="from-top mb-0">Baca Selengkapnya</h5>
                                                                    </figcaption>
                                                                </figure>
                                                                <div class="blog-content">
                                                                    <div class="d-flex justify-content-between my-2">
                                                                        <span class="tanggal text-blue">Kategori</span>
                                                                        <span class="tanggal"><i class="bx bx-calendar"></i> ${item.tgl_publish.substr(0, 10)}</span>
                                                                    </div>
                                                                    <div class="content">
                                                                        <h5 class="h5-artikel pt-0">
                                                                            <a href="/detail-blog/${item.slug_title}" title="Artikel">${item.title}</a>
                                                                        </h5>
                                                                        <p class="p-artikel">${item.content.substr(0, 100)}...</p>
                                                                    </div>
                                                                </div>
                                                            </article>
                                                        </div>
                                                    </div>
                                                    `;
                                                    $('#search-results').append(content); // Append each blog post to the result container
                                                });
                                            } else {
                                                // If no results, display a message
                                                $('#search-results').html('<p>No results found</p>');
                                            }
                                        }
                                    });
                                } else {
                                    // Clear the results if the query is less than 3 characters
                                    $('#search-results').html('');
                                }
                            });
                        });
                    </script>
                </div>

                <div class="row">
                    <div class="banner-area banner">
                        <div class="banner__wrap bg-soft-blue-light">
                            <div class="banner__wrap_left">
                                <div class="content">
                                    <h2 class="mb-0">Temukan <span class="underline-3 style-3 orange">Insight</span>
                                        Penting!</h2>
                                    <p> Jangan lewatkan artikel penting yang dapat membantu mengembangkan bisnis lebih
                                        efektif!</p>

                                </div>
                            </div>
                            <div class="banner__wrap_right">
                                <div class="image">
                                    <img src="../assets/img/illustrations/section-blog-illustration.png"
                                        class="img-fluid mx-auto object-fit-cover perfmatters-lazy entered pmloaded"
                                        width="600" height="500" alt="qontak ebook" decoding="async">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /column -->
            <aside class="col-lg-3 sidebar sticky-sidebar">
                <div class="widget">
                    <form id="liveSearchForm">
                        <div class="form-floating mb-0">
                            <input id="search-form" type="text" class="form-control" placeholder="Search" name="query">
                            <label for="search-form">Search</label>
                        </div>
                    </form>
                </div>

                <hr class="my-4">

                <!-- Kategori -->
                <div class="widget">
                    <h4 class="widget-title mb-3">Category</h4>
                    <ul class="unordered-list bullet-primary">
                        @if (!empty($kategori))
                            @foreach (collect($kategori)->unique('Category') as $item)
                                @php
                                    // Count the total entries in the original $kategori collection for this specific category
                                    $count = collect($kategori)->where('Category', $item->Category)->count();
                                @endphp
                                <li class="p-0">
                                    <a href="{{ route('listBlog', ['category' => $item->Id]) }}" class="btn btn-category category-filter" data-category="{{ $item->Category }}">
                                        # {{ $item->Category }} ({{ $item->Total }})
                                    </a>
                                </li>
                            @endforeach
                        @else
                            <li><a href="#" class="btn btn-soft-ash btn-sm rounded-pill">Tidak ada kategori tersedia</a></li>
                        @endif
                    </ul>
                </div>
                <!-- Tags -->
                {{-- <div class="widget">
                    <h4 class="widget-title mb-3">Tags</h4>
                    <ul class="list-unstyled tag-list">
                        @if (!empty($tag) && count($tag) > 0)
                            @foreach ($tag as $item)
                                <li>
                                    <a href="#" class="tag-filter" data-tag="{{ $item }}" class="btn btn-soft-ash btn-sm rounded-pill">{{ $item }}</a>
                                </li>
                            @endforeach
                        @else
                            <li><span class="text-muted">Tidak ada Tag</span></li>
                        @endif
                    </ul>
                </div> --}}
                <!-- /.widget -->
                <div class="widget">
                    <div class="card">
                        <div class="">
                            <p>Onebox Blog berikan panduan seputar customer, marketing, dan sales</p>
                            <div class="d-flex justify-content-center justify-content-lg-start mb-4 w-100"
                                data-cues="slideInDown" data-group="page-title-buttons" data-delay="200">
                                <a class="feature-button w-100" href="{{url('/blog')}}" title="Artikel Lainnya"
                                    style="padding: 10px 25px;">Subscribe</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.widget -->
            </aside>
            <!-- /column .sidebar -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

@endsection
<!-- Include jQuery -->