@extends('layouts.affiliatorlayout')

@section('head')
<link rel="stylesheet" href="{{ asset('plugins/gliderjs/glider.min.css')}}" />
<link rel="preload" as="image" type="image/webp" href="{{ asset('images/bg-hero.webp') }}" fetchpriority="high">
<link rel="stylesheet" href="{{ asset('plugins/datatables/datatables.min.css') }}">
@endsection

@section('content')
<div class="flex-1 p-4 lg:p-6 overflow-y-auto">
    <div class="mb-6 flex text-gray-700" aria-label="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>
            <li>
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <a href="#" class="ms-1 text-xs  md:ms-2">Produk Rekomendasi</a>
                </div>
            </li>

        </ol>
    </div>

    {{-- Popular Books Section --}}
    <section id="div-terpopuler" class="mb-6 p-6 bg-white rounded-xl shadow-custom">
        <div class="mb-4 flex items-center justify-between">
            <h2 class="font-semibold text-black text-lg">Buku Terpopuler</h2>
            <a href="http://127.0.0.1:8000/keyword/koleksi-buku-terpopuler"
                class="text-primary text-sm font-medium hover:text-primary-dark">Selengkapnya</a>
        </div>
        <div class="relative">
            <div class="glider-contain relative overflow-x-auto" id="glider-contain-terpopuler">
                <div class="glider" id="glider-terpopuler">
                    <!-- skeleton start -->
                    <div class="flex flex-row gap-2 flex-nowrap">
                        <div
                            class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                            <a href="#">
                                <div
                                    class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                    <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                                </div>
                                <div class="product-desc pb-4 px-4">
                                    <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                                </div>
                            </a>
                        </div>
                        <div
                            class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                            <a href="#">
                                <div
                                    class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                    <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                                </div>
                                <div class="product-desc pb-4 px-4">
                                    <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                                </div>
                            </a>
                        </div>
                        <div
                            class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                            <a href="#">
                                <div
                                    class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                    <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                                </div>
                                <div class="product-desc pb-4 px-4">
                                    <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                                </div>
                            </a>
                        </div>
                        <div
                            class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                            <a href="#">
                                <div
                                    class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                    <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                                </div>
                                <div class="product-desc pb-4 px-4">
                                    <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                                </div>
                            </a>
                        </div>
                        <div
                            class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                            <a href="#">
                                <div
                                    class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                    <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                                </div>
                                <div class="product-desc pb-4 px-4">
                                    <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                                </div>
                            </a>
                        </div>
                        <div
                            class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                            <a href="#">
                                <div
                                    class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                    <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                                </div>
                                <div class="product-desc pb-4 px-4">
                                    <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                                </div>
                            </a>
                        </div>
                        <div
                            class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                            <a href="#">
                                <div
                                    class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                    <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                                </div>
                                <div class="product-desc pb-4 px-4">
                                    <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                                </div>
                            </a>
                        </div>
                        <div
                            class="mx-1 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                            <a href="#">
                                <div
                                    class="img-box w-full text-center rounded-xl p-2 md:p-4 flex min-h-[215px] items-center justify-center">
                                    <div class="w-36 h-44 bg-gray-200 rounded-lg animate-pulse"></div>
                                </div>
                                <div class="product-desc pb-4 px-4">
                                    <div class="mb-2 w-full h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="mb-3 w-20 h-3 bg-gray-200 rounded animate-pulse"></div>
                                    <div class="w-16 h-3 bg-gray-200 rounded animate-pulse"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- skeleton finish -->
                </div>
            </div>

            <button
                class="glider-prevTerpopuler absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 rounded-full bg-white p-2 shadow-md z-10 hidden lg:block">
                <span class="sr-only">button</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M15 18l-6-6 6-6" />
                </svg>
            </button>
            <button
                class="glider-nextTerpopuler absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 rounded-full bg-white p-2 shadow-md z-10 hidden lg:block">
                <span class="sr-only">button</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M9 18l6-6-6-6" />
                </svg>
            </button>
        </div>
    </section>
    {{-- End Popular Books Section --}}

    <div class="mb-6 py-6 bg-white rounded-xl shadow-custom relative overflow-x-auto">
        <div class="px-6 pb-8">
            <h2 class="text-lg font-semibold text-gray-800">Produk Rekomendasi</h2>
        </div>
        <table id="tableRecomendation" class="hover w-full text-sm text-left text-gray-500">
            <thead>
                <tr>
                    <th>Detail Konten</th>
                    <th>Status Share</th>
                    <th>Aksi</th>
                </tr>
            </thead>
        </table>
    </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 bg-white shadow-4">
            <div class="flex flex-shrink-0 items-center justify-between rounded-t-2xl p-4">
                <h5 class="text-xl font-semibold leading-normal text-black" id="modalShareTitle">
                    Bagikan
                </h5>
                <!-- Close button -->
                <button type="button"
                    class="absolute top-3 right-3 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" onclick="closeModal()">
                    <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 id="modalContent" class="relative p-6 flex flex-col justify-center">
                <div class="p-4 hidden">
                    <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="my-4 w-full flex items-start gap-2">
                    {{-- item button share --}}
                    <button type="button" onclick="shareToFacebook()"
                        class="w-1/5 flex flex-col items-center justify-center rounded-lg cursor-pointer"
                        data-twe-ripple-init data-twe-ripple-color="secondary">
                        <div class="mb-1 flex items-center justify-center w-11 h-11 bg-primary/10 rounded-full"
                            data-twe-modal-dismiss>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M14.2 2.875C12.9734 2.875 11.797 3.36228 10.9296 4.22963C10.0623 5.09699 9.575 6.27337 9.575 7.5V10.075H7.1C6.97574 10.075 6.875 10.1757 6.875 10.3V13.7C6.875 13.8243 6.97574 13.925 7.1 13.925H9.575V20.9C9.575 21.0243 9.67574 21.125 9.8 21.125H13.2C13.3243 21.125 13.425 21.0243 13.425 20.9V13.925H15.9219C16.0252 13.925 16.1152 13.8547 16.1402 13.7546L16.9902 10.3546C17.0257 10.2126 16.9183 10.075 16.7719 10.075H13.425V7.5C13.425 7.29446 13.5067 7.09733 13.652 6.95199C13.7973 6.80665 13.9945 6.725 14.2 6.725H16.8C16.9243 6.725 17.025 6.62426 17.025 6.5V3.1C17.025 2.97574 16.9243 2.875 16.8 2.875H14.2Z"
                                    fill="#FFA502" />
                            </svg>
                        </div>
                        <span class="text-black text-xs text-center">Facebook</span>
                    </button>
                    {{-- end item button share --}}
                    {{-- item button share --}}
                    <button type="button" onclick="shareToTwitter()"
                        class="w-1/5 flex flex-col items-center justify-center rounded-lg cursor-pointer"
                        data-twe-ripple-init data-twe-ripple-color="secondary">
                        <div class="mb-1 flex items-center justify-center w-11 h-11 bg-primary/10 rounded-full"
                            data-twe-modal-dismiss>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M5.27992 1.91992C3.42424 1.91992 1.91992 3.42424 1.91992 5.27992V18.7199C1.91992 20.5756 3.42424 22.0799 5.27992 22.0799H18.7199C20.5756 22.0799 22.0799 20.5756 22.0799 18.7199V5.27992C22.0799 3.42424 20.5756 1.91992 18.7199 1.91992H5.27992ZM6.28117 6.23992H10.0912L12.7968 10.0846L16.0799 6.23992H17.2799L13.3387 10.8543L18.1987 17.7599H14.3896L11.2499 13.2993L7.43992 17.7599H6.23992L10.708 12.5296L6.28117 6.23992ZM8.11867 7.19992L14.8902 16.7999H16.3612L9.58961 7.19992H8.11867Z"
                                    fill="#FFA502" />
                            </svg>
                        </div>
                        <span class="text-black text-xs text-center">Twitter</span>
                    </button>
                    {{-- end item button share --}}
                    {{-- item button share --}}
                    <button type="button" onclick="shareToWhatsApp()"
                        class="w-1/5 flex flex-col items-center justify-center rounded-lg cursor-pointer"
                        data-twe-ripple-init data-twe-ripple-color="secondary">
                        <div class="mb-1 flex items-center justify-center w-11 h-11 bg-primary/10 rounded-full"
                            data-twe-modal-dismiss>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M12.042 2.5C14.5762 2.50004 16.9474 3.48215 18.7334 5.25977C20.5186 7.03682 21.4999 9.40022 21.5 11.916C21.5 17.1027 17.2542 21.3271 12.042 21.3271H12.0371C10.4536 21.3271 8.89809 20.9299 7.5166 20.1816C7.43307 20.1364 7.33864 20.1159 7.24512 20.1221L7.15137 20.1377L2.71191 21.2969L3.89648 16.9971C3.93199 16.868 3.91463 16.7301 3.84766 16.6143C3.01935 15.1841 2.58339 13.5616 2.58398 11.9111C2.58411 6.72444 6.82993 2.5 12.042 2.5ZM8.3916 6.66504C8.10407 6.66504 7.68446 6.7699 7.33691 7.14453C7.32479 7.1576 7.31132 7.17304 7.29395 7.19141C6.99983 7.50224 6.30273 8.24166 6.30273 9.62695C6.30276 10.3609 6.5663 11.0548 6.82617 11.5684C7.08947 12.0887 7.37211 12.4665 7.45117 12.5723L7.45605 12.5801C7.4579 12.5827 7.46106 12.5863 7.46484 12.5918C7.47255 12.603 7.48217 12.6176 7.49512 12.6367C7.81528 13.1099 9.49127 15.6045 12.0762 16.6211C13.0756 17.0145 13.7424 17.2044 14.2295 17.2861C14.7349 17.3709 15.0356 17.3366 15.2754 17.3076C15.3219 17.302 15.3597 17.2965 15.3965 17.293L15.3975 17.2939C15.7502 17.261 16.211 17.0578 16.5889 16.8145C16.9602 16.5753 17.3956 16.2055 17.5625 15.7451L17.5635 15.7412C17.6841 15.4005 17.7464 15.0808 17.7686 14.8223C17.7796 14.6935 17.7818 14.5718 17.7734 14.4658C17.7687 14.4063 17.7582 14.3047 17.7197 14.2012L17.6709 14.0986L17.5996 13.999C17.5234 13.9094 17.4369 13.8495 17.373 13.8105C17.2875 13.7583 17.186 13.711 17.1045 13.6719C17.0602 13.6506 17.0157 13.6289 16.9688 13.6055C16.8377 13.5403 16.4551 13.3518 16.0752 13.1689C15.7096 12.993 15.3064 12.8026 15.1602 12.748C15.0523 12.7078 14.8414 12.6272 14.6113 12.6543C14.3301 12.6875 14.1299 12.8564 13.9922 13.0635C13.8528 13.2695 13.4477 13.7446 13.2578 13.9658C13.2567 13.9653 13.2551 13.9654 13.2539 13.9648C13.1971 13.9366 13.1255 13.9059 13.0605 13.8779C12.7156 13.7291 12.0559 13.4446 11.291 12.7637L11.29 12.7627C10.6428 12.189 10.1803 11.4801 10 11.1807C10.0904 11.0891 10.1889 10.9726 10.2656 10.8799C10.3148 10.8204 10.3588 10.7665 10.4004 10.7188C10.561 10.5343 10.6336 10.3817 10.7031 10.2373C10.7122 10.2185 10.7212 10.1997 10.7305 10.1807C10.9104 9.81171 10.8081 9.48842 10.708 9.28906C10.7071 9.28708 10.7 9.27228 10.6846 9.23633C10.669 9.20011 10.6491 9.15168 10.625 9.09375C10.5769 8.97805 10.5147 8.82785 10.4463 8.66113C10.2723 8.23743 10.053 7.70264 9.9209 7.4082V7.40723L9.82324 7.21777C9.71784 7.03904 9.58759 6.89586 9.42188 6.7998C9.20468 6.67405 8.99176 6.67227 8.90137 6.66992H8.90234C8.74418 6.6647 8.56235 6.66504 8.3916 6.66504Z"
                                    fill="#FFA502" stroke="#FFA502" stroke-linejoin="round" />
                            </svg>
                        </div>
                        <span class="text-black text-xs text-center">Whatsapp</span>
                    </button>
                    {{-- end item button share --}}
                    {{-- item button share --}}
                    <button type="button" onclick="shareToLinkedIn()"
                        class="w-1/5 flex flex-col items-center justify-center rounded-lg cursor-pointer"
                        data-twe-ripple-init data-twe-ripple-color="secondary">
                        <div class="mb-1 flex items-center justify-center w-11 h-11 bg-primary/10 rounded-full"
                            data-twe-modal-dismiss>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M4.75 1.875C3.57639 1.875 2.625 2.82639 2.625 4C2.625 5.1736 3.57639 6.125 4.75 6.125C5.9236 6.125 6.875 5.1736 6.875 4C6.875 2.82639 5.9236 1.875 4.75 1.875Z"
                                    fill="#FFA502" />
                                <path
                                    d="M2.75 7.875C2.68096 7.875 2.625 7.93096 2.625 8V21C2.625 21.069 2.68096 21.125 2.75 21.125H6.75C6.81904 21.125 6.875 21.069 6.875 21V8C6.875 7.93096 6.81904 7.875 6.75 7.875H2.75Z"
                                    fill="#FFA502" />
                                <path
                                    d="M9.25 7.875C9.18096 7.875 9.125 7.93096 9.125 8V21C9.125 21.069 9.18096 21.125 9.25 21.125H13.25C13.319 21.125 13.375 21.069 13.375 21V14C13.375 13.5027 13.5725 13.0258 13.9242 12.6742C14.2758 12.3225 14.7527 12.125 15.25 12.125C15.7473 12.125 16.2242 12.3225 16.5758 12.6742C16.9275 13.0258 17.125 13.5027 17.125 14V21C17.125 21.069 17.181 21.125 17.25 21.125H21.25C21.319 21.125 21.375 21.069 21.375 21V12.3802C21.375 9.9535 19.2644 8.05499 16.8498 8.2745C16.1052 8.34219 15.369 8.52731 14.6815 8.82194L13.375 9.38186V8C13.375 7.93096 13.319 7.875 13.25 7.875H9.25Z"
                                    fill="#FFA502" />
                            </svg>

                        </div>
                        <span class="text-black text-xs text-center">Linkedin</span>
                    </button>
                    {{-- end item button share --}}
                    {{-- item button share --}}
                    <button type="button" onclick="copyLink()" id="btn-copy-link"
                        class="w-1/5 flex flex-col items-center justify-center rounded-lg cursor-pointer"
                        data-twe-ripple-init data-twe-ripple-color="secondary">
                        <div class="mb-1 flex items-center justify-center w-11 h-11 bg-primary/10 rounded-full"
                            data-twe-modal-dismiss>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M14 10L10 14" stroke="#FFA502" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path
                                    d="M16 13L18 11C19.3807 9.61929 19.3807 7.38071 18 6V6C16.6193 4.61929 14.3807 4.61929 13 6L11 8M8 11L6 13C4.61929 14.3807 4.61929 16.6193 6 18V18C7.38071 19.3807 9.61929 19.3807 11 18L13 16"
                                    stroke="#FFA502" stroke-width="2" stroke-linecap="round" />
                            </svg>
                        </div>
                        <span class="text-black text-xs text-center">Salin Link</span>
                    </button>
                    {{-- end item button share --}}
                </div>
            </div>
            <div class="flex items-center justify-end p-4">
                <button type="button" class="btn btn-primary px-8" data-twe-modal-dismiss onclick="closeModal()">
                    Tutup
                </button>
            </div>
        </div>
    </div>
</div>
{{-- End Modal Share --}}
@endsection

@section('javascript')
<script src="{{ asset('plugins/gliderjs/glider.min.js') }}"></script>
<script src="{{ asset('plugins/lazysizes/lazysizes.min.js') }}"></script>
<script src="{{ asset('plugins/datatables/datatables.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script>
    const bookRouteTemplate = "{{ route('book', ['kode_konten' => ':kode', 'slug' => ':slug']) }}";
</script>
<script>
    $(document).ready( function () {
        $('#tableRecomendation').DataTable({
            processing: true,
            serverSide: false,
            scrollX: true,
            ajax: {
                url: "{{ route('data.dataKonten') }}",
                type: 'GET',
                dataSrc: 'data',
            },
            language: {
                "decimal":        "",
                "emptyTable":     "Tidak ada data yang tersedia",
                "info":           "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "infoEmpty":      "Menampilkan 0 sampai 0 dari 0 data",
                "infoFiltered":   "(disaring dari _MAX_ total data)",
                "infoPostFix":    "",
                "thousands":      ",",
                "lengthMenu":     "Tampilkan _MENU_ data",
                "loadingRecords": "Memuat...",
                "processing":     "Memproses...",
                "search":         "Cari:",
                "zeroRecords":    "Tidak ditemukan data yang cocok",
            },
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Semua"]], 
            columns: [
                {
                    data: null,
                    width: "70%",
                    render: function (data, type, row) {
                        
                        
                        return `
                            <div class="flex items-center gap-2">
                                <div class="flex-none w-20 h-20 bg-cover bg-no-repeat bg-top rounded-lg" 
                                    style="background-image: url('https://kubuku.id/api/generic/showCover/${row.kode_konten}')"
                                    onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                                </div>
                                <div class="text-left">
                                    <h3 class="text-black text-sm font-medium">${row.judul || 'Judul tidak tersedia'}</h3>
                                    <div class="text-xs text-gray-500">${row.penulis || 'Penulis tidak tersedia'}</div>
                                    <div class="text-xs text-gray-500">${row.penerbit || 'Penerbit tidak tersedia'}</div>
                                    <div class="text-xs font-medium text-primary">Rp. ${row.harga}</div>
                                </div>
                            </div>
                        `;
                    }
                },
                {
                    data: 'kode',
                    width: "20%",
                    render: function(data, type, row) {
                        if (data !== null && data !== undefined && data !== '') {
                            
                            return ` <div class="py-1 px-2 bg-green-500/20 whitespace-nowrap inline-block text-xs text-center text-green-500 rounded-md">Sudah Dibagikan</div>`;
                        } 
                        // Jika kode tidak ada
                        else {
                            return `<div class="py-1 px-2 bg-red-500/20 whitespace-nowrap inline-block text-xs text-center text-red-500 rounded-md">Belum Dibagikan</div>`;
                        }
                    }
                },
                {
                    data: null,
                    width: "10%",
                    render: function(data, type, row) {

                        // Safely handle potentially missing data
                        const kode = row.kode_konten || '';
                        const judul = row.judul ? row.judul.replace(/'/g, "\\'") : '';
                        const penerbit = row.penerbit ? row.penerbit.replace(/'/g, "\\'") : '';
                        const penulis = row.penulis ? row.penulis.replace(/'/g, "\\'") : '';
                        const harga = row.harga || '0';
                        const slug = judul ? judul.toLowerCase().replace(/[^\w ]+/g, '').replace(/ +/g, '-') : '';
                        
                        
                        
                        return `
                            <button class="btn-modal-share w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-200 text-primary-600 transition-all duration-200 ease-in-out" 
                                onclick="handleShareClick(
                                    '${kode}',
                                    '${judul}',
                                    '${penerbit}',
                                    '${penulis}',
                                    '${harga}',
                                    '${slug}'
                                )"
                            >
                            <div data-twe-toggle="tooltip" title="Bagikan">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_5803_8)">
                                        <path d="M6.47338 7.82581C6.04242 6.96555 5.15267 6.375 4.125 6.375C2.67525 6.375 1.5 7.55025 1.5 9C1.5 10.4497 2.67525 11.625 4.125 11.625C5.15267 11.625 6.04242 11.0344 6.47338 10.1742M6.47338 7.82581C6.65039 8.17912 6.75 8.57793 6.75 9C6.75 9.42207 6.65039 9.82088 6.47338 10.1742M6.47338 7.82581L11.5266 5.29919M6.47338 10.1742L11.5266 12.7008M11.5266 5.29919C11.9576 6.15945 12.8473 6.75 13.875 6.75C15.3247 6.75 16.5 5.57475 16.5 4.125C16.5 2.67525 15.3247 1.5 13.875 1.5C12.4253 1.5 11.25 2.67525 11.25 4.125C11.25 4.54707 11.3496 4.94588 11.5266 5.29919ZM11.5266 12.7008C11.3496 13.0541 11.25 13.4529 11.25 13.875C11.25 15.3247 12.4253 16.5 13.875 16.5C15.3247 16.5 16.5 15.3247 16.5 13.875C16.5 12.4253 15.3247 11.25 13.875 11.25C12.8473 11.25 11.9576 11.8406 11.5266 12.7008Z" stroke="#28303F" stroke-width="1.5" stroke-linecap="round"/>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_5803_8">
                                            <rect width="18" height="18" fill="white"/>
                                        </clipPath>
                                    </defs>
                                </svg>
                            </div>
                            </button>
                        `;
                    }
                }
            ],
            searching: true,
        });



            function terpopuler() {
                $.ajax({
                    "url": "{{ route('terpopuler.list') }}",
                    "type": "GET",
                    "data": {
                        'page': 1,
                        'limit': 80
                    }
                }).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 lastJudul =  m[i].judul.replace(/"/g, '');
                            let sub_kategori = m[i].sub_kategori;
                            let combined_title = sub_kategori + " " + judul;
                            let slug = convertToSlug(combined_title); 
                            let harga = formatRupiah(m[i].harga);
                            let promosi = m[i].is_promosi;
                            
                            

                            if (promosi) {
                                html += `<div class="bg-white mx-2 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                                    <div class="img-box w-full text-center rounded-xl p-2 flex min-h-[215px] items-center justify-center">
                                        <a href="{{ url('book') }}/${kode_konten}/${slug}">
                                    <img data-src="https://kubuku.id/api/generic/showCover/${m[i].kode_konten}"
                                        src="{{ asset('images/ph-bacabuku.webp') }}"
                                        onerror="this.onerror=null;this.src='{{ asset('images/ph-bacabuku.webp') }}'"
                                        alt="cover buku"
                                        width="160"
                                        height="240"
                                        loading="lazy"
                                        class="m-auto w-40 rounded-lg lazyload" />
                                                                            </a>

                                    </div>
                                    <div class="product-desc pb-3 px-3">
                                    <h3 class="product-title font-semibold text-black text-sm line-clamp-2 mb-1">${m[i].judul}</h3>
                                    <p class="product-author line-clamp-1 text-sm text-gray-500 mb-1">${m[i].penulis}</p>
                                    <div class="mt-2 p-1 inline gap-1 bg-red-500/20 rounded-md text-xs font-semibold text-red-500"><i class="fa fa-bolt"></i><span> Flash Sale</span></div>

                                    <div class="mt-2 flex gap-2 items-center">
                                    <p class="product-price fs-6 font-semibold text-sm text-primary mb-0">${formatRupiah(m[i].harga_akhir)}</p>
                                    <p class="product-price text-xs text-gray-500 line-through">${formatRupiah(m[i].harga_awal)}</p>
                                    </div>
                                    </div>
                                     <div class="flex gap-1 px-3 pb-3">
                                        <button onClick="handleShareClick(
                                    '${kode_konten}',
                                    '${lastJudul}',
                                    '${m[i].penerbit}',
                                    '${m[i].penulis}',
                                    '${m[i].harga_akhir}',
                                    '${slug}'
                                )" type="button" class="delete-book-btn2 flex flex-row items-center gap-1 justify-center font-medium rounded-lg w-full text-xs p-1 cursor-pointer border-solid border bg-primary/10 border-primary text-primary hover:bg-primary/20 transition-all ease-out duration-300" data-id="">
                                            <span>Bagikan</span>
                                        </button>
                                        <a href="{{ url('book') }}/${kode_konten}/${slug}" class="flex flex-none items-center justify-center w-[26px] h-[26px] text-xs bg-primary text-white rounded-md"><i class="fa fa-eye"></i></a>
                                    </div>
                                    </div>`;
                            } else {
                                html += `<div class="bg-white mx-2 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">
                                    <div class="img-box w-full text-center rounded-xl p-2 flex min-h-[215px] items-center justify-center">
                                        <a href="{{ url('book') }}/${kode_konten}/${slug}">
                                    <img data-src="https://kubuku.id/api/generic/showCover/${m[i].kode_konten}"
                                        src="{{ asset('images/ph-bacabuku.webp') }}"
                                        onerror="this.onerror=null;this.src='{{ asset('images/ph-bacabuku.webp') }}'"
                                        alt="cover buku"
                                        width="160"
                                        height="240"
                                        loading="lazy"
                                        class="m-auto w-40 rounded-lg lazyload" />
                                                                            </a>

                                    </div>
                                    <div class="product-desc pb-3 px-3">
                                    <h3 class="product-title font-semibold text-black text-sm line-clamp-2 mb-1">${m[i].judul}</h3>
                                    <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>
                                    <div class="flex gap-1 px-3 pb-3">
                                        <button onClick="handleShareClick(
                                    '${kode_konten}',
                                    '${lastJudul}',
                                    '${m[i].penerbit}',
                                    '${m[i].penulis}',
                                    '${m[i].harga}',
                                    '${slug}'
                                )" type="button" class="delete-book-btn2 flex flex-row items-center gap-1 justify-center font-medium rounded-lg w-full text-xs p-1 cursor-pointer border-solid border bg-primary/10 border-primary text-primary hover:bg-primary/20 transition-all ease-out duration-300" data-id="">
                                            <span>Bagikan</span>
                                        </button>
                                        <a href="{{ url('book') }}/${kode_konten}/${slug}" class="flex flex-none items-center justify-center w-[26px] h-[26px] text-xs bg-primary text-white rounded-md"><i class="fa fa-eye"></i></a>
                                    </div>
                                    
                                    </div>`;

                            }

                             
                        }

                        $('#glider-terpopuler').html(html);

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

            terpopuler()

            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 initTooltips() {
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-twe-toggle="tooltip"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new twe.Tooltip(tooltipTriggerEl);
            });
        }

        initTooltips();
        
        // Fungsi untuk inisialisasi ulang tombol modal
        function initModalTriggers() {
        $('.btn-modal-share').off('click').on('click', function () {
                // Tampilkan modal dengan TW Elements
                const modal = new twe.Modal(document.getElementById('modalShare'));
                modal.show();
            });
        }

        initModalTriggers();

        $('#tableRecomendation').on('draw.dt', function () {
            initTooltips();
            initModalTriggers();
        });
        
        // $('#copy-text-link').on('click', function() {
        //     notyf.success('Teks berhasil disalin!');
        // })
    } );

    // Define formattedHarga in global scope to be accessible by all functions
    let formattedHarga = '';
    let currentAlias = '';
    let penerbit = "";
    let penulis = "";
    let judul = "";

    async function handleShareClick(kode_konten, judul, penerbit, penulis, harga, slugJudul) {
        const shareLoading = document.getElementById('shareLoading');
        const modal = document.getElementById('modalShare');
        const fullLinkInput = document.getElementById('fullLink');
        const urlTujuan = bookRouteTemplate
                .replace(':kode', encodeURIComponent(kode_konten))
                .replace(':slug', encodeURIComponent(slugJudul));
                
        // Format harga and store globally
        formattedHarga = new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0
        }).format(harga).replace('Rp', 'Rp.');
            formatpenerbit = penerbit;
            formatpenulis = penulis
            formatjudul = judul;



   
        // 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: urlTujuan,
                    kode_konten: kode_konten
                })
            });

            const result = await response.json();

            if (result.exists) {
                fullLinkInput.value = result.shortUrl;
                currentAlias = result.alias;
            } 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: urlTujuan,
                        alias: newAlias,
                        kode_konten: kode_konten
                    })
                });

                const data = await create.json();
                if (data.code === 200) {
                    fullLinkInput.value = `https://bacabuku.info/${newAlias}`;
                    currentAlias = newAlias;
                    notyf.success('Link berhasil dibuat!');
                    $('#tableRecomendation').DataTable().ajax.reload(null, false);

                } else {
                    notyf.error(data.msg || 'Gagal membuat link!');
                    return;
                }
            }

            showModal(modal);
        } catch (err) {
            console.error(err);
            notyf.error('Terjadi kesalahan saat memproses.');
        } 
    }



    

    function generateShareMessage() {
        return `📚 Judul Buku: ${formatjudul}
🖋️ Penulis: ${formatpenulis}
🏢 Penerbit: ${formatpenerbit}
💰 Harga: ${formattedHarga}

📖 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:
https://bacabuku.info/${currentAlias}`;
    }

    function generateWhatsAppMessage() {
        return `📚 *Judul Buku:* ${formatjudul}
🖋️ *Penulis:* ${formatpenulis}
🏢 *Penerbit:* ${formatpenerbit}
💰 *Harga:* ${formattedHarga}

📖 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:
🔗 https://bacabuku.info/${currentAlias}`;
    }

    function shareToFacebook() {
        const url = document.getElementById('fullLink').value;
        const message = generateShareMessage();
        
        window.open(
            `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}&quote=${encodeURIComponent(message)}`,
            '_blank',
            'width=600,height=400'
        );
    }

    function shareToTwitter() {
        const url = document.getElementById('fullLink').value;
        const message = generateShareMessage();
        
        window.open(
            `https://twitter.com/intent/tweet?text=${encodeURIComponent(message)}`,
            '_blank',
            'width=600,height=400'
        );
    }

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

    function shareToLinkedIn() {
        const url = document.getElementById('fullLink').value;
        const summary = `Judul: ${formatjudul}\nPenulis: ${formatpenulis}\nPenerbit: ${formatpenerbit}\nHarga: ${formattedHarga}`;
        
        window.open(
            `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url)}` +
            `&title=${encodeURIComponent(formatjudul)}` +
            `&summary=${encodeURIComponent(summary)}` +
            `&source=${encodeURIComponent('bacabuku.com')}`,
            '_blank',
            'width=600,height=500'
        );
    }

    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('modalShare');
        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(() => {
            notyf.success('Link berhasil disalin!');
        }).catch(() => {
            notyf.error('Gagal menyalin link!');
        });
    }
</script>

@endsection