<style>
    .draft-item .visible {
        border: 1px solid var(--success) !important;
    }
    .draft-item .visible h5{
        color: var(--success) !important;
    }

</style>

<div class="block" >
    <div class="row">
       <div class="col-lg-12">
            @include("backend.orders.create.blocs.order.settings-schedule-draft")
       </div>
    </div>
    <div class="row">

        <div class="col-lg-12" x-show="$store.draft.offline_orders.length <= 0">
            <div class="text-center p-5" >
                <h5 class="text-danger m-b-0 fs-15"><strong>{{__("No order in offline sales.")}}</strong></h5>
                <p class="fs-11 text-muted">{{__('Go to cart tab, add products, and add order in offline sales.')}}</p>
            </div>
        </div>

        <div class="col-lg-12  mb-10">

        </div>

        <div class="col-lg-12"  x-show='$store.draft.offline_orders.length > 0'>
            <div class="row">
                <template x-for="sale in $store.draft.sales">
                    <div class="col-ssm col-xxl-3s  col-6 col-md-3s col-sm-3s col-lg-12 borders m-b-3">
                        <div class="cards sborder-left-info shadows h-100 py-2s rounded" :style="sale.card_style">
                            <div class="card-body p-1">
                                <div class="row align-items-center">
                                    <div class="col-auto mr-2">
                                        <div class="float-left">
                                            <div class="text-xs font-weight-bold text-uppercase mb-1" >
                                                <strong x-text="'('+sale.count+') '+sale.label"></strong>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col">
                                        <strong class="float-right">
                                            <i class="fs-18 font-weight-bold" :class="sale.icon"></i>
                                        </strong>
                                    </div>
                                </div>

                                <div class="row align-items-center">
                                    {{--                                                    <div class="col">--}}
                                    {{--                                                        <strong class="fs-14" x-text="formatNumber(sale.count)"></strong>--}}
                                    {{--                                                        <small class="fs-12"> x Order(s)</small>--}}
                                    {{--                                                    </div>--}}
                                    <div class="col-auto">
                                        <strong class="fs-13 mb-0 font-weight-bold" x-text="formatNumber(sale.amount,currency)"></strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <div class="row m-t-15" style="max-height:500px; overflow-y: scroll">
                <template x-for="(order,index) in $store.draft.offline_orders" :key="index">
                    <div class="col-xxl-4u col-sm-6u 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>



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



        });
    </script>
@endpush
