
<div class="card block"  x-data="block_pos">
    <div class="card-body p-2">

        <div class="col-lg-12 form-group">
            <h4 class="block-title">
                <i class="fa fa-people-arrows text-success"></i>
                {{__("Point Of Sales")}}

                <span class="float-right">
                    <template x-if="$store.cart.billing_desk && !active">
                        <button class="btn btn-outline-primary p-1 fs-11"
                                @click="selectBillingDesk(null); active = true">
                            {{__("Change")}}
                        </button>
                    </template>
                </span>
            </h4>
        </div>

        <div class="col-lg-12 m-b-5">
            <template x-if="!$store.cart.billing_desk">
                <div class="form-group" @click.away="active=false;">
                    <input type="text"   x-model="search"
                           @focus="active=true"
                           placeholder="Name, Code or Id"
                           class="form-control form-control-sm m-b-0" />

                    <template x-if="active">
                        <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="(item, index) in filteredPointsOfSales" :key="index">
                                        <a href="javascript:void(0)"
                                           @click="selectBillingDesk(item);"
                                           style="text-decoration: none;"
                                        >
                                            <li class="list-group-item list-group-item-action cursor-pointer m-b-0 p-5s">
                                                <div class="media" x-data="pos_show(item)">
                                                    <div class="card-img mr-2 rounded-pill d-flex align-items-center justify-content-center"
                                                        :class="pos.fancy_image"
                                                        style="width: 50px; height: 50px">
                                                    <strong x-text="initials" class="fs-14 text-white align-content-center"></strong>
                                                 </div>
                                                    <div class="media-body">
                                                        <h5 class="m-b-1 fs-14 text-uppercase text-black">
                                                            <span x-text="pos.name"></span>
                                                        </h5>
                                                        <template x-if="pos.city">
                                                            <div class="fs-12">
                                                                <i class="fa fa-map-marker-alt"></i>
                                                                <span x-text="pos?.city?.name ?? '---'"></span>
                                                            </div>
                                                        </template>
                                                        <template x-if="pos.code">
                                                            <div class="fs-12">
                                                                <i class="fa fa-label"></i>
                                                                <span x-text="pos?.code ?? '---'"></span>
                                                            </div>
                                                        </template>

                                                    </div>
                                                </div>
                                            </li>
                                        </a>
                                    </template>
                                </ul>
                            </div>
                        </div>
                    </template>

                    <template x-if="filteredPointsOfSales.length <=0 && search !== ''">
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-action cursor-pointer text-center">
                                <h5 class="fs-14 text-red m-b-0"><strong>{{__("Point of sales Not Found")}}</strong></h5>
                            </li>
                        </ul>
                    </template>

                </div>
            </template>
        </div>

        <template x-if="!active">
            <div class="col-lg-12">
                <div class="media" x-data="pos_show($store.cart.billing_desk)">
                    <div class="card-img mr-2 rounded-pill d-flex align-items-center justify-content-center"
                        :class="pos.fancy_image"
                        style="width: 50px; height: 50px">
                    <strong x-text="initials" class="fs-14 text-white align-content-center"></strong>
                 </div>
                    <div class="media-body">
                        <h5 class="m-b-1 fs-14 text-uppercase text-black">
                            <span x-text="pos.name"></span>
                        </h5>
                        <template x-if="pos.city">
                            <div class="fs-12">
                                <i class="fa fa-map-marker-alt"></i>
                                <span x-text="pos?.city?.name ?? '---'"></span>
                            </div>
                        </template>
                        <template x-if="pos.code">
                            <div class="fs-12">
                                <i class="fa fa-label"></i>
                                <span x-text="pos?.code ?? '---'"></span>
                            </div>
                        </template>

                    </div>
                </div>
            </div>
        </template>
        <div class="col-lg-12">
            <template x-if="!point_of_sale && (!active && search === '')">
                <div class="text-center p-2" >
                    <h5 class="text-red m-b-0 fs-15"><strong>{{__("No Point of Sales Selected.")}}</strong></h5>
                    <p class="text-muted fs-11">{{__("To select point of sales, search it by typing name,phone or email in input search.")}}</p>
                </div>
            </template>
        </div>

    </div>
</div>




@push("js")
    <script>

        document.addEventListener('alpine:init', () => {
             const pointsOfSales = @json($points_of_sales)


             Alpine.data('pos_show', (pos = {})=>({
                pos : null,

                init(){
                    this.pos = pos;

                    if (this.pos && !('fancy_image' in this.pos)){
                        this.pos.fancy_image = "bg-"+randomSystemCssVarColor()
                    }
                },
                 get initials() {
                     if (this.pos){
                         const [fi, l] = this.pos.name.split(' ')
                         if (!l) return fi.charAt(0).toUpperCase()
                         return `${fi.charAt(0).toUpperCase()}${l.charAt(0).toUpperCase()}`
                     }
                     return "---";
                }
            }));

            Alpine.data('block_pos', (allCustomers = []) => ({

                async init (){
                    const alpine = this;
                    alpine.points_of_sales = alpine.$store.data_page.billing_desks ;
                    alpine.point_of_sale = alpine.$store.cart?.point_of_sale ?? null ;


                  //  alpine.$watch('point_of_sale', (value) => {  })
                },

                async refresh (){
                    this.customers = await request("{{route("admin.users.index")}}"+"?no_dt=true")
                },
                point_of_sale : null,
                active : false,
                search : "",
                points_of_sales : [],

                get filteredPointsOfSales (){
                    const search = this.search.toLowerCase();
                    let points_of_sales = this.points_of_sales;
                    if(search){
                        return points_of_sales.filter(
                                        pos => (
                                            pos.id.toString().startsWith(search) ||
                                            pos.code.toLowerCase().startsWith(search) ||
                                            pos.name.toLowerCase().startsWith(search)
                                        )
                                    );

                    }
                    return points_of_sales;
                },


                selectBillingDesk(pos) {
                    this.$dispatch('cart.order.pos.selected', pos);
                    this.point_of_sale = pos;
                    this.active = false;
                },
             }));

        });
    </script>
@endpush
