@extends('layouts.app')

@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">Transaksi</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-8/12 py-4">
            <div class="">
                <h1 class="mb-4 lg:mb-8 text-black text-xl md:text-3xl font-semibold">{{ $title }}</h1>
                @include('transaksi.transaksi')

                <div class="mb-6">
                    <div class="opacity-100 transition-opacity duration-150 ease-linear data-[twe-tab-active]:block"
                        role="tabpanel" aria-labelledby="tabs-profile-tab01">
                        <div class="p-3 w-full mb-4 bg-white z-10">
                            <div class="flex justify-center items-center">
                                <div class="flex-1 relative">
                                    <i class="fa fa-search absolute left-4 top-4 text-gray-400"></i>
                                    <input type="text" id="search-input" class="pl-10 form-input w-full"
                                        placeholder="Cari transaksi berdasarkan judul buku dan kode pembayaran" />
                                </div>
                            </div>
                        </div>
                        <div class="my-4 flex flex-col items-center justify-center" id="book-empty-tg">

                        </div>
                        <div class="grid grid-cols-1 sm:gap-4 md:gap-4 px-3" id="book-list">

                        </div>
                        <div class="flex justify-center pt-4 mb-4">
                            {{-- <button id="load-more-tg"
                                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">
                                    <li>
                                        <a
                                            class="mt- pointer-events-none relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300">&laquo;</a>
                                    </li>
                                    <li>
                                        <a class="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100"
                                            href="#!">1</a>
                                    </li>
                                    <li aria-current="page">
                                        <a class="relative block rounded-full bg-primary px-3 py-1.5 text-sm font-medium text-white transition-all duration-300"
                                            href="#!">2
                                            <span
                                                class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">(current)</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100"
                                            href="#!">3</a>
                                    </li>
                                    <li>
                                        <a class="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100"
                                            href="#!">&raquo;</a>
                                    </li>
                                </ul>
                            </nav>
                        </div> --}}
                    </div>
                </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>
    document.addEventListener('DOMContentLoaded', function() {
        let page = 1;
        let sort = "AZ";
        let isLoading = false;
        let searchTimeout;

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

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

                if (m.length > 0) {
                    var html = "";
                    for (let i = 0; i < m.length; i++) {
                        let kode_pengguna = m[i].kode_pengguna;
                        let tgl = m[i].tgl_input;
                        let harga = formatRupiah(m[i].grand_total);
                        let order_id = m[i].order_id;
                        let judul = m[i].judul;
                        let status = m[i].status ? (m[i].status === 'gagal' ? 'Dibatalkan' : 'Expired') : 'Tidak Diketahui';


                        html +=
                            `<div class="p-4 flex gap-3 mb-3 md:mb-0 bg-white border border-gray-200 rounded-xl"
                                    data-te-ripple-init data-te-ripple-color="secondary">
                                    <div class="w-full flex justify-between">
                                         <div>
                                                <div class="text-sm text-black font-semibold line-clamp-2">
                                                    ${order_id}</div>
                                                <div class="author mt-1 text-sm text-gray-light line-clamp-1">${judul}</div>
                                                <div class="author mt-1 text-sm text-gray-light line-clamp-1">${formatDate(tgl)}</div>
                                            </div>
                                        <div class="text-right">
                                            <div class="stock mt-1 text-sm text-black font-semibold">${harga}</div>
                                            <div class="stock mt-1 text-sm text-red-500 font-semibold">${status}</div>
                                        </div>
                                    </div>
                                </div>`;
                    }

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

                    if (m.length < 5) {
                        $('#load-more-tg').hide();
                    } else {
                        $('#load-more-tg').show();
                    }
                } else {
                    if (page === 1) {
                        $('#book-list').empty(); // Hapus isi dari #book-list jika tidak ada data
                        $('#book-empty-tg').html(` <div class="w-7/12 md:w-4/12 text-center">
                                        <img src="{{ asset('images/empty-state/no-transaction.png') }}" alt="belum ada ada transaksi" />
                                        <h3 class="font-semibold text-black">Belum Ada Transaksi Gagal</h3>
                                    </div>`);
                    }
                    $('#load-more-tg').hide();
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                console.error("AJAX request failed: " + textStatus + ", " + errorThrown);
                isLoading = false;
                $('#load-more-tg').html('Memuat Lebih Banyak...');
            });
        }

        function formatDate(dateString) {
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            return new Date(dateString).toLocaleDateString('id-ID', options);
        }

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

        const searchInput = document.getElementById('search-input');
        const loadMoreButton = document.getElementById('load-more-tg');
        const sortSelect = document.getElementById('sort-select');

        getData(page, sort);

        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                page = 1; 
                getData(page, sort, this.value);
            }, 300);
        });

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

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

        $(window).scroll(function() {
            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                if (!isLoading) {
                    page++;
                    getData(page, sort, searchInput.value);
                }
            }
        });

        getData(page, sort);
    });
</script>
@endsection