{{-- cart for tablets and pcs --}}
    <div class="">

        <table uname='cart-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 md:min-w-[35vw] lg:min-w-[15vw]  md:max-w-[50vw] border-b border-r-0 border-t-0 border-l-0 border-black border-2">
                        Quantity</th>
                    <th
                        class="py-2 uppercase font-light text-right  md:min-w-[10vw] border-b border-r-0 border-t-0 border-l-0 border-black border-2">
                        Total</th>
                </tr>
            </thead>

            <tbody>
                @foreach (getCart()->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">
                                    {{-- {{ dd('hi', $item->model->pictures->first()->path) }} --}}
                                    <a href="{{ route('products.show', $item->id) }}">
                                        <img src="{{ $item->model->getMainPicture()?->path }}" alt="product_img" width="80">
                                    </a>
                                </div>
                                <div class="product-info">
                                    <div class="brand mb-3">{{ $item->model->getBrand() }} </div>
                                    <a href="{{ route('products.show', $item->id) }}"
                                        class="product-name my-1">{{ $item->name }}</a>
                                    <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>
                            <div class="qty-container ">
                                <div class="qty-input-container md:w-fit border-2 border-black p-2 bg-white">

                                    @livewire('decrement-item-qty-in-cart', ['id' => $item->id])
                                    @livewire('product-qty-in-cart', ['id' => $item->id])
                                    @livewire('increment-item-qty-in-cart', ['id' => $item->id])
                                </div>
                                @livewire('remove-from-cart', ['id' => $item->id])
                            </div>
                        </td>

                        <td>
                            <div class="total-price-container">
                                @livewire('product-sub-total', ['id' => $item->id])
                                <span class="block mt-10 cursor-pointer  text-blue-500 underline">
                                    <a href="{{ route('move-to-wishlist', $item->model->id) }}"> Move to Wishlist</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 cart item  --}}
        <script>
            function updateQtyInCartUI(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>