@php
$userDetails = Auth::user();
$cartItemCount = 0;
$subtotal = 0;

if ($userDetails) {
    $cartItemCount = \App\Models\Cart::where('user_id', $userDetails->id)->count();
    $cartss = \App\Models\Cart::where('user_id', $userDetails->id)->with('products')->orderBy('id', 'desc')->get();
}
@endphp

@if(isset($cartss))
<div id="cart-items" class="cart-items-container" style="display:none;">
@foreach ($cartss as $item)
    <div class="cart-item" style="display:none;">
        <div class="cart-item-name" style="display:none;">{{ $item->products?->en_name }}</div>
        <input type="hidden" class="cart-quantity" name="quantity[]" value="{{ $item->quantity}}" 
               data-products-price="
               @if ($item->products->promotions == 1)
                   {{$userDetails && $userDetails->referral_code ? $item->products->wholesale_price - $item->products->dis_price_wholesale : $item->products->retail_price - $item->products->dis_price_retail}}
               @else
                   {{ $userDetails && $userDetails->referral_code ? $item->products->wholesale_price : $item->products->retail_price }}
               @endif
               " required>
               
        <div class="total-col-live" style="display:none;">{{ $item->products?->retail_price }}</div>
        <div class="total-col-live-hidden" style="display:none;">{{ $item->products?->retail_price }}</div>
    </div>
@endforeach
</div>
@endif

<!-- For Big Screen -->
<div class="card large-screen d-none d-lg-block">
  <i class="fa-solid fa-bag-shopping live-cart-icon"></i>
  <div class="d-flex justify-content-center">
      <p class="card-title card-title-live mr-2">{{ $cartItemCount }}</p>
      <p class="card-title card-title-live">Item</p>
  </div>
  <div class="card-body large-screen-body">
      <div class="d-flex justify-content-center" style="margin-left: 25px;">
          <i class="fa-solid fa-bangladeshi-taka-sign"></i>
          <p class="card-text-tk" id="subtotalLarge"></p>
      </div>
  </div>
</div>

<!-- For Mobile Screen -->
<div class="col-sm-12 live-cart d-flex d-lg-none">
  <div class="col-3 d-flex justify-content-start">
        <p class="pera">Tk.</p>
        <p class="pera" id="subtotalMobile" style="margin-left: 3px;"></p>
  </div>
  <div class="col-7 add-cart">
      <p class="add-cart-text"><a href="{{ url('/cart')}}" style="color: aliceblue; font-weight: bold;">Add to cart</a></p>
  </div>
  <div class="col-2 cart-icon-div">
      <span>{{ $cartItemCount }}</span>
      <i class="fa-solid fa-cart-shopping"></i>
  </div>
</div>




<script>
document.addEventListener('DOMContentLoaded', function() {
    const cartQuantitiesLive = document.querySelectorAll('#cart-items .cart-quantity');
    let subtotalLive = 0;

    cartQuantitiesLive.forEach(function(input) {
        const quantity = parseInt(input.value);
        const retailPrice = parseFloat(input.getAttribute('data-products-price'));
        console.log(input.value);
        
        const total = quantity * retailPrice;

        const itemDiv = input.closest('.cart-item');
        const totalColLive = itemDiv ? itemDiv.querySelector('.total-col-live') : null;
        const totalColLiveHidden = itemDiv ? itemDiv.querySelector('.total-col-live-hidden') : null;

        if (totalColLive) totalColLive.textContent = total.toFixed(2);
        if (totalColLiveHidden) totalColLiveHidden.textContent = total.toFixed(2);

        subtotalLive += total;
    });

    document.getElementById('subtotalLarge').textContent = subtotalLive.toFixed(2);
    document.getElementById('subtotalMobile').textContent = subtotalLive.toFixed(2);
});


</script>