{{-- @if(Auth::user()->admin_toko == 1)
<a href="{{ route('index.page') }}"
    class="block md:hidden mt-2 w-full flex items-center px-3 py-2.5 cursor-pointer hover:bg-gray-100 rounded-xl {{ request()->is('paket') ? 'bg-gray-100' : '' }} mb-2"
    data-twe-ripple-init data-twe-ripple-color="secondary">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" viewBox="0 0 20 20" fill="currentColor">
        <path
            d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
    </svg>
</a>
@endif --}}

<div class="relative items-center hidden md:block">
    <div class="relative items-center" data-twe-dropdown-ref data-twe-dropdown-alignment="end">
        <a class="block p-2 relative rounded-xl whitespace-nowrap transition duration-150 ease-in-out motion-reduce:transition-none hover:text-primary hover:bg-zinc-200/60"
            href="#" id="wishlistDropdown" role="button" data-twe-dropdown-toggle-ref aria-expanded="false">
            <!-- User avatar -->
            <div class="relative w-7 h-7 flex items-center justify-center">
                <span class="fa-regular fa-heart text-xl"></span>
                <div class="absolute -right-2 -top-1">
                    <div class="flex items-center justify-center min-w-5 min-h-5 px-1 bg-rose-600 rounded-full border-2 border-white text-white font-medium text-xs text-right"
                        id="wishlistCount">
                        0
                    </div>
                </div>
            </div>
        </a>
        <div class="py-4 absolute z-[1000] w-96 float-left m-0 hidden min-w-max list-none overflow-hidden rounded-xl border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block"
            aria-labelledby="wishlistDropdown" data-twe-dropdown-menu-ref>
            <div class="px-4 pb-4 flex items-center justify-between border-b">
                <h3 class="font-semibold text-black">Wishlist <span class="font-normal"
                        id="wishlistCountInDropdown">0</span></h3>
                <a href="{{ route('mywishlist') }}"
                    class="font-semibold text-primary text-sm hover:text-primary-dark">Lihat</a>
            </div>
            <div class="py-2 h-72 w-96" id='book-empty'>

            </div>
            <ul id='book-list2' class="list-wish overflow-y-auto overflow-x-hidden p-2 h-72 w-96">
                <li class="px-2">
                </li>
            </ul>
            <!-- Wishlist items will be appended here -->

        </div>
    </div>
</div>


<div class="mr-2 relative block md:hidden">
    <div class="relative w-7 h-7 flex items-center justify-center" data-twe-dropdown-ref
        data-twe-dropdown-alignment="end">
        <a href="{{ route('mywishlist') }}"> <span class="fa-regular fa-heart text-xl"></span>
        </a>
        <div class="absolute -right-2 -top-1">
            <div class="flex items-center justify-center min-w-5 min-h-5 px-1 bg-rose-600 rounded-full border-2 border-white text-white font-medium text-xs text-right"
                id="wishlistCount2">
                0
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js" async=""></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        function getData() {
            $.ajax({
                url: "{{ route('wishlist.list') }}",
                type: "GET",
            }).done(function(m) {
                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 slug = convertToSlug(judul);
                        let harga = formatRupiah(m[i].harga);
                        let penulis = m[i].penulis;
                        let id = m[i].id; 

                        html +=
                            `
                            <a href="{{ route('book', ['kode_konten' => ':kode_konten', 'slug' => ':slug']) }}"  class="block whitespace-nowrap bg-white p-2 text-sm font-normal rounded-xl text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline" href="#" data-twe-dropdown-item-ref>
                                <div class="flex flex-row gap-4 items-start">
                                    <img data-src="https://kubuku.id/api/generic/showCover/${kode_konten}" src="{{ asset('images/ph-bacabuku.webp') }}" alt="cover book" class="h-16 w-16 rounded-md object-cover lazyload" />
                                    <div class="flex-1">
                                        <h3 class="text-wrap font-semibold text-black line-clamp-2">${judul}</h3>
                                        <p class="text-wrap product-author line-clamp-1 text-sm text-gray-500 mb-1">${penulis}</p>
                                        <p class="product-price fs-6 font-semibold text-sm text-primary mb-0">${harga}</p>
                                    </div>
                                </div>
                            </a>
                    `;
                    html = html.replace(/:kode_konten/g, kode_konten).replace(/:slug/g, slug);

                    }

                    $('#book-list2').html(html);
                    $('#book-empty').hide();
                    $('#wishlistCount').text(m.length);
                    $('#wishlistCount2').text(m.length);
                    $('#wishlistCountInDropdown').text(`(${m.length})`);
                } else {
                    $('#book-list2').hide();
                    $('#book-empty').html(`<div class="my-4 flex flex-col items-center justify-center">
                        <div class="w-7/12 md:w-5/12 text-center">
                            <img src="{{ asset('images/empty-state/no-wishlist.png') }}" alt="belum ada wishlist" />
                            <h3 class="font-semibold text-black">Belum Ada Wishlist</h3>
                        </div>
                    </div>`);
                    $('#wishlistCount').text(0);
                    $('#wishlistCount2').text(0);
                    $('#wishlistCountInDropdown').text('(0)');
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                console.error("AJAX request failed: " + textStatus + ", " + errorThrown);
            });
        }

        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);
        }

        // Fetch data on page load
        getData();
    });
</script>