{{-- wrapper --}}
<div class='rtl--direction'>





    {{-- contentRow --}}
    <div class="row pt-2 align-items-center mb-4">
        <div class="col-12 px-0">




            {{-- tabsWrap --}}
            <div class="tabs--wrap" id='single-client-tabpane-2'>





                {{-- tabLinks --}}
                <ul class="nav nav-tabs equal mb-4" role="tablist" data-aos="flip-up" data-aos-duration="600"
                    data-aos-delay="600" data-aos-once="true">



                    {{-- loop - cities --}}
                    @foreach ($cities ?? [] as $key => $city)

                    <li class="nav-item" role="presentation">
                        <a class="nav-link @if ($key == 0) active @endif" role="tab" data-bs-toggle="tab"
                            href="#tab-7-{{ $key+1 }}">{{ $city->{__('name')} }}</a>
                    </li>


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



                </ul>
                {{-- end tabLinks --}}



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









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







            {{-- tabContent --}}
            <div class="tab-content" data-aos="fade" data-aos-duration="600" data-aos-delay="600" data-aos-once="true"
                wire:ignore.self>




                {{-- loop - cities --}}
                @foreach ($cities ?? [] as $key => $city)

                <div class="tab-pane fade @if ($key == 0) show active @endif no--card" role="tabpanel"
                    id="tab-7-{{ $key+1 }}">


                    <livewire:dashboard.clients.single-client.components.single-client-payment-settings.components.single-client-payment-settings-edit
                        id='{{ $client->id }}' cityId='{{ $city->id }}' key='client-payment-settings-{{ $key+1 }}' />

                </div>
                {{-- endTab --}}



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



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



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



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