
<div class="card shadows h-100 p-1"
     :class=" (response) ? ((synchronized) ? 'border-left-success' : 'border-left-danger') : 'border-left-secondary'">
    <div class="card-body p-1">
        <div class="rows no-gutters align-items-center">
            <div class="row mb-1">
                <div class="col">
                    <h5 class="mb-1 fs-15 text-success" x-text="order?.customer?.full_name ?? '----'"></h5>
                </div>
                <div class="col">
                     <div class="float-right">
                        <small class="fs-9" x-text="order?.config?.date ?? '---'"></small>
{{--                        <small class="fs-10"> {{__("At")}} </small>--}}
{{--                        <small class="fs-10" x-text="order?.config?.time?? '---'"></small>--}}
                     </div>
                </div>
            </div>
            <div class="row mb-1">
                <div class="col">
                    <p class="mb-1 fs-13 text-muteds">
                        <strong class="text-black">
                           <span class="border-right m-r-2">
{{--                               <i class="fs-11 fa fa-briefcase"></i>--}}
                               <span x-text="formatNumber(order.items.length)"></span>
                               <span> x Product(s) </span>
                           </span>
                           <span class="m-r-2">
{{--                               <i class="fs-11 fa fa-money"></i>--}}
                               <span x-text="formatNumber(order.allTotal.total.value,currency)"></span>
                           </span>
                        </strong>
                   </p>
                </div>
                <div class="colsp"></div>
            </div>
           <template x-if="synchronizable">
               <div class="row mb-1">
                   <div class="col-auto">
                       <div class="float-left">
                           <strong class="fs-12 badges"  :class="(response) ? ( (synchronized) ? 'bg-greens' : 'bg-reds') : 'badge-secondarys'">

                           <span class="text-underline cursor-pointer"
                                 role="tooltip"
{{--                                 :title="response?.message ?? ''"--}}
{{--                                 data-html="true"--}}
                                 data-toggle="tooltip"
                                 data-placement="top"
                                 data-content="response?.message ?? ''"
{{--                                 data-trigger="focus"--}}
                           >
                                 <template x-if="!response">
                                     <span class="fs-11 fa fa-clock-o m-l-5 text-muted"></span>
                                 </template>
                                 <template x-if="response">
                                     <span class="fs-11 fa m-l-5" :class="synchronized ? 'text-green fa-check-circle' : 'text-red fa-ban'"></span>
                                 </template>
                                <span class="fs-11 text-muted" x-text="synchronisation_label"></span>


                           </span>
                           </strong>
                       </div>
                   </div>
                   <div class="col">
                       <div class="float-right">
                           <template x-if="ref_id">
                               <strong class="fs-12 text-green" x-text="ref_id"> </strong>
                           </template>
                       </div>
                   </div>

               </div>
           </template>
            <div class="row mb-1">
                <div class="col">
                    <div class="float-left m-t-5">
                        {{-- <div class="custom-control custom-switch cursor-pointer">
                            <input type="checkbox"
                                   disabled
                                   x-model="order.config.check_stock"
                                   class="custom-control-input cursor-pointer"
                                   :id="'switch-displayed-order-draft-'+index">
                            <label class="custom-control-label fs-13 cursor-pointer m-t-5"
                                   :for="'switch-displayed-order-draft-'+index">
                                Use Stock
                            </label>
                        </div> --}}

                    </div>

                </div>
                <div class="col-auto">
                    <div class="float-right" x-show="count  && order.customer" >
                        <span>
                             <span>
                                <button type="button"
                                        class="btn btn-light btn-sm fs-12"
                                        @click="confirmAction({
                                                    text : '{{__('Open this order in cart ?')}}',
                                                    preConfirm : ()=> {
                                                        $dispatch('cart.order.opened-from-draft',order);
                                                        $store.draft.remove(order);
                                                    }
                                                })">
                                    <i class="fa fa-eye fs-12"></i>
                                </button>
                             </span>

                            <template x-if="savable">
                                  <button type="button"
                                          class="btn btn-success btn-sm fs-12"
                                          @click="">
                                 <i class="fa fa-send fs-12"></i>
                             </button>
                            </template>
{{--                             <button type="button"--}}
{{--                                 class="btn btn-warning btn-sm fs-12"--}}
{{--                                 @click="printOrder">--}}
{{--                                 <i class="fa fa-print fs-12"></i>--}}
{{--                             </button>--}}
                        </span>
{{--                         <button type="button"--}}
{{--                                 class="btn btn-dark btn-sm fs-12"--}}
{{--                                 @click="">--}}
{{--                             <i class="fa fa-luggage-cart fs-12"></i>--}}
{{--                         </button>--}}
                         <button type="button"
                                 class="btn btn-danger btn-sm fs-12"
                                 @click="$store.draft.remove(order)">
                             <i class="fa fa-trash fs-12"></i>
                         </button>
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>
