@foreach (config('translatable.locales') as $locale)
<h6><i class="step-icon feather icon-flag"></i> {{ LaravelLocalization::getSupportedLocales()[$locale]['native'] }}</h6>
<fieldset>
	<div class="form-group">
		<div class="row">
			<label class="font-medium-1 col-md-2">{{ trans('dashboard.'.$locale.'.name') }} <span class="text-danger">*</span></label>
			<div class="col-md-10">
				{!! Form::text($locale."[name]", isset($category) ? $category->translate($locale)->name : null, ['class' => 'form-control' , 'placeholder' => trans('dashboard.'.$locale.'.name')]) !!}
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="row">
			<label class="font-medium-1 col-md-2">{{ trans('dashboard.'.$locale.'.desc') }} </label>
			<div class="col-md-10">
				{!! Form::textarea($locale."[desc]", isset($category) ? optional($category->translate($locale))->desc : null, ['class' => 'form-control' , 'placeholder' => trans('dashboard.'.$locale.'.desc')]) !!}
			</div>
		</div>
	</div>
</fieldset>
@endforeach
<h6><i class="step-icon feather icon-settings"></i> {{ trans('dashboard.general.public_data') }}</h6>
<fieldset>
	<div class="row form-group">
		<label class="font-medium-1 col-lg-2">{{ trans('dashboard.general.image') }}</label>
		<div class="col-md-10">
			<div class="form-input form-input-icon">
				<div role="iconpicker" data-cols="15" data-rows="5" data-align="center" data-unselected-class="btn-success" data-selected-class="btn-info" id="icon-picker" data-iconset="fontawesome5" data-icon="fas fa-coffee" data-arrow-prev-icon-class="fas fa-arrow-right" data-arrow-next-icon-class="fas fa-arrow-left"></div>
				{!! Form::hidden('icon_name', null, ['id' => 'icon_name']) !!}
			</div>

		</div>
	</div>
	
	
<div class="form-group">
	<div class="row">
		<label class="font-medium-1 col-lg-2">{{ trans('dashboard.general.image') }}</label>
		<div class="col-md-9">
			<div class="custom-file">
				<input type="file" name="image" class="custom-file-input" id="inputGroupFile01" onchange="readUrl(this)">
				<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
			</div>
		</div>
		<div class="col-md-1">
			@if (isset($category) && $category->image)
			<img src="{{ $category->image }}" class="img-thumbnail image-preview" style="width: 100%; height: 100px;;">
			@else
			<img src="{{ asset('dashboardAssets/images/backgrounds/placeholder_image.png') }}" class="img-thumbnail image-preview" style="width: 100%; height: 100px;">
			@endif
		</div>

	</div>
</div>

</fieldset>

@section('page_styles')
<link rel="stylesheet" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/plugins/forms/wizard.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" />
{{-- <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/> --}}
<link rel="stylesheet" href="{{ asset('dashboardAssets') }}/global/css/custom/icon-picker.css">
<style media="screen">
	#icon-picker {
		width: 100% !important;
	}
	#icon-picker .search-control{
		width: 100% !important;
	}

	#icon-picker i {
		font-size: 25px !important;
		width: 45px;
		height: 45px;
		line-height: 45px;
	}
</style>
@endsection
@section('vendor_scripts')
<script src="{{ asset('dashboardAssets') }}/vendors/js/extensions/jquery.steps.min.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/forms/validation/jquery.validate.min.js"></script>
@endsection
@section('page_scripts')
<script src="{{ asset('dashboardAssets') }}/js/scripts/forms/wizard-steps.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('dashboardAssets') }}/global/js/custom/custom-icon.js"></script>
<script>
	$('#icon-picker').on('change', function(e) {
		// var public_array = e.icon.split(" ");
		// console.log(public_array[1]);

		$('#icon_name').val(e.icon);
	});
</script>
@endsection