@php
$cart = session()->get('cart', []);
@endphp
<div class="card border-0 h-100">
  <div class="card-header">
    <h5 class="mb-0">Shopping Cart</h5>
    <div class="btn cart_dismiss">
      <i class="fa fa-times"></i>
      Close
    </div>
  </div>
  <div class="card-body p-0">
      <div class="cart_item_scroll">
    @php
        $total=0;
    @endphp
    @if(count($cart))
    @foreach($cart as $key=>$i)
    
    @php
    $total +=$i['price']*$i['quantity'];
    @endphp
                
    <div class="product">
        <div class="image p-2">
            <a href="{{ route('products.show',[$key])}}" class="">
              <img src=" {{ getImage('images/product/large', $i['image'])}} " alt="">
            </a>
        </div>
        <div class="content p-2">
              <p class="mb-1"><a href="" class="text-dark"> {{ $i['name']}} </a></p>

            <div class="d-flex align-items-center">
              <small style="margin-right: 50px;">{{ $i['quantity'] }} x <span class="text-warning"> {{ $i['price'] }} </span></small>
                <div class="quantity_box d-flex" data-href="{{ route('carts.edit',[$key])}}">
                <input type="hidden" name="product_id" value="{{ $i['product_id']}}">
                    <button type="button" class="minusBtn btn qtysbtn"><span style="margin-top: -5px;">-</span></button>
                    <input type="text" class="quantity_value placeholder_black form-control form-control-sm quantity-input" style="width: 30px;"  value="{{ $i['quantity']}}"  min="1" max="12" >
                    <button type="button" class="plusBtn btn qtysbtn"><span style="margin-top: -5px;">+</span></button>
                </div>
            </div>
            
        </div>
        <div class="product_dismiss p-2 ms-auto">
            <form method="POST" action="{{ route('carts.destroy',[$key])}}" class="deleteCart" data-key="{{ $key }}">
                @csrf
                @method('DELETE')
                <button class="btn btn-danger btn-sm close-btn" type="submit"><small class="fa fa-times"></small></button> 
            </form>
                    
          
        </div>
    </div>
    @endforeach
    @endif
    </div>
    <div class="subtotal p-2 border-top position-absolute bottom-0 w-100">
      <div class="d-flex justify-content-between align-items-center">
        <h5>Subtotal:</h5>
        <h5 class="text-warning">{{ $total }}</h5>
      </div>
      <a href="{{ route('checkouts.index')}}" class="btn text-cap btn-dark d-block">Checkout</a>
    </div>
    @if(count($cart)==0)
    <div class="text-center">
      <!-- for empty cart  -->
      <div class="empty_icon">
        <i class="fa fa-cart-arrow-down"></i>
      </div>
      <p>
        No products in the cart.
      </p>
      <a href="{{ route('shop')}}" class="btn btn-dark text-cap">Return To Shop</a>
    </div>
    @endif
  </div>
</div>