@php
    $primaryColor = optional($generalsetting)->primary_color ?? '#007bff';
    // Amazon Design Tokens
    $amzNavy = '#232f3e';
    $amzOrange = '#FF9900';
    $amzLightOrange = '#FFB84D';
@endphp
<div class="sidebar-cart-header" style="background: {{ $amzNavy }}; color: #fff; border-bottom: 3px solid {{ $amzOrange }};">
    <button type="button" class="sidebar-cart-close" onclick="closeSidebarCart()" aria-label="Close" style="color: #fff; opacity: 0.8;">
        <i class="fa-solid fa-xmark"></i>
    </button>
    <h3 class="sidebar-cart-title" style="color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Shopping Cart</h3>
</div>

<div class="sidebar-cart-body" style="background: #fdfdfd;">
    @if($cartContent->isEmpty())
        <div class="sidebar-cart-empty" style="padding: 60px 20px;">
            <i class="fa-solid fa-cart-shopping" style="font-size: 48px; color: #ddd; margin-bottom: 20px; display: block;"></i>
            <p style="font-size: 16px; color: #666; font-weight: 500;">Your Amazon Cart is empty</p>
            <a href="{{ route('shop') }}" class="sidebar-cart-checkout-btn" style="background: {{ $amzOrange }}; color: #111; border-radius: 8px; font-weight: 700; margin-top: 20px; box-shadow: 0 2px 5px rgba(213,217,217,.5); border: 1px solid #FCD200;">Shop now</a>
        </div>
    @else
        @foreach($cartContent as $item)
            <div class="sidebar-cart-item" style="border: 1px solid #e7e7e7; transition: 0.2s;">
                <div class="sidebar-cart-item-img">
                    <a href="{{ route('product', $item->options->slug ?? '#') }}">
                        <img src="{{ asset($item->options->image ?? 'public/uploads/default.webp') }}" alt="{{ $item->name }}" />
                    </a>
                </div>
                <div class="sidebar-cart-item-details">
                    <a href="{{ route('product', $item->options->slug ?? '#') }}" class="sidebar-cart-item-title" style="font-size: 14px; line-height: 1.4; color: #007185; font-weight: 600;">{{ Str::limit($item->name, 50) }}</a>
                    <p class="sidebar-cart-item-price" style="font-weight: 700; color: #B12704; font-size: 15px; margin: 5px 0;">৳ {{ number_format($item->price, 0) }}</p>
                    
                    <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
                        <div class="sidebar-cart-qty" style="border-radius: 8px; background: #F0F2F2; border: 1px solid #D5D9D9; box-shadow: 0 2px 5px rgba(213,217,217,.5);">
                            <button type="button" class="sidebar-qty-btn cart_decrement" data-id="{{ $item->rowId }}" style="background: transparent;">−</button>
                            <span class="sidebar-qty-num" style="background: transparent; min-width: 30px;">{{ $item->qty }}</span>
                            <button type="button" class="sidebar-qty-btn cart_increment" data-id="{{ $item->rowId }}" style="background: transparent;">+</button>
                        </div>
                        <button type="button" class="cart_remove" data-id="{{ $item->rowId }}" style="background: none; border: none; color: #007185; font-size: 12px; font-weight: 600; cursor: pointer;" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        @endforeach
    @endif
</div>

@if(!$cartContent->isEmpty())
<div class="sidebar-cart-footer" style="box-shadow: 0 -4px 10px rgba(0,0,0,0.05); border-top: 1px solid #ddd;">
    <div class="sidebar-cart-total" style="margin-bottom: 15px;">
        <span class="sidebar-cart-total-label" style="font-size: 16px; font-weight: 500; color: #111;">Subtotal ({{ $cartContent->count() }} items):</span>
        <span class="sidebar-cart-total-amount" style="color: #B12704; font-weight: 700; font-size: 18px;">৳ {{ number_format($subtotal, 0) }}</span>
    </div>
    <div style="display: flex; gap: 10px; flex-direction: column;">
        <a href="{{ route('customer.checkout') }}" class="sidebar-cart-checkout-btn" style="background: #FFD814; color: #111 !important; border-radius: 50px; font-weight: 600; border: 1px solid #FCD200; box-shadow: 0 2px 5px rgba(213,217,217,.5);">Proceed to Checkout</a>
        <a href="{{ route('cart.show') }}" class="sidebar-cart-checkout-btn amz-btn-secondary" style="background: #fff; color: #111 !important; border-radius: 50px; font-weight: 600; border: 1px solid #D5D9D9; box-shadow: 0 2px 5px rgba(213,217,217,.5);">Go to Cart</a>
    </div>
</div>
@endif
