@section('metaTitle', 'Shopping Cart - Punjabi Mandi')
@section('body_id', 'cart-page-body')
@section('body_class', 'lang-en country-ca currency-cad layout-full-width page-cart')

@section('theme_css')
  <link rel="stylesheet" href="{{ asset('newui/assets/css/theme-0f35d543.css') }}" type="text/css" media="all">
@endsection

@section('theme_bottom_js')
  <script type="text/javascript" src="{{ asset('newui/assets/js/bottom-282dcc42.js') }}"></script>
@endsection

@section('breadcrumb')
  <ol data-depth="2" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="{{ route('home') }}"> <span itemprop="name">Home</span> </a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="{{ route('cart') }}"> <span itemprop="name">Shopping Cart</span> </a>
      <meta itemprop="position" content="2">
    </li>
  </ol>
@endsection

@push('styles')
<style>
  /* Fine-tuning for Cart UI states */
  .pm-btn-checkout.disabled {
    pointer-events: none !important;
    opacity: 0.55 !important;
    background-color: #94a3b8 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
  }
  #minimum-order-msg {
    background-color: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: var(--border-radius, 8px);
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
  }
  .pm-applied-badge {
    margin-top: 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: 6px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
  }
  .pm-applied-badge button {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #065f46;
    cursor: pointer;
    padding: 0 4px;
  }
  .pm-applied-badge button:hover {
    color: #dc2626;
  }
  .pm-savings-badge {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    border-radius: 6px;
    padding: 10px 14px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pm-grand-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--primary-color, #0e311a);
    color: #ffffff;
  }
  .pm-grand-total-row .pm-grand-lbl {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
  }
  .pm-grand-total-row .pm-grand-val {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
  }
  /* ── Remove Item Modal (Matching Mini-Cart Dialog) ── */
  .pm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .pm-modal-backdrop.pm-modal-open {
    opacity: 1;
  }
  .pm-modal-box {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 24px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
    transform: scale(0.94);
    transition: transform 0.22s ease;
  }
  .pm-modal-backdrop.pm-modal-open .pm-modal-box {
    transform: scale(1);
  }
  .pm-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff1f2;
    color: #e11d48;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
  }
  .pm-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
    font-family: inherit;
  }
  .pm-modal-msg {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 22px;
    line-height: 1.5;
  }
  .pm-modal-msg strong {
    color: #0f172a;
  }
  .pm-modal-actions {
    display: flex;
    gap: 10px;
  }
  .pm-modal-btn-cancel {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .pm-modal-btn-cancel:hover {
    background: #f1f5f9;
  }
  .pm-modal-btn-remove {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    border: none;
    background: #e11d48;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .pm-modal-btn-remove:hover {
    background: #be123c;
  }
  .pm-modal-btn-remove:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
</style>
@endpush

<x-app-layout>
  @php
    $hasItems = !is_null($cart) && count($cart->items) > 0;
    $itemCount = $hasItems ? count($cart->items) : 0;
    $totalQty = $hasItems ? $cart->items->sum('quantity') : 0;
    $subtotal = $hasItems ? (float)$cart->total_amount : 0.00;
    $taxTotal = $hasItems ? (float)$cart->tax_total : 0.00;
    $tax = $hasItems ? (float)$cart->tax : 0.00;
    $discount = $hasItems ? (float)$cart->discount_amount : 0.00;
    $grandTotal = $hasItems ? (float)$cart->grand_total : 0.00;
    $freeShippingThreshold = 50.00;
    $isFreeShipping = $subtotal >= $freeShippingThreshold;
    $shippingDiff = max(0, $freeShippingThreshold - $subtotal);
    $shippingProgress = min(100, $freeShippingThreshold > 0 ? round(($subtotal / $freeShippingThreshold) * 100) : 0);
    $shippingFeeDisplay = $isFreeShipping ? 'FREE' : '$4.99';
  @endphp

  {{-- ── Remove Confirmation Modal ──────────────────────────────────────── --}}
  <div id="pm-remove-modal" class="pm-modal-backdrop" style="display:none;" role="dialog" aria-modal="true" aria-labelledby="pm-modal-title">
    <div class="pm-modal-box">
      <div class="pm-modal-icon">
        <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="width:28px;height:28px;">
          <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <h2 id="pm-modal-title" class="pm-modal-title">Remove Item?</h2>
      <p class="pm-modal-msg">Are you sure you want to remove <strong id="pm-modal-product-name"></strong> from your cart?</p>
      <div class="pm-modal-actions">
        <button type="button" id="pm-modal-cancel" class="pm-modal-btn-cancel">Keep it</button>
        <button type="button" id="pm-modal-confirm" class="pm-modal-btn-remove">Yes, Remove</button>
      </div>
    </div>
  </div>

  <!-- MAIN CART SECTION -->
  <section class="pm-cart-section">
    <div class="container">
      
      <!-- Cart Page Header Box -->
      <div class="pm-cart-header-box">
        <h1 class="pm-cart-title">
          <i class="material-icons" style="font-size: 32px; color: var(--primary-color);">&#xE896;</i> 
          Shopping Cart 
          <span class="pm-cart-badge" id="pm-cart-badge-count">{{ $itemCount }} {{ $itemCount == 1 ? 'Item' : 'Items' }}</span>
        </h1>
        <div class="pm-cart-header-actions">
          <a href="{{ route('home') }}" class="pm-btn-continue">
            <i class="material-icons" style="font-size: 18px;">&#xE5C4;</i> Back to Shopping
          </a>
        </div>
      </div>

      <!-- Active Cart Content Layout -->
      <div id="pm-active-cart-container" class="row" style="{{ $hasItems ? '' : 'display: none;' }}">
        
        <!-- Left Column: Cart Items & Controls -->
        <div class="col-lg-8 col-md-12">
          
          <!-- Free Shipping Incentive Bar -->
          <div class="pm-shipping-bar-card">
            <div class="pm-shipping-bar-title" id="pm-shipping-msg">
              @if($isFreeShipping)
                <i class="material-icons" style="font-size: 20px; color: #166534;">&#xE86C;</i>
                <span>Congratulations! You have unlocked <strong>Checkout</strong>!</span>
              @else
                <i class="material-icons" style="font-size: 20px; color: #166534;">&#xE53B;</i>
                <span>Add <strong id="pm-free-shipping-diff">${{ number_format($shippingDiff, 2) }}</strong> more to unlock <strong>Checkout</strong>!</span>
              @endif
            </div>
            <div class="pm-progress-bg">
              <div class="pm-progress-fill" id="pm-shipping-progress" style="width: {{ $isFreeShipping ? '100%' : $shippingProgress . '%' }};"></div>
            </div>
          </div>

          <!-- Cart Table Card -->
          <div class="pm-cart-table-card">
            <div class="pm-cart-table-header">
              <div class="pm-col-product">Product Details</div>
              <div class="pm-col-price">Unit Price</div>
              <div class="pm-col-qty">Quantity</div>
              <div class="pm-col-total">Subtotal</div>
              <div class="pm-col-action">Remove</div>
            </div>

            <div class="pm-cart-items-list" id="pm-cart-items-list">
              @if($hasItems)
                @foreach($cart->items as $item)
                  @php
                    $today = date('Y-m-d');
                    $price = $item->product?->price ?? 0;
                    if ($item->product?->special_price_from && $item->product?->special_price_to) {
                        if ($item->product->special_price_from <= $today && $item->product->special_price_to >= $today) {
                            $price = $item->product->special_price;
                        }
                    }
                    $itemSubtotal = $price * $item->quantity;
                    $productImg = count($item->product?->images ?? []) ? asset($item->product->images[0]->image_url) : asset('frontend/assets/images/logo.png');
                    $productUrl = $item->product ? route('productByCategory', $item->product->url_key) : '#';
                  @endphp
                  <div class="pm-cart-item" data-id="{{ $item->id }}" data-price="{{ $price }}" id="cart-item-row-{{ $item->id }}">
                    <div class="pm-col-product">
                      <div class="pm-item-thumb">
                        <a href="{{ $productUrl }}">
                          <img src="{{ $productImg }}" alt="{{ $item->product?->name ?? 'Product' }}">
                        </a>
                      </div>
                      <div class="pm-item-info">
                        <a href="{{ $productUrl }}" class="pm-item-title" title="{{ $item->product?->name ?? 'Product' }}">{{ $item->product?->name ?? 'Unknown Product' }}</a>
                        <div class="pm-item-meta">
                          @if($item->product?->brand_name?->name && trim($item->product->brand_name->name) !== '-')
                            <span class="pm-tag-organic"><i class="material-icons" style="font-size: 12px; vertical-align: middle;">&#xE877;</i> {{ $item->product->brand_name->name }}</span>
                          @elseif($item->product?->brand && !is_numeric($item->product->brand) && trim($item->product->brand) !== '-')
                            <span class="pm-tag-organic"><i class="material-icons" style="font-size: 12px; vertical-align: middle;">&#xE877;</i> {{ $item->product->brand }}</span>
                          @else
                            <span class="pm-tag-organic"><i class="material-icons" style="font-size: 12px; vertical-align: middle;">&#xE877;</i> -</span>
                          @endif
                          @if($item->product?->weight)
                            <span>Unit: {{ $item->product->weight }} {{ $item->product->weight_type }}</span>
                          @elseif($item->product?->unit)
                            <span>Unit: {{ $item->product->unit }}</span>
                          @endif
                        </div>
                      </div>
                    </div>
                    <div class="pm-col-price pm-item-unit-price">${{ number_format($price, 2) }}</div>
                    <div class="pm-col-qty">
                      <div class="pm-qty-control">
                        <button type="button" class="pm-qty-btn btn-minus" onClick="updateQty({{ $item->id }}, -1)">-</button>
                        <input type="text" class="pm-qty-input crtItmQty" value="{{ $item->quantity }}" id="qty-item-{{ $item->id }}" data-id="{{ $item->id }}" data-price="{{ $price }}" readonly>
                        <button type="button" class="pm-qty-btn btn-plus" onClick="updateQty({{ $item->id }}, 1)">+</button>
                      </div>
                    </div>
                    <div class="pm-col-total pm-item-subtotal" id="subtotal-item-{{ $item->id }}">${{ number_format($itemSubtotal, 2) }}</div>
                    <div class="pm-col-action">
                      <button type="button" class="pm-btn-remove" onClick="removeItem({{ $item->id }}, '{{ addslashes($item->product?->name ?? 'item') }}')" title="Remove Item">
                        <i class="material-icons" style="font-size: 18px;">&#xE872;</i>
                      </button>
                    </div>
                  </div>
                @endforeach
              @endif
            </div>
          </div>

          <!-- Footer Actions Bar -->
          <div class="pm-cart-footer-actions">
            <a href="{{ route('home') }}" class="pm-btn-continue">
              <i class="material-icons" style="font-size: 18px;">&#xE5C4;</i> Continue Shopping
            </a>
            <button type="button" class="pm-btn-clear" onClick="clearCart()">
              <i class="material-icons" style="font-size: 16px; vertical-align: middle;">&#xE872;</i> Clear Shopping Cart
            </button>
          </div>

          <!-- Coupon Card -->
          <div class="pm-coupon-card">
            <div class="pm-coupon-title">
              <i class="material-icons" style="color: var(--primary-color); font-size: 20px;">&#xE54E;</i> Have a Promo Code or Coupon?
            </div>
            <div class="pm-coupon-form">
              <input type="text" id="coupon-code-input" class="pm-coupon-input" placeholder="Enter coupon code...">
              <button type="button" class="pm-btn-apply" id="coupon-apply-btn" onClick="applyCoupon()">Apply Coupon</button>
            </div>
            <div id="coupon-error-msg" style="display: none; color: #dc2626; font-size: 13px; margin-top: 6px; font-weight: 500;"></div>
            <div class="pm-applied-badge" id="applied-coupon-badge" style="{{ ($cart && $cart->coupon_code) ? 'display: flex;' : 'display: none;' }}">
              <span><i class="material-icons" style="font-size: 16px; vertical-align: middle;">&#xE86C;</i> Promo Code <strong id="coupon-name">{{ $cart?->coupon_code }}</strong> Applied</span>
              <button type="button" onClick="removeCoupon()" title="Remove Coupon">&times;</button>
            </div>
          </div>

        </div>

        <!-- Right Column: Order Summary -->
        <div class="col-lg-4 col-md-12">
          <div class="pm-summary-card">
            <h2 class="pm-summary-title">
              Order Summary
              <i class="material-icons" style="color: var(--primary-color); font-size: 24px;">&#xE8C0;</i>
            </h2>

            <input type="hidden" id="sub_total" value="{{ $subtotal }}">
            <input type="hidden" id="tax_total" value="{{ $taxTotal }}">
            <input type="hidden" id="cart_id" value="{{ $cart?->id }}">
            <input type="hidden" id="coupon" value="{{ $cart?->coupon?->name }}"
                   data-discount="{{ $cart?->coupon?->discount_type_value }}"
                   data-discount_type="{{ $cart?->coupon?->discount_type }}"
                   data-max_discount_amount="{{ $cart?->coupon?->max_discount_amount }}"
                   data-min_amount_for_discount="{{ $cart?->coupon?->min_amount_for_discount }}">

            <div class="pm-summary-row">
              <span class="pm-summary-label">Sub Total</span>
              <span class="pm-summary-value" id="summary-subtotal">${{ number_format($subtotal, 2) }}</span>
            </div>

            <div class="pm-summary-row">
              <span class="pm-summary-label">Taxable Product SubTotal</span>
              <span class="pm-summary-value" id="summary-tax-subtotal">${{ number_format($taxTotal, 2) }}</span>
            </div>

            <div class="pm-summary-row">
              <span class="pm-summary-label">Coupon Discount
                <em id="summary-coupon-name" style="{{ ($cart && $cart->coupon_code) ? '' : 'display: none;' }} font-style: normal; font-weight: 600; color: #0e311a;">
                  @if($cart && $cart->coupon_code)
                    ({{ $cart->coupon_code }})
                  @endif
                </em>
              </span>
              <span class="pm-summary-value" id="summary-discount" style="{{ $discount > 0 ? 'color: #0e311a; font-weight: 700;' : '' }}">
                @if($discount > 0)
                  - ${{ number_format($discount, 2) }}
                @else
                  $0.00
                @endif
              </span>
            </div>

            <div class="pm-summary-row">
              <span class="pm-summary-label" id="summary-tax-label">Tax {{ $cart?->items?->first()?->tax_percent ? $cart->items->first()->tax_percent.'%' : '' }}</span>
              <span class="pm-summary-value" id="summary-tax">${{ number_format($tax, 2) }}</span>
            </div>

            <div class="pm-grand-total-row">
              <span class="pm-grand-lbl">Grand Total</span>
              <span class="pm-grand-val" id="summary-grand-total">${{ number_format($grandTotal, 2) }} CAD</span>
            </div>

            <div class="pm-savings-badge" id="savings-badge" style="{{ $discount > 0 ? 'display: flex;' : 'display: none;' }}">
              <i class="material-icons" style="font-size: 18px;">&#xE8e1;</i> You are saving <span id="savings-amount">${{ number_format($discount, 2) }}</span> on this order!
            </div>

            <a href="{{ route('book-time') }}" id="checkout-btn" class="pm-btn-checkout {{ $subtotal < 50 ? 'disabled' : '' }}" style="{{ $subtotal < 50 ? 'pointer-events: none; opacity: 0.6;' : '' }}">
              <i class="material-icons" style="font-size: 20px;">&#xE898;</i> Proceed to Checkout
            </a>

            <div id="minimum-order-msg" style="{{ $subtotal < 50 ? 'display: flex;' : 'display: none;' }}">
              <i class="material-icons" style="font-size: 16px; color: #b45309;">&#xE002;</i> Minimum order amount is <strong>$50.00</strong>
            </div>

            <div class="pm-trust-section">
              <div class="pm-trust-title">Guaranteed Safe & Secure Checkout</div>
              <img src="{{ asset('newui/assets/img/payment_icons.png') }}" alt="Payment Methods" class="pm-payment-img">

              <div class="pm-trust-badges">
                <div class="pm-trust-item">
                  <i class="material-icons">&#xE889;</i>
                  <span>Fresh Harvest</span>
                </div>
                <div class="pm-trust-item">
                  <i class="material-icons">&#xE53F;</i>
                  <span>Secure Pay</span>
                </div>
                <div class="pm-trust-item">
                  <i class="material-icons">&#xE001;</i>
                  <span>Fast Delivery</span>
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>

      <!-- Empty Cart View -->
      <div id="pm-empty-cart-view" class="pm-empty-cart" style="{{ $hasItems ? 'display: none;' : 'display: block;' }}">
        <img src="{{ asset('newui/assets/img/empty-cart.svg') }}" alt="Empty Cart">
        <h2 class="pm-empty-title">Your Shopping Cart is Empty</h2>
        <p class="pm-empty-desc">Looks like you haven't added any fresh groceries or organic items to your cart yet. Explore our farm fresh store and discover great deals!</p>
        <a href="{{ route('home') }}" class="pm-btn-continue" style="display: inline-flex;">
          <i class="material-icons" style="font-size: 20px;">&#xE8CC;</i> Start Shopping Now
        </a>
      </div>

    </div>
  </section>

  @push('scripts')
  <script>
    var isUpdating = false;

    function recalculateCartSummary(cart) {
      if (!cart) return;

      var subtotal = parseFloat(cart.total_amount) || 0;
      var taxTotal = parseFloat(cart.tax_total) || 0;
      var tax = parseFloat(cart.tax) || 0;
      var discount = parseFloat(cart.discount_amount) || 0;
      var grandTotal = parseFloat(cart.grand_total) || 0;
      var itemsCount = cart.items ? cart.items.length : ($('.pm-cart-item').length || 0);

      // Update hidden inputs
      $('#sub_total').val(subtotal.toFixed(2));
      $('#tax_total').val(taxTotal.toFixed(2));

      // Free shipping threshold ($50.00)
      var freeShippingThreshold = 50.00;
      var shippingFee = subtotal >= freeShippingThreshold ? 0.00 : 4.99;
      var shippingMsgElem = $('#pm-shipping-msg');
      var progressBar = $('#pm-shipping-progress');

      if (subtotal >= freeShippingThreshold) {
        shippingMsgElem.html('<i class="material-icons" style="font-size: 20px; color: #166534;">&#xE86C;</i> <span>Congratulations! You have unlocked <strong>Checkout</strong>!</span>');
        progressBar.css('width', '100%');
        $('#summary-shipping').text('FREE');
      } else {
        var diff = (freeShippingThreshold - subtotal).toFixed(2);
        var percentage = Math.min(100, Math.round((subtotal / freeShippingThreshold) * 100));
        shippingMsgElem.html('<i class="material-icons" style="font-size: 20px; color: #166534;">&#xE53B;</i> <span>Add <strong id="pm-free-shipping-diff">$' + diff + '</strong> more to unlock <strong>Checkout</strong>!</span>');
        progressBar.css('width', percentage + '%');
        $('#summary-shipping').text('$4.99');
      }

      // Summary lines
      $('#summary-subtotal').text('$' + subtotal.toFixed(2));
      $('#summary-tax-subtotal').text('$' + taxTotal.toFixed(2));
      $('#summary-tax').text('$' + tax.toFixed(2));
      $('#summary-grand-total').text('$' + grandTotal.toFixed(2) + ' CAD');

      if (cart.items && cart.items.length > 0 && cart.items[0].tax_percent) {
        $('#summary-tax-label').text('Tax ' + cart.items[0].tax_percent + '%');
      }

      // Discount & Coupon
      if (discount > 0) {
        $('#summary-discount').text('- $' + discount.toFixed(2)).css({'color': '#0e311a', 'font-weight': '700'});
        var couponCode = cart.coupon_code || $('#coupon-name').text();
        if (couponCode) {
          $('#summary-coupon-name').text('(' + couponCode + ')').show();
        } else {
          $('#summary-coupon-name').hide();
        }
        $('#savings-badge').css('display', 'flex');
        $('#savings-amount').text('$' + discount.toFixed(2));
      } else {
        $('#summary-discount').text('$0.00').css({'color': '', 'font-weight': ''});
        $('#summary-coupon-name').hide();
        $('#savings-badge').hide();
      }

      // Minimum order threshold ($50.00)
      if (subtotal >= 50.00) {
        $('#checkout-btn').removeClass('disabled').css({'pointer-events': 'auto', 'opacity': '1'});
        $('#minimum-order-msg').hide();
      } else {
        $('#checkout-btn').addClass('disabled').css({'pointer-events': 'none', 'opacity': '0.6'});
        $('#minimum-order-msg').css('display', 'flex');
      }

      // Badge counts
      var badgeText = itemsCount + (itemsCount === 1 ? ' Item' : ' Items');
      $('#pm-cart-badge-count').text(badgeText);
      $('#item-count').text(itemsCount);

      // Empty state toggle
      if (itemsCount === 0) {
        $('#pm-active-cart-container').hide();
        $('#pm-empty-cart-view').show();
      } else {
        $('#pm-active-cart-container').show();
        $('#pm-empty-cart-view').hide();
      }
    }

    function updateQty(itemId, delta) {
      if (isUpdating) return;
      var qtyInput = $('#qty-item-' + itemId);
      if (!qtyInput.length) return;

      var currentQty = parseInt(qtyInput.val()) || 1;
      var newQty = currentQty + delta;
      if (newQty < 1) newQty = 1;
      if (newQty === currentQty) return;

      qtyInput.val(newQty);
      isUpdating = true;

      var price = parseFloat(qtyInput.data('price')) || 0;
      var row = $('#cart-item-row-' + itemId);
      row.css('opacity', '0.7');

      $.ajax({
        type: 'POST',
        url: "{{ route('cart-update') }}",
        data: {
          item_id: itemId,
          qty: newQty,
          _token: "{{ csrf_token() }}"
        },
        success: function(response) {
          if (response.success) {
            var itemTotal = newQty * price;
            $('#subtotal-item-' + itemId).text('$' + itemTotal.toFixed(2));
            if (response.cart) {
              recalculateCartSummary(response.cart);
            }
            if (typeof hoverCartItems === 'function') {
              hoverCartItems();
            }
          }
        },
        error: function(xhr) {
          console.error(xhr.responseText);
          qtyInput.val(currentQty);
        },
        complete: function() {
          row.css('opacity', '1');
          isUpdating = false;
        }
      });
    }

    var pendingRemoveItemId = null;

    function closeRemoveModal() {
      var modal = $('#pm-remove-modal');
      modal.removeClass('pm-modal-open');
      setTimeout(function() { modal.hide(); }, 220);
      pendingRemoveItemId = null;
    }

    function removeItem(itemId, itemName) {
      pendingRemoveItemId = itemId;
      $('#pm-modal-product-name').text(itemName || 'this item');
      var modal = $('#pm-remove-modal');
      modal.css('display', 'flex');
      requestAnimationFrame(function() {
        modal.addClass('pm-modal-open');
      });
    }

    $(document).on('click', '#pm-modal-cancel', function() {
      closeRemoveModal();
    });

    $(document).on('click', '#pm-remove-modal', function(e) {
      if (e.target.id === 'pm-remove-modal') {
        closeRemoveModal();
      }
    });

    $(document).on('keydown', function(e) {
      if (e.key === 'Escape' && $('#pm-remove-modal').is(':visible')) {
        closeRemoveModal();
      }
    });

    $(document).on('click', '#pm-modal-confirm', function() {
      if (!pendingRemoveItemId) return;
      var itemId = pendingRemoveItemId;
      var btn = $(this);
      btn.prop('disabled', true).text('Removing…');

      var row = $('#cart-item-row-' + itemId);
      row.css({'opacity': '0', 'transform': 'translateX(-20px)', 'transition': 'all 0.3s ease'});

      $.ajax({
        type: 'GET',
        url: "{{ url('cart-item/delete') }}/" + itemId,
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        },
        success: function(response) {
          closeRemoveModal();
          setTimeout(function() {
            row.remove();
            var remainingItems = $('.pm-cart-item').length;
            if (remainingItems === 0) {
              $('#pm-active-cart-container').hide();
              $('#pm-empty-cart-view').show();
              $('#pm-cart-badge-count').text('0 Items');
              $('#item-count').text('0');
            } else {
              window.location.reload();
            }
          }, 300);

          if (typeof hoverCartItems === 'function') {
            hoverCartItems();
          }
          if (typeof toastr !== 'undefined') {
            toastr.success('Item removed from cart');
          }
        },
        error: function(xhr) {
          closeRemoveModal();
          console.error(xhr.responseText);
          row.css({'opacity': '1', 'transform': 'none'});
          if (typeof toastr !== 'undefined') {
            toastr.error('Could not remove item. Please try again.');
          } else {
            alert('Could not remove item. Please try again.');
          }
        },
        complete: function() {
          btn.prop('disabled', false).text('Yes, Remove');
        }
      });
    });

    function clearCart() {
      if (!confirm('Are you sure you want to clear all items from your shopping cart?')) {
        return;
      }

      $.ajax({
        type: 'POST',
        url: "{{ route('clear-cart') }}",
        data: {
          _token: "{{ csrf_token() }}"
        },
        success: function(response) {
          $('#pm-cart-items-list').empty();
          $('#pm-active-cart-container').hide();
          $('#pm-empty-cart-view').show();
          $('#pm-cart-badge-count').text('0 Items');
          $('#item-count').text('0');
          if (typeof hoverCartItems === 'function') {
            hoverCartItems();
          }
          if (typeof toastr !== 'undefined') {
            toastr.success('Your shopping cart has been cleared');
          }
        },
        error: function(xhr) {
          console.error(xhr.responseText);
          window.location.href = "{{ route('clear-cart') }}";
        }
      });
    }

    function applyCoupon() {
      var code = $('#coupon-code-input').val().trim();
      var errorElem = $('#coupon-error-msg');

      if (!code) {
        errorElem.text('Please enter a coupon code.').show();
        return;
      }

      var applyBtn = $('#coupon-apply-btn');
      applyBtn.prop('disabled', true).text('Applying...');

      $.ajax({
        type: 'POST',
        url: "{{ route('coupon.apply') }}",
        data: {
          coupon: code,
          _token: "{{ csrf_token() }}"
        },
        success: function(response) {
          if (response.success) {
            if (response.error) {
              errorElem.text(response.error).show();
            } else {
              errorElem.hide();
              $('#coupon-code-input').val('');
              var couponTitle = (response.cart && response.cart.coupon_code) ? response.cart.coupon_code : (response.data ? response.data.name : code);
              $('#coupon-name').text(couponTitle);
              $('#applied-coupon-badge').css('display', 'flex');
              if (response.cart) {
                recalculateCartSummary(response.cart);
              }
              if (typeof hoverCartItems === 'function') {
                hoverCartItems();
              }
              if (typeof toastr !== 'undefined') {
                toastr.success('Coupon applied successfully!');
              }
            }
          } else {
            errorElem.text('Invalid coupon code.').show();
          }
        },
        error: function(xhr) {
          console.error(xhr.responseText);
          errorElem.text('Error applying coupon. Please try again.').show();
        },
        complete: function() {
          applyBtn.prop('disabled', false).text('Apply Coupon');
        }
      });
    }

    function removeCoupon() {
      var cartId = $('#cart_id').val();
      if (!cartId) return;

      $.ajax({
        type: 'GET',
        url: "{{ url('/coupon') }}/" + cartId + "/remove",
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        },
        success: function(response) {
          $('#applied-coupon-badge').hide();
          $('#coupon-error-msg').hide();
          $('#coupon-code-input').val('');
          if (response.cart) {
            recalculateCartSummary(response.cart);
          } else {
            window.location.reload();
          }
          if (typeof hoverCartItems === 'function') {
            hoverCartItems();
          }
          if (typeof toastr !== 'undefined') {
            toastr.success('Coupon removed successfully');
          }
        },
        error: function(xhr) {
          console.error(xhr.responseText);
          window.location.href = "{{ url('/coupon') }}/" + cartId + "/remove";
        }
      });
    }

    $(document).ready(function() {
      if (typeof hoverCartItems === 'function') {
        hoverCartItems();
      }
      $('#coupon-code-input').on('keydown', function(e) {
        if (e.key === 'Enter') {
          e.preventDefault();
          applyCoupon();
        }
      });
    });
  </script>
  @endpush
</x-app-layout>