@php
    $cart = session()->get('cart', []);
    $subtotal = 0;
    $discount = 0;
    $total = 0;
    foreach ($cart as $item) {
        $itemOriginalPrice = (float)($item['original_price'] ?? $item['price']);
        $itemCurrentPrice = (float)$item['price'];
        $qty = (int)$item['quantity'];
        $subtotal += $itemOriginalPrice * $qty;
        $discount += ($itemOriginalPrice - $itemCurrentPrice) * $qty;
        $total += $itemCurrentPrice * $qty;
    }
@endphp
<div id="cartDrawer" class="fixed inset-0 z-[100] invisible transition-all duration-300">
    <!-- Backdrop -->
    <div id="cartBackdrop" class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300"></div>
    
    <!-- Drawer Content -->
    <div id="cartContent" class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl translate-x-full transition-transform duration-300 flex flex-col">
        <!-- Header -->
        <div class="p-4 border-b border-gray-100 flex items-center justify-between bg-white sticky top-0 z-10">
            <div class="flex items-center gap-3">
                <div class="relative">
                    <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                    <span id="cart-count-badge" class="cart-count-badge absolute -top-2 -right-2 bg-primary text-white text-[10px] w-5 h-5 rounded-full flex items-center justify-center font-black shadow-lg shadow-primary/20">{{ count($cart) }}</span>
                </div>
                <h3 class="font-black text-sm uppercase tracking-widest text-gray-800">{{ __('Shopping Cart') }}</h3>
            </div>
            <button onclick="closeCart()" class="p-2 hover:bg-gray-50 rounded-full transition-colors group">
                <svg class="w-5 h-5 text-gray-400 group-hover:text-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <!-- Dynamic Content -->
        <div id="cart-items-container" class="flex-grow overflow-y-auto">
            @include('components.cart-drawer-items', ['cart' => $cart])
        </div>

        <!-- Footer -->
        <div class="p-6 bg-white border-t border-gray-100 shadow-[0_-10px_40px_rgba(0,0,0,0.02)]">
            <div class="space-y-2 mb-6">
                <div class="flex items-center justify-between">
                    <span class="text-[10px] font-black text-gray-400 uppercase tracking-widest">{{ __('Subtotal') }}</span>
                    <span id="cart-subtotal" class="text-sm font-black text-gray-800 tracking-tight">৳{{ number_format($subtotal) }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-[10px] font-black text-gray-400 uppercase tracking-widest">{{ __('Discount') }}</span>
                    <span id="cart-discount" class="text-sm font-black text-red-500 tracking-tight">-৳{{ number_format($discount) }}</span>
                </div>
                <div class="flex items-center justify-between pt-2 border-t border-gray-50">
                    <span class="text-sm font-black text-gray-800 uppercase tracking-widest">{{ __('Total') }}</span>
                    <span id="cart-total" class="text-xl font-extrabold text-primary tracking-tight">৳{{ number_format($total) }}</span>
                </div>
            </div>
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-6 border-b border-gray-100 pb-4">{{ __('Shipping calculated at checkout') }}</p>
            <div class="space-y-3">
                <a href="{{ route('checkout') }}" class="w-full h-14 bg-gray-900 text-white flex items-center justify-center rounded-2xl font-black text-xs hover:bg-black transition-all shadow-xl shadow-gray-900/10 uppercase tracking-[0.2em] active:scale-95">{{ __('Checkout') }}</a>
                <button onclick="closeCart()" class="w-full h-14 bg-primary/10 text-primary flex items-center justify-center rounded-2xl font-black text-xs hover:bg-primary/20 transition-all uppercase tracking-[0.2em] active:scale-95">{{ __('Continue Shopping') }}</button>
                <button onclick="clearCart()" class="w-full text-[10px] font-black text-red-500 uppercase tracking-widest hover:text-red-600 transition-colors pt-4">{{ __('Clear all items') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
    function openCart() {
        const drawer = document.getElementById('cartDrawer');
        const backdrop = document.getElementById('cartBackdrop');
        const content = document.getElementById('cartContent');
        
        drawer.classList.remove('invisible');
        setTimeout(() => {
            backdrop.classList.add('opacity-100');
            content.classList.remove('translate-x-full');
        }, 10);
        document.body.style.overflow = 'hidden';
    }

    function closeCart() {
        const drawer = document.getElementById('cartDrawer');
        const backdrop = document.getElementById('cartBackdrop');
        const content = document.getElementById('cartContent');
        
        backdrop.classList.remove('opacity-100');
        content.classList.add('translate-x-full');
        setTimeout(() => {
            drawer.classList.add('invisible');
            document.body.style.overflow = '';
        }, 300);
    }

    function toggleCart() {
        const drawer = document.getElementById('cartDrawer');
        if (! drawer) {
            return;
        }
        if (drawer.classList.contains('invisible')) {
            openCart();
        } else {
            closeCart();
        }
    }

    function updateCartUI(data) {
        document.getElementById('cart-items-container').innerHTML = data.cartHtml;
        
        document.getElementById('cart-subtotal').textContent = '৳' + data.subtotal;
        document.getElementById('cart-discount').textContent = '-৳' + data.discount;
        document.getElementById('cart-total').textContent = '৳' + data.total;
        document.getElementById('cart-count-badge').textContent = data.cartCount;
        
        document.querySelectorAll('.cart-count-badge').forEach(el => {
            el.textContent = data.cartCount;
        });
    }

    window.removeFromCart = function(key) {
        fetch('{{ route('cart.remove') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ cart_key: key })
        })
        .then(response => response.json())
        .then(data => {
            if(data.success) {
                if (typeof fbq === 'function') {
                    fbq('track', 'RemoveFromCart');
                }
                updateCartUI(data);
            }
        });
    };

    window.updateCartQuantity = function(key, qty) {
        if(qty < 1) return;
        fetch('{{ route('cart.update-quantity') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ cart_key: key, quantity: qty })
        })
        .then(response => response.json())
        .then(data => {
            if(data.success) updateCartUI(data);
        });
    };

    window.clearCart = function() {
        if(!confirm("{{ __('Are you sure you want to clear your cart?') }}")) return;
        fetch('{{ route('cart.clear') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if(data.success) {
                if (typeof fbq === 'function') {
                    fbq('track', 'RemoveFromCart');
                }
                updateCartUI(data);
            }
        });
    };

    document.getElementById('cartBackdrop')?.addEventListener('click', closeCart);
</script>