@if (count($languages) > 0)

@php
    $idPrefix = isset($idPrefix) ? $idPrefix : '';
@endphp

@include('layouts.components.section-marker', ['section_name' => 'Traduções'])
    <div class="row">
        <div class="col">
            <div class="card pt-4 px-4">
                <ul class="nav nav-tabs" role="tablist">
                    @foreach ($languages as $index => $language)
                        <li class="nav-item">
                            <a class="nav-link {{ $index === 0 ? 'active' : '' }}" data-bs-toggle="tab" href="#{{ $idPrefix }}{{$language->language_code}}">
                                @if($language->image)
                                    <img src="{{ asset('storage/' . $language->image) }}" alt="{{$language->language_code}}" />
                                @else
                                    {{strtoupper($language->language_code)}}
                                @endif
                            </a>
                        </li>
                    @endforeach
                </ul>
                <div class="tab-content mb-4" style="margin-top: 0px !important;">
                    @php
                        foreach ($translatable as $field) {
                            foreach ($translations as $translation) {
                                foreach ($languages as $language) {
                                    if ($translation->language_id === $language->id) {
                                        if ($translation->column_name === $field['name']) {
                                            $field['translation'][$language->language_code] = $translation->translated_text;
                                        }
                                    }
                                }
                            }
                            $newTranslations[] = $field ?? [];
                        }
                        $errorsList = [];
                    @endphp
                    @foreach ($languages as $index => $language)
                        <div id="{{ $idPrefix }}{{ $language->language_code }}" class="tab-pane {{ $index === 0 ? 'active' : '' }}"><br>
                            <h3>Traduções do conteúdo para {{ $language->language_name }}</h3>
                            @foreach ($newTranslations as $field)
                                <label for="{{ $field['name'] }}_{{ $language->language_code }}">{{ $field['label'] }}</label>
                                @if ($field['type'] === 'textarea')
                                    <textarea class="form-control mb-3" id="{{ $field['name'] }}_{{ $language->language_code }}" name="{{ $field['name'] }}_{{ $language->language_code }}">{{ old($field['name'] . "_" . $language->language_code, $field['translation'][$language->language_code] ?? '') }}</textarea>
                                @else
                                    <input type="{{ $field['type'] }}" class="form-control mb-3" id="{{ $field['name'] }}_{{ $language->language_code }}" name="{{ $field['name'] }}_{{ $language->language_code }}" value="{{ old($field['name'] . "_" . $language->language_code, $field['translation'][$language->language_code] ?? '') }}">
                                @endif
                                @if ($errors->has($field['name'] . "_" . $language->language_code))
                                    @php
                                        $errorsList[] = $errors->first($field['name'] . "_" . $language->language_code);
                                    @endphp
                                @endif
                            @endforeach
                        </div>
                    @endforeach
                    @if (count($errorsList) > 0)
                        @include('layouts.components.section-marker', ['section_name' => 'Avisos'])
                        <div class="error handle-error">
                            @foreach ($errorsList as $error)
                                <div class="error handle-error">{{ $error }}</div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endif