{{-- wrapper --}}
<div>


    {{-- filtersRow --}}
    <div class="row" wire:ignore>




        {{-- 1: bank --}}
        <div class="col-3">
            <label class="form-label form--label">{{__('Client')}}</label>
            <div class="select--single-wrapper mb-4">
                <select class="form-select form--select2 init--select init--banks-select" data-instance='searchClient'
                    data-clear='true'>
                    <option value=""></option>

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

                </select>
            </div>
        </div>







        {{-- 2: FromDate --}}
        <div class="col-2">
            <label class="form-label form--label">{{__('From Date')}}</label>
            <input wire:model.live='searchFromDate' class="form-control form--input mb-4" type="date" />
        </div>






        {{-- 3: untilDate --}}
        <div class="col-2">
            <label class="form-label form--label">{{__('Until Date')}}</label>
            <input wire:model.live='searchUntilDate' class="form-control form--input mb-4" type="date" />
        </div>




    </div>
    {{-- endFilters --}}









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










    {{-- tableRow --}}
    <div class="row pt-2 align-items-center mb-4">



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



        {{-- title --}}
        <div class="col-6 text-center">
            <h4 class="mb-0 fw-bold text-solid-black">{{__('Banks Report')}}</h4>
        </div>





        {{-- counter --}}
        <div class="col-3 text-end">
            <h3 data-bs-toggle="tooltip" data-bss-tooltip="" class="fw-bold scale--self-05 counter--badge"
                title="{{ __('Number of Clients') }}">{{ $clientsList?->count() ?? 0 }}</h3>
        </div>






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








        {{-- table --}}
        <div class="col-12 mt-4">
            <div class="table-responsive memoir--table w-100" id="hearings--table">
                <table class="table table-bordered" id="hearings--table">




                    {{-- headers --}}
                    <thead>
                        <tr>
                            <th>{{ __('Bank') }}</th>

                            {{-- loop - statuses --}}
                            @foreach ($statuses ?? [] as $status)

                            <th class="th--sm">{{__($status)}}</th>

                            @endforeach
                            {{-- end statuses --}}
                        </tr>
                    </thead>
                    {{-- endHeaders --}}






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






                    {{-- tbody --}}
                    <tbody>

                        {{-- loop - clients --}}
                        @foreach ($clientsList ?? [] as $client)


                        <tr key='bank--tr-{{ $client->id }}'>

                            <td class='fw-bold'>{{ $client->{__('name')} }}</td>


                            {{-- loop - statuses --}}
                            @foreach ($statuses ?? [] as $status)

                            <td class="fw-bold">{{ ($reportFiles?->where('clientId', $client->id)?->where('status',
                                $status)?->count() ?? 0) + ($executionFiles?->where('clientId',
                                $client->id)?->where('status', $status)?->count() ?? 0) }}</td>


                            @endforeach
                            {{-- end loop - statuses --}}


                        </tr>



                        @endforeach
                        {{-- end loop - banks --}}

                    </tbody>
                </table>
                {{-- endTable --}}



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




    </div>
    {{-- end row --}}

















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










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


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

            @this.set(instance, selectValue);

        }); //end function

    </script>






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










</div>
{{-- endWrapper --}}