{{-- @include('admin.includes.translatable-fields', ['translatedAttributesMeta' => App\Models\Book::$translatedAttributesMeta]) --}}

<div class="row">
	<div class="col-sm-12">
		<h3>Translations</h3>
	</div>
</div>
<div class="row">
	<div class="col-sm-12"> 
		<div class="tabs-vertical-env"> 
			<ul class="nav tabs-vertical">
			 	@foreach(config('translatable.locales') as $locale)
				<li class="{{ $loop->first ? 'active' : '' }}">
					<a href="#v-{{$locale}}" data-toggle="tab" aria-expanded="true">{{ config('app.allowedLanguages')[$locale] }}</a>
				</li>
				@endforeach 
			</ul> 
			<div class="tab-content">
				@foreach(config('translatable.locales') as $locale)
					<div class="tab-pane {{ $loop->first ? 'active' : '' }}" id="v-{{$locale}}"> 
						<label class="col-sm-2 control-label" for="field-1"></label>
						<div class="col-sm-10 text-left">
							<h3>{{strtoupper($locale)}}</h3>
						</div>
						@foreach(collect($translatedAttributesMeta)->sortBy('order') as $fieldName => $fieldMeta)
						@if(!isset($autoTranslate))
							<div class="form-group">
								<label class="col-sm-2 control-label" for="field-1">
									{{$fieldMeta['label']}}
								</label>
								<div class="col-sm-9">
									{!!Form::{$fieldMeta['type']}(
										$locale . '[' . $fieldName . ']', 
										isset($object) ? optional($object->translate($locale))->{$fieldName} : null, 
										['class' => $fieldMeta['type'] == 'textarea' ? 'froala' : 'form-control countInput']
									)!!}
								</div>
								<div class="col-sm-1">
									@if($fieldMeta['type'] == 'text')
										<span class="countResult">0</span> / <span style="color: red;">
											{{isset($fieldMeta['max_chars']) ? $fieldMeta['max_chars'] : '200'}}
										</span>
									@endif
								</div>
							</div>
						@else
							@livewire('admin.input-field-translate', [
								'object' => isset($object) ? $object : null,
								'fieldName' => $fieldName,
								'fieldMeta' => $fieldMeta,
								'locale' => $locale
							])
						@endif
					@endforeach
					</div> 
				@endforeach
			</div> 
		</div> 
	</div>
</div>

<script type="text/javascript">
	$(function() {

	$('.countInput').each(function() {
		var inpLength = $(this).val().length;
		var resultPlace = $(this).closest('.form-group').find('.countResult');
			resultPlace.text(inpLength);
		});

		$('.countInput').keyup(function() {
			getSymbolsCount($(this));
		});
	});

	function getSymbolsCount(elem) {
		var inpLength = elem.val().length;
		var resultPlace = elem.closest('.form-group').find('.countResult');
			resultPlace.text(inpLength);
	}
</script>