@php
  use Illuminate\Support\Str;
  $quantities = collect($cartItems)->pluck('quantity', 'product_id');
  $cdr_pdfs = collect($cartItems)->pluck('cdr_pdf', 'product_id');
  $imagess = collect($cartItems)->pluck('images', 'product_id');
  $user_texts = collect($cartItems)->pluck('user_text', 'product_id');
  $previews = collect($cartItems)->pluck('preview', 'product_id');
@endphp
@if (count($product) == 0 && count($woohoo_cart_items) == 0)
  <div class="row m-0 justify-content-center">
    <div class="col-md-10 col-lg-8">
      <div class="container custom-empty-cart-wrapper">
        <div class="custom-cart-card">
          <div class="custom-icon-circle bg-primary">
            <i class="fas fa-shopping-cart"></i>
          </div>
          <h2 class="text-primary">Your Cart is Empty</h2>
          <p class="text-secondary">Looks like you haven't added anything to your cart yet. Let's explore some great
            products!</p>
          <a href="{{ route('allproducts') }}"
            class="btn btn-primary rounded-pill d-flex justify-content-center align-items-center">
            <i class="fas fa-store me-2"></i> Browse Products
          </a>
        </div>
      </div>
    </div>
  </div>
@endif

<div class="row m-0">
  <!-- Cart Items -->
  <div class="col-lg-12">
    @foreach ($product as $i => $item)
      @php
        $img = $images[$item['id']][0]['image'] ?? 'default.jpg';
        $quantity = $quantities[$item['id']] ?? 1;
        $price = $item['mrp'];
        $offerPrice = $item['sales_price'];
        $discount = $price - $offerPrice;
        $cdr_pdf = $cdr_pdfs[$item['id']];
        $images = $imagess[$item['id']];
        $user_text = $user_texts[$item['id']];
        $preview = $previews[$item['id']];
      @endphp

      <div class="cart-card d-flex gap-3 flex-md-nowrap flex-wrap border rounded p-3 mb-4">
        <div class="flex-shrink-0">
          <img src="{{ url('images/products/' . $item['product_image_1']) }}" class="img-fluid rounded product-img"
            style="width: 120px; height: auto;">
        </div>

        <div class="flex-grow-1">
          <div class="d-flex justify-content-between align-items-start flex-wrap">
            <div>
              <div class="fw-bold fs-5 mb-1">{{ Str::limit($item['product_name'], 40) }}</div>
              <div class="text-muted small">Brand: {{ $item['brand']['name'] ?? 'Unknown' }}</div>
              @if ($discount > 0)
                <span class="badge bg-primary mt-1">{{ round(($discount / $price) * 100) }}% OFF</span>
              @endif
            </div>
            <div class="text-end">
              <div class="fw-bold text-success fs-5">₹{{ $offerPrice }}</div>
              @if ($discount > 0)
                <div class="text-muted small"><s>₹{{ AmountFormat($price) }}</s></div>
              @endif
            </div>
          </div>

          <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap">
            <div class="d-flex align-items-center gap-2 quantity-box">
              <button item_index="{{ $i }}" pro_id="{{ $item['id'] }}"
                class="btn btn-outline-secondary btn-sm cart_count sub">
                <i class="fa fa-minus"></i>
              </button>
              <input type="text" id="quantity{{ $i }}"
                class="form-control form-control-sm text-center counter_input" style="width: 60px;"
                value="{{ $quantity }}" readonly>
              <button item_index="{{ $i }}" pro_id="{{ $item['id'] }}"
                class="btn btn-outline-secondary btn-sm cart_count add">
                <i class="fa fa-plus"></i>
              </button>
            </div>

            <div class="text-end mt-2 mt-md-0">
              @if ($isDb)
                <div class="text-danger" role="button"
                  onclick="delete_db_cart(`{{ enc($item['id']) }}`,`{{ route('removecartitems') }}`,`{{ route('cartitemstotal') }}`)">
                  <i class="fa fa-trash me-1"></i> Remove
                </div>
              @else
                <div class="text-danger" role="button"
                  onclick="delete_from_cart(`{{ $item['id'] }}`,`{{ route('cartitemstotal') }}`)">
                  <i class="fa fa-trash me-1"></i> Remove
                </div>
              @endif
            </div>
          </div>
          <div class="d-flex align-items-center mt-3 flex-wrap">
            @if (!empty($cdr_pdf))
              @php $cdr_pdf = json_decode($cdr_pdf, true); @endphp
              @foreach ($cdr_pdf as $item)
                <div class="my-3">
                  <a class="" target="blank"
                    href="{{ url('files/cdr_pdf/' . dec($item)) }}">{{ preg_replace('/_\d+(?=\.pdf$)/', '', dec($item)) }}</a>
                </div>
              @endforeach
            @endif

            @if (!empty($preview))
              @php $preview = json_decode($preview, true); @endphp
              @foreach ($preview as $item)
                <img width="100px" height="100px" src="{{ url('images/previews/' . dec($item)) }}" alt="">
              @endforeach
            @endif

          </div>
        </div>
      </div>
    @endforeach
  </div>
  @if (count($product) > 0)
    <div class="col-lg-12">
      <div class="summary">
        <a href="{{ route('checkoutaddress') }}" class="btn btn-primary w-100 py-2">Checkout Products</a>
      </div>
    </div>
  @endif
  <div class="col-lg-12">
    @foreach ($woohoo_cart_items as $wi => $item)
      <div class="cart-card d-flex gap-3 flex-md-nowrap flex-wrap border rounded p-3 mb-4">
        <div class="flex-shrink-0">
          @php
            $images = json_decode($item['product']['images'], true);
            $image = $images['small'];
          @endphp
          <img src="{{ $image ?? 'https://placehold.co/120x120/eee/333?text=No+Image' }}"
            onerror="this.src='https://placehold.co/120x120/eee/333?text=No+Image'"
            class="img-fluid rounded product-img" style="width: 120px; height: 120px; object-fit: cover;"
            alt="{{ $item->product->name ?? 'Product' }}">
        </div>

        <div class="flex-grow-1">
          <div class="d-flex justify-content-between align-items-start flex-wrap">
            <div>
              <div class="fw-bold fs-5 mb-1">{{ Str::limit($item['product']['name'], 40) }}</div>
              @if ($item['theme'] != '')
                <div>
                  <img width="60px" src="{{ $item['theme'] }}" alt="">
                </div>
              @endif
            </div>
            <div>
              <div>Receiver Name : {{ emptyTo__($item['receiver_name']) }}</div>
              <div>Receiver Mobile : {{ emptyTo__($item['mobile_number']) }}</div>
              <div>Receiver Email : {{ emptyTo__($item['email_id']) }}</div>
            </div>
            <div class="text-end">
              <div class="fw-bold text-success fs-5">₹{{ AmountFormat($item['quantity'] * $item['price']) }}</div>
            </div>
          </div>

          <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap">
            <div class="d-flex align-items-center gap-2 quantity-box">
              <span>Quantity {{ $item['quantity'] }}</span>
              <span>Price {{ AmountFormat($item['price']) }} </span>
            </div>

            <div class="text-end mt-2 mt-md-0">

              <div class="text-danger" role="button" onclick="wh_remove(`{{ $item['id'] }}`)">
                <i class="fa fa-trash me-1"></i> Remove
              </div>
            </div>
          </div>
        </div>
      </div>
    @endforeach
  </div>
  @if (count($woohoo_cart_items) > 0)
    <div class="col-lg-12">
      <div class="summary">
        <a href="{{ route('woohoo.fill_payment_details') }}" class="btn btn-primary w-100 py-2">Checkout GiftCard</a>
      </div>
    </div>
  @endif
  <!-- Summary -->
  @if (count($product) > 0 || count($woohoo_cart_items) > 0)
    <div>
      <div class="my-3">
        <div class="p-5 bg-white border rounded shadow d-flex flex-column align-items-center">
          <h5 class="mb-3 text-primary fw-bold">
            <i class="bi bi-bag-heart-fill me-2"></i>Still exploring?
          </h5>
          <p class="text-secondary mb-4">Keep browsing and find something you love.</p>
          <a href="{{ route('allproducts') }}" class="btn btn-outline-primary btn-lg rounded-pill px-4">
            <i class="bi bi-arrow-left me-2"></i> Continue Shopping
          </a>
        </div>
      </div>
    </div>
  @endif
</div>