<div class="container">
    <div class="row cols-xs-space cols-sm-space cols-md-space">
        <div class="col-md-8" id="smp">
            <div class="form-default bg-white px-1 py-3" style="padding-top: 10px;margin-bottom: 20px;">
                <div class="">
                   <h4 class="my-2 px-2">Your Shopping Bag <span class="text-secondary">({{$cartProducts->count()}} Product)</span></h4>
                        
                        @forelse ($cartProducts as $cartProduct)
                        <div class="product-card mt-3">
                            <img src="{{ asset($cartProduct->image) }}" alt="Product Image" style="height:70px;width:70px; object-fit: contain;">
                            <div class="flex-grow-1">
                                <p>{{ $cartProduct->name }}</p>
                                <div class="qty-input mt-2">
                                    <button type="button">-</button>
                                    <input type="text" value="1">
                                    <button type="button">+</button>
                                </div>
                            </div>
                            <div class="text-end">
                                <!--<div class="discount-badge">18% off</div>-->
                                <div class="price-new"> ৳{{ $cartProduct->price }}</div>
                            </div>
                        </div>
                        @empty
                     @endforelse
                        <!-- Loyalty Box -->
                        <div class="loyalty-box">
                            <div>
                                <strong>Earn 81 points</strong> with this purchase. <br>
                                <small>Log in to take advantage of your loyalty benefits!</small>
                            </div>
                            <button class="btn btn-orange">LOGIN / REGISTRATION</button>
                        </div>

              </div>
            <!-- </form> -->
        </div>
     </div>
     
        <div class="col-md-4 ml-lg-auto" id="smp">
            <div class="card sticky-top">
                <div class="card-title py-3">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <h3 class="heading heading-3 strong-400 mb-0">
                                <span style="padding: 10px;font-size: 16px;font-weight: bold;">Summary</span>
                            </h3>
                        </div>

                        <div class="col-6 text-right">
                            <span class="badge badge-md btn-orange" style="padding: 6px;padding-right: 10px;">{{$cartProducts->count()}} Items</span>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <table class="table-cart table-cart-review">
                        <thead>
                            <tr>
                                <th class="product-name" style="padding: 6px;">Product</th>
                                <th class="product-total text-right" style="padding: 6px;">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($cartProducts as $cartProduct)
                                <tr class="cart_item">
                                    <td class="product-name" style="padding-left: 6px;font-size: 13px !important;">
                                        {{ $cartProduct->name }}
                                        <strong class="product-quantity">× {{ $cartProduct->qty }}</strong>
                                    </td>
                                    <td class="product-total text-right" style="padding-right: 6px;">
                                        <span class="pl-4"style="font-size: 13px !important;">৳{{ $cartProduct->qty * $cartProduct->price }}</span>
                                    </td>
                                </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>

                    <table class="table-cart table-cart-review">
                        <tfoot>
                            <tr class="cart-subtotal">
                                <th style="font-weight: normal;padding-bottom: 8px;">Subtotal</th>
                                <td class="text-right">
                                    <span class="strong-600"
                                        style="font-weight: normal;">৳{{ Cart::subtotal() }}</span>
                                </td>
                            </tr>

                            <tr class="cart-shipping">
                                <th style="font-weight: normal;padding-bottom: 8px;">Tax</th>
                                <td class="text-right">
                                    <span class="text-italic" style="font-weight: normal;">৳0</span>
                                </td>
                            </tr>

                            <tr class="cart-shipping">
                                <th style="font-weight: normal;padding-bottom: 8px;">Total Shipping</th>
                                <td class="text-right">
                                    <span class="text-italic shiop" style="font-weight: normal;">৳0</span>
                                </td>
                            </tr>

                            <tr class="cart-total">
                                <th><span class="strong-600">Total</span></th>
                                <td class="text-right">
                                    <strong>৳ <span class="g_total">{{ Cart::subtotal() }}</span></strong>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                    <div>
                        <a @if (count($cartProducts) > 0) @else disabled @endif href="{{ url('/checkout') }}" class="btn btn-orange text-center w-100">Check out</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
