{{-- row --}}
<div class="row align-items-center rtl--direction mb-4" data-aos="fade" data-aos-duration="800" data-aos-once="true"
   wire:ignore>





   {{-- col --}}
   <div class="col-3" data-aos="flip-up" data-aos-duration="600" data-aos-delay="600" data-aos-once="true">
      <div data-bs-toggle="tooltip" data-bss-tooltip="" class="select--single-wrapper" title="{{__('Browse Clients')}}">
         <select class="form--select form--select2
            init--select init--select-switch" data-placeholder="{{__('Select Client')}}" data-instance='searchClient'>
            <option value="" selected=""></option>

            @foreach ($clients ?? [] as $singleClient)
            <option value="{{$singleClient->id}}">{{ $singleClient?->{__('name')} }}</option>
            @endforeach

         </select>
      </div>
   </div>
   {{-- endCol --}}







   {{-- ----------------------------------------- --}}
   {{-- ----------------------------------------- --}}









   {{-- empty --}}
   <div class="col-6"></div>






   {{-- clientName --}}
   <div class=" col-3" data-aos="flip-up" data-aos-duration="600" data-aos-delay="600" data-aos-once="true">
      <div class="search--section d-flex align-items-center justify-content-evenly">
         <h6 class="text-center fw-bold w-100 fixed-banner mb-0" data-bs-toggle="tooltip" data-bss-tooltip=""
            title="{{ __('Client Name') }}">{{ $client?->{__('name')} }}</h6>
      </div>
   </div>











   {{-- ----------------------------------------------------- --}}
   {{-- ----------------------------------------------------- --}}






   {{-- selectHandler --}}
   <script>
      $(".init--select-switch").on("change", function (event) {


            // 1.1: getValue - instance
            selectValue = $(this).select2('val');
            instance = $(this).attr('data-instance');




            // :: valid
            if (selectValue) {

                @this.set(instance, selectValue);
                @this.switchClient();

            } // end if



        }); //end function
   </script>









   {{-- ----------------------------------------------------- --}}
   {{-- ----------------------------------------------------- --}}








</div>
{{-- endRow --}}