<div class="block" >
    <div class="row">
        <template>

        </template>
        <div class="col-lg-12"
             x-show="blank($store.draft.draft_orders)">
            <x-not-found>
                <x-slot name="title">{{__("No order in draft.")}}</x-slot>
                <x-slot name="desc">{{__("Go to cart tab, add products, and copy order to draft.")}}</x-slot>
            </x-not-found>
        </div>
        <div class="col-lg-12" x-show='filled($store.draft.draft_orders)' x-transition>
{{--            <div x-data="sales({table_id : 'table-draft-sales',storage :'draft'})">--}}
            <div>
                <div class="row">
                    <div class="col-lg-12">
{{--                        @include("backend.orders.create.blocs.sales")--}}
                        <div class="row m-t-15" style="max-height:500px; overflow-y: scroll">
                            <template x-for="(order,index) in $store.draft.draft_orders" :key="index">
                                <div class="col-xxl-6 col-lg-6 col-sm-12 mb-2" x-data="order_details(order,{storage:'draft',editable : false})">
                                    @include("backend.orders.create.blocs.order.card-show-order")
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@push("js")
    <script>
        document.addEventListener('alpine:init', () => {

        });
    </script>
@endpush
