@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>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>
            </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">
                <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 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">
                                            <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> {!! \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">
                            <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 ({{ collect($kategori)->unique('Category')->count() }})</h4>
                    <ul class="unordered-list bullet-primary">
                        <!-- Tambahkan link untuk Semua Kategori dengan kategori kosong -->
                        <li class="p-0">
                            <a href="{{ route('semuaBlog', ['category' => '']) }}" class="btn">Semua Category</a>
                        </li>
                        @foreach(collect($kategori)->unique('Category') as $kat)
                            <li class="p-0">
                                <a href="{{ route('semuaBlog', ['category' => $kat->Id]) }}"
                                   class="btn btn-category {{ $selectedCategory == $kat->Id ? 'active bg-success text-white' : '' }}">
                                    # {{ $kat->Category }}
                                </a>
                            </li>
                        @endforeach
                    </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 -->