 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="apple-mobile-web-app-capable" content="yes">
 @php
     $user = Auth::user();
     $cartproduct = App\Models\Cart::where('userid', $user->id)->get();
 @endphp
 @foreach ($cartproduct as $product)
     @if ($product)
         <tr class="cart__row border-bottom line1 cart-flex border-top" data-cart-id="{{ $product->id }}">
             <td class="cart__image-wrapper cart-flex-item">
                 @php
                     try {
                         $productData = DB::table('product')
                             ->join('product_color', 'product.id', '=', 'product_color.product_id')
                             ->select(
                                 'product.id',
                                 'product.product_name',
                                 'product.category_id',
                                 'product.product_tags',
                                 'product.sku',
                                 'product.product_image',
                                 'product.product_price',
                                 'product.cutted_price',
                                 'product.product_description',
                                 'product.qty',
                                 'product.weight',
                                 'product.order',
                                 'product.views',
                                 'product.status',
                                 'product_color.product_color',
                                 'product_color.color_image',
                                 'product_color.price',
                             )
                             ->where('product_color.product_color', $product->color)
                             ->where('product.id', $product->productid)
                             ->first();
                         $productTotal = $product->product_price * $product->qty;
                     } catch (\Throwable $th) {
                         DB::table('error_logs')->insert([
                             'message' => $th->getMessage(),
                             'file' => $th->getFile(),
                             'line' => $th->getLine(),
                             'trace' => $th->getTraceAsString(),
                             'created_at' => now(),
                         ]);
                     }
                 @endphp
                 @if ($productData)
                     <a href="#"><img class="cart__image"
                             src="{{ asset('admin/assets/img/product/' . $productData->color_image) }}"
                             alt="no Image"></a>
                 @endif
             </td>
             <td class="cart__meta small--text-left cart-flex-item">
                 <div class="list-view-item__title">
                     @if ($productData)
                         <a
                             href="{{ route('american.plastic.web.product.details', ['name' => Str::slug($productData->product_name)]) }}?id={{ $productData->id }}">{{ $productData->product_name }}</a>
                     @endif
                 </div>
                 <div class="cart__meta-text">
                     @php
                         $colorchecked = $product->color;
                         $cartcolor = '';
                         if ($colorchecked == '#A78B8D') {
                             $cartcolor = 'Marblepink';
                         } elseif ($colorchecked == '#61A8F8') {
                             $cartcolor = 'Babyblue';
                         } elseif ($colorchecked == '#C55C82') {
                             $cartcolor = 'Pink';
                         } elseif ($colorchecked == '#FF0000') {
                             $cartcolor = 'Red';
                         } elseif ($colorchecked == '#CAD3D0') {
                             $cartcolor = 'Clear';
                         } elseif ($colorchecked == '#BA9978') {
                             $cartcolor = 'Beige';
                         } elseif ($colorchecked == '#88DB86') {
                             $cartcolor = 'Applegreen';
                         } elseif ($colorchecked == '#DEE4EE') {
                             $cartcolor = 'Marblewhite';
                         } elseif ($colorchecked == '#BDB8EE') {
                             $cartcolor = 'Marbleviolet';
                         } elseif ($colorchecked == '#E9CBB9') {
                             $cartcolor = 'Marbleorange';
                         } elseif ($colorchecked == '#FEF250') {
                             $cartcolor = 'Lemonyellow';
                         } elseif ($colorchecked == '#f4c2c2') {
                             $cartcolor = 'Babypink';
                         } elseif ($colorchecked == '#D2C77D') {
                             $cartcolor = 'Metallicgold';
                         } elseif ($colorchecked == '#DAD9C6') {
                             $cartcolor = 'Buttermilk';
                         } elseif ($colorchecked == '#E9C500') {
                             $cartcolor = 'Yellow';
                         } elseif ($colorchecked == '#D3CBC4') {
                             $cartcolor = 'Graybeige';
                         } elseif ($colorchecked == '#0F2D8D') {
                             $cartcolor = 'Blue';
                         } elseif ($colorchecked == '#005E3A') {
                             $cartcolor = 'Green';
                         } elseif ($colorchecked == '#D6F2E6') {
                             $cartcolor = 'Marblegreen';
                         } elseif ($colorchecked == '#BF8BFF') {
                             $cartcolor = 'Violet';
                         } elseif ($colorchecked == '#6B4B36') {
                             $cartcolor = 'Brown';
                         } elseif ($colorchecked == '#C0C0C0') {
                             $cartcolor = 'Silver';
                         } elseif ($colorchecked == '#808080') {
                             $cartcolor = 'Grey';
                         } elseif ($colorchecked == '#6CD2FA') {
                             $cartcolor = 'Skyblue';
                         } elseif ($colorchecked == '#D09305') {
                             $cartcolor = 'Orange';
                         } elseif ($colorchecked == '#13598B') {
                             $cartcolor = 'Metallicblue';
                         } elseif ($colorchecked == '#9582BB') {
                             $cartcolor = 'Metallicviolet';
                         } elseif ($colorchecked == '#A286F4') {
                             $cartcolor = 'Purple';
                         } elseif ($colorchecked == '#62ADE6') {
                             $cartcolor = 'Marbleblue';
                         } elseif ($colorchecked == '#80355C') {
                             $cartcolor = 'Marblered';
                         } elseif ($colorchecked == '#2FCBD4') {
                             $cartcolor = 'Avocadogreen';
                         } elseif ($colorchecked == '#FFA07A') {
                             $cartcolor = 'Lightorange';
                         } elseif ($colorchecked == '#DDD3D1') {
                             $cartcolor = 'Marblebeige';
                         } elseif ($colorchecked == '#F4C430') {
                             $cartcolor = 'Saffron';
                         } elseif ($colorchecked == '#000000') {
                             $cartcolor = 'Black';
                         } elseif ($colorchecked == '#D4AF37') {
                             $cartcolor = 'Marblegold';
                         } elseif ($colorchecked == '#FFFFFF') {
                             $cartcolor = 'Purewhite';
                         } elseif ($colorchecked == '#B4B4B8') {
                             $cartcolor = 'Metallicsilver';
                         } elseif ($colorchecked == '#58C3C2') {
                             $cartcolor = 'Marblegreen';
                         } elseif ($colorchecked == '#006A4E') {
                             $cartcolor = 'Bottlegreen';
                         } elseif ($colorchecked == '#6F4E37') {
                             $cartcolor = 'Coffee';
                         } elseif ($colorchecked == '#FFFDD0') {
                             $cartcolor = 'Cream';
                         } elseif ($colorchecked == '#A9A9A9') {
                             $cartcolor = 'Darkgrey';
                         } elseif ($colorchecked == '#C40233') {
                             $cartcolor = 'Metalicred';
                         } elseif ($colorchecked == '#9582BB') {
                             $cartcolor = 'Metalicviolet';
                         } elseif ($colorchecked == '#3D7764') {
                             $cartcolor = 'Metalicgreen';
                         } elseif ($colorchecked == '#F8B700') {
                             $cartcolor = 'Metalicyellow';
                         }

                     @endphp

                     @if ($productData)
                         Color: <a
                             href="{{ route('american.plastic.web.product.details', ['name' => Str::slug($productData->product_name)]) }}?id={{ $productData->id }}">
                             <span
                                 style="display: inline-block; width: 20px; height: 10px; background-color: {{ $colorchecked }}; margin-right: 5px;"></span>
                             {{ $cartcolor }}
                         </a><br>
                     @endif
                 </div>
             </td>
             <td class="cart__price-wrapper cart-flex-item">

                 <span class="money">LKR&nbsp;{{ number_format($product->product_price, 2) }}</span>
             </td>
             <td class="text-right">
                 <div class="cart__qty text-center">
                     <div class="qtyField">
                         <a class="qtyBtn minus" href="javascript:void(0);"><i class="icon icon-minus"></i></a>
                         <input class="cart__qty-input qty" type="text" name="updates[]" value="{{ $product->qty }}"
                             pattern="[0-9]*">
                         <a class="qtyBtn plus" href="javascript:void(0);"><i class="icon icon-plus"></i></a>
                     </div>
                 </div>
             </td>
             <td class="text-right  cart-price">

                 <div><span class="money">LKR:&nbsp;{{ number_format($productTotal, 2) }}</span></div>
             </td>
             <td class="text-center "><a
                     href="{{ route('american.plastic.web.remove.cart.item', ['id' => $product->id]) }}"
                     class="btn btn--secondary cart__remove" title="Remove tem"><i
                         class="icon icon anm anm-times-l"></i></a></td>
         </tr>
     @endif
 @endforeach
 <style>
     <style>

     /* Existing styles... */
     .qtyField {
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .qtyBtn {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 30px;
         height: 30px;
         border: 1px solid #ddd;
         background: #f8f8f8;
         cursor: pointer;
         user-select: none;
         text-decoration: none;
         color: #333;
     }

     .qty {
         width: 40px;
         height: 30px;
         text-align: center;
         margin: 0 5px;
         border: 1px solid #ddd;
         -moz-appearance: textfield;
     }

     .qty::-webkit-outer-spin-button,
     .qty::-webkit-inner-spin-button {
         -webkit-appearance: none;
         margin: 0;
     }

     /* Mobile responsive styles */
     @media only screen and (max-width: 767px) {
         .qtyField {
             /* Make the whole control larger for touch */
             height: 44px;
         }

         .qtyBtn {
             /* Larger touch targets */
             width: 44px;
             height: 44px;
             font-size: 18px;
         }

         .qty {
             /* Larger input for better visibility */
             width: 50px;
             height: 44px;
             font-size: 16px;
             margin: 0 8px;
         }

         .icon {
             /* Make the +/- icons larger */
             font-size: 20px;
         }
     }

     /* Optional: Add some hover/active states for better UX */
     .qtyBtn:hover {
         background: #eee;
     }

     .qtyBtn:active {
         background: #ddd;
     }

     /* Mobile-specific styles */
     @media (max-width: 767.98px) {
         .cart-table {
             min-width: 200%;
             /* Allow table to take full width */
         }

         .cart__row {
             display: flex;
             flex-wrap: wrap;
             padding: 10px 0;
             position: relative;
         }

         .cart__image-wrapper {
             width: 30%;
             padding-right: 15px;
         }

         .cart__meta {
             width: 20%;
         }

         .cart__price-wrapper {
             width: 25%;
             text-align: center;
             margin-top: 10px;
         }

         .cart__update-wrapper {
             width: 50%;
             margin: 10px 0;
         }

         .cart-price {
             width: 25%;
             text-align: center;
         }

         .cart__remove {
             position: absolute;
             top: 10px;
             right: 0;
         }

         /* Make quantity controls more touch-friendly */
         .qtyField {
             display: flex;
             align-items: center;
             justify-content: center;
         }

         .qtyBtn {
             width: 30px;
             height: 30px;
             display: flex;
             align-items: center;
             justify-content: center;
             background: #f5f5f5;
             border-radius: 50%;
             font-size: 16px;
         }

         .cart__qty-input {
             width: 40px;
             height: 30px;
             text-align: center;
             margin: 0 5px;
         }
     }
 </style>
 </style>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
     $(document).ready(function() {
         // Plus button click event
         $('.qtyBtn.plus').click(function(e) {
             e.preventDefault();
             var row = $(this).closest('.cart__row');
             var qtyInput = row.find('.qty');
             var cartid = row.data(
             'cart-id'); // Assuming you have a data-product-id attribute in your row

             // Increase quantity by 1
             var newQty = parseInt(qtyInput.val());

             // Update quantity input field
             qtyInput.val(newQty);

             // Send AJAX request to update quantity
             $.ajax({
                 url: "{{ route('update_cart') }}", // Replace with your route URL
                 type: 'POST',
                 data: {
                     cartid: cartid,
                     quantity: newQty,
                     _token: '{{ csrf_token() }}'
                 },
                 success: function(response) {
                     // Update total price or any other data if needed
                     window.location.reload();
                 },
                 error: function(xhr, status, error) {
                     console.error(xhr.responseText);
                 }
             });
         });

         $('.qtyBtn.minus').click(function(e) {
             e.preventDefault();
             var row = $(this).closest('.cart__row');
             var qtyInput = row.find('.qty');
             var cartid = row.data(
             'cart-id'); // Assuming you have a data-product-id attribute in your row

             // Increase quantity by 1
             var newQty = parseInt(qtyInput.val());

             // Update quantity input field
             qtyInput.val(newQty);

             // Send AJAX request to update quantity
             $.ajax({
                 url: "{{ route('update_cart') }}", // Replace with your route URL
                 type: 'POST',
                 data: {
                     cartid: cartid,
                     quantity: newQty,
                     _token: '{{ csrf_token() }}'
                 },
                 success: function(response) {
                     // Update total price or any other data if needed
                     window.location.reload();
                 },
                 error: function(xhr, status, error) {
                     console.error(xhr.responseText);
                 }
             });
         });
     });
 </script>
