@extends('layouts.app')

@section('content')
<section class="lg:container mt-8 pt-8 mx-4">
    <div class="my-4 flex flex-col items-center justify-center">
        <div class="w-full md:w-3/12 text-center">
            <img src="{{ asset('images/empty-state/404.png') }}" alt="halaman tidak ditemukan" class="" />
            <h3 class="font-semibold text-black">Halaman Tidak Ditemukan</h3>
        </div>
        <h1 class="pt-6 md:pt-11 text-primary">
            Cari Buku Yang Ingin Anda Baca!</h1>

        <form id="search-form" action="{{ url('list/search/book/') }}" method="GET">
            @csrf
            <div class="relative p-6 rounded-2xl">
                <button type="submit" id="search-button" class="absolute left-12 top-[48px] text-gray-400"><i
                        class="fa fa-search"></i></button>
                <input type="text" alt="search" id="search-banner" name="keyword" value="{{ $keyword ?? ''}}"
                    class="w-full py-6 pl-14 pr-6 bg-white text-black rounded-2xl !outline-primary focus:ring-primary focus:border-primary"
                    placeholder="Cari buku disini..." />


            </div>
        </form>
        {{-- <a href="{{ route('beranda') }}"
            class="mt-6 mb-6 font-semibold h-10 rounded-xl px-8 py-2.5 text-sm cursor-pointer bg-primary hover:bg-primary-dark text-white transition-all ease-out duration-300"
            data-twe-ripple-init data-twe-ripple-color="light">Kembali ke Beranda</a> --}}
    </div>


    {{-- <section id="div-terpopuler" class="lg:container mt-6 md:mt-10 ms-4">
        <div class="mb-4 me-4 md:me-8 lg:me-0 flex items-center justify-between">
        </div>
        <div class="glider-contain">
            <div class="glider" id="glider-404">
            </div>
        </div>
    </section> --}}



</section>


@endsection

@section('javascript')
<script src="{{ asset('plugins/gliderjs/glider.min.js') }}"></script>
<script src="{{ asset('plugins/lazysizes/lazysizes.min.js') }}"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {


            function convertToSlug(Text) {
                return Text.toLowerCase()
                    .replace(/ /g, "-")
                    .replace(/[^\w-]+/g, "");
            }

            // Convert currency rupiah
            function formatRupiah(number) {
                return new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 0
                }).format(number);
            }


            function terpopuler() {
                $.ajax({
                    "url": "{{ route('terpopuler.list') }}",
                    "type": "GET",
                    "data": {
                        'page': 1,
                        'limit': 20
                    }
                }).done(function(m) {
                    if (m.length > 0) {
                        let html = "";
                        for (let i = 0; i < m.length; i++) {
                            let kode_konten = m[i].kode_konten;
                            let judul = m[i].judul;
                            let sub_kategori = m[i].sub_kategori;
                            let combined_title = sub_kategori + " " + judul;
                            let slug = convertToSlug(combined_title); 
                            let harga = formatRupiah(m[i].harga);

                            html += '<div ' +
                                'class="mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">' +
                                '<a href="{{ url('book') }}/' + kode_konten + '/' + slug + '">' +
                                '<div ' +
                                'class="img-box w-full text-center rounded-xl p-2 flex min-h-[215px] items-center justify-center">' +
                                '<img data-src="https://kubuku.id/api/generic/showCover/' + m[i].kode_konten +
                                '" src="{{ asset('images/ph-bacabuku.webp') }}" alt="cover buku"' +
                                'class="m-auto w-40 rounded-lg lazyload" />' +
                                '</div>' +
                                '<div class="product-desc pb-3 px-3">' +
                                '<h6 class="product-title font-semibold text-black text-sm line-clamp-2 mb-1">' +
                                '' + m[i].judul + '</h6>' +
                                '<p class="product-author line-clamp-1 text-sm text-gray-500 mb-1">' +
                                '' + m[i].penulis + '</p>' +
                                '<p class="product-price fs-6 font-semibold text-sm text-primary mb-0">' +
                                '' + harga + '</p>' +
                                '</div>' +
                                '</a>' +
                                '</div>';
                        }

                        $('#glider-404').append(html);

                        if (document.querySelector('#glider-404')) {
                            new Glider(document.querySelector('#glider-404'), {
                                slidesToScroll: 1,
                                slidesToShow: 5.5,
                                draggable: true,
                                dots: '.dots',
                                arrows: {
                                    prev: '.glider-prevTerpopuler',
                                    next: '.glider-nextTerpopuler',
                                },
                            });
                        } else {
                            console.error('Element #glider-404 not found');
                        }
                    } else {
                        $('#div-terpopuler').hide();
                    }
                });
            }

            // Initialize latest book & popular book
            terpopuler();
        });
</script>
@endsection