{{-- Global Right Slide-Out Cart Drawer (Shopping Bag Overlay)
     Reference: frontend/cart_and_checkout_flow_plan.md (Section 3) --}}
<div x-data
     x-show="$store.ui.cartDrawerOpen"
     x-cloak
     class="fixed inset-0 z-overlay flex justify-end"
     role="dialog"
     aria-modal="true"
     aria-label="Shopping Bag">

    {{-- Dimmed Backdrop (--text-primary at 60% opacity) --}}
    <div x-show="$store.ui.cartDrawerOpen"
         x-transition:enter="transition-opacity ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="$store.ui.closeCartDrawer()"
         class="fixed inset-0 overlay-backdrop"></div>

    {{-- Right Drawer Panel (width: 420px Desktop/Tablet; width: 92vw, height: 100dvh Mobile) --}}
    <div x-show="$store.ui.cartDrawerOpen"
         x-transition:enter="transition-transform ease-out duration-250"
         x-transition:enter-start="translate-x-full"
         x-transition:enter-end="translate-x-0"
         x-transition:leave="transition-transform ease-in duration-200"
         x-transition:leave-start="translate-x-0"
         x-transition:leave-end="translate-x-full"
         class="relative z-10 w-[92vw] sm:w-[420px] h-[100dvh] bg-bg-main border-l border-border-subtle flex flex-col justify-between">

        {{-- ================================================================
             1. DRAWER HEADER (Pinned Top)
             ================================================================ --}}
        <div class="px-[20px] py-[16px] border-b border-border-subtle flex items-center justify-between shrink-0">
            <h3 class="type-h3">
                Your Shopping Bag (<span x-text="$store.cart.totalCount">0</span>)
            </h3>
            <button type="button"
                    @click="$store.ui.closeCartDrawer()"
                    aria-label="Close shopping bag"
                    class="btn-icon">
                ✕
            </button>
        </div>

        {{-- ================================================================
             2. SCROLLABLE CART ITEM CARDS (Middle Section)
             ================================================================ --}}
        <div class="flex-1 overflow-y-auto p-[16px] sm:p-[20px]">

            {{-- Empty Bag State (Section 10 of global_ui_components_and_content_standards.md) --}}
            <template x-if="$store.cart.items.length === 0">
                <div class="h-full min-h-[280px] flex flex-col items-center justify-center text-center px-[16px] space-y-[16px]">
                    <p class="font-body text-[15px] text-text-muted">
                        Your shopping bag is empty
                    </p>
                    <a href="{{ url('/sarees') }}"
                       @click="$store.ui.closeCartDrawer()"
                       class="btn-primary">
                        EXPLORE SAREES →
                    </a>
                </div>
            </template>

            {{-- Itemized Bag Cards --}}
            <div class="space-y-[12px]" x-show="$store.cart.items.length > 0">
                <template x-for="item in $store.cart.items" :key="item.id">
                    <div class="bg-bg-surface border border-border-subtle p-[12px] flex gap-[12px]">

                        {{-- Left Thumbnail: Strict 3:4 Portrait Photo (68px x 90px, 1px --border-subtle border) --}}
                        <a :href="item.pdpUrl"
                           class="w-[68px] h-[90px] shrink-0 bg-bg-main border border-border-subtle overflow-hidden block">
                            <img :src="item.image"
                                 :alt="item.title"
                                 class="w-full h-full object-cover object-top">
                        </a>

                        {{-- Right Details --}}
                        <div class="flex-1 min-w-0 flex flex-col justify-between">
                            <div class="space-y-[2px]">
                                <a :href="item.pdpUrl"
                                   class="font-body font-medium text-[14px] leading-[1.35] text-text-primary hover:text-brand-primary line-clamp-2 block"
                                   x-text="item.title"></a>
                                <p class="font-body text-[12px] text-text-muted truncate"
                                   x-text="'Blouse Piece: ' + item.blousePiece"></p>
                                <p class="font-body font-bold text-[15px] text-text-primary pt-[2px]"
                                   x-text="$store.cart.formatBDT(item.priceBDT * item.qty)"></p>
                            </div>

                            {{-- Controls Row: Stepper [ - 1 + ] (96px x 36px) + Remove Button --}}
                            <div class="flex items-center justify-between pt-[8px]">
                                <div class="inline-flex items-center justify-between w-[96px] h-[36px] bg-bg-main border border-border-subtle">
                                    <button type="button"
                                            @click="$store.cart.updateItemQty(item.id, -1)"
                                            :disabled="item.qty <= 1"
                                            aria-label="Decrease item quantity"
                                            class="w-[30px] h-full inline-flex items-center justify-center text-text-primary disabled:text-text-muted disabled:cursor-not-allowed cursor-pointer text-[14px]">
                                        −
                                    </button>
                                    <span class="font-body font-semibold text-[13px] text-text-primary select-none"
                                          x-text="item.qty">1</span>
                                    <button type="button"
                                            @click="$store.cart.updateItemQty(item.id, 1)"
                                            :disabled="item.qty >= item.stockQty"
                                            aria-label="Increase item quantity"
                                            class="w-[30px] h-full inline-flex items-center justify-center text-text-primary disabled:text-text-muted disabled:cursor-not-allowed cursor-pointer text-[14px]">
                                        +
                                    </button>
                                </div>

                                <button type="button"
                                        @click="$store.cart.removeItem(item.id)"
                                        class="font-body text-[12px] text-text-muted hover:text-state-error underline underline-offset-2 transition-colors duration-200 cursor-pointer">
                                    Remove
                                </button>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        {{-- ================================================================
             3. STICKY DRAWER FOOTER (Pinned Bottom)
             ================================================================ --}}
        <template x-if="$store.cart.items.length > 0">
            <div class="bg-bg-main border-t border-border-subtle px-[20px] py-[16px] space-y-[12px] shrink-0">
                {{-- Subtotal Row --}}
                <div class="flex items-center justify-between">
                    <span class="font-body text-[15px] text-text-muted">Subtotal</span>
                    <span class="font-body font-bold text-[18px] text-text-primary"
                          x-text="$store.cart.formatBDT($store.cart.subtotalBDT)"></span>
                </div>

                {{-- Delivery Note --}}
                <p class="font-body text-[12px] text-text-muted">
                    Delivery charge calculated at checkout • Cash on Delivery available
                </p>

                {{-- Primary Button: PROCEED TO CHECKOUT → --}}
                <button type="button"
                        @click="$store.cart.proceedToCheckout('{{ url('/checkout') }}')"
                        class="btn-primary w-full">
                    PROCEED TO CHECKOUT →
                </button>

                {{-- Secondary Link: Continue Shopping --}}
                <div class="text-center">
                    <button type="button"
                            @click="$store.ui.closeCartDrawer()"
                            class="font-body text-[13px] text-text-muted hover:text-brand-primary underline underline-offset-4 cursor-pointer">
                        Continue Shopping
                    </button>
                </div>
            </div>
        </template>
    </div>
</div>