
<div class="row">
    <template x-if="count > 0" x-transition>
        <div class="col-lg-12 m-b-10"  style="display: table-row">
            <center class="m-b-5">
                <img src="{{url("img/logo-bw.png")}}" alt="Owner Logo" style="height: 50px; width:150px;">
            </center>
            <div class="rows d-flex justify-content-between">
                <div classs="col-lg-6 col-sm-6 col-xs-6s "
                     styles="display: table-cell ; width: 50% ; align-content: start; border-right: 2px solid #eee">
                    <div class="float-left">
                        <h6 class="m-b-1 fs-14"><strong>Owner Infos</strong></h6>
                        {{--                            <div><strong>{{getSettingsOf("owner_name")}}</strong></div>--}}
                        <div class="fs-11 order-head-info">Phone : <strong>{{getSettingsOf("phone_number")}}</strong></div>
                        <div class="fs-11 order-head-info">Adress : <strong>{{getSettingsOf("address2")}}</strong></div>
                        <div class="fs-11 order-head-info">Email : <strong>{{getSettingsOf("site_email")}}</strong></div>
                    </div>
                </div>
                <div classs="col-lg-6 col-sm-6 col-xs-6" styles="display: table-cell ; width: 50%;">
                    <template x-if="customer">
                        <div class="float-right fs-11" >
                            <h6 class="m-b-1 fs-13"><strong>Customer Infos</strong></h6>
                            <div class="fs-11 order-head-info">Full Name : <strong x-text="customer.full_name ?? '---'"></strong></div>
                            <div class="fs-11 order-head-info">Email : <strong x-text="customer.email ?? '---'"></strong></div>
                            <div class="fs-11 order-head-info">Phone : <strong x-text="customer.phone ?? '---'"></strong></div>
                            {{--                                                   <div>Address : <strong x-text="$store.cart.customer.full_default_address"></strong></div>--}}
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </template>

    <div class="col-lg-12 m-b-5">

        <template x-if="count > 0">
            <table class="table table-bordereds table-condensed" style="border: none">
                <thead>
                <tr>
                    <th class="left fs-12">Product</th>
                    <th class="right fs-12">P.U</th>
                    {{-- <th class="right fs-12">Qty</th> --}}
                    <th class="right fs-12">Amount</th>
                </tr>
                </thead>
                <tbody>
                <template x-for="(item,index) in items" :key="index">
                    <tr class="fs-12">
                        <td :class="is_cart ? 'cursor-pointer' : ''" class="fs-12">
                            <span :class="is_cart ? 'text-success text-underline' : ''">
                                <span x-text="formatNumber(item.qty)"></span>
                                <span> x </span>
                                <span class="text-uppercase" x-text="item.name"></span>
                            </span>
                        </td>
                        <td class="fs-12 right"> <span x-text="formatNumber(item.price)"></span></td>
                        <td class="fs-12 right">
                            <span x-text="formatNumber(item.amount)"></span>
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </template>

        <template x-if="count <= 0">
            <div class="text-center p-5" >
                <h5 class="text-danger m-b-0 fs-15"><strong>No item found.</strong></h5>
                <p class="text-muted fs-11">For add product in order, you may to click on any item in products list</p>
            </div>
        </template>
        <template x-if="count > 0">
            <table class="table table-borderedq table-condensed">
                <thead>
                <template x-for="T in Object.values(allTotal)">
                    <tr>
                        <th :class="T.className" class="left" x-text="T.label"></th>
                        <th :class="T.className" class="right" x-text="formatNumber(T.value,currency)"></th>
                    </tr>
                </template>
                </thead>
            </table>
        </template>

    </div>

    <template x-if="count > 0">
        <div class="p-1 d-print-none" x-data="draft_item_actions(index)">

                <button  class="btn btn-success rounded-sm btn-block text-uppercase btn-action-action-order"
                        @click="await submitOrder()">
                Submit order
                <i class="m-l-2 fa fa-send-o"></i>
            </button>
            <button class="btn btn-warning rounded-sm btn-block text-uppercase  btn-action-action-order"
                    @click="printOrder">
                Print  order
                <i class="m-l-2 fa fa-print"></i>
            </button>
            <button class="btn btn-dark rounded-sm btn-block text-uppercase  btn-action-action-order"
                    @click="copyToDraft">
                Remove to Draft
                <i class="m-l-2 fa fa-archway"></i>
            </button>
        </div>
    </template>
</div>
