@extends('admin.layouts.master')
@section('page_title',__('Add').' '.__(kebab2Title($content)))

@push('extra_styles')
	<link href="{{ asset('assets/dashboard/css/jquery-ui.min.css') }}" rel="stylesheet" type="text/css">
	<link href="{{ asset('assets/dashboard/css/bootstrap-iconpicker.min.css') }}" rel="stylesheet" type="text/css">
@endpush

@section('content')
<div class="main-content">
	<section class="section">
		<div class="section-header">
			<h1>@lang('Add') @lang(kebab2Title($content))</h1>
			<div class="section-header-breadcrumb">
				<div class="breadcrumb-item active">
					<a href="{{ route('admin.home') }}">@lang('Dashboard')</a>
				</div>
				<div class="breadcrumb-item">@lang('Add') @lang(kebab2Title($content))</div>
			</div>
		</div>

		<div class="row mb-3">
			<div class="container-fluid" id="container-wrapper">
				<div class="row justify-content-md-center">
					<div class="col-lg-12">
						<div class="card mb-4 card-primary shadow">
							<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
								<h6 class="m-0 font-weight-bold text-primary">@lang('Add') @lang(ucfirst(kebab2Title($content)))</h6>
								<a href="{{ url()->previous() }}" class="btn btn-sm btn-outline-primary"> <i class="fas fa-arrow-left"></i> @lang('Back')</a>
							</div>
							<div class="card-body">
								@if(array_key_exists('language',config("contents.$content")) && config("contents.$content.language") == 0)
									<form method="post" action="{{ route('content.store', [$content,0]) }}" enctype="multipart/form-data">
										@csrf
										@method('put')
										<div class="row">
											@foreach(config("contents.$content.field_name") as $name => $type)
												@if($type == 'file')
													<div class="col-md-6">
														<div class="form-group mb-4">
															<label class="col-form-label">@lang(ucwords(str_replace('_',' ',$name)))</label>
															<div id="image-preview" class="image-preview">
															<label for="image-upload" id="image-label">@lang('Choose File')</label>
															<input type="file" name="{{ $name }}[{{ 0 }}]" class="@error($name.'.0') is-invalid @enderror" id="image-upload"/>
															</div>
															<div class="invalid-feedback">
																@error($name.'.0') @lang($message) @enderror
															</div>
														</div>
													</div>
												@elseif($type == 'url')
													<div class="col-md-12">
														<div class="form-group">
															<label for="{{ $name }}"> @lang(ucwords(str_replace('_',' ',$name))) </label>
															<input type="{{ $type }}" name="{{ $name }}[{{ 0 }}]"
																   class="form-control @error($name.'.0') is-invalid @enderror"
																   value="{{ old($name.'.0', isset($templateMedia->description->{$name}) ? $templateMedia->description->{$name} : '') }}">
															<div class="invalid-feedback">
																@error($name.'.0') @lang($message) @enderror
															</div>
															<div class="valid-feedback"></div>
														</div>
													</div>
												@elseif($type == 'icon')
													<div class="col-md-12">
														<div class="form-group">
															<label for="{{ $name }}"> @lang(ucwords(str_replace('_',' ',$name))) </label>
															<div class="input-group input-group-sm">
																<input type="text" name="{{ $name }}[{{ 0 }}]"
																	   class="form-control icon @error($name.'.0') is-invalid @enderror"
																	   value="{{ old($name.'.0', isset($templates[0]) ? $templates[0][0]->description->{$name} : '') }}">
																<div class="input-group-append">
																	<button class="btn btn-outline-primary iconPicker" data-icon="fas fa-home" role="iconpicker"></button>
																</div>
																<div class="invalid-feedback">@error($name.'.0') @lang($message) @enderror</div>
															</div>
														</div>
													</div>
												@endif
											@endforeach
										</div>
										<button type="submit" class="btn btn-primary btn-sm btn-block">@lang('Save Change')</button>
									</form>
								@else
									<ul class="nav nav-tabs" id="myTab" role="tablist">
										@foreach($languages as $key => $language)
											<li class="nav-item">
												<a class="nav-link {{ $loop->first ? 'active' : '' }}" data-toggle="tab" href="#lang-tab-{{ $key }}" role="tab" aria-controls="lang-tab-{{ $key }}"
												   aria-selected="{{ $loop->first ? 'true' : 'false' }}">@lang($language->name)</a>
											</li>
										@endforeach
									</ul>

									<div class="tab-content mt-2" id="myTabContent">
										@foreach($languages as $key => $language)
											<div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="lang-tab-{{ $key }}" role="tabpanel">
												<form method="post" action="{{ route('content.store', [$content,$language->id]) }}" enctype="multipart/form-data">
													@csrf
													@method('put')
													<div class="row">
														@foreach(config("contents.$content.field_name") as $name => $type)
															@if($type == 'text')
																<div class="col-md-12">
																	<div class="form-group">
																		<label for="{{ $name }}"> @lang(ucwords(str_replace('_',' ',$name))) </label>
																		<input type="{{ $type }}" name="{{ $name }}[{{ $language->id }}]"
																			   class="form-control @error($name.'.'.$language->id) is-invalid @enderror"
																			   value="{{ old($name.'.'.$language->id, isset($templates[$language->id]) ? $templates[$language->id][0]->description->{$name} : '') }}">
																		<div class="invalid-feedback">
																			@error($name.'.'.$language->id) @lang($message) @enderror
																		</div>
																		<div class="valid-feedback"></div>
																	</div>
																</div>
															@elseif($type == 'file' && $key == 0)
																<div class="col-md-6">
																	<div class="form-group mb-4">
																		<label class="col-form-label">@lang(ucwords(str_replace('_',' ',$name)))</label>
																		<div id="image-preview" class="image-preview">
																		<label for="image-upload" id="image-label">@lang('Choose File')</label>
																		<input type="file" name="{{ $name }}[{{ $language->id }}]" class="@error($name.'.'.$language->id) is-invalid @enderror" id="image-upload"/>
																		</div>
																		<div class="invalid-feedback">
																			@error($name.'.'.$language->id) @lang($message) @enderror
																		</div>
																	</div>
																</div>
															@elseif($type == 'url' && $key == 0)
																<div class="col-md-12">
																	<div class="form-group">
																		<label for="{{ $name }}"> @lang(ucwords(str_replace('_',' ',$name))) </label>
																		<input type="{{ $type }}" name="{{ $name }}[{{ $language->id }}]"
																			   class="form-control @error($name.'.'.$language->id) is-invalid @enderror"
																			   value="{{ old($name.'.'.$language->id, isset($templateMedia->description->{$name}) ? $templateMedia->description->{$name} : '') }}">
																		<div class="invalid-feedback">
																			@error($name.'.'.$language->id) @lang($message) @enderror
																		</div>
																		<div class="valid-feedback"></div>
																	</div>
																</div>
															@elseif($type == 'textarea')
																<div class="col-md-12">
																	<div class="form-group">
																		<label for="{{ $name }}">@lang(ucwords(str_replace('_',' ',$name)))</label>
																		<textarea class="form-control summernote @error($name.'.'.$language->id) is-invalid @enderror"
																				  name="{{ $name }}[{{ $language->id }}]"
																				  rows="5">{{ old($name.'.'.$language->id, isset($templates[$language->id]) ? $templates[$language->id][0]->description->{$name} : '') }}</textarea>
																		<div class="invalid-feedback">
																			@error($name.'.'.$language->id) @lang($message) @enderror
																		</div>
																	</div>
																</div>
															@elseif($type == 'icon' && $key == 0)
																<div class="col-md-12">
																	<div class="form-group">
																		<label for="{{ $name }}"> @lang(ucwords(str_replace('_',' ',$name))) </label>
																		<div class="input-group input-group-sm">
																			<input type="text" name="{{ $name }}[{{ $language->id }}]"
																				   class="form-control icon @error($name.'.'.$language->id) is-invalid @enderror"
																				   value="{{ old($name.'.'.$language->id, isset($templates[$language->id]) ? $templates[$language->id][0]->description->{$name} : '') }}">
																			<div class="input-group-append">
																				<button class="btn btn-outline-primary iconPicker" data-icon="fas fa-home" role="iconpicker"></button>
																			</div>
																			<div class="invalid-feedback">@error($name.'.'.$language->id) @lang($message) @enderror</div>
																		</div>
																	</div>
																</div>
															@endif
														@endforeach
													</div>
													<button type="submit" class="btn btn-primary btn-sm btn-block">@lang('Save Change')</button>
												</form>
											</div>
										@endforeach
									</div>
								@endif
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</section>
</div>
@endsection

@push('extra_scripts')
	<script src="{{ asset('assets/dashboard/js/bootstrap-iconpicker.bundle.min.js') }}"></script>
	<script src="{{ asset('assets/dashboard/js/jquery.uploadPreview.min.js') }}"></script>
@endpush

@section('scripts')
	<script>
		'use strict'
		$(document).ready(function () {
			$.uploadPreview({
				input_field: "#image-upload",
				preview_box: "#image-preview",
				label_field: "#image-label",
				label_default: "Choose File",
				label_selected: "Change File",
				no_label: false
			});
		});
		$('.iconPicker').iconpicker({
				align: 'center', // Only in div tag
				arrowClass: 'btn-danger',
				arrowPrevIconClass: 'fas fa-angle-left',
				arrowNextIconClass: 'fas fa-angle-right',
				cols: 10,
				footer: true,
				header: true,
				icon: 'fas fa-bomb',
				iconset: 'fontawesome5',
				labelHeader: '{0} of {1} pages',
				labelFooter: '{0} - {1} of {2} icons',
				placement: 'bottom', // Only in button tag
				rows: 5,
				search: true,
				searchText: 'Search icon',
				selectedClass: 'btn-success',
				unselectedClass: ''
			}).on('change', function (e) {
				$(this).parent().siblings('.icon').val(`${e.icon}`);
		});
	</script>
@endsection
