@extends('layouts.checkout')

@section('title', 'Guest Cash on Delivery Checkout | ' . ($storeConfig['brandName'] ?? 'Aangina'))

@section('content')
@php
    $insideCharge = (int) ($storeConfig['insideDhakaDelivery']['chargeBDT'] ?? 70);
    $insideTimeline = $storeConfig['insideDhakaDelivery']['timeline'] ?? '2 – 3 Business Days';
    $outsideCharge = (int) ($storeConfig['outsideDhakaDelivery']['chargeBDT'] ?? 130);
    $outsideTimeline = $storeConfig['outsideDhakaDelivery']['timeline'] ?? '3 – 5 Business Days';
    $mockCoupons = $storeConfig['mockCoupons'] ?? [];
    $orderPrefix = $storeConfig['orderPrefix'] ?? 'ANG';
    $helplinePhone = $storeConfig['storeContactInfo']['phone'] ?? '+880 17XX-XXXXXX';
@endphp

<div
    x-data="{
        districts: @js($districts),
        mockCoupons: @js($mockCoupons),
        insideCharge: {{ $insideCharge }},
        insideTimeline: @js($insideTimeline),
        outsideCharge: {{ $outsideCharge }},
        outsideTimeline: @js($outsideTimeline),
        orderPrefix: @js($orderPrefix),

        mobileSummaryOpen: false,
        districtDropdownOpen: false,
        districtSearch: '',
        isSubmitting: false,

        form: {
            fullName: '',
            mobile: '',
            email: '',
            district: 'Dhaka',
            area: '',
            address: '',
            note: '',
            deliveryZone: 'inside', // 'inside' | 'outside'
        },

        touched: {
            fullName: false,
            mobile: false,
            email: false,
            area: false,
            address: false,
        },

        errors: {},

        couponInput: '',
        appliedCoupon: null,
        couponMessage: '',
        couponStatus: '', // 'success' | 'error'

        init() {
            const params = new URLSearchParams(window.location.search);
            if (params.get('mode') === 'express' && this.$store.cart.expressItem) {
                this.$store.cart.checkoutMode = 'express';
            }
        },

        get filteredDistricts() {
            const q = this.districtSearch.trim().toLowerCase();
            if (!q) return this.districts;
            return this.districts.filter(d => d.toLowerCase().includes(q));
        },

        selectDistrict(d) {
            this.form.district = d;
            this.districtDropdownOpen = false;
            this.districtSearch = '';
            // Auto-toggle Inside vs Outside Dhaka delivery zone
            this.form.deliveryZone = (d === 'Dhaka') ? 'inside' : 'outside';
        },

        cleanBangladeshPhone(raw) {
            let cleaned = String(raw || '').replace(/[\s\-()]/g, '');
            if (cleaned.startsWith('+88')) {
                cleaned = cleaned.slice(3);
            } else if (cleaned.startsWith('8801')) {
                cleaned = cleaned.slice(2);
            }
            return cleaned;
        },

        get isPhoneValid() {
            const cleaned = this.cleanBangladeshPhone(this.form.mobile);
            return /^01[3-9][0-9]{8}$/.test(cleaned);
        },

        get isNameValid() {
            return this.form.fullName.trim().length >= 2;
        },

        get isEmailValid() {
            const val = this.form.email.trim();
            if (!val) return true; // Optional
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
        },

        get isAreaValid() {
            return this.form.area.trim().length >= 2;
        },

        get isAddressValid() {
            return this.form.address.trim().length >= 5;
        },

        get subtotalBDT() {
            return this.$store.cart.activeCheckoutSubtotalBDT;
        },

        get deliveryChargeBDT() {
            return this.form.deliveryZone === 'inside' ? this.insideCharge : this.outsideCharge;
        },

        get discountBDT() {
            if (!this.appliedCoupon) return 0;
            if (this.subtotalBDT < (this.appliedCoupon.minOrderBDT || 0)) {
                return 0;
            }
            if (this.appliedCoupon.type === 'PERCENT') {
                return Math.floor((this.subtotalBDT * this.appliedCoupon.value) / 100);
            }
            return Math.min(this.subtotalBDT, parseInt(this.appliedCoupon.value, 10) || 0);
        },

        get totalPayableBDT() {
            return Math.max(0, this.subtotalBDT - this.discountBDT) + this.deliveryChargeBDT;
        },

        applyCoupon() {
            const code = this.couponInput.trim().toUpperCase();
            if (!code) {
                this.couponStatus = 'error';
                this.couponMessage = 'Please enter a promo code';
                return;
            }
            const found = this.mockCoupons.find(c => c.code.toUpperCase() === code);
            if (!found) {
                this.appliedCoupon = null;
                this.couponStatus = 'error';
                this.couponMessage = 'Invalid or expired promo code';
                return;
            }
            if (this.subtotalBDT < (found.minOrderBDT || 0)) {
                this.appliedCoupon = null;
                this.couponStatus = 'error';
                this.couponMessage = `Minimum order of BDT ${Number(found.minOrderBDT).toLocaleString()} required for ${found.code}`;
                return;
            }
            this.appliedCoupon = found;
            this.couponStatus = 'success';
            const label = found.type === 'PERCENT' ? `${found.value}% off` : `BDT ${found.value} off`;
            this.couponMessage = `Coupon ${found.code} applied (${label}) ✓`;
        },

        removeCoupon() {
            this.appliedCoupon = null;
            this.couponInput = '';
            this.couponMessage = '';
            this.couponStatus = '';
        },

        validateForm() {
            const errs = {};
            if (!this.isNameValid) {
                errs.fullName = 'Please enter the receiver\'s full name';
            }
            if (!this.isPhoneValid) {
                errs.mobile = 'Please enter a valid 11-digit Bangladesh mobile number (01XXXXXXXXX)';
            }
            if (!this.isEmailValid) {
                errs.email = 'Please enter a valid email address (or leave optional field blank)';
            }
            if (!this.form.district) {
                errs.district = 'Please select your delivery district';
            }
            if (!this.isAreaValid) {
                errs.area = 'Please enter your Area or Thana (e.g. Dhanmondi, Uttara)';
            }
            if (!this.isAddressValid) {
                errs.address = 'Please enter your detailed house/road delivery address';
            }
            this.errors = errs;
            return Object.keys(errs).length === 0;
        },

        submitOrder() {
            this.touched = { fullName: true, mobile: true, email: true, area: true, address: true };
            if (!this.validateForm()) {
                const firstErrEl = document.querySelector('.input-error');
                if (firstErrEl) {
                    firstErrEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
                return;
            }

            if (this.isSubmitting || this.$store.cart.activeCheckoutItems.length === 0) {
                return;
            }

            this.isSubmitting = true;
            const randomNum = Math.floor(1000 + Math.random() * 9000);
            const generatedOrderId = `${this.orderPrefix}-${randomNum}`;
            const normalizedPhone = this.cleanBangladeshPhone(this.form.mobile);

            const orderPayload = {
                orderId: generatedOrderId,
                displayOrderNumber: '#' + generatedOrderId,
                createdAt: new Date().toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }),
                customer: {
                    fullName: this.form.fullName.trim(),
                    mobile: normalizedPhone,
                    email: this.form.email.trim() || null,
                    district: this.form.district,
                    area: this.form.area.trim(),
                    address: this.form.address.trim(),
                    note: this.form.note.trim() || null,
                },
                delivery: {
                    zone: this.form.deliveryZone,
                    label: this.form.deliveryZone === 'inside' ? 'Inside Dhaka City' : 'Outside Dhaka (Nationwide)',
                    timeline: this.form.deliveryZone === 'inside' ? this.insideTimeline : this.outsideTimeline,
                    chargeBDT: this.deliveryChargeBDT,
                },
                items: JSON.parse(JSON.stringify(this.$store.cart.activeCheckoutItems)),
                subtotalBDT: this.subtotalBDT,
                discountBDT: this.discountBDT,
                couponCode: this.appliedCoupon ? this.appliedCoupon.code : null,
                totalPayableBDT: this.totalPayableBDT,
                paymentMethod: 'Cash on Delivery (COD)',
            };

            setTimeout(() => {
                try {
                    sessionStorage.setItem('aangina_last_order', JSON.stringify(orderPayload));
                } catch (e) {}
                this.$store.cart.clearOrderedItemsAfterSuccess();
                window.location.href = '{{ url('/order-received') }}/' + generatedOrderId;
            }, 800);
        }
    }"
    class="py-6 sm:py-10"
>
    <div class="max-w-[1140px] mx-auto px-4 sm:px-6">

        {{-- =================================================================
             EMPTY BAG STATE ON CHECKOUT
             ================================================================= --}}
        <template x-if="$store.cart.activeCheckoutItems.length === 0">
            <div class="max-w-[540px] mx-auto my-12 bg-surface border border-border-subtle p-8 sm:p-10 text-center">
                <span class="type-overline text-brand-primary block mb-2">Shopping Bag Empty</span>
                <h1 class="type-h2 text-text-primary">No Sarees Selected for Checkout</h1>
                <p class="mt-2 text-[14px] text-text-muted">
                    Your shopping bag is currently empty. Explore our handwoven Jamdani, Muslin, Katan, and Silk collections to begin your order.
                </p>
                <a href="{{ route('sarees.hub') }}" class="btn-primary mt-6 inline-flex px-8">
                    EXPLORE SAREES →
                </a>
            </div>
        </template>

        {{-- =================================================================
             ACTIVE CHECKOUT FLOW
             ================================================================= --}}
        <template x-if="$store.cart.activeCheckoutItems.length > 0">
            <div>
                {{-- 1. MOBILE TOP COLLAPSIBLE ORDER SUMMARY BAR (Section 4B of cart_and_checkout_flow_plan.md) --}}
                <div class="md:hidden mb-5">
                    <button
                        type="button"
                        @click="mobileSummaryOpen = !mobileSummaryOpen"
                        class="w-full h-[48px] px-4 bg-surface border border-border-subtle flex items-center justify-between text-left"
                    >
                        <span class="text-[13px] font-semibold text-brand-primary flex items-center gap-2">
                            <span>🛍</span>
                            <span x-text="(mobileSummaryOpen ? 'Hide' : 'Show') + ' Order Summary (' + $store.cart.activeCheckoutTotalQty + ($store.cart.activeCheckoutTotalQty === 1 ? ' Saree)' : ' Sarees)')"></span>
                            <span class="transition-transform duration-200" :class="mobileSummaryOpen ? 'rotate-180' : ''">▾</span>
                        </span>
                        <span class="text-[15px] font-bold text-text-primary" x-text="$store.cart.formatBDT(totalPayableBDT)"></span>
                    </button>

                    {{-- Mobile Collapsible Drawer Content --}}
                    <div
                        x-show="mobileSummaryOpen"
                        x-cloak
                        class="bg-surface border-x border-b border-border-subtle p-4 space-y-3"
                    >
                        <template x-for="item in $store.cart.activeCheckoutItems" :key="item.id">
                            <div class="flex items-center justify-between gap-3">
                                <div class="flex items-center gap-3 min-w-0">
                                    <div class="relative w-[44px] h-[58px] shrink-0 bg-main border border-border-subtle">
                                        <img :src="item.image" :alt="item.title" class="w-full h-full object-cover">
                                        <span
                                            class="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-brand-primary text-text-light text-[11px] font-bold flex items-center justify-center"
                                            x-text="item.qty"
                                        ></span>
                                    </div>
                                    <div class="min-w-0">
                                        <div class="text-[13px] font-medium text-text-primary truncate" x-text="item.title"></div>
                                        <div class="text-[11px] text-text-muted" x-text="item.blousePiece"></div>
                                    </div>
                                </div>
                                <div class="text-[13px] font-semibold text-text-primary shrink-0" x-text="$store.cart.formatBDT(item.priceBDT * item.qty)"></div>
                            </div>
                        </template>
                    </div>
                </div>

                {{-- 2. MAIN 2-COLUMN ASYMMETRIC CHECKOUT GRID (58% Left Form / 42% Right Sticky Summary) --}}
                <form @submit.prevent="submitOrder()" novalidate class="grid grid-cols-1 md:grid-cols-12 gap-6 lg:gap-8 items-start">

                    {{-- =====================================================
                         LEFT COLUMN (58% / 7 Cols): 3-BLOCK SHIPPING & COD FORM
                         ===================================================== --}}
                    <div class="md:col-span-7 space-y-6">

                        {{-- BLOCK 1: SHIPPING & CONTACT DETAILS (No Account Required) --}}
                        <section class="bg-surface border border-border-subtle p-4 sm:p-6">
                            <div class="pb-4 border-b border-border-subtle">
                                <h2 class="type-h3 text-brand-primary">
                                    1. Shipping &amp; Contact Details
                                </h2>
                                <p class="mt-0.5 text-[13px] text-text-muted">
                                    Order directly as a guest — no account or password required.
                                </p>
                            </div>

                            <div class="mt-5 space-y-4">
                                {{-- Field 1: Full Name (* Required) --}}
                                <div>
                                    <label for="checkout-name" class="label-base">
                                        Full Name <span class="text-state-error">*</span>
                                    </label>
                                    <div class="relative">
                                        <input
                                            id="checkout-name"
                                            type="text"
                                            autocomplete="name"
                                            x-model="form.fullName"
                                            @blur="touched.fullName = true; validateForm()"
                                            placeholder="Enter receiver's full name"
                                            class="input-base pr-9"
                                            :class="errors.fullName ? 'input-error' : ''"
                                        >
                                        <span
                                            x-show="isNameValid"
                                            x-cloak
                                            class="absolute right-3 top-1/2 -translate-y-1/2 text-state-success font-bold text-[14px]"
                                            aria-hidden="true"
                                        >✓</span>
                                    </div>
                                    <p x-show="errors.fullName" x-text="errors.fullName" class="mt-1 text-[13px] text-state-error"></p>
                                </div>

                                {{-- Field 2: Mobile Number (* Required — Bangladesh 11-Digit Validation) --}}
                                <div>
                                    <label for="checkout-mobile" class="label-base">
                                        Mobile Number (11 Digits) <span class="text-state-error">*</span>
                                    </label>
                                    <div class="relative">
                                        <input
                                            id="checkout-mobile"
                                            type="tel"
                                            inputmode="tel"
                                            autocomplete="tel"
                                            x-model="form.mobile"
                                            @blur="touched.mobile = true; validateForm()"
                                            placeholder="01XXXXXXXXX (e.g., 01712345678)"
                                            class="input-base pr-9"
                                            :class="errors.mobile ? 'input-error' : ''"
                                        >
                                        <span
                                            x-show="isPhoneValid"
                                            x-cloak
                                            class="absolute right-3 top-1/2 -translate-y-1/2 text-state-success font-bold text-[14px]"
                                            aria-hidden="true"
                                        >✓</span>
                                    </div>
                                    <p x-show="errors.mobile" x-text="errors.mobile" class="mt-1 text-[13px] text-state-error"></p>
                                    <p class="mt-1 text-[12px] text-text-muted">
                                        Our delivery team will call this number to verify your order before dispatching your saree.
                                    </p>
                                </div>

                                {{-- Field 3: Email Address (Optional — For Confirmation & Tracking Email) --}}
                                <div>
                                    <label for="checkout-email" class="label-base">
                                        Email Address <span class="text-text-muted font-normal">(Optional)</span>
                                    </label>
                                    <div class="relative">
                                        <input
                                            id="checkout-email"
                                            type="email"
                                            inputmode="email"
                                            autocomplete="email"
                                            x-model="form.email"
                                            @blur="touched.email = true; validateForm()"
                                            placeholder="yourname@example.com (Optional)"
                                            class="input-base pr-9"
                                            :class="errors.email ? 'input-error' : ''"
                                        >
                                        <span
                                            x-show="form.email.trim().length > 0 && isEmailValid"
                                            x-cloak
                                            class="absolute right-3 top-1/2 -translate-y-1/2 text-state-success font-bold text-[14px]"
                                            aria-hidden="true"
                                        >✓</span>
                                    </div>
                                    <p x-show="errors.email" x-text="errors.email" class="mt-1 text-[13px] text-state-error"></p>
                                    <p class="mt-1 text-[12px] text-text-muted">
                                        Enter your email if you would like to receive an order confirmation receipt now and a courier tracking link when your saree ships.
                                    </p>
                                </div>

                                {{-- Field 4: District Dropdown (Searchable 64 Districts with Dhaka First) & Area / Thana --}}
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                    {{-- Searchable District Selector --}}
                                    <div class="relative" @click.outside="districtDropdownOpen = false">
                                        <label class="label-base">
                                            District / City <span class="text-state-error">*</span>
                                        </label>
                                        <button
                                            type="button"
                                            @click="districtDropdownOpen = !districtDropdownOpen"
                                            class="input-base flex items-center justify-between text-left"
                                        >
                                            <span class="font-medium text-text-primary" x-text="form.district || 'Select District'"></span>
                                            <span class="text-text-muted text-[12px]">▾</span>
                                        </button>

                                        <div
                                            x-show="districtDropdownOpen"
                                            x-cloak
                                            class="absolute left-0 right-0 mt-1 z-30 bg-main border border-border-subtle shadow-BoutiqueElevated max-h-[260px] flex flex-col"
                                        >
                                            <div class="p-2 border-b border-border-subtle bg-surface">
                                                <input
                                                    type="text"
                                                    x-model="districtSearch"
                                                    placeholder="Search 64 Bangladesh districts..."
                                                    class="w-full h-9 px-3 bg-main border border-border-subtle text-[13px] text-text-primary placeholder:text-text-muted focus:border-brand-primary focus:outline-none"
                                                >
                                            </div>
                                            <ul class="overflow-y-auto divide-y divide-border-subtle/50 text-[14px]">
                                                <template x-for="d in filteredDistricts" :key="d">
                                                    <li>
                                                        <button
                                                            type="button"
                                                            @click="selectDistrict(d)"
                                                            class="w-full px-3.5 py-2.5 text-left flex items-center justify-between hover:bg-surface transition-colors"
                                                            :class="form.district === d ? 'bg-surface font-semibold text-brand-primary' : 'text-text-primary'"
                                                        >
                                                            <span x-text="d"></span>
                                                            <span x-show="form.district === d" class="text-brand-primary">✓</span>
                                                        </button>
                                                    </li>
                                                </template>
                                            </ul>
                                        </div>
                                    </div>

                                    {{-- Area / Thana --}}
                                    <div>
                                        <label for="checkout-area" class="label-base">
                                            Area / Thana <span class="text-state-error">*</span>
                                        </label>
                                        <div class="relative">
                                            <input
                                                id="checkout-area"
                                                type="text"
                                                x-model="form.area"
                                                @blur="touched.area = true; validateForm()"
                                                placeholder="e.g., Dhanmondi, Uttara, Mirpur"
                                                class="input-base pr-9"
                                                :class="errors.area ? 'input-error' : ''"
                                            >
                                            <span
                                                x-show="isAreaValid"
                                                x-cloak
                                                class="absolute right-3 top-1/2 -translate-y-1/2 text-state-success font-bold text-[14px]"
                                                aria-hidden="true"
                                            >✓</span>
                                        </div>
                                        <p x-show="errors.area" x-text="errors.area" class="mt-1 text-[13px] text-state-error"></p>
                                    </div>
                                </div>

                                {{-- Field 5: Detailed Delivery Address (* Required) --}}
                                <div>
                                    <label for="checkout-address" class="label-base">
                                        Detailed Delivery Address <span class="text-state-error">*</span>
                                    </label>
                                    <textarea
                                        id="checkout-address"
                                        rows="2"
                                        x-model="form.address"
                                        @blur="touched.address = true; validateForm()"
                                        placeholder="House #, Flat/Floor #, Road #, Block/Sector, Landmark"
                                        class="w-full min-h-[76px] p-3.5 bg-main border border-border-subtle text-[16px] lg:text-[15px] text-text-primary placeholder:text-text-muted focus:border-brand-primary focus:outline-none"
                                        :class="errors.address ? 'border-state-error border-[1.5px]' : ''"
                                    ></textarea>
                                    <p x-show="errors.address" x-text="errors.address" class="mt-1 text-[13px] text-state-error"></p>
                                </div>

                                {{-- Field 6: Order / Delivery Note (Optional) --}}
                                <div>
                                    <label for="checkout-note" class="label-base">
                                        Order / Delivery Note <span class="text-text-muted font-normal">(Optional)</span>
                                    </label>
                                    <input
                                        id="checkout-note"
                                        type="text"
                                        x-model="form.note"
                                        placeholder="Any special instruction for the delivery rider (optional)"
                                        class="input-base"
                                    >
                                </div>
                            </div>
                        </section>

                        {{-- BLOCK 2: SELECT DELIVERY AREA (Inside vs. Outside Dhaka) --}}
                        <section class="bg-surface border border-border-subtle p-4 sm:p-6">
                            <h2 class="type-h3 text-brand-primary pb-4 border-b border-border-subtle">
                                2. Select Delivery Area
                            </h2>

                            <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                                {{-- Radio Card A: Inside Dhaka City --}}
                                <button
                                    type="button"
                                    @click="form.deliveryZone = 'inside'"
                                    class="p-4 bg-main text-left flex items-start justify-between gap-3 transition-all cursor-pointer"
                                    :class="form.deliveryZone === 'inside' ? 'border-2 border-brand-primary' : 'border border-border-subtle hover:border-brand-primary/60'"
                                >
                                    <div class="flex items-start gap-2.5">
                                        <span
                                            class="mt-0.5 text-[15px] leading-none"
                                            :class="form.deliveryZone === 'inside' ? 'text-brand-primary' : 'text-text-muted'"
                                            x-text="form.deliveryZone === 'inside' ? '●' : '○'"
                                        ></span>
                                        <div>
                                            <div class="text-[15px] font-semibold text-text-primary">
                                                Inside Dhaka City
                                            </div>
                                            <div class="mt-1 text-[12px] text-text-muted">
                                                Estimated: {{ $insideTimeline }}
                                            </div>
                                        </div>
                                    </div>
                                    <span class="text-[16px] font-bold text-text-primary shrink-0">
                                        BDT {{ number_format($insideCharge) }}
                                    </span>
                                </button>

                                {{-- Radio Card B: Outside Dhaka (All Bangladesh) --}}
                                <button
                                    type="button"
                                    @click="form.deliveryZone = 'outside'"
                                    class="p-4 bg-main text-left flex items-start justify-between gap-3 transition-all cursor-pointer"
                                    :class="form.deliveryZone === 'outside' ? 'border-2 border-brand-primary' : 'border border-border-subtle hover:border-brand-primary/60'"
                                >
                                    <div class="flex items-start gap-2.5">
                                        <span
                                            class="mt-0.5 text-[15px] leading-none"
                                            :class="form.deliveryZone === 'outside' ? 'text-brand-primary' : 'text-text-muted'"
                                            x-text="form.deliveryZone === 'outside' ? '●' : '○'"
                                        ></span>
                                        <div>
                                            <div class="text-[15px] font-semibold text-text-primary">
                                                Outside Dhaka (Nationwide)
                                            </div>
                                            <div class="mt-1 text-[12px] text-text-muted">
                                                Estimated: {{ $outsideTimeline }}
                                            </div>
                                        </div>
                                    </div>
                                    <span class="text-[16px] font-bold text-text-primary shrink-0">
                                        BDT {{ number_format($outsideCharge) }}
                                    </span>
                                </button>
                            </div>
                        </section>

                        {{-- BLOCK 3: PAYMENT METHOD (Cash on Delivery Only) --}}
                        <section class="bg-surface border border-border-subtle p-4 sm:p-6">
                            <h2 class="type-h3 text-brand-primary pb-4 border-b border-border-subtle">
                                3. Payment Method
                            </h2>

                            <div class="mt-4 bg-main border-2 border-brand-primary p-4">
                                <div class="flex flex-wrap items-center justify-between gap-2">
                                    <div class="flex items-center gap-2.5">
                                        <span class="text-brand-primary text-[16px] leading-none">●</span>
                                        <span class="font-body font-bold text-[16px] text-text-primary">
                                            Cash on Delivery (COD)
                                        </span>
                                    </div>
                                    <span class="badge-accent text-[11px] font-semibold uppercase tracking-wider">
                                        PAY ON DELIVERY
                                    </span>
                                </div>
                                <p class="mt-2.5 text-[14px] text-text-muted leading-relaxed">
                                    No advance payment needed. Pay the total amount in cash directly to the delivery rider when you receive and check your saree at your doorstep.
                                </p>
                            </div>
                        </section>
                    </div>

                    {{-- =====================================================
                         RIGHT COLUMN (42% / 5 Cols Sticky): ORDER SUMMARY & CONFIRM CTA
                         ===================================================== --}}
                    <div class="md:col-span-5 md:sticky md:top-[88px]">
                        <div class="bg-surface border border-border-subtle p-4 sm:p-6 space-y-5">
                            {{-- 1. Header Row: Order Summary + Edit Bag --}}
                            <div class="flex items-center justify-between pb-3.5 border-b border-border-subtle">
                                <h2 class="type-h3 text-brand-primary">Order Summary</h2>
                                <button
                                    type="button"
                                    @click="$store.ui.openCartDrawer($el)"
                                    class="text-[13px] font-semibold text-brand-primary hover:underline"
                                >
                                    Edit Bag
                                </button>
                            </div>

                            {{-- 2. Express Buy Other-Bag-Items Helper Strip (Conditional) --}}
                            <template x-if="$store.cart.otherBagItemsCountInExpress > 0">
                                <div class="bg-main border border-border-subtle px-3 py-2.5 flex flex-wrap items-center justify-between gap-2 text-[13px]">
                                    <span class="text-text-muted">
                                        You also have <strong class="text-text-primary font-semibold" x-text="$store.cart.otherBagItemsCountInExpress"></strong> other saree<span x-show="$store.cart.otherBagItemsCountInExpress > 1">s</span> in your bag.
                                    </span>
                                    <button
                                        type="button"
                                        @click="$store.cart.mergeBagIntoExpressOrder()"
                                        class="font-semibold text-brand-primary hover:underline"
                                    >
                                        + Add them to this order
                                    </button>
                                </div>
                            </template>

                            {{-- 3. Itemized Saree List --}}
                            <div class="space-y-3.5 max-h-[300px] overflow-y-auto pr-1">
                                <template x-for="item in $store.cart.activeCheckoutItems" :key="item.id">
                                    <div class="flex items-start justify-between gap-3 pb-3.5 border-b border-border-subtle/70 last:border-b-0 last:pb-0">
                                        <div class="flex items-start gap-3 min-w-0">
                                            {{-- 3:4 Thumbnail (52x68px) with Quantity Badge --}}
                                            <div class="relative w-[52px] h-[68px] shrink-0 bg-main border border-border-subtle">
                                                <img :src="item.image" :alt="item.title" class="w-full h-full object-cover object-top">
                                                <span
                                                    class="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-brand-primary text-text-light text-[11px] font-bold flex items-center justify-center"
                                                    x-text="item.qty"
                                                ></span>
                                            </div>
                                            <div class="min-w-0">
                                                <a
                                                    :href="item.pdpUrl"
                                                    class="text-[14px] font-medium text-text-primary hover:text-brand-primary line-clamp-2 leading-snug"
                                                    x-text="item.title"
                                                ></a>
                                                <div class="mt-0.5 text-[12px] text-text-muted" x-text="'Blouse Piece: ' + item.blousePiece"></div>
                                            </div>
                                        </div>

                                        <div class="text-[14px] font-bold text-text-primary shrink-0" x-text="$store.cart.formatBDT(item.priceBDT * item.qty)"></div>
                                    </div>
                                </template>
                            </div>

                            {{-- 4. Promo / Coupon Code Row --}}
                            <div class="pt-3 border-t border-border-subtle">
                                <div class="flex items-center gap-2">
                                    <input
                                        type="text"
                                        x-model="couponInput"
                                        placeholder="Promo / Coupon Code (e.g. EID10)"
                                        class="flex-1 h-[44px] px-3.5 bg-main border border-border-subtle text-[14px] text-text-primary placeholder:text-text-muted focus:border-brand-primary focus:outline-none uppercase"
                                    >
                                    <button
                                        type="button"
                                        @click="applyCoupon()"
                                        class="h-[44px] px-5 bg-transparent border-[1.5px] border-brand-primary text-brand-primary font-semibold text-[13px] uppercase tracking-wider hover:bg-brand-primary hover:text-text-light transition-colors"
                                    >
                                        APPLY
                                    </button>
                                </div>

                                <template x-if="couponMessage">
                                    <div class="mt-2 flex items-center justify-between gap-2 text-[12px]">
                                        <span
                                            :class="couponStatus === 'success' ? 'text-state-success font-semibold' : 'text-state-error font-medium'"
                                            x-text="couponMessage"
                                        ></span>
                                        <button
                                            x-show="appliedCoupon"
                                            type="button"
                                            @click="removeCoupon()"
                                            class="text-text-muted hover:text-state-error underline text-[11px]"
                                        >Remove</button>
                                    </div>
                                </template>
                            </div>

                            {{-- 5. Cost Breakdown Table --}}
                            <div class="pt-3 border-t border-border-subtle space-y-2.5 text-[14px]">
                                <div class="flex items-center justify-between">
                                    <span class="text-text-muted">Subtotal (<span x-text="$store.cart.activeCheckoutTotalQty"></span> <span x-text="$store.cart.activeCheckoutTotalQty === 1 ? 'Saree' : 'Sarees'"></span>)</span>
                                    <span class="font-semibold text-text-primary" x-text="$store.cart.formatBDT(subtotalBDT)"></span>
                                </div>

                                <template x-if="discountBDT > 0">
                                    <div class="flex items-center justify-between text-state-success font-semibold">
                                        <span>Promo Discount (<span x-text="appliedCoupon.code"></span>)</span>
                                        <span x-text="'− ' + $store.cart.formatBDT(discountBDT)"></span>
                                    </div>
                                </template>

                                <div class="flex items-center justify-between">
                                    <span class="text-text-muted" x-text="form.deliveryZone === 'inside' ? 'Delivery Charge (Inside Dhaka)' : 'Delivery Charge (Outside Dhaka)'"></span>
                                    <span class="font-semibold text-text-primary" x-text="$store.cart.formatBDT(deliveryChargeBDT)"></span>
                                </div>

                                <div class="pt-3 border-t border-border-subtle flex items-baseline justify-between">
                                    <span class="font-semibold text-text-primary text-[15px]">
                                        Total Payable on Delivery (COD)
                                    </span>
                                    <span class="font-body font-bold text-[20px] lg:text-[22px] text-text-primary" x-text="$store.cart.formatBDT(totalPayableBDT)"></span>
                                </div>
                            </div>

                            {{-- 6. Primary Large Confirm Order Button --}}
                            <div class="pt-1">
                                <button
                                    type="submit"
                                    :disabled="isSubmitting"
                                    class="btn-primary-lg w-full disabled:opacity-60 disabled:cursor-wait"
                                >
                                    <span x-show="!isSubmitting" x-text="'CONFIRM ORDER — ' + $store.cart.formatBDT(totalPayableBDT)"></span>
                                    <span x-show="isSubmitting" x-cloak>Confirming Order...</span>
                                </button>
                            </div>

                            {{-- 7. Support & Assurance Micro-Copy --}}
                            <div class="text-center space-y-1 pt-1">
                                <p class="text-[12px] text-text-muted font-medium">
                                    ✓ Cash on Delivery  •  ✓ Check Parcel Before Paying
                                </p>
                                <p class="text-[12px] text-text-muted">
                                    Need help ordering? Call <strong class="text-text-primary">{{ $helplinePhone }}</strong>
                                </p>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </template>
    </div>
</div>
@endsection