
<div class="card block"  x-data="block_customers">
    <div class="card-body p-2">
        <div class="rowq">
            <div class="col-lg-12">
                <h4 class="block-title">
                    <i class="fa fa-user-circle-o text-success"></i>
                      {{__("Customer")}}
                    <span class="float-right">
                        <button class="btn btn-outline-success btn-sm p-1 fs-12"
                                @click="addCustomer">
                            {{__("Add")}}
                            <i class="fa fa-user-plus  fs-11"></i>
                        </button>
                       <template x-if="$store.cart.customer && !active">
                           <button class="btn btn-outline-primary p-1 fs-12"
                                   @click="selectCustomer(null); active = true">
                                {{__("Change")}}
                               <i class="fa fa-pencil fs-11"></i>
                            </button>
                       </template>
                    </span>
                </h4>
            </div>
            <div class="col-lg-12 m-b-5">
                <template x-if="!$store.cart.customer">
                    <div class="form-group" @click.away="active=false;">
                        <input type="text"
                               x-model.debounce.300ms="search"
                               @focus="active=true"
{{--                               @keyup.shift.enter=""--}}
{{--                               @input.debounce.500ms="fetchResults"--}}
                               placeholder="Name, Phone Number or Email"
                               class="form-control form-control-sm m-b-0" />

                        <template x-if="active && filteredCustomers">
                            <div class="m-t-0"
                                 style="position: relative; width:100%; z-index:1;"
                                 x-cloak
                                 x-transition>
                                <div class="mt-1 border bg-white rounded"
                                     style="position: absolute; width:100% ; max-height: 300px; overflow-y:scroll">
                                    <ul class="list-group">
                                        <template x-for="(cust, index) in filteredCustomers" :key="index">
                                            <a href="javascript:void(0)" x-data="customer_show(cust)"
                                               @click="selectCustomer(customer);"
                                               style="text-decoration: none;"
                                            >
                                                <li class="list-group-item list-group-item-action cursor-pointer m-b-0 p-5s">
                                                    <div class="media">
                                                        <template x-if="customer.has_files">
                                                            <img :src="`${customer.avatar}`"
                                                                 :alt="customer.full_name"
                                                                 class="mr-2 rounded-pill"
                                                                 style="width: 50px; height: 50px" />
                                                        </template>
                                                        <template x-if="!customer.has_files">
                                                            <div class="card-img mr-2 rounded-pill d-flex align-items-center justify-content-center"
                                                                 :class="customer.fancy_image"
                                                                 style="!important; width: 50px; height: 50px">
                                                                <strong x-text="initials" class="fs-14 text-white align-content-center"></strong>
                                                            </div>
                                                        </template>
                                                        <div class="media-body">
                                                            <strong class="fs-11 list-group-item-heading text-uppercase m-b-0" x-text="customer.full_name"></strong>
                                                            <div class="fs-11">
                                                                <i class="fa fa-envelope"></i>
                                                                <span x-text="customer?.email ?? '---'"></span>
                                                            </div>
                                                            <div class="fs-11">
                                                                <i class="fa fa-phone"></i>
                                                                <span x-text="customer?.phone ?? '---'"></span>
                                                            </div>
                                                        </div>
                                                        <div class="float-right">
                                                            <template x-if="customer.balance>0">
                                                                <strong class="fs-12 text-blue">
                                                                    <span  x-text="formatNumber(customer.balance,currency)"></span>
                                                                </strong>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </li>
                                            </a>
                                        </template>
                                    </ul>
                                </div>
                            </div>
                        </template>

                        <template x-if="filteredCustomers.length <=0 && search !== ''">
                            <ul class="list-group">
                                <li class="list-group-item list-group-item-action cursor-pointer text-center"
                                    style="border: 1px solid var(--red)"
                                    @click="addCustomer">
                                    <div  x-data="not_found({
                                               type : 'html',
                                               title : '{{__("Customer Not Found.")}}',
                                               desc : `<div class='m-b-0 fs-11'>Click to add new customer</div>
                                                    <div> <i class='fs-15 fa fa-user-plus'></i></div>`,
                                             })">
                                        @include("backend.orders.create.blocs.not-found")
                                    </div>

                                </li>
                            </ul>
                        </template>

                    </div>
                </template>
            </div>
            <div class="col-lg-12">
                <template x-if="!$store.cart.customer && !active && search === ''">
                    <div  x-data="not_found({
                                               type : 'text',
                                               title : '{{__("No Customer Selected")}}',
                                               desc : '{{__('To select customer, search it by typing name,phone or email in input search.')}}',
                                             })">
                        @include("backend.orders.create.blocs.not-found")
                    </div>
                </template>
            </div>

            <template x-if="!active && $store.cart.customer">
                <div class="col-lg-12" x-transition>
                    <div class="media" x-data="customer_show($store.cart.customer)">

                        <template x-if="customer.has_files">
                            <img :src="`${customer.avatar}`"
                                 :alt="customer.full_name"
                                 class="mr-2 rounded-pill"
                                 style="width: 50px; height: 50px" />
                        </template>
                        <template x-if="!customer.has_files">
                            <div class="card-img mr-2 rounded-pill d-flex align-items-center justify-content-center"
                                 :class="customer.fancy_image"
                                 style="!important; width: 50px; height: 50px">
                                <strong x-text="initials" class="fs-14 text-white align-content-center"></strong>
                            </div>
                        </template>
                        <div class="media-body">
                            <h5 class="m-b-0 fs-12 text-uppercase text-black">
                                <span x-text="customer.full_name"></span>
                            </h5>
                            <template x-if="customer.email">
                                <div class="fs-11">
                                    <i class="fa fa-envelope"></i>
                                    <span x-text="customer.email"></span>
                                </div>
                            </template>
                            <template x-if="customer.phone">
                                <div class="fs-11">
                                    <i class="fa fa-phone"></i>
                                    <span x-text="customer.phone"></span>
                                </div>
                            </template>
                            {{-- <div class="float-left m-t-5">
                                <div class="custom-control custom-switch cursor-pointer">
                                    <input type="checkbox"
                                           class="custom-control-input cursor-pointer"
                                           data-on-color="success"
                                           x-model="customer.shipping"
                                           id="switch-shipping">
                                    <label class="custom-control-label fs-14 cursor-pointer" for="switch-shipping">{{__("Shipping")}}</label>
                                </div>
                            </div> --}}
                        </div>
                        <div class="float-right">
                            <template x-if="customer.balance>0">
                                <strong class="fs-12 float-rights text-blue">
                                    <span  x-text="formatNumber(customer.balance,currency)"></span>
                                </strong>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>

