{{-- <div class="lg:container px-4 lg:px-0 pb-12 md:pb-16" id="page-cart" wire:load="disabled"> --}}
<div class="lg:container px-4 lg:px-0 pb-12 md:pb-16" id="page-cart" wire:load="disabled">
    {{-- <form class="flex flex-col md:flex-row gap-4 md:gap-8" action="{{ url('checkout') }}"> --}}
    <div class="flex flex-col md:flex-row gap-4 md:gap-8">
        <div class="cart-table">
            {{-- Shopping Cart --}}
            <div class="cart-row cart-title">
                <div class="cart-item">{{ __('frontend::frontend.table_head.product') }}</div>
                <div class="cart-price">{{ __('frontend::frontend.table_head.price') }}</div>
                <div class="cart-quantity">{{ __('frontend::frontend.table_head.quantity') }}</div>
                <div class="cart-total">{{ __('frontend::frontend.table_head.total') }}</div>
                <div class="cart-action">{{ __('frontend::frontend.table_head.delete') }}</div>
            </div>
            @if (!empty($cart) && count($cart))
                @php $is_promotion = false; @endphp
                @foreach ($cart as $item)
                    @if (!empty($item->promotion_id))
                        @php $is_promotion = true; @endphp
                    @endif
                    @php
                        $disabled = false;
                        if (!empty($item->promotion_type) && in_array($item->promotion_type, [1, 2]) && !empty($item->order_items_id)) {
                            $disabled = true;
                        } elseif (!empty($item->belong_order_item) && $item->belong_order_item->promotion_type == 3) {
                            $disabled = true;
                        }
                    @endphp
                    <div class="cart-row">
                        <div class="cart-item">
                            @php
                                $images = json_decode($item->product->images, true);
                                $image = check_file($images[0]['image'] ?? '');
                                $product_url = mwz_route('frontend.slug', [$item->product->slug->slug ?? 'products']);
                            @endphp
                            <div class="cart-item-img">
                                <div class="aspcov">
                                    <img src="{{ $image }}" alt="{{ $item->product->local->name ?? '' }}">
                                </div>
                                <a href="{{ $product_url }}"></a>
                            </div>
                            <div class="cart-item-detail">

                                <p class="leading-4 text-14 max-h-[34px] font-bold">{{ $item->product->local->name ?? '' }}</p>

                                <div class="flex flex-col justify-center">
                                    <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">{{ $item->product->category->local->name ?? '' }}</p>
                                    <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">{{ $item->product->brand->local->name ?? '' }}</p>
                                </div>

                                @if (!empty($item->pre_order_quantity))
                                    <span class="inline-block w-fit text-[10px] px-1 py-[2px] rounded-sm bg-primary text-white mt-1">{{ __('frontend::frontend.label.pre_order') }} {{ $item->pre_order_quantity ?? 0 }} {{ __('frontend::frontend.label.items') }}</span>
                                @endif

                                <a href="{{ $product_url }}"></a>
                                {{-- Mobile Price --}}
                                <div class="cart-price xl:hidden">
                                    @if ($item->discount_price > 0)
                                        <p class="text-red-600 font-bold">{{ number_format($item->price_after_vat ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                        <p class="text-12 opacity-30 line-through">{{ number_format($item->normal_price ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                    @else
                                        <p class="font-bold">{{ number_format($item->price_after_vat ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                        {{-- Desktop Price --}}
                        <div class="cart-price hidden xl:flex">
                            @if ($item->discount_price > 0)
                                <p class="text-red-600 font-bold">{{ number_format($item->price_after_vat ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                <p class="text-12 opacity-30 line-through">{{ number_format($item->normal_price ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                            @else
                                <p class="font-bold">{{ number_format($item->price_after_vat ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                            @endif
                        </div>
                        <div class="cart-quantity">
                            <div class="num-pos">
                                <div class="custom-number-input h-10 w-32 lg:ml-auto">
                                    <div class="flex flex-row h-10 w-full rounded-sm relative bg-transparent mt-1">
                                        <button class="h-full w-20 rounded-l cursor-pointer outline-none" type="button" wire:click="set_quantity({{ $item->id }},'down',null)" @if ($disabled) disabled @endif>
                                            <span class="m-auto text-2xl font-thin">−</span>
                                        </button>
                                        <input class="outline-none focus:outline-none text-center w-full bg-gray-100 font-semibold text-md hover:text-black focus:text-black  lg:text-basecursor-default flex items-center text-gray-700 " id="input_{{ $item->id }}" name="custom-input-number" type="text" value="{{ $item['quantity'] }}" @if ($disabled) disabled @endif wire:change="set_quantity({{ $item->id }},null,$event.target.value)">
                                        <button class="h-full w-20 rounded-r cursor-pointer" type="button" wire:click="set_quantity({{ $item->id }},'up',null)" @if ($disabled) disabled @endif>
                                            <span class="m-auto text-2xl font-thin">+</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cart-total text-right xl:text-center mt-4 xs:mt-0">
                            <p>
                                <span class="xl:hidden">
                                    {{ __('frontend::frontend.label.total') }} :&nbsp;
                                </span>
                                <span class="font-bold">
                                    {{ number_format($item->sub_total_after_vat ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}
                                </span>
                            </p>
                        </div>
                        <div class="cart-action mt-2 xs:mt-0">
                            @if (!$disabled)
                                <div class="cart-delete">
                                    <a href="javascript:remove_item({{ $item->id }})">
                                        <u>
                                            <img class="w-5" src="{{ Module::asset('frontend:img/icon/delete-x.svg') }}" alt="Delete">
                                        </u>
                                    </a>
                                </div>
                            @else
                                <div class="w-5"></div>
                            @endif
                        </div>
                    </div>
                @endforeach
            @endif
            <div class="mt-8 px-3 pb-4 max-w-[300px]">
                <a class="button-primary-bordered w-full -mt-1 text-primary font-bold" href="{{ mwz_route('frontend.page.products') }}">{{ __('frontend::frontend.order.continue_to_shopping') }}</a>
            </div>
        </div>
        @if (!empty($cart) && count($cart))
            <div class="cart-summary mx-auto rounded-none">
                <div class="bg-glass">
                    @if (!$is_promotion)
                        <div class="flex justify-between items-center space-x-2 px-5 pt-5 pb-3">
                            <div class="font-semibold text-18 flex items-center gap-2">
                                <svg class="w-7" width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_2618_11889)">
                                        <path d="M10.5548 21.8382L21.9834 10.4096M1.36621 25.2667C1.36621 25.8722 1.6064 26.4528 2.03406 26.8814C2.46173 27.3099 3.04194 27.5512 3.64735 27.5525H28.7994C29.4048 27.5512 29.985 27.3099 30.4126 26.8814C30.8403 26.4528 31.0805 25.8722 31.0805 25.2667V20.6176C30.0936 20.35 29.2222 19.7649 28.6009 18.9527C27.9797 18.1406 27.643 17.1464 27.643 16.1239C27.643 15.1013 27.9797 14.1072 28.6009 13.295C29.2222 12.4829 30.0936 11.8978 31.0805 11.6302V6.98103C31.0805 6.37561 30.8403 5.79492 30.4126 5.3664C29.985 4.93787 29.4048 4.69652 28.7994 4.69531H3.64735C3.04194 4.69652 2.46173 4.93787 2.03406 5.3664C1.6064 5.79492 1.36621 6.37561 1.36621 6.98103V11.621C2.361 11.8827 3.24114 12.4664 3.8692 13.281C4.49727 14.0956 4.83789 15.0953 4.83789 16.1239C4.83789 17.1525 4.49727 18.1522 3.8692 18.9668C3.24114 19.7814 2.361 20.3651 1.36621 20.6267V25.2667Z" stroke="#252525" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M11.6975 12.6959C12.0006 12.6959 12.2913 12.5755 12.5057 12.3611C12.72 12.1468 12.8404 11.8561 12.8404 11.553C12.8404 11.2499 12.72 10.9592 12.5057 10.7449C12.2913 10.5306 12.0006 10.4102 11.6975 10.4102C11.3944 10.4102 11.1038 10.5306 10.8894 10.7449C10.6751 10.9592 10.5547 11.2499 10.5547 11.553C10.5547 11.8561 10.6751 12.1468 10.8894 12.3611C11.1038 12.5755 11.3944 12.6959 11.6975 12.6959ZM20.8404 21.8387C21.1435 21.8387 21.4342 21.7183 21.6485 21.504C21.8629 21.2897 21.9833 20.999 21.9833 20.6959C21.9833 20.3928 21.8629 20.1021 21.6485 19.8877C21.4342 19.6734 21.1435 19.553 20.8404 19.553C20.5373 19.553 20.2466 19.6734 20.0323 19.8877C19.818 20.1021 19.6975 20.3928 19.6975 20.6959C19.6975 20.999 19.818 21.2897 20.0323 21.504C20.2466 21.7183 20.5373 21.8387 20.8404 21.8387Z" stroke="#252525" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_2618_11889">
                                            <rect width="32" height="32" fill="white" transform="translate(0.223145 0.125)" />
                                        </clipPath>
                                    </defs>
                                </svg>
                                <span>{{ __('frontend::frontend.coupon.title') }}</span>
                            </div>
                            <x-frontend::modal.basicmodal modalName='couponSelector'>
                                <x-slot:modalButton>
                                    <div class="px-2 py-1 text-primary font-bold text-12 underline capitalize">
                                        {{ __('frontend::frontend.coupon.change_coupon') }}
                                    </div>
                                </x-slot>
                                <x-slot:modalContent>
                                    <p class="font-medium text-center mb-4">{{ __('frontend::frontend.coupon.choose_coupon') }}</p>
                                    @foreach ($discounts as $discount)
                                        <div class="coupon-irl-wrapper mb-3">
                                            <div class="coupon-irl-container">
                                                <div class="coupon-cd-wrapper">
                                                    {{ number_format($discount->discount_value, 0) }}
                                                    @if ($discount->discount_type == 1)
                                                        <br />
                                                    @endif
                                                    {{ __('frontend::frontend.coupon.discount_type_' . $discount->discount_type) }}
                                                </div>
                                                <div class="flex items-center justify-center h-full flex-1 py-1">
                                                    <div class="flex flex-col justify-between h-full pl-3 py-half">
                                                        <div class="flex-space"></div>
                                                        <div class="coupon-irl-content">
                                                            <p class="coupon-irl-mtitle">{{ $discount->code }}</p>
                                                            <p class="coupon-irl-stitle">{{ mwz_getTextString($discount->detail->description ?? '') }}</p>
                                                            <p style="display:none">{{ $discount->count_used }} {{ $discount->max_used }}</p>
                                                        </div>
                                                        <p class="text-[10px] text-primary">{{ __('frontend::frontend.coupon.exp') }} {{ $discount->expire ?? 'ไม่มีวันหมดอายุ' }}</p>
                                                    </div>
                                                    <div class="flex flex-col justify-end h-full items-end flex-1 py-half relative">
                                                        {{-- <button class="butn-coupon text-white" type="button">Use</button> --}}
                                                        <button class="butn-coupon text-white" type="button" @click="couponSelector = false, zControl = false" wire:loading.attr="disabled" wire:click="use_coupon('{{ $discount->coupon->full_code ?? '' }}')">{{ __('frontend::frontend.coupon.use') }}</button>
                                                    </div>
                                                </div>
                                                <img class="cv" src="{{ Module::asset('frontend:img/cv.svg') }}">
                                                <img class="cv cv-revert" src="{{ Module::asset('frontend:img/cv.svg') }}">
                                            </div>
                                        </div>
                                    @endforeach
                                </x-slot>
                            </x-frontend::modal.basicmodal>
                        </div>
                        <div class="px-5">
                            @if (!empty($order->coupon))
                                <div class="coupon-irl-wrapper mb-3">
                                    <div class="coupon-irl-container">
                                        <div class="coupon-cd-wrapper coupon-detail">
                                            {{ number_format($order->coupon->discount->discount_value, 0) }}
                                            @if ($order->coupon->discount->discount_type == 1)
                                                <br />
                                            @endif
                                            {{ __('frontend::frontend.coupon.discount_type_' . $order->coupon->discount->discount_type) }}
                                        </div>
                                        <div class="flex items-center justify-center h-full flex-1 py-1">
                                            <div class="flex flex-col justify-between h-full pl-3 py-half coupon-detail">
                                                <div class="flex-space"></div>
                                                <div class="coupon-irl-content">
                                                    <p class="coupon-irl-mtitle">{{ $order->coupon->discount->code }}</p>
                                                    <p class="coupon-irl-stitle">{{ mwz_getTextString($order->coupon->discount->detail->description ?? '') }}</p>
                                                    <p style="display:none">{{ $order->coupon->discount->count_used }} {{ $order->coupon->discount->max_used }}</p>
                                                </div>
                                                <p class="text-[10px] text-primary">{{ __('frontend::frontend.coupon.exp') }} {{ $order->coupon->discount->expire ?? 'ไม่มีวันหมดอายุ' }}</p>
                                            </div>
                                            <div class="flex flex-col justify-end h-full items-end flex-1 py-half relative">
                                                {{-- <button class="butn-coupon text-white" type="button">Cancel</button> --}}
                                                <button class="butn-coupon text-white" type="button" wire:loading.attr="disabled" wire:click="cancel_coupon()">{{ __('frontend::frontend.coupon.cancel') }}</button>
                                            </div>
                                        </div>
                                        <img class="cv" src="{{ Module::asset('frontend:img/cv.svg') }}">
                                        <img class="cv cv-revert" src="{{ Module::asset('frontend:img/cv.svg') }}">
                                    </div>
                                </div>
                            @endif
                            @error('coupon')
                                <div class="bg-red-200 py-1 px-2 rounded-sm flex gap-2 items-center justify-center">
                                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M20.3499 16.164L12.8347 3.11271C12.6469 2.79296 12.3788 2.52784 12.057 2.34362C11.7352 2.15941 11.3708 2.0625 10.9999 2.0625C10.6291 2.0625 10.2647 2.15941 9.94291 2.34362C9.62108 2.52784 9.35298 2.79296 9.16518 3.11271L1.64995 16.164C1.46925 16.4733 1.37402 16.8251 1.37402 17.1833C1.37402 17.5415 1.46925 17.8932 1.64995 18.2025C1.83534 18.5242 2.10298 18.7907 2.42541 18.9748C2.74784 19.1589 3.11345 19.2539 3.48471 19.2501H18.5152C18.8862 19.2536 19.2514 19.1585 19.5735 18.9744C19.8956 18.7903 20.163 18.5239 20.3482 18.2025C20.5292 17.8934 20.6247 17.5417 20.625 17.1835C20.6253 16.8253 20.5304 16.4735 20.3499 16.164ZM10.3124 8.93756C10.3124 8.75522 10.3849 8.58035 10.5138 8.45142C10.6427 8.32249 10.8176 8.25006 10.9999 8.25006C11.1823 8.25006 11.3572 8.32249 11.4861 8.45142C11.615 8.58035 11.6874 8.75522 11.6874 8.93756V12.3751C11.6874 12.5574 11.615 12.7323 11.4861 12.8612C11.3572 12.9901 11.1823 13.0626 10.9999 13.0626C10.8176 13.0626 10.6427 12.9901 10.5138 12.8612C10.3849 12.7323 10.3124 12.5574 10.3124 12.3751V8.93756ZM10.9999 16.5001C10.796 16.5001 10.5966 16.4396 10.427 16.3263C10.2574 16.2129 10.1252 16.0519 10.0472 15.8634C9.96914 15.675 9.94872 15.4677 9.98851 15.2676C10.0283 15.0676 10.1265 14.8838 10.2707 14.7396C10.415 14.5954 10.5987 14.4972 10.7988 14.4574C10.9988 14.4176 11.2062 14.438 11.3946 14.5161C11.583 14.5941 11.7441 14.7263 11.8574 14.8959C11.9707 15.0655 12.0312 15.2648 12.0312 15.4688C12.0312 15.7423 11.9225 16.0046 11.7291 16.198C11.5358 16.3914 11.2734 16.5001 10.9999 16.5001Z"
                                            fill="red" />
                                    </svg>
                                    <p class="font-bold text-12 text-red-500 text-center">{{ $message }}</p>
                                </div>
                            @enderror
                        </div>
                        <div class="px-5 mt-4 flex items-stretch">
                            <input class="input-style text-13 pl-4 rounded-r-none rounded-l-lg bg-white border-opacity-80 bg-transparent" type="text" placeholder="{{ __('frontend::frontend.coupon.enter_coupon') }}" wire:model="coupon_code" onkeydown="triggerClickOnEnter(event, 'applyCouponButton')">
                            <div class="ml-auto button-apply-coupon">
                                <x-frontend::modal.basicmodal modalName='couponApplying'>
                                    <x-slot:modalButton>
                                        <div id="applyCouponButton" class="button-primary h-full rounded-l-none px-2 py-1 text-primary font-bold capitalize" wire:click="set_apply_coupon">
                                            {{ __('frontend::frontend.coupon.apply') }}
                                        </div>
                                    </x-slot>
                                    <x-slot:modalContent>
                                        <div class="dp-block">
                                            <div class="w-100" wire:loading.block>
                                                <p class="font-medium text-center mb-4">Loading...</p>
                                            </div>
                                            @error('init_coupon')
                                                <div class="w-100 flex justify-center" wire:loading.remove.block>
                                                    <div class="bg-red-200 py-1 px-2 rounded-sm flex gap-2 items-center justify-center">
                                                        <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path
                                                                d="M20.3499 16.164L12.8347 3.11271C12.6469 2.79296 12.3788 2.52784 12.057 2.34362C11.7352 2.15941 11.3708 2.0625 10.9999 2.0625C10.6291 2.0625 10.2647 2.15941 9.94291 2.34362C9.62108 2.52784 9.35298 2.79296 9.16518 3.11271L1.64995 16.164C1.46925 16.4733 1.37402 16.8251 1.37402 17.1833C1.37402 17.5415 1.46925 17.8932 1.64995 18.2025C1.83534 18.5242 2.10298 18.7907 2.42541 18.9748C2.74784 19.1589 3.11345 19.2539 3.48471 19.2501H18.5152C18.8862 19.2536 19.2514 19.1585 19.5735 18.9744C19.8956 18.7903 20.163 18.5239 20.3482 18.2025C20.5292 17.8934 20.6247 17.5417 20.625 17.1835C20.6253 16.8253 20.5304 16.4735 20.3499 16.164ZM10.3124 8.93756C10.3124 8.75522 10.3849 8.58035 10.5138 8.45142C10.6427 8.32249 10.8176 8.25006 10.9999 8.25006C11.1823 8.25006 11.3572 8.32249 11.4861 8.45142C11.615 8.58035 11.6874 8.75522 11.6874 8.93756V12.3751C11.6874 12.5574 11.615 12.7323 11.4861 12.8612C11.3572 12.9901 11.1823 13.0626 10.9999 13.0626C10.8176 13.0626 10.6427 12.9901 10.5138 12.8612C10.3849 12.7323 10.3124 12.5574 10.3124 12.3751V8.93756ZM10.9999 16.5001C10.796 16.5001 10.5966 16.4396 10.427 16.3263C10.2574 16.2129 10.1252 16.0519 10.0472 15.8634C9.96914 15.675 9.94872 15.4677 9.98851 15.2676C10.0283 15.0676 10.1265 14.8838 10.2707 14.7396C10.415 14.5954 10.5987 14.4972 10.7988 14.4574C10.9988 14.4176 11.2062 14.438 11.3946 14.5161C11.583 14.5941 11.7441 14.7263 11.8574 14.8959C11.9707 15.0655 12.0312 15.2648 12.0312 15.4688C12.0312 15.7423 11.9225 16.0046 11.7291 16.198C11.5358 16.3914 11.2734 16.5001 10.9999 16.5001Z"
                                                                fill="red"></path>
                                                        </svg>
                                                        <p class="font-bold text-12 text-red-500 text-center">{{ $message }}</p>
                                                    </div>
                                                </div>
                                            @enderror
                                            @if (!empty($coupon))
                                                <div class="w-100" wire:loading.remove.block>
                                                    <p class="font-medium text-center mb-4">{{ __('frontend::frontend.coupon.discount') }}</p>
                                                    <p class="text-center py-2 px-4 bg-[#f5f5f5]">{{ $coupon->full_code ?? '' }}</p>
                                                    <div class="p-4">
                                                        <p class="font-bold">{{ __('frontend::frontend.coupon.condition') }}</p>
                                                        <ul class="list-disc list-inside mb-3">
                                                            <li class="text-14">
                                                                {{ __('frontend::frontend.coupon.coupon_discount_value') }} {{ $coupon->discount->discount_value ?? 0 }}{{ __('frontend::frontend.coupon.discount_type_' . $coupon->discount->discount_type) }}
                                                            </li>
                                                            @if (!empty($coupon->discount->min_price))
                                                                <li class="text-14">{{ __('frontend::frontend.coupon.condition_min_price') }} {{ $coupon->discount->min_price }} {{ __('frontend::frontend.label.thb') }}</li>
                                                            @endif
                                                            @if (!empty($coupon->discount->max_price))
                                                                <li class="text-14">{{ __('frontend::frontend.coupon.condition_max_price') }} {{ $coupon->discount->max_price }} {{ __('frontend::frontend.label.thb') }}</li>
                                                            @endif
                                                            @if (!empty($coupon->discount->min_quantity))
                                                                <li class="text-14">{{ __('frontend::frontend.coupon.condition_min_quantity') }} {{ $coupon->discount->min_quantity }} {{ __('frontend::frontend.label.items') }}</li>
                                                            @endif
                                                            @if (!empty($coupon->discount->max_quantity))
                                                                <li class="text-14">{{ __('frontend::frontend.coupon.condition_max_quantity') }} {{ $coupon->discount->max_quantity }} {{ __('frontend::frontend.label.items') }}</li>
                                                            @endif
                                                            {{-- @if (!empty($coupon->discount->categories))
                                                            <li class="text-14">
                                                            </li>
                                                        @endif
                                                        @if (!empty($coupon->discount->products))
                                                            <li class="text-14">
                                                            </li>
                                                        @endif --}}
                                                        </ul>
                                                        <p class="font-bold">{{ __('frontend::frontend.coupon.expired') }}</p>
                                                        <ul class="list-disc list-inside mb-3">
                                                            <li class="text-14">
                                                                {{ $coupon->discount->expire ? $coupon->discount->expire->format('Y-m-d') : 'ไม่มีวันหมดอายุ' }}
                                                            </li>
                                                        </ul>
                                                        <div class="px-3 pt-4 flex items-center gap-2">
                                                            <a class="button-primary-bordered w-full text-primary font-bold capitalize" href="#" @click="couponApplying = false, zControl = false">{{ __('frontend::frontend.cancel') }}</a>
                                                            <a class="button-primary w-full font-bold hover:shadow-md capitalize" href="#" @click="couponApplying = false, zControl = false" wire:click="apply_coupon">{{ __('frontend::frontend.coupon.apply') }}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </x-slot>
                                </x-frontend::modal.basicmodal>
                            </div>
                        </div>
                    @endif
                    <div class="px-1">
                        <div class="smry-space">
                            <div class="smry-wrapper">
                                <div class="smry-sm">
                                    <h4 class="font-semibold">{{ __('frontend::frontend.order.summary') }}</h4>
                                </div>
                            </div>
                            <div class="smry-wrapper">
                                <div class="smry-sm">{{ count($order->items ?? []) }} {{ __('frontend::frontend.order.items') }}</div>
                                <div class="smry-sm">{{ number_format($order->sub_total, 2) }} {{ __('frontend::frontend.label.thb') }}</div>
                            </div>
                            @if (!empty($order->total_discount))
                                <div class="smry-wrapper opacity-60">
                                    <div class="smry-sm text-12">{{ __('frontend::frontend.order.discount') }}</div>
                                    <div class="smry-sm text-12">-{{ number_format($order->total_discount, 2) }} {{ __('frontend::frontend.label.thb') }}</div>
                                </div>
                            @endif
                            @if (!empty($order->vat_total))
                                <div class="smry-wrapper opacity-60">
                                    <div class="smry-sm text-12">{{ __('frontend::frontend.order.vat') }}</div>
                                    <div class="smry-sm text-12">{{ number_format($order->vat_total, 2) }} {{ __('frontend::frontend.label.thb') }}</div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="smry-space -mt-4">
                        <div class="flex mt-2 flex-col justify-between items-center">
                            <div class="smry-wrapper w-full">
                                <div class="smry-xl font-bold text-20">{{ __('frontend::frontend.order.total') }} :</div>
                                <div class="smry-xl ">
                                    <span class="font-bold text-24">{{ number_format($order->grand_total, 2) }} </span> <span class="font-bold">{{ __('frontend::frontend.label.thb') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="px-3 pb-3">
                        {{-- <button class="button-primary w-full -mt-1 font-bold hover:shadow-md" type="submit">Proceed to checkout</button> --}}
                        <a class="button-primary w-full -mt-1 font-bold hover:shadow-md" href="{{ mwz_route('frontend.slug', ['slug' => 'checkout']) }}">{{ __('frontend::frontend.order.proceed_to_checkout') }}</a>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>