{{-- wishlist for tablets and pcs --}}
    {{-- {{ dd('ffufu') }} --}}

    <div class="">

        <table uname='wishlist-for-tablet-and-pc' class="hidden md:table md:mx-10 lg:mx-auto my-20 font-light">
            <thead>
                <tr>
                    <th
                        class="py-2 uppercase font-light text-left md:min-w-[40vw]  border-b border-r-0 border-t-0 border-l-0 border-black border-2">
                        Product</th>
                    <th
                        class="py-2 uppercase font-light text-left   border-b border-r-0 border-t-0 border-l-0 border-black border-2">
                        Actions</th>
                </tr>
            </thead>

            <tbody>
                @foreach (getCart('wishlist')->content() as $item)
                    <tr class="border-b border-r-0 border-t-0 border-l-0 border-gray-300 border-2">
                        <td class="uppercase py-5">
                            <div class="product-container flex gap-5 justify-stretch  items-center font-light text-sm">

                                <div class="product-image-container">
                                    <img src="{{ $item->model->getMainPicture()?->path }}" alt="wishlist_img" width="80">
                                </div>
                                <div class="product-info">
                                    <div class="brand mb-3">{{ $item->model->getBrand() }} </div>
                                    <div class="product-name my-1">{{ $item->name }}</div>
                                    <div class="price flex my-1">
                                        <div class="currency_symbol">₦</div>

                                        <div class="value">{{ number_format($item->price, 2) }} </div>
                                        <div class="currency_abbr">&nbsp;NGN</div>
                                    </div>
                                    <div class="size">one size</div>
                                </div>
                            </div>
                        </td>

                        <td class="uppercase py-5">
                            <a href="{{ route('remove-from-wishlist', $item->model->id) }}">
                                <span class="cursor-pointer my-10 block text-3xl text-end text-red-500" title="remove">
                                    ✖
                                </span>
                            </a>
                            <span class="cursor-pointer block text-blue-500 underline">
                                <a href="{{ route('move-to-cart', $item->model->id) }}"> Move to Cart </a>
                            </span>
                        </td>

                    </tr>
                @endforeach
            </tbody>

            {{-- <tfoot>
                <td class="" colspan="3">

                    @livewire('grand-total')

                    <div class="info-container flex justify-end my-3 text-sm">
                        Taxes and shipping calculated at checkout
                    </div>

                    <x-udo.flat-btn btn-text="checkout" position="justify-end" href="{{ route('checkout') }}" />
                </td>
            </tfoot> --}}
        </table>

        {{-- script to update each wishlist item  --}}
        <script>
            function updateQtyInWishlistUI(e) {
                const thisElem = (e.target);
                let closestInput = thisElem.parentNode.parentNode.querySelector('input');
                closestInput.value =
                    thisElem.classList.contains('lni-minus') && parseInt(closestInput.value) >= 2 ?
                    parseInt(closestInput.value) - 1 :
                    (thisElem.classList.contains('lni-minus') && parseInt(closestInput.value) < 2) ?
                    1 : parseInt(closestInput.value) + 1;
            }
        </script>

    </div>