@php
    use App\Services\CartService;
    $cartService = app(CartService::class);
    $items = $cartService->getItems();
    $total = $cartService->getTotal();
    $count = $cartService->getCount();
@endphp

<div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasCart" aria-labelledby="My Cart">
  <div class="offcanvas-header justify-content-center">
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="order-md-last">
      <h4 class="d-flex justify-content-between align-items-center mb-3">
        <span class="text-primary">Your cart</span>
        <span class="badge bg-primary rounded-pill">{{ $count }}</span>
      </h4>
      @if(count($items) > 0)
        <ul class="list-group mb-3">
          @foreach($items as $item)
            <li class="list-group-item d-flex justify-content-between lh-sm">
              <div>
                <h6 class="my-0">{{ $item['product']->name }}</h6>
                <small class="text-body-secondary">Qty: {{ $item['quantity'] }}</small>
              </div>
              <span class="text-body-secondary">${{ number_format($item['subtotal'], 2) }}</span>
            </li>
          @endforeach
          <li class="list-group-item d-flex justify-content-between">
            <span>Total (USD)</span>
            <strong>${{ number_format($total, 2) }}</strong>
          </li>
        </ul>
        <a href="{{ route('cart.index') }}" class="w-100 btn btn-primary btn-lg">View Cart</a>
        @auth
          <a href="{{ route('checkout.index') }}" class="w-100 btn btn-dark btn-lg mt-2">Checkout</a>
        @else
          <a href="{{ route('login') }}" class="w-100 btn btn-dark btn-lg mt-2">Login to Checkout</a>
        @endauth
      @else
        <p class="text-center">Your cart is empty</p>
        <a href="{{ route('products.index') }}" class="w-100 btn btn-primary btn-lg">Continue Shopping</a>
      @endif
    </div>
  </div>
</div>