
<div class="row">
    <div class="col-lg-12 m-b-2 m-t-2 ">
        <template x-if="!$store.cart.customer">
            <div class="form-group" @click.away="active=false;">
                <small class="float-right">
                    <strong class="fs-10 text-blue">
                        <strong x-text="'Found : '+ formatNumber(filteredCustomers.length)+' / '"></strong>
                        <strong x-text="'Total : '+formatNumber(customers.length)">/</strong>
                    </strong>
                </small>
                <input type="text"
                       x-model.debounce.300ms="search"
                       @input.debounce.300ms="filteredCustomers"
                       @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: 30px; height: 30px" />--}}
{{--                                                </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: 30px; height: 30px">--}}
{{--                                                        <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>
                                                    <template x-if="customer.balance>0">
                                                        <div class="fs-11 text-indigo">
                                                            <i class="fa fa-money"></i>
                                                            <strong x-text="formatNumber(customer.balance,currency)"></strong>
                                                        </div>
                                                    </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">
                            <x-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>">
                                <s-slot name="title">{{__("Customer Not Found.")}}</s-slot>
                            </x-not-found>

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

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

    <template x-if="!active && filled($store.cart.customer)">
        <div class="col-lg-12" x-transition>
            <div class="fs-11 order-head-info">{{__("Full Name ")}} : <strong x-text="$store.cart.customer.full_name ?? '---'"></strong></div>
            <div class="fs-11 order-head-info">{{__('Email')}} : <strong x-text="$store.cart.customer.email ?? '---'"></strong></div>
            <div class="fs-11 order-head-info">{{__('Phone')}} : <strong x-text="$store.cart.customer.phone ?? '---'"></strong></div>
            <template x-if="$store.cart.customer.balance >0">
                <div class="fs-11 order-head-info text-indigo">{{__('Balance')}} : <strong x-text="formatNumber($store.cart.customer.balance,currency)"></strong></div>
            </template>
            {{--            <div>Address : <strong x-text="$store.cart.customer.full_default_address"></strong></div>--}}
        </div>
    </template>
</div>
