@extends('layouts.app')

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

@section('content')
<div class="lg:container pt-16 mx-4">
    {{-- Breadcrumb --}}
    <div class="flex mt-8 text-gray-700">
        <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">Wishlist</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 w-full">
                    <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">
            <h1 class="mb-4 lg: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 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="flex flex-col items-center justify-center" id="book-empty2"></div>

            <div class="grid lg:grid-cols-5 md:grid-cols-4 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>
@endsection

@section('javascript')
<style>
    .swal2-btn {
        display: inline-block;
        font-size: 16px;
        font-weight: 600;
        padding: 12px 24px;
        border-radius: 12px;
        min-width: 140px;
        height: 48px;
        line-height: 1;
        text-align: center;
        box-sizing: border-box;
    }

    .swal2-confirm-btn {
        background-color: #FFA500;
        color: white;
        border: none;
    }

    .swal2-confirm-btn:hover {
        background-color: #e69500;
    }

    .swal2-cancel-btn {
        margin-left: 10px;
        background-color: white;
        color: #ffA500;
        border: 2px solid #ffA500;
    }

    .swal2-cancel-btn:hover {
        background-color: #ffa500;
        color: white;
        /* background-color: rgba(255, 165, 2, 0.5); */
    }
</style>


<script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('plugins/lazysizes/lazysizes.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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' => 'wishlist', '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 px-3 pb-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 class="px-3 pb-3">
                                <button 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="${id}">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M19 9L18.2841 18.3068C18.1238 20.3908 16.386 22 14.2959 22H9.70412C7.61398 22 5.87621 20.3908 5.71591 18.3068L5 9M21 7C18.4021 5.73398 15.3137 5 12 5C8.68635 5 5.59792 5.73398 3 7M10 5V4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4V5M10 11V17M14 11V17" stroke="#FFA502" stroke-width="1.5" stroke-linecap="round" />
                                    </svg>
                                    <span>Hapus</span>
                                </button>
                            </div>
                        </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-empty2').html(` <div class="w-7/12 md:w-4/12 text-center">
                    <img src="images/empty-state/no-wishlist.png" alt="belum ada wishlist" />
                    <h3 class="font-semibold text-black">Belum Ada Wishlist</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 wishlist ini?")) {
    //         $.ajax({
    //             url: "{{ route('deleteWishlist', ['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 wishlist. Silakan coba lagi.");
    //                 }
    //             },
    //             error: function(jqXHR, textStatus, errorThrown) {
    //                 console.error("AJAX request failed: " + textStatus + ", " + errorThrown);
    //                 alert("Terjadi kesalahan saat menghapus wishlist. Silakan coba lagi.");
    //             }
    //         });
    //     }
    // }
function deleteBook(id) {
    Swal.fire({
        title: 'Yakin ingin menghapus?',
        text: "Wishlist buku ini akan dihapus secara permanen.",
        showCancelButton: true,
        confirmButtonText: 'Ya, hapus!',
        cancelButtonText: 'Batal',
        buttonsStyling: false,
        customClass: {
            confirmButton: 'swal2-btn swal2-confirm-btn',
            cancelButton: 'swal2-btn swal2-cancel-btn'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "{{ route('deleteWishlist', ['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();
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: 'Buku berhasil dihapus dari wishlist.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: 'Gagal menghapus wishlist. Silakan coba lagi.'
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Kesalahan',
                        text: 'Terjadi kesalahan saat menghapus wishlist.'
                    });
                }
            });
        }
    });
}



    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-btn2')) {
                const id = event.target.closest('.delete-book-btn2').dataset.id;
                deleteBook(id);
                event.target.closest('.delete-book-btn2').removeEventListener('click', arguments.callee); // Menghapus event listener
            }
        });
    });

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