@php
    $overallIndex = 1;
    $hasTranslations = false;
@endphp

@foreach($languages as $language)
    @if(count($language->translations) > 0)
        @php
            $hasTranslations = true;
        @endphp
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header">
                    <h4 class="m-0 text-start">{{ ucwords(__($language->name)) }}</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive text-center user_tables">
                        <table class="table table-bordered" id="bstable_{{ $language->id }}" data-icons="icons" data-icons-prefix="bi"  table-for="user-management" data-filter-control="true"  data-pagination="true" data-search="false" data-toggle="table"  data-unique-id="id" data-show-search-clear-button="true" data-show-button-text="true">
                            <thead>
                            <tr>
                                <th title="#" data-field="SrNo" data-sortable="true" data-switchable="false" class="id">{{ __('#') }}</th>
                                <th data-field="Key" title="{{ __('Key') }}" data-filter-control="input" data-filter-control-placeholder="Key" data-sortable="true">
                                    {{ __('Key') }}</th>
                                <th data-field="Value" title="{{ __('Value') }}" data-filter-control="input" data-filter-control-placeholder="Value" data-sortable="true">
                                    {{ ucwords(__($language->name)) }}</th>
                                <th>{{ __('Action') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($language->translations as $translation)
                                <tr data-translation-id="{{ $translation->id }}">
                                    <td>{{ $loop->index + 1 }}</td>
                                    <td>{{ $translation->key }}</td>
                                    <td>
                                        <input type="text" class="form-control language-input input_{{ $overallIndex }} form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-white border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11"
                                               name="{{ $translation->language_id }}[{{ $translation->key }}]"
                                               data-language="{{ $translation->language_id }}"
                                               value="{{ $translation->value }}"  />
                                    </td>
                                    <td>
                                        @can('translation-approval-approve')
                                            <a href="javascript:void(0)" class="btn btn-success text-white btn-sm save-btn" data-toggle="tooltip" data-placement="top" title="Approve"
                                               data-id="{{ $overallIndex }}"
                                               data-index="{{ $language->id }}"
                                               data-row="{{ $loop->index + 1 }}"
                                               data-translate-id="{{ $translation->id }}"
                                               data-status="Approve">{!! renderIconHtml('approve') !!}{{__('Approve')}}</a>
                                        @endcan
                                        @can('translation-approval-reject')
                                            <a href="javascript:void(0)" class="btn btn-danger btn-sm text-white save-btn" data-toggle="tooltip" data-placement="top" title="Reject"
                                               data-id="{{ $overallIndex }}"
                                               data-index="{{ $language->id }}"
                                               data-row="{{ $loop->index + 1 }}"
                                               data-translate-id="{{ $translation->id }}"
                                               data-status="Reject">{!! renderIconHtml('reject') !!}{{__('Reject')}}</a>
                                        @endcan
                                    </td>
                                </tr>
                                @php
                                    $overallIndex++;
                                @endphp
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endforeach

@if (!$hasTranslations)
    <div class="col-12 text-center">
        <span class="mt-2">{{__('No matching records found')}}</span>
    </div>
@endif