@extends('layouts.app')

@section('content')
<div class="lg:container pt-16 pb-32 lg:pb-0 mx-4">
    {{-- Breadcrumb --}}
    <div class="flex mt-8 text-gray-700">
        <!--begin::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 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">Koleksi</span>
                </div>
            </li>
        </ol>
    </div>
    {{-- End Breadcrumb --}}
    <div class="lg:flex my-6 gap-6">
        <div class="bg-white xl:w-3/12 md:w-4/12 hidden lg:block">
            <div class="p-4 flex flex-col items-center rounded-xl shadow-custom mb-4">
                <div class="flex items-center">
                    <div id="image-preview"
                        class="shrink-0 relative flex items-center object-center hover:bg-slate-100 flex-none w-14 h-14 rounded-full overflow-hidden border-2 border-gray-100 shadow-md cursor-pointer">
                        {{-- <input id="upload" type="file" class="hidden" accept="image/*" />
                        <label for="upload"
                            class="cursor-pointer absolute flex items-center justify-center bottom-0 z-20 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/50 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M7 6V6.75C7.25076 6.75 7.48494 6.62467 7.62404 6.41603L7 6ZM8.40627 3.8906L7.78223 3.47457V3.47457L8.40627 3.8906ZM15.5937 3.8906L16.2178 3.47457L15.5937 3.8906ZM17 6L16.376 6.41603C16.5151 6.62467 16.7492 6.75 17 6.75V6ZM14.25 13.5C14.25 14.7426 13.2426 15.75 12 15.75V17.25C14.0711 17.25 15.75 15.5711 15.75 13.5H14.25ZM12 15.75C10.7574 15.75 9.75 14.7426 9.75 13.5H8.25C8.25 15.5711 9.92893 17.25 12 17.25V15.75ZM9.75 13.5C9.75 12.2574 10.7574 11.25 12 11.25V9.75C9.92893 9.75 8.25 11.4289 8.25 13.5H9.75ZM12 11.25C13.2426 11.25 14.25 12.2574 14.25 13.5H15.75C15.75 11.4289 14.0711 9.75 12 9.75V11.25ZM7.62404 6.41603L9.0303 4.30662L7.78223 3.47457L6.37596 5.58397L7.62404 6.41603ZM10.0704 3.75H13.9296V2.25H10.0704V3.75ZM14.9697 4.30662L16.376 6.41603L17.624 5.58397L16.2178 3.47457L14.9697 4.30662ZM13.9296 3.75C14.3476 3.75 14.7379 3.95888 14.9697 4.30662L16.2178 3.47457C15.7077 2.70953 14.8491 2.25 13.9296 2.25V3.75ZM9.0303 4.30662C9.26214 3.95888 9.65243 3.75 10.0704 3.75V2.25C9.1509 2.25 8.29226 2.70953 7.78223 3.47457L9.0303 4.30662ZM21.25 10V17H22.75V10H21.25ZM18 20.25H6V21.75H18V20.25ZM2.75 17V10H1.25V17H2.75ZM6 20.25C4.20507 20.25 2.75 18.7949 2.75 17H1.25C1.25 19.6234 3.37665 21.75 6 21.75V20.25ZM21.25 17C21.25 18.7949 19.7949 20.25 18 20.25V21.75C20.6234 21.75 22.75 19.6234 22.75 17H21.25ZM18 6.75C19.7949 6.75 21.25 8.20507 21.25 10H22.75C22.75 7.37665 20.6234 5.25 18 5.25V6.75ZM6 5.25C3.37665 5.25 1.25 7.37665 1.25 10H2.75C2.75 8.20507 4.20507 6.75 6 6.75V5.25ZM6 6.75H7V5.25H6V6.75ZM18 5.25H17V6.75H18V5.25Z"
                                    fill="#ffffff" />
                                <circle cx="12" cy="6" r="1" fill="#ffffff" />
                            </svg>
                        </label> --}}
                        <div class="absolute cursor-pointer z-10 w-full">
                            <img src="images/avatar.png"
                                class="rounded-full w-full bordder-2 border-white shadow-custom" alt="user"
                                loading="lazy" />
                        </div>
                    </div>
                    <div class="flex-1 mx-2">
                        <h3 class="font-bold text-black mb-0 line-clamp-1">{{ $user->nama }}</h3>
                        <span class="text-sm text-gray-400 line-clamp-1">{{ $user->email }}</span>
                    </div>
                </div>

                @include('layouts.component')
            </div>
        </div>
        <div class="xl:w-9/12 md:w-full py-4">
            <div class="">
                <h1 class="mb-8 text-black text-xl md:text-3xl font-semibold">{{ $title }}</h1>
                <div class="hidden md:block">
                    <div class="mb-4 flex items-center justify-end">
                        <div class="flex items-center">
                            <p class="text-black font-semibold mr-3 text-sm mt-[-13px]">Urutkan:</p>
                            <div class="w-52">
                                <select class="select-filter rounded-lg" name="sort" id="sort-select"
                                    style="width: 100%">
                                    <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>
                <div class="my-4 flex flex-col items-center justify-center" id="book-empty1"></div>

                <div class="grid lg:grid-cols-5 md:grid-cols-3 grid-cols-2 gap-y-4 gap-x-2" id='book-list'></div>

                <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 class="flex justify-center mt-10">
                    <nav aria-label="Page navigation example">
                        <ul class="list-style-none flex" id="pagination">
                            <!-- Pagination links will be dynamically added here -->
                        </ul>
                    </nav>
                </div> --}}
            </div>
        </div>

    </div>
</div>
@endsection

@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js" async=""></script>

<script>
    var page = 1;
    var key = "koleksi";
    var value = "{{ $kode_pengguna }}";
    var sort = "AZ";
    var isLoading = false;

    function getData(page, sort) {
        if (isLoading) return;
        isLoading = true;
        $('#load-more').html('<span class="loading-spinner"></span> Loading...');

        $.ajax({
            url: "{{ route('data.book', ['key' => 'koleksi', 'value' => $kode_pengguna]) }}",
            type: "GET",
            data: {
                page: page,
                limit: 10,
                sort: sort,
            }
        }).done(function(m) {
            isLoading = false;
            $('#load-more').html('Memuat Lebih Banyak...');

            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 +=
                        `<div class="book-item mx-1 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500" data-id="${id}">
                            <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/${kode_konten}" src="{{ asset('images/ph-bacabuku.webp') }}" alt="cover buku" class="m-auto w-36 rounded-lg lazyload" />
                                </div>
                                <div class="product-desc pb-3 px-3">
                                    <h6 class="product-title font-semibold text-black text-sm line-clamp-2 mb-1">${judul}</h6>
                                    <p class="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>
                            </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 < 10) {
                    $('#load-more').hide();
                } else {
                    $('#load-more').show();
                }
            } else {
                if (page === 1) {
                    $('#book-empty1').html(` <div class="w-7/12 md:w-4/12 text-center">
                    <img src="images/empty-state/no-collection.png" alt="belum ada koleksi" />
                    <h3 class="font-semibold text-black">Belum Ada Koleksi Buku</h3>
                </div>`);
                }
                $('#load-more').hide();
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.error("AJAX request failed: " + textStatus + ", " + errorThrown);
            isLoading = false;
            $('#load-more').html('Memuat Lebih Banyak...');
        });
    }

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

    function deleteBook(id) {
        if (confirm("Apakah Anda yakin ingin menghapus buku ini?")) {
            $.ajax({
                url: "{{ route('deleteBukuSaya', ['id' => ':id']) }}".replace(':id', id),
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id
                },
                success: function(response) {
                    if (response.success) {
                        $(`.book-item[data-id="${id}"]`).remove();
                        alert("Buku berhasil dihapus.");
                    } else {
                        alert("Gagal menghapus buku. Silakan coba lagi.");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("AJAX request failed: " + textStatus + ", " + errorThrown);
                    alert("Terjadi kesalahan saat menghapus buku. Silakan coba lagi.");
                }
            });
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        getData(page, sort);
        const loadMoreButton = document.getElementById('load-more');
        const sortSelect = document.getElementById('sort-select');

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

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

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

        // Tambahkan event listener untuk tombol hapus
        document.addEventListener('click', function(event) {
            if (event.target.closest('.delete-book-btn')) {
                const id = event.target.closest('.delete-book-btn').dataset.id;
                deleteBook(id);
                event.target.closest('.delete-book-btn').removeEventListener('click', arguments.callee); // Menghapus event listener
            }
        });
    });
</script>
@endsection