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

@section('title', $detailArtikel[0]->title)
@section('description', substr(strip_tags($detailArtikel[0]->content), 0, 125) . '...')

<!-- /header -->
<section class="detailb-wrapper bg-light">
    <div class="progress-container navbar-clone navbar-stick" style="background: transparent">
        <div class="progress-bar" id="myBar"></div>
    </div>
    <div class="container py-14 py-md-12">
        <div class="row gx-lg-8 gx-xl-12">
            <aside class="col-lg-3 sidebar sticky-sidebar">
                <div class="widget">
                    <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">List blog</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Detail</li>
                        </ol>
                    </nav>
                </div>
                <div class="widget">
                    <form class="searchForm">
                        <div class="form-floating mb-0">
                            <input type="text" id="searchInput" placeholder="Cari..." class="form-control" data-bs-toggle="modal" data-bs-target="#exampleModal">
                            <label for="searchInput">Apa yang ingin dicari?</label>
                        </div>
                    </form>
                </div>

                <div class="widget">
                    <div class="mt-5">
                        <div id="slidertop" class="splide" role="group" aria-label="Splide Basic HTML Example">
                            <div class="splide__track">
                                <ul class="splide__list">
                                    @if (!empty($imageDaftarIsi))
                                        @foreach ($imageDaftarIsi as $item)
                                            <li class="splide__slide">
                                                <div class="carousel-item active">
                                                    <img src="https://cms.ciptadrasoft.com/upload/gallery/{!! $item->Media !!}" class="d-block w-100" alt="onebox">
                                                </div>
                                            </li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
            <div class="col-lg-9">
                <div class="blog single">
                    <div class="card card-blog pt-0">
                        <div class="dov mb-3">
                            <span class="badge bg-pale-blue text-blue rounded-pill">Kategori</span>
                        </div>
                        <h2 class="h1">{!! $detailArtikel[0]->title !!}</h2>
                        <div class="blog-info">
                            <div class="aut">
                                <p class="author"><i class="bx bx-user"></i>{!! $detailArtikel[0]->Author !!}</p>

                                <p class="date"><i class="bx bx-calendar"></i> {!! $detailArtikel[0]->tgl_publish !!}
                                </p>
                            </div>
                            <div class="blog-share">
                                <span>Bagikan artikel ini</span>
                                <a href="#" target="_blank" alt="Twitter Share">
                                    <i class='bx bxl-instagram-alt' ></i>
                                </a>
                                <a href="#" target="_blank">
                                    <i class='bx bxl-twitter' ></i>
                                </a>
                                <a href="#" target="_blank" alt="Linkedin">
                                    <i class='bx bxl-linkedin-square' ></i>
                                </a>
                                <a href="#" target="_blank" alt="Facebook Share">
                                    <i class='bx bxl-facebook-square' ></i>
                                </a>
                            </div>
                        </div>

                        <hr class="my-8">

                        <figure class="card-img-top card-top-detail"><img
                                src="https://cms.ciptadrasoft.com/upload/{!! $detailArtikel[0]->lampiran !!}"
                                alt="berita"></figure>
                        <div class="card-body">
                            <div class="classic-view">
                                <article class="post">
                                    <div class="post-content mb-5">
                                        {!! $detailArtikel[0]->content !!}
                                    </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">
                                                @if (!empty($kategori))
                                                    @foreach (collect($kategori)->unique('Category') as $item)
                                                        <li><a href="{{ route('semuaBlog', ['category' => $item->Id]) }}" class="btn btn-soft-ash btn-sm rounded-pill mb-0">{{ $item->Category }}</a></li>
                                                    @endforeach
                                                @endif
                                            </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> Bagikan </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item"
                                                        href="https://api.whatsapp.com/send?text={!! $detailArtikel[0]->SiteName !!}/detail-blog/{{$detailArtikel[0]->slug_title}}"
                                                        title="Whatsapp"><i class="bx bxl-whatsapp"></i>Whatsapp</a>
                                                    <a class="dropdown-item"
                                                        href="https://twitter.com/share?text={!! $detailArtikel[0]->SiteName !!}/detail-blog/{{$detailArtikel[0]->slug_title}}"
                                                        title="Twitter"><i class="uil uil-twitter"></i>Twitter</a>
                                                    <a class="dropdown-item"
                                                        href="https://www.facebook.com/sharer/sharer.php?u={!! $detailArtikel[0]->SiteName !!}/detail-blog/{{$detailArtikel[0]->slug_title}}"
                                                        title="Facebook"><i class="uil uil-facebook-f"></i>Facebook</a>
                                                    <a class="dropdown-item"
                                                        href="https://www.instagram.com/sharer/sharer.php?u={!! $detailArtikel[0]->SiteName !!}/detail-blog/{{$detailArtikel[0]->slug_title}}"
                                                        title="Instagram"><i class="uil uil-instagram"></i>Instagram</a>
                                                    <a class="dropdown-item"
                                                        href="mailto:?Subject={!! $detailArtikel[0]->SiteName !!}/detail-blog/{{$detailArtikel[0]->slug_title}}"><i
                                                            class="uil uil-envelope" title="Email"></i>Email</a>
                                                    <a class="dropdown-item">
                                                        <button class="clipboard"><i class="bx bx-link"></i>Copy
                                                            Link</button>
                                                    </a>
                                                    <a class="dropdown-item"
                                                        href="http://www.linkedin.com/shareArticle?mini=true&url={!! $detailArtikel[0]->SiteName !!}/detail-blog/{{$detailArtikel[0]->slug_title}}"
                                                        title="linkedin"><i class="uil uil-linkedin"></i>Linkedin</a>
                                                </div>
                                                <!--/.dropdown-menu -->
                                            </div>
                                            <!--/.share-dropdown -->
                                        </div>
                                    </div>
                                    <!-- /.post-footer -->
                                </article>
                                <!-- /.post -->
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.blog -->
            </div>
        </div>

        <hr>
        <h3 class="mb-6">Mungkin kamu akan menyukai</h3>
        <div class="swiper-container blog grid-view mb-5 swiper-container-0" data-margin="30" data-dots="true"
            data-items-md="4" data-items-xs="1">
            <div class="swiper swiper-initialized swiper-horizontal swiper-pointer-events">
                <div class="swiper-wrapper" id="swiper-wrapper-874aed1497833da6" aria-live="off"
                    style="cursor: grab; transform: translate3d(0px, 0px, 0px);">
                    @if (!empty($artikelslide))
                        @foreach ($artikelslide as $item)
                            @if ($item->content_id != $detailArtikel[0]->content_id)
                                <div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 4" style="width: 283.5px; margin-right: 30px;">
                                    <div class="blog-item wow fadeInUp delay-0-4s h-100">
                                        <figure class="card-img-top overlay overlay-1 hover-scale" style="height: 150px;">
                                            <a href="{{url('/detail-blog') . '/' . $item->slug_title}}" title="artikel">
                                                <img src="https://cms.ciptadrasoft.com/upload/{!! $item->lampiran !!}" alt="berita">
                                                <span class="bg"></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"><i class="bx bx-calendar"></i> {!! \Carbon\Carbon::parse($item->tgl_publish)->locale('id')->translatedFormat('l, d F Y H:i') !!}</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>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @endif
                </div>
                <!--/.swiper-wrapper -->
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
            <!-- /.swiper -->
            <div class="swiper-controls">
                <div
                    class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
                    <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                        aria-label="Go to slide 1" aria-current="true"></span><span class="swiper-pagination-bullet"
                        tabindex="0" role="button" aria-label="Go to slide 2"></span><span
                        class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="card-prom wrapper cta-wrapper">
    <div class="container py-md-2">
        <div class="row align-items-center">
            <div class="card-pad container py-md-2">
                <div class="card-solusi bg-gray bg-soft-blue-light rounded-4">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-lg-6">
                            <h5>Transformasikan Bisnis Anda dengan Solusi Omnichannel Terintegrasi</h5>
                            <p>Diskusikan dengan tim kami untuk memberikan solusi yang tepat untuk bisnis Anda</p>

                            <div class="justify-content-center justify-content-lg-start mt-5" data-cues="slideInDown"
                                data-group="page-title-buttons" data-delay="200">
                                <a class="feature-button"
                                    href="https://wa.me/{{$profil[0]->Telp ?? ''}}?text=Halo Tim Onebox, Saya ingin mengajukan beberapa pertanyaan"
                                    target="_blank"><i class='bx bxl-whatsapp me-2' ></i>Hubungi Whatsapp Kami</a>
                            </div>
                        </div>

                        <div class="col-lg-6 text-end">
                            <img src="{{asset('assets/img/illustrations/img-cta.png')}}" alt="cta-onebox">
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--/.row -->

        <!--/.row -->
    </div>
</section>
<!-- Modal Search -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Pencarian</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="liveSearchForm">
                    <div class="form-floating mb-4">
                        <input id="search-form" type="text" class="form-control" placeholder="Search" name="query">
                        <label for="search-form">Search</label>
                    </div>
                </form>
                <div class="">
                    <div id="search-results" class="row">
                        <div class="row gx-md-8 gy-8 mt-0 mb-2">
                            @foreach ($blog as $item)
                                <div class="col-lg-4 mt-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 style="padding: 0.2rem !important" 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

                            <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="col-lg-4 mt-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>
                                                            `;
                                                            $('#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>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection