@extends('layouts.app')

@section('head')
<link rel="stylesheet" href="{{ asset('plugins/select2/select2.min.css')}}" />
@endsection

@section('content')
<div class="lg:container pt-16 pb-32 lg:pb-0 mx-4">
    {{-- Breadcrumb --}}
    <div class="flex justify-between items-start mt-8 text-gray-700" aria-label="Breadcrumb">
        <!-- BREADCRUMB -->
        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
            <li class="inline-flex items-center">
                <a href="{{ route('beranda') }}"
                    class="inline-flex items-center text-xs text-primary hover:text-primary-dark">Beranda</a>
            </li>

            @if ($key == 'subkategori' || $key == 'kategori')
            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <a href="{{ route('category') }}"
                        class="ms-1 items-center text-xs text-primary hover:text-primary-dark capitalize">{{ $langkah
                        }}</a>
                </div>
            </li>
            @endif

            @if ($key == 'penulis' || $key == 'penerbit')
            @php
            // Determine which ID to use based on the $key
            $id = ($key == 'penulis') ? 'listPenulis' : 'listPenerbit';
            @endphp

            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <a href="{{ url($id) }}"
                        class="ms-1 items-center text-xs text-primary hover:text-primary-dark capitalize">
                        {{ $key }}
                    </a>
                </div>
            </li>
            @endif

            @if ($key == 'subkategori')
            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <a href="{{ url('list/kategori/' . $konten2->id_kategori) }}"
                        class="ms-1 items-center text-xs text-primary hover:text-primary-dark capitalize">{{
                        $konten2->kategori }}</a>
                </div>
            </li>
            @endif

            @if ($key == 'search')
            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <span class="ms-1 text-xs text-black md:ms-2 capitalize">Pencarian</span>
                </div>
            </li>
            @else
            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <span class="ms-1 text-xs text-black md:ms-2 capitalize">{{ $slug }}</span>
                </div>
            </li>
            @endif
        </ol>

        <!-- TOMBOL BAGIKAN -->
        <div class="flex items-center gap-4 mt-2 md:mt-0">
            @if (Auth::guest())
            <div id="primary"
                class="group flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 border border-primary text-primary hover:bg-gray-100 cursor-pointer transition duration-300"
                onclick="shareLink()" data-twe-ripple-init data-twe-ripple-color="light" data-twe-toggle="modal"
                data-twe-target="#modalShare">

                <i class="fas fa-share-nodes text-lg"></i>
            </div>
            @else
            <div id="primary"
                class="group flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 border border-primary text-primary hover:bg-gray-100 cursor-pointer transition duration-300"
                onclick="handleShareClick()" data-twe-ripple-init data-twe-ripple-color="light">

                <i class="fas fa-share-nodes text-lg"></i>
                <span id="shareLoading" class="hidden absolute ml-2">
                    <i class="fas fa-spinner fa-spin text-sm"></i>
                </span>
            </div>
            @endif
        </div>




    </div>

    {{-- End Breadcrumb --}}

    <div class="lg:flex my-6 gap-6">
        @if ($key != 'search')
        <div class="w-full md:w-3/12 mb-4 md:mb-0 hidden md:block">
            <div class="py-6 shadow-custom rounded-xl sticky top-24">
                <h3 class="text-xl font-bold text-black px-4 pb-4">Filter</h3>
                <div id="accordionFilter">
                    @if ($key == 'penerbit' || $key == 'penulis')
                    <div class="px-2 mb-1">
                        <h2 class="mb-0" id="kategoriHeader">
                            <button
                                class="group relative flex w-full items-center rounded-none border-0 bg-white p-2 text-left font-semibold text-black transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none [&:not([data-twe-collapse-collapsed])]:bg-white"
                                type="button" data-twe-collapse-init data-twe-collapse-collapsed
                                data-twe-target="#collapseKategori" aria-expanded="true"
                                aria-controls="collapseKategori">
                                Kategori
                                <span
                                    class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                    </svg>
                                </span>
                            </button>
                        </h2>
                        <div id="collapseKategori" class="!visible" data-twe-collapse-item data-twe-collapse-show
                            aria-labelledby="kategoriHeader">
                            <div class="px-4 space-y-1.5">
                                @foreach ($getKategori as $kategori)
                                <div class="block min-h-6 ps-6">
                                    <input
                                        class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                        type="checkbox" value="{{ $kategori->kategori }}" name="kategori"
                                        id="checkbox{{ $kategori->kategori }}" />
                                    <label class="inline-block ps-[0.15rem] hover:cursor-pointer text-sm text-black"
                                        for="checkbox{{ $kategori->kategori }}"> {{ $kategori->kategori }}
                                    </label>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endif
                    @if ($key == 'penerbit' || $key == 'penulis' || $key == 'kategori')
                    <div class="px-2 mb-1">
                        <h2 class="mb-0" id="headingSubKategori">
                            <button
                                class="group relative flex w-full items-center rounded-none border-0 bg-white p-2 text-left font-semibold text-black transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none [&:not([data-twe-collapse-collapsed])]:bg-white"
                                type="button" data-twe-collapse-init data-twe-collapse-collapsed
                                data-twe-target="#collapseSubKategori" aria-expanded="false"
                                aria-controls="collapseSubKategori">
                                Sub Kategori
                                <span
                                    class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                    </svg>
                                </span>
                            </button>
                        </h2>
                        <div id="collapseSubKategori" class="!visible" data-twe-collapse-item data-twe-collapse-show
                            aria-labelledby="headingSubKategori">
                            <div class="px-4 space-y-1.5">
                                @foreach ($getSubKategori as $subkategori)
                                <div class="block min-h-6 ps-6">
                                    <input
                                        class="relative float-left -ms-6 me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                        type="checkbox" value="{{ $subkategori->sub_kategori }}" name="sub_kategori"
                                        id="checkbox{{ $subkategori->sub_kategori }}" />
                                    <label class="inline-block ps-[0.15rem] hover:cursor-pointer text-sm text-black"
                                        for="checkbox{{ $subkategori->sub_kategori }}">
                                        {{ $subkategori->sub_kategori }} </label>
                                </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                    @endif
                    @if ($key == 'kategori' || $key == 'subkategori')
                    <div class="px-2 mb-1">
                        <h2 class="mb-0" id="headingPenerbit">
                            <button
                                class="group relative flex w-full items-center border-0 bg-white p-2 text-left font-semibold text-black transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none data-[twe-collapse-collapsed]:rounded-b-lg data-[twe-collapse-collapsed]:transition-none [&:not([data-twe-collapse-collapsed])]:bg-white"
                                type="button" data-twe-collapse-init data-twe-collapse-collapsed
                                data-twe-target="#collapsePenerbit" aria-expanded="false"
                                aria-controls="collapsePenerbit">
                                Penerbit
                                <span
                                    class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                    </svg>
                                </span>
                            </button>
                        </h2>
                        <div id="collapsePenerbit" class="!visible" data-twe-collapse-item data-twe-collapse-show
                            aria-labelledby="headingPenerbit">
                            <div class="px-4 space-y-1.5">
                                @foreach ($getDataPenerbit as $penerbit)
                                <div class="block min-h-6 ps-6">
                                    <input
                                        class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                        type="checkbox" value="{{ $penerbit->penerbit }}" name="penerbit"
                                        id="checkbox{{ $penerbit->penerbit }}" />
                                    <label class="inline-block ps-[0.15rem] hover:cursor-pointer text-sm text-black"
                                        for="checkbox{{ $penerbit->penerbit }}">
                                        {{ $penerbit->penerbit }} </label>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endif
        @if($key != 'search')
        <div class="w-full">
            <div class="mx-4 mb-4 flex items-center justify-end">
                <button type="button"
                    class="md:hidden inline-block rounded-lg border border-gray-300 px-6 py-2 text-xs font-medium leading-normal text-gray-400 transition duration-150 ease-in-out hover:border-primary-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-primary-600 focus:border-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700"
                    data-twe-toggle="modal" data-twe-target="#exampleFrameBottomModal" data-twe-ripple-init
                    data-twe-ripple-color="light">Filter <i class="fa fa-filter ml-1"></i></button>
            </div>
            <div class="flex justify-between items-center mb-2">
                {{-- <p class="text-black">Menampilkan <span>10</span> Buku untuk "<span
                        class="name-searching font-medium">Agama Islam</span>" (<span class="font-medium">1 -
                        10</span> of <span class="font-medium">30</span>)</p> --}}
                <div class="flex flex-wrap ">
                    {{-- @if($keyword)
                    <h3 class="capitalize mb-4 font-semibold text-black text-lg">{{ $title }}</h3>
                    @else --}}
                    <h1 class="capitalize mb-4 font-semibold text-black text-lg">{{ $title }}</h1>
                    {{-- @endif --}}
                </div>
                <div class="hidden lg:block">
                    <div class="flex items-center">
                        <p class="text-black font-semibold mr-3 text-sm mt-[-13px]">Urutkan:</p>
                        <div class="w-52 ">

                            <select id="sort-select">
                                <option value="AZ">A-Z</option>
                                <option value="ZA">Z-A</option>
                                <option value="harga_asc">Harga Terendah</option>
                                <option value="harga_desc">Harga Tertinggi</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Batasan layout --}}

            {{-- Akhir batasan layout --}}

            {{-- Section untuk "Lainnya Oleh Gramedia" --}}
            {{-- <div class="flex flex-wrap mt-4">
                <h3 class="mb-4 font-semibold text-black text-lg">{{ $judul }}</h3>
            </div> --}}



            {{-- Daftar buku --}}
            <div class="grid md:grid-cols-5 grid-cols-2 gap-y-4 gap-x-2" id="book-list">
                {{-- data dari ajax --}}
            </div>

            {{-- Tombol "Selengkapnya.." --}}
            <div class="flex justify-center pt-4 mb-4">
                <button id="load-more" class="px-4 py-2  text-black font-semibold rounded mt-4 mb-6">Memuat
                    Lebih
                    Banyak..</button>
            </div>
        </div>
        @else
        <div class="w-full">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-2 gap- md:gap-0">
                <!-- Judul Pencarian -->
                <div class="flex flex-wrap">
                    <h1 class="capitalize mb-2 md:mb-4 text-black text-base md:text-lg">
                        Menampilkan Buku dengan Keyword: <strong>{{ $title }}</strong>
                    </h1>
                </div>

                <!-- Jumlah Buku dari Pencarian Kalimat -->
                <div class="flex flex-wrap" id="book-total">

                </div>

                <!-- Dropdown Urutkan -->
                <div class="w-full md:w-auto">
                    <div class="flex items-center justify-end ">
                        <div class="w-25 md:w-52">
                            <select id="sort-select" class="w-full p-2 border border-gray-300 rounded-lg">
                                <option value="AZ">A-Z</option>
                                <option value="ZA">Z-A</option>
                                <option value="harga_asc">Harga Terendah</option>
                                <option value="harga_desc">Harga Tertinggi</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Batasan layout --}}

            <!-- pencarian kalimat -->
            <div class="mb-4 grid grid-cols-1">
                <div class="grid grid-cols-2 gap-4" id="book-list-kalimat">

                </div>
                <div class="my-6 flex items-center justify-center">
                    <button class="btn btn-primary" id="btn-load-kalimat">Lihat Pencarian Kalimat Lebih Banyak</button>
                </div>
            </div>

            {{-- <div class="mb-4 grid grid-cols-1">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="book-list-kalimat">
                    <!-- Konten buku akan dimuat di sini -->
                </div>
                <div class="my-6 flex items-center justify-center">
                    <button class="btn btn-primary" id="btn-load-kalimat">Lihat Pencarian Kalimat Lebih Banyak</button>
                </div>
            </div> --}}
            <!-- end pencarian kalimat -->

            {{-- Akhir batasan layout --}}

            {{-- Daftar buku --}}
            <div class="grid md:grid-cols-6 grid-cols-2 gap-y-4 gap-x-2" id="book-list">
                {{-- data dari ajax --}}
            </div>
            <div class="w-full flex flex-col justify-center" id="no-result"></div>
            {{-- Tombol "Selengkapnya.." --}}
            <div class="flex justify-center pt-4 mb-4">
                <button id="load-more" class="px-4 py-2  text-black font-semibold rounded mt-4 mb-6">Memuat
                    Lebih
                    Banyak..</button>
            </div>
        </div>
        @endif
    </div>
</div>

<div data-twe-modal-init class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-hidden outline-none"
    id="exampleFrameBottomModal" tabindex="-1" aria-labelledby="exampleFrameBottomModalLabel" aria-hidden="true">
    <div data-twe-modal-dialog-ref
        class="pointer-events-none absolute bottom-0 w-full translate-y-[20px] opacity-0 transition-all duration-300 ease-in-out">
        <div
            class="pointer-events-auto relative flex w-full flex-col border-none bg-clip-padding text-current shadow-4 outline-none">
            <div class="relative bg-white rounded-t-2xl" data-twe-modal-body-ref>
                <div class="mt-4">
                    <div class="flex items-center justify-center p-2">
                        <div class="w-16 h-[6px] rounded-full bg-gray-200"></div>
                    </div>
                    <h3 class="px-4 font-semibold text-black text-lg mb-4">Filter</h3>
                    <div class="px-4 mt-4 mb-3 h-36 overflow-y-auto">
                        <div id="accordionFilter">
                            @if ($key == 'penerbit' || $key == 'penulis')
                            <div class="mb-1">
                                <h2 class="mb-0" id="kategoriHeader">
                                    <button
                                        class="group relative flex w-full items-center rounded-t-lg border-0 bg-white py-2 text-left text-sm font-semibold text-black transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none [&:not([data-twe-collapse-collapsed])]:bg-white"
                                        type="button" data-twe-collapse-init data-twe-target="#collapseKategori"
                                        aria-expanded="true" aria-controls="collapseKategori">
                                        Kategori
                                        <span
                                            class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                            </svg>
                                        </span>
                                    </button>
                                </h2>
                                <div id="collapseKategori" class="!visible" data-twe-collapse-item
                                    data-twe-collapse-show aria-labelledby="kategoriHeader">
                                    <div>
                                        @foreach ($getKategori as $kategori)
                                        <div class="mb-[0.125rem] block min-h-[1.5rem] ps-[1.5rem]">
                                            <input
                                                class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-indigo-500 checked:bg-indigo-500 checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                                type="checkbox" value="{{ $kategori->kategori }}" name="kategori"
                                                id="checkbox{{ $kategori->kategori }}" />
                                            <label
                                                class="inline-block ps-[0.15rem] hover:cursor-pointer text-sm text-black"
                                                for="checkbox{{ $kategori->kategori }}">
                                                {{ $kategori->kategori }}
                                            </label>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="mb-1>
                                            <h2 class=" mb-0" id="headingSubKategori">
                                <button
                                    class="group relative flex w-full items-center rounded-none border-0 bg-white py-2 text-left text-sm font-semibold text-black transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none [&:not([data-twe-collapse-collapsed])]:bg-white"
                                    type="button" data-twe-collapse-init data-twe-collapse-collapsed
                                    data-twe-target="#collapseSubKategori" aria-expanded="false"
                                    aria-controls="collapseSubKategori">
                                    Sub Kategori
                                    <span
                                        class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                        </svg>
                                    </span>
                                </button>
                                </h2>
                                <div id="collapseSubKategori" class="!visible hidden" data-twe-collapse-item
                                    aria-labelledby="headingSubKategori">
                                    <div>

                                        @foreach ($getSubKategori as $subkategori)
                                        <div class="mb-[0.125rem] block min-h-[1.5rem] ps-[1.5rem]">
                                            <input
                                                class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-indigo-500 checked:bg-indigo-500 checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                                type="checkbox" value="{{ $subkategori->sub_kategori }}"
                                                name="sub_kategori" id="checkbox" />
                                            <label
                                                class="inline-block ps-[0.15rem] hover:cursor-pointer text-sm text-black"
                                                for="checkbox{{ $subkategori->sub_kategori }}">
                                                {{ $subkategori->sub_kategori }} </label>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            @endif
                            @if ($key == 'kategori')
                            <div class="mb-1>
                                            <h2 class=" mb-0" id="headingPenerbit">
                                <button
                                    class="group relative flex w-full items-center border-0 bg-white py-2 text-left text-sm font-semibold text-black transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none data-[twe-collapse-collapsed]:rounded-b-lg data-[twe-collapse-collapsed]:transition-none [&:not([data-twe-collapse-collapsed])]:bg-white"
                                    type="button" data-twe-collapse-init data-twe-collapse-collapsed
                                    data-twe-target="#collapsePenerbit" aria-expanded="false"
                                    aria-controls="collapsePenerbit">
                                    Penerbit
                                    <span
                                        class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                        </svg>
                                    </span>
                                </button>
                                </h2>
                                <div id="collapsePenerbit" class="!visible hidden" data-twe-collapse-item
                                    aria-labelledby="headingPenerbit">
                                    <div>
                                        @foreach ($getDataPenerbit as $penerbit)
                                        <div class="mb-[0.125rem] block min-h-[1.5rem] ps-[1.5rem]">
                                            <input
                                                class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-indigo-500 checked:bg-indigo-500 checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right"
                                                type="checkbox" value="{{ $penerbit->penerbit }}" name="penerbit"
                                                id="checkbox{{ $penerbit->penerbit }}" />
                                            <label
                                                class="inline-block ps-[0.15rem] hover:cursor-pointer text-sm text-black"
                                                for="checkbox{{ $penerbit->penerbit }}">
                                                {{ $penerbit->penerbit }} </label>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="w-full border-t p-3">
                        <button type="button"
                            class="font-semibold rounded-xl w-full h-11 px-8 py-2.5 cursor-pointer bg-primary hover:bg-primary-dark text-white transition-all ease-out duration-300"
                            data-te-ripple-init data-te-ripple-color="light" data-te-submit-btn-ref>Tampilkan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{{-- Modal Share --}}
<div data-twe-modal-init
    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
    id="modalShare" tabindex="-1" aria-labelledby="modalShareTitle" aria-modal="true" role="dialog">
    <div data-twe-modal-dialog-ref
        class="m-4 pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[500px]">
        <div
            class="pointer-events-auto relative flex w-full flex-col rounded-2xl border-none bg-white bg-clip-padding text-current shadow-4 outline-none">
            <div class="flex flex-shrink-0 items-center justify-between rounded-t-2xl p-4">
                <!-- Modal title -->
                <h5 class="text-xl font-semibold leading-normal text-black" id="modalShareTitle">Bagikan</h5>
                <!-- Close button -->
                <button type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none"
                    data-twe-modal-dismiss aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </span>
                </button>
            </div>

            <div class="flex items-center justify-center p-8">
                <div class="flex gap-4">
                    <!-- Tombol share dengan logo saja -->
                    <button id="share-facebook" class="btn btn-social btn-facebook" title="Share on Facebook">
                        <i class="fab fa-facebook-f"></i>
                    </button>
                    <button id="share-twitter" class="btn btn-social btn-twitter" title="Share on Twitter">
                        <i class="fab fa-twitter"></i>
                    </button>
                    <button id="share-whatsapp" class="btn btn-social btn-whatsapp" title="Share on WhatsApp">
                        <i class="fab fa-whatsapp"></i>
                    </button>
                    <button id="share-linkedin" class="btn btn-social btn-linkedin" title="Share on LinkedIn">
                        <i class="fab fa-linkedin-in"></i>
                    </button>
                    <button type="button" onclick="copyLink2()"
                        class="btn btn-social w-[50px] h-[10px] bg-gray-200 rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-link text-black"></i>
                    </button>
                </div>
            </div>

            <div
                class="flex gap-2 flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t border-t-gray-100 p-4">
                <button type="button"
                    class="font-semibold h-10 rounded-xl px-8 py-2.5 text-sm cursor-pointer border-solid border border-primary text-primary hover:bg-gray-100 transition-all ease-out duration-300"
                    data-twe-modal-dismiss data-twe-ripple-init data-twe-ripple-color="light">Kembali</button>
            </div>
        </div>
    </div>
</div>
{{-- End Modal Share --}}

<!-- Modal Share -->
<div data-twe-modal-init
    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
    id="modalShare2" tabindex="-1" aria-labelledby="modalShare2Title" aria-modal="true" role="dialog">
    <div data-twe-modal-dialog-ref
        class="m-4 pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
        <div class="pointer-events-auto relative flex w-full flex-col rounded-2xl bg-white shadow-4">
            <div class="flex items-center justify-between p-4">
                <h5 class="text-xl font-semibold text-black">Bagikan</h5>
                <button type="button" class="text-neutral-500 hover:text-neutral-800" onclick="closeModal()">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-6 w-6" viewBox="0 0 24 24">
                        <path d="M6 18L18 6M6 6l12 12" stroke="currentColor" stroke-linecap="round"
                            stroke-linejoin="round" stroke-width="1.5" />
                    </svg>
                </button>
            </div>
            <div class="p-4">
                <input type="text" id="fullLink" readonly
                    class="w-full rounded-md border-gray-300 focus:border-primary focus:ring-primary sm:text-sm cursor-not-allowed">
            </div>
            <div class="flex items-center justify-center p-8">
                <div class="flex gap-4">
                    <button onclick="shareToFacebook()" class="btn btn-social btn-facebook" title="Share on Facebook">
                        <i class="fab fa-facebook-f"></i>
                    </button>
                    <button onclick="shareToTwitter()" class="btn btn-social btn-twitter" title="Share on Twitter">
                        <i class="fab fa-twitter"></i>
                    </button>
                    <button onclick="shareToWhatsApp()" class="btn btn-social btn-whatsapp" title="Share on WhatsApp">
                        <i class="fab fa-whatsapp"></i>
                    </button>
                    {{-- <button onclick="shareToLinkedIn()" class="btn btn-social btn-linkedin" title="Share on LinkedIn">
                        <i class="fab fa-linkedin-in"></i>
                    </button> --}}
                    <button type="button" onclick="copyLink()"
                        class="btn btn-social w-[50px] h-[10px] bg-gray-200 rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-link text-black"></i>
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>
{{-- End Modal Share 2--}}

@endsection

@section('javascript')
<script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('plugins/lazysizes/lazysizes.min.js') }}"></script>

<script>
    async function handleShareClick() {
            const shareLoading = document.getElementById('shareLoading');
            const modal = document.getElementById('modalShare2');
            const fullLinkInput = document.getElementById('fullLink');

            shareLoading.classList.remove('hidden');

            try {
                const response = await fetch('/shortLink/check', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        url_tujuan: window.location.href,
                    })
                });

                const result = await response.json();

                if (result.exists) {
                    fullLinkInput.value = result.shortUrl;
                } else {
                    const newAlias = generateUniqueCode();
                    const create = await fetch('/shortLink/add', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({
                            url_tujuan: window.location.href,
                            alias: newAlias
                        })
                    });

                    const data = await create.json();
                    if (data.code === 200) {
                        fullLinkInput.value = `https://bacabuku.info/${newAlias}`;
                    } else {
                        notifikasi.error(data.msg || 'Gagal membuat link!');
                        return;
                    }
                }

                showModal(modal);
            } catch (err) {
                console.error(err);
                notifikasi.error('Terjadi kesalahan saat memproses.');
            } finally {
                shareLoading.classList.add('hidden');
            }
        }

        function showModal(modalElement) {
            modalElement.classList.remove('hidden');
            modalElement.querySelector('[data-twe-modal-dialog-ref]').classList.add('pointer-events-auto', 'opacity-100');
        }

        function closeModal() {
            const modal = document.getElementById('modalShare2');
            modal.classList.add('hidden');
        }

        function generateUniqueCode(length = 8) {
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            return Array.from({ length }, () => characters.charAt(Math.floor(Math.random() * characters.length))).join('');
        }

        function copyLink() {
            const link = document.getElementById('fullLink').value;
            navigator.clipboard.writeText(link).then(() => {
                notifikasi.success('Link berhasil disalin!');
            }).catch(() => {
                notifikasi.error('Gagal menyalin link!');
            });
        }

        function copyLink2() {
            const link = window.location.href;
            navigator.clipboard.writeText(link).then(() => {
                notifikasi.success('Link berhasil disalin!');
            }).catch(() => {
                notifikasi.error('Gagal menyalin link!');
            });
        }
        
        
        function shareToFacebook() {
    const url = document.getElementById('fullLink').value;
    
    window.open(
        `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
        '_blank',
        'width=600,height=400'
    );
}
        

function shareToTwitter() {
    const url = document.getElementById('fullLink').value;
    const message = `
📖 Lagi cari bacaan yang seru dan penuh manfaat?
Yuk, temukan ebook menarik lainnya di bacabuku.com
✨ Bikin hari-harimu lebih inspiratif dan penuh wawasan!

👇 Klik link ini untuk mulai baca sekarang:`;

    window.open(
        `https://twitter.com/intent/tweet?text=${encodeURIComponent(message)}&url=${encodeURIComponent(url)}`,
        '_blank',
        'width=600,height=400'
    );
}
        
    function shareToWhatsApp() {
    const url = document.getElementById('fullLink').value;
    const message = `
📖 Lagi cari bacaan yang seru dan penuh manfaat?
Yuk, temukan ebook menarik lainnya di *bacabuku(dot)com*.
✨ Bikin hari-harimu lebih inspiratif dan penuh wawasan!

👇 Klik link ini untuk mulai baca sekarang:
🔗 ${url}`;

    window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(message)}`, '_blank');
}

function shareToLinkedIn() {
    const url = document.getElementById('fullLink').value;
    const summary = encodeURIComponent(   
        `Temukan ebook menarik lainnya di bacabuku.com`
    );
    const source = encodeURIComponent("bacabuku.com");

    window.open(
        `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url)}` +
        `&summary=${summary}` +
        `&source=${source}`,
        '_blank',
        'width=600,height=500'
    );
}

</script>

<script>
    function shareLink() {
        const url = window.location.href;
        const title = document.title;
        const fullLink = document.getElementById('fullLink').value;
      


        // Share to Facebook
        document.getElementById('share-facebook').addEventListener('click', function() {
            window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank');
        });

        // Share to Twitter
        document.getElementById('share-twitter').addEventListener('click', function() {
            window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`, '_blank');
        });

        // Share to WhatsApp
        document.getElementById('share-whatsapp').addEventListener('click', function() {
            window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(title)}%20${encodeURIComponent(url)}`, '_blank');
        });

        // Share to LinkedIn
        document.getElementById('share-linkedin').addEventListener('click', function() {
            window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`, '_blank');
        });

        document.getElementById('share-facebook2').addEventListener('click', function() {
            window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(fullLink)}`, '_blank');
        });

        // Share to Twitter
        document.getElementById('share-twitter2').addEventListener('click', function() {
            window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(fullLink)}&text=${encodeURIComponent(title)}`, '_blank');
        });

        // Share to WhatsApp
        document.getElementById('share-whatsapp2').addEventListener('click', function() {
            window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(title)}%20${encodeURIComponent(fullLink)}`, '_blank');
        });

        // Share to LinkedIn
        document.getElementById('share-linkedin2').addEventListener('click', function() {
            window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(fullLink)}&title=${encodeURIComponent(title)}`, '_blank');
        });
    }

    // Panggil fungsi shareLink ketika modal dibuka
    document.addEventListener('DOMContentLoaded', function() {
    const modalShare = document.getElementById('modalShare');
    modalShare.addEventListener('shown.bs.modal', function() {
        shareLink();
    });
});
</script>


<script>
    var page = 1;
    var pageKalimat = 1;
    var key = "{{ $key }}";
    var value = "{{ $value }}";
    var keyword = "{{ $keyword }}";
    var sort = "AZ";
    var kategori = [];
    var sub_kategori = [];
    var penerbit = [];
    var isLoading = false;

    function getDataKalimat(pageKalimat, sort, limit) {
    $.ajax({
        url: "{{ route('search.kalimat') }}",
        type: "GET",
        data: {
            page: pageKalimat,
            limit: limit,
            keyword: keyword, // Pastikan keyword sudah ada sebelumnya
            sort: sort,
        }
    }).done(function(m) {
        const data = m.data;
        const kalimat = m.kalimat;
        const searchIdKonten = m.searchIdKonten;
        const jumlah = m.jumlah;

        if (data.length > 0) {
            let html = "";
            let html2 = ""; // Deklarasikan html2
            let loadKalimat = false;

            for (let i = 0; i < data.length; i++) {
                let kode_konten = data[i].kode_konten;
                const exists = searchIdKonten.includes(kode_konten);
                if (!exists) continue;
                
                loadKalimat = true;
                let judul = data[i].judul;
                let sub_kategori = data[i].sub_kategori;
                let combined_title = sub_kategori + " " + judul;
                let slug = convertToSlug(combined_title);
                let harga = formatRupiah(data[i].harga);
                let penulis = data[i].penulis;
                let halaman = kalimat[kode_konten]['halaman'];
                let isi_halaman = kalimat[kode_konten]['hal_txt'];

                html += `
                <a href="{{ route('book', ['kode_konten' => ':kode_konten', 'slug' => ':slug']) }}">
                    <div class="relative p-4 flex flex-col md:flex-row items-center border border-gray-100 rounded-xl gap-4 cursor-pointer hover:shadow-custom ease-in-out duration-500 overflow-hidden">
                        <div class="absolute p-2 top-0 right-0 rounded-tr-xl rounded-bl-xl bg-emerald-500 font-medium text-white text-sm md:text-base">
                            Pencarian Kalimat
                        </div>
                        <img data-src="https://kubuku.id/api/generic/showCover/${kode_konten}" class="m-auto w-24 md:w-40 rounded-lg lazyload" />
                        <div class="w-full md:w-auto">
                            <h6 class="product-title font-semibold text-black line-clamp-2 md:mt-0 mb-1">${judul}</h6>
                            <p class="product-author line-clamp-1 text-sm text-gray-500 mb-3">${penulis}</p>
                            <div class="flex items-center gap-4">
                                <div class="grid grid-cols-1 gap-2">
                                    <div class="flex items-center gap-2 justify-center">
                                        <div class="w-7/12 md:w-10/12">
                                            <p class="text-sm text-gray-500 line-clamp-3">${isi_halaman}</p>
                                        </div>
                                        <div class="w-5/12 md:w-2/12 text-right">
                                            <p class="product-price fs-6 font-semibold text-sm text-primary mb-0">Hal. ${halaman}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                `.replace(/:kode_konten/g, kode_konten).replace(/:slug/g, slug);
            }

            html2 = `<h3 class="capitalize mb-2 md:mb-4 text-black text-base md:text-lg">
                        Jumlah Buku Dari Pencarian Kalimat: <strong>${jumlah}</strong>
                    </h3>`;

            $('#book-list-kalimat').append(html);
            $('#book-total').html(html2); 

        
            if (!loadKalimat) {
                $('#btn-load-kalimat').hide();
            } else {
                $('#btn-load-kalimat').show();
            }
        }
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.error("AJAX request failed: " + textStatus + ", " + errorThrown);
    });
}



    function getData(page, sort) {
        if (isLoading) return;
        isLoading = true;
        $('#load-more').html(`<div class="flex items-center justify-center">
                            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg"
                                fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                </path>
                            </svg>
                            Memuat...
                        </div>`);

        $.ajax({
            url: "{{ route('list.data', ['key' => $key, 'value' => $value]) }}",
            type: "GET",
            data: {
                page: page,
                limit: 20,
                keyword: keyword,
                sort: sort,
                kategori: kategori,
                sub_kategori: sub_kategori,
                penerbit: penerbit
            }
        }).done(function(m) {
            isLoading = false;
            $('#load-more').html(`<div class="flex items-center justify-center">
                            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg"
                                fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                </path>
                            </svg>
                            Memuat...
                        </div>`);

            if (m.length > 0) {
                var 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 slug = convertToSlug(judul);
                    let harga = formatRupiah(m[i].harga)

                    let penulis = m[i].penulis;

                    html +=
                    `<div class="mx-1 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                        <a href="{{ route('book', ['kode_konten' => ':kode_konten', 'slug' => ':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.png') }}" alt="cover buku"' +
                                    'class="m-auto w-40 rounded-lg lazyload" />' +
                                    `</div>
                            <div class="product-desc px-3 pb-3">
                                <h6 class="product-title font-semibold text-black text-sm line-clamp-2 mb-2">${judul}</h6>
                                <p class="product-author line-clamp-1 text-sm text-gray-500 mb-1">${penulis}</p>
                                <p class="product-price font-semibold text-base text-primary mb-0">${harga}</p>
                            </div>
                        </a>
                    </div>
                    `;
                    html = html.replace(/:kode_konten/g, kode_konten).replace(/:slug/g, slug);
                }

                if (page === 1) {
                    $('#book-list').html(html);
                } else {
                    $('#book-list').append(html);
                }

                if (m.length < 20) {
                    $('#load-more').hide();
                } else {
                    $('#load-more').show();
                }
            } else {
                if (page === 1) {
                    $('#no-result').html(`<div class="flex items-center justify-center mx-auto">
                        <div class="w-7/12 md:w-5/12 text-center">
                            <img src="{{ asset('images/empty-state/no-result.png') }}" alt="pencarian tidak ditemukan" />
                            <h3 class="font-semibold text-black">Pencarian Tidak Ditemukan</h3>
                        </div>
                    </div>`);
                }
                $('#load-more').hide();
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.error("AJAX request failed: " + textStatus + ", " + errorThrown);
            isLoading = false;
            $('#load-more').html(`<div class="flex items-center justify-center">
                            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg"
                                fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                </path>
                            </svg>
                            Memuat...
                        </div>`);
        });
    }

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

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

    document.addEventListener('DOMContentLoaded', function() {
        getData(page, sort);
        getDataKalimat(pageKalimat, sort, 2);
        const loadMoreButton = document.getElementById('load-more');
        let kalimatLoadMore = null;
        if (key === 'search') {
            kalimatLoadMore = document.getElementById('btn-load-kalimat');
        }

        const sortSelect = document.getElementById('sort-select');

        loadMoreButton.addEventListener('click', function() {
            page++;
            getData(page, sort);
        });

        if (kalimatLoadMore) {
            kalimatLoadMore.addEventListener('click', function() {
            pageKalimat++;
            getDataKalimat(pageKalimat, sort, 10);
        });
    }

        sortSelect.addEventListener('change', function() {
            sort = this.value;
            page = 1;
            getData(page, sort);
        });

        $('input[name="kategori"]').on('change', function() {
            kategori = $('input[name="kategori"]:checked').map(function() {
                return this.value;
            }).get();
            page = 1;
            getData(page, sort);
        });

        $('input[name="sub_kategori"]').on('change', function() {
            sub_kategori = $('input[name="sub_kategori"]:checked').map(function() {
                return this.value;
            }).get();
            page = 1;
            getData(page, sort);
        });

        $('input[name="penerbit"]').on('change', function() {
            penerbit = $('input[name="penerbit"]:checked').map(function() {
                return this.value;
            }).get();
            page = 1;
            getData(page, sort);
        });


        // untuk load data dengan scrole
        $(window).scroll(function() {
            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                if (!isLoading) {
                    page++;
                    getData(page, sort);
                }
            }
        });

     
    });
    
    $(document).ready(function() {
        // Init Filter plugin
        $('.select-filter').select2({
            width: 'element',
            minimumResultsForSearch: -1,
        });

        
    });
     
</script>
@endsection