@extends('dashboard.layouts.main')

@section('title', getSiteName() . ' - Dashboard - Edit About Us')

@section('content')
    <form action="{{ route('about-update') }}" method="POST" enctype="multipart/form-data" class="pc-content">
        <!-- [ Main Content ] start -->
        <div class="row pt-0">
            @if(session('success'))
                <div class="col-12">
                    <div class="alert alert-success" role="alert">
                        <div class="alert-text">
                            {{ session('success') }}
                        </div>
                    </div>
                </div>
            @endif
            <div class="page-header-title">
                <h2 class="mb-3">{{ __('About Us') }}</h2>
                <div class="permalink mb-3">
                    @php
                        if (isset($page->slug)) {
                            $slulg = $page->slug;
                        } else {
                            $slulg = '#';
                        }
                    @endphp
                    <div class="permalink d-flex justify-content-between">
                        <strong>{{ __('View Page: ') }}<a href="{{ url('/' . $slulg) }}" target="_blank">{{ url('/' . $slulg) }}</a></strong>
                        @can('edit pages')
						<button type="submit" class="btn btn-primary me-2 w-auto">{{ __('Update') }}</button>
						@endcan
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            @csrf
            <div class="col-md-12 col-lg-12 col-xl-12">
                <div class="row">
                    <!-- [ sample-page ] start -->
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h5>{{ __('Edit page') }}</h5>
                            </div>
                            <div class="card-body">
								<div class="form-group">
									<div class="input-group langButtons">
										<select name="activeLanguage" class="form-control">
											@foreach(getLanguageList() as $language)
												@foreach($info as $data)
													@if($data->language_id == $language->id)
													<option value="{{ $language->id }}" @if($data->code == config('app.default_admin_language_code')) selected @endif>{{ $language->title }}</option>
													@endif
												@endforeach
											@endforeach
										</select>
										<select name="language" class="form-control d-none">
											<option value="0">{{ __('Select Language') }}</option>
											@foreach(getLanguageList() as $language)
											<option value="{{ $language->id }}">{{ $language->title }}</option>
											@endforeach
										</select>
										<button id="addLanguage" class="btn btn-outline-secondary  d-none" type="button">{{ __('Add Language') }}</button>
										<button id="showLanguage" class="btn btn-secondary" type="button">
											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
										</button>
									</div>
								</div>
								<div class="langContainer part1">
									@foreach($info as $data)
										<div class="langBox @if($data->code == config('app.default_admin_language_code')) active default @endif" data-id="{{$data->language_id}}">
											@if($data->code != config('app.default_admin_language_code'))
											<div class="form-group">
												<button class="deleteLanguage btn btn-outline-secondary" type="button">{{ __('Delete Language') }}</button>
											</div>
											@endif
											<div class="form-group">
												<label class="form-label" for="title">{{ __('Page Title') }}</label>
												<input type="text" class="form-control" id="title" name="info[{{$data->language_id}}][title]" value="{{ isset($data->title) ? $data->title : old('info.'.$data->language_id.'.title') }}">
												@error('info.'.$data->language_id.'.title')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
											<div class="form-group">
												<label class="form-label" for="seo_h1">{{ __('H1') }}</label>
												<input id="info-{{$data->language_id}}-seo_h1" type="text" class="form-control" id="seo_h1" name="info[{{$data->language_id}}][seo_h1]" value="{{ isset($data->seo_h1) ? $data->seo_h1 : old('info.'.$data->language_id.'.seo_h1') }}">
												@error('info.'.$data->language_id.'.seo_h1')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
											<div class="form-group">
												<label class="form-label" for="meta-title">{{ __('Meta Title') }}</label>
												<input type="text" class="form-control" id="meta-title" name="info[{{$data->language_id}}][meta_title]" value="{{ isset($data->meta_title) ? $data->meta_title : old('info.'.$data->language_id.'.meta_title') }}">
												@error('info.'.$data->language_id.'.meta_title')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
											<div class="form-group">
												<label class="form-label" for="meta-keywords">{{ __('Meta Keywords') }}</label>
												<textarea class="form-control" name="info[{{$data->language_id}}][meta_keywords]" id="meta-keywords" rows="4">{{ isset($data->meta_keywords) ? $data->meta_keywords : old('info.'.$data->language_id.'.meta_keywords') }}</textarea>
												@error('info.'.$data->language_id.'.meta_keywords')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
											<div class="form-group">
												<label class="form-label" for="meta-description">{{ __('Meta Description') }}</label>
												<textarea class="form-control" id="meta-description" name="info[{{$data->language_id}}][meta_description]" rows="4" >{{ isset($data->meta_description) ? $data->meta_description : old('info.'.$data->language_id.'.meta_description') }}</textarea>
											</div>
											<div class="form-group">
												<label class="form-label" for="page-content">{{ __('Page Content') }}</label>
												<textarea class="form-control tinymce-editor" id="page-content" name="info[{{$data->language_id}}][content]" rows="4">{{ isset($data->content) ? $data->content : old('info.'.$data->language_id.'.content') }}</textarea>
											</div>
										</div>
									@endforeach
								</div>
								<div class="form-group d-none">
									<label class="form-label" for="slug">{{ __('Page URL') }}</label>
									<input type="text" class="form-control" id="slug" name="slug" value="{{ isset($page->slug) ? $page->slug : old('slug') }}">
									@error('slug')
										<div class="alert-danger mt-2">{{ $message }}</div>
									@enderror
								</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h5>{{ __('Edit Left Column') }}</h5>
                            </div>
                            <div class="card-body">
								<div class="langContainer part2">
									@foreach($info as $data)
										<div class="langBox @if($data->code == config('app.default_admin_language_code')) active default @endif" data-id="{{$data->language_id}}">
											<div class="form-group">
												<label class="form-label" for="left-title">{{ __('Title') }}</label>
												<input id="left-title" type="text" class="form-control" name="info[{{$data->language_id}}][left_title]" value="{{ isset($data->left_title) ? $data->left_title : old('info.'.$data->language_id.'.left_title') }}">
												@error('info.'.$data->language_id.'.left_title')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
											<div class="form-group">
												<label class="form-label" for="left-excerpt">{{ __('Excerpt') }}</label>
												<textarea id="left-excerpt" class="form-control" name="info[{{$data->language_id}}][left_excerpt]" rows="3" >{{ isset($data->left_excerpt) ? $data->left_excerpt : old('info.'.$data->language_id.'.left_excerpt') }}</textarea>
												@error('info.'.$data->language_id.'.left_excerpt')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
										</div>
									@endforeach
								</div>
                                <div class="image-block pt-1 mb-3">
                                    <h6>{{ __('Column Image') }}</h6>
                                    <div class="row">
                                        <div class="col-12 form-group">
                                            <div class="imageUploadBox">
												@if(old('left_image'))
												<img src="{{ old('left_image') ? asset('storage/uploads/tmp/' . old('left_image')) : asset('assets/images/application/image.svg') }}" alt="Image" class="fileImage" data-default="{{ asset('assets/images/application/image.svg') }}">
												@else
												<img src="{{ $page->left_image ? resizeImage('pages/' . $page->id . '/', $page->left_image, 220, 256, 'resize') : asset('assets/images/application/image.svg') }}" alt="Preview Image" class="fileImage" data-default="{{ asset('assets/images/application/image.svg') }}">
												@endif
												<button class="btn btn-primary selectFile" type="button">
														<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
												</button>
											</div>
											<input type="text" readonly value="{{ old('left_image') ? old('left_image') : $page->left_image }}" name="left_image" class="form-control boxUpload d-none" />
											<input type="file" class="file-uploader d-none" accept="image/jpeg,image/jpg,image/png,image/webp">
											@error('left_image')
											<div class="alert-danger mt-2">{{ $message }}</div>
											@enderror
                                        </div>
                                    </div>
                                </div>
								<div class="langContainer part3">
									@foreach($info as $data)
										<div class="langBox @if($data->code == config('app.default_admin_language_code')) active default @endif" data-id="{{$data->language_id}}">
											<div class="form-group">
												<label class="form-label" for="left-image-description">{{ __('Image Description') }}</label>
												<textarea id="left-image-description" class="form-control tinymce-editor" name="info[{{$data->language_id}}][left_image_description]" rows="3" >{{ isset($data->left_image_description) ? $data->left_image_description : old('info.'.$data->language_id.'.left_image_description') }}</textarea>
												@error('info.'.$data->language_id.'.left_image_description')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
											<div class="form-group">
												<label class="form-label" for="left-main-content">{{ __('Main Content') }}</label>
												<textarea id="left-main-content" class="form-control tinymce-editor" name="info[{{$data->language_id}}][left_content]" rows="3" >{{ isset($data->left_content) ? $data->left_content : old('info.'.$data->language_id.'.left_content') }}</textarea>
												@error('info.'.$data->language_id.'.left_content')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
										</div>
									@endforeach
									</div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12 col-md-12 col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h5>{{ __('Edit Right Column') }}</h5>
                            </div>
                            <div class="card-body">
                                <div class="langContainer part4">
									@foreach($info as $data)
										<div class="langBox @if($data->code == config('app.default_admin_language_code')) active default @endif" data-id="{{$data->language_id}}">
											<div class="form-group">
												<label class="form-label" for="right-title">{{ __('Title') }}</label>
												<input id="right-title" type="text" class="form-control" name="info[{{$data->language_id}}][right_title]" value="{{ isset($data->right_title) ? $data->right_title : old('info.'.$data->language_id.'.right_title') }}">
												@error('info.'.$data->language_id.'.right_title')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
											<div class="form-group">
												<label class="form-label" for="right-excerpt">{{ __('Excerpt') }}</label>
												<textarea id="right-excerpt" class="form-control" name="info[{{$data->language_id}}][right_excerpt]" rows="3" >{{ isset($data->right_excerpt) ? $data->right_excerpt : old('info.'.$data->language_id.'.right_excerpt') }}</textarea>
												@error('info.'.$data->language_id.'.right_excerpt')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
										</div>
									@endforeach
								</div>
                                <div class="image-block pt-1 mb-3">
                                    <h6>{{ __('Column Image') }}</h6>
                                    <div class="row">
                                        <div class="col-12 form-group">
                                            <div class="imageUploadBox">
												@if(old('right_image'))
												<img src="{{ old('right_image') ? asset('storage/uploads/tmp/' . old('right_image')) : asset('assets/images/application/image.svg') }}" alt="Image" class="fileImage" data-default="{{ asset('assets/images/application/image.svg') }}">
												@else
												<img src="{{ $page->right_image ? resizeImage('pages/' . $page->id . '/', $page->right_image, 220, 256, 'resize') : asset('assets/images/application/image.svg') }}" alt="Preview Image" class="fileImage" data-default="{{ asset('assets/images/application/image.svg') }}">
												@endif
												<button class="btn btn-primary selectFile" type="button">
														<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
												</button>
											</div>
											<input type="text" readonly value="{{ old('right_image') ? old('right_image') : $page->right_image }}" name="right_image" class="form-control boxUpload d-none" />
											<input type="file" class="file-uploader d-none" accept="image/jpeg,image/jpg,image/png,image/webp">
											@error('right_image')
											<div class="alert-danger mt-2">{{ $message }}</div>
											@enderror
                                        </div>
                                    </div>
                                </div>
								 <div class="langContainer part5">
									@foreach($info as $data)
										<div class="langBox @if($data->code == config('app.default_admin_language_code')) active default @endif" data-id="{{$data->language_id}}">
											<div class="form-group">
												<label class="form-label" for="right-image-description">{{ __('Image Description') }}</label>
												<textarea id="right-image-description" class="form-control tinymce-editor" name="info[{{$data->language_id}}][right_image_description]" rows="3" >{{ isset($data->right_image_description) ? $data->right_image_description : old('info.'.$data->language_id.'.right_image_description') }}</textarea>
												@error('info.'.$data->language_id.'.right_image_description')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
											<div class="form-group">
												<label class="form-label" for="right-main-content">{{ __('Main Content') }}</label>
												<textarea id="right-main-content" class="form-control tinymce-editor" name="info[{{$data->language_id}}][right_content]" rows="3" >{{ isset($data->right_content) ? $data->right_content : old('info.'.$data->language_id.'.right_content') }}</textarea>
												@error('info.'.$data->language_id.'.right_content')
													<div class="alert-danger mt-2">{{ $message }}</div>
												@enderror
											</div>
										</div>
									@endforeach
								</div>
                            </div>
                        </div>
                    </div>
                    <!-- [ sample-page ] end -->
                </div>
            </div>
        </div>
        <!-- [ Main Content ] end -->
    </form>
@endsection

@section('footer-scripts')
    <script>
        function initTinymce(){
			tinymce.init({
				selector: '.tinymce-editor',
				menubar: false,
				plugins: 'anchor autolink codesample image link lists media',
				toolbar: 'blocks bold italic underline strikethrough removeformat link alignleft aligncenter alignright alignjustify numlist bullist image',
				bbcode_dialect: 'punbb',
				convert_urls: false,
				image_title: true,
				automatic_uploads: true,
				file_picker_types: 'image',
				images_upload_handler: function (blobInfo) {
					return new Promise(function (resolve, reject) {
						var xhr, formData;
						xhr = new XMLHttpRequest();
						xhr.withCredentials = false;
						xhr.open('POST', '{{ route("editor-upload") }}');
						xhr.setRequestHeader('X-CSRF-Token', '{{ csrf_token() }}');
						xhr.onload = function() {
							var json;
							if (xhr.status !== 200) {
								reject('HTTP Error: ' + xhr.status);
								return;
							}
							json = JSON.parse(xhr.responseText);
							if (!json || typeof json.location != 'string') {
								reject('Invalid JSON: ' + xhr.responseText);
								return;
							}
							resolve(json.location); // Разрешаем промис с URL-адресом изображения
						};
						xhr.onerror = function () {
							reject('XHR Error: ' + xhr.statusText);
						};
						formData = new FormData();
						formData.append('image', blobInfo.blob(), blobInfo.filename());
						xhr.send(formData);
					});
				}
			});
		}
		initTinymce();

		function addLanguage(language_id){
			var html = '<div class="langBox active" data-id="'+language_id+'">';
				html += '<div class="form-group">';
				html += '<button class="deleteLanguage btn btn-outline-secondary" type="button">{{ __('Delete Language') }}</button>';
				html += '</div>';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="title">{{ __('Page Title') }}</label>';
				html += '<input type="text" class="form-control" id="title" name="info['+language_id+'][title]" value="">';
				html += '</div>';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="seo_h1">{{ __('H1') }}</label>';
				html += '<input id="info-'+language_id+'-seo_h1" type="text" class="form-control" id="seo_h1" name="info['+language_id+'][seo_h1]" value="">';
				html += '</div>';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="meta-title">{{ __('Meta Title') }}</label>';
				html += '<input type="text" class="form-control" id="meta-title" name="info['+language_id+'][meta_title]" value="">';
				html += '</div>';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="meta-keywords">{{ __('Meta Keywords') }}</label>';
				html += '<textarea class="form-control" name="info['+language_id+'][meta_keywords]" id="meta-keywords" rows="4"></textarea>';
				html += '</div>';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="meta-description">{{ __('Meta Description') }}</label>';
				html += '<textarea class="form-control" id="meta-description" name="info['+language_id+'][meta_description]" rows="4" ></textarea>';
				html += '</div>';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="page-content">{{ __('Page Content') }}</label>';
				html += '<textarea class="form-control tinymce-editor" id="page-content" name="info['+language_id+'][content]" rows="4"></textarea>';
				html += '</div>';
				html += '</div>';

			$('.langContainer.part1').append(html);
			
			$('.langButtons').append('<button id="showLanguage" class="btn btn-secondary" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></button>');
			
			$('#addLanguage, select[name="language"]').addClass('d-none');

			var html = '<div class="form-group">';
				html += '<label class="form-label" for="left-title">{{ __('Title') }}</label>';
				html += '<input id="left-title" type="text" class="form-control" name="info['+language_id+'][left_title]" value="">';
				html += '</div>';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="left-excerpt">{{ __('Excerpt') }}</label>';
				html += '<textarea id="left-excerpt" class="form-control" name="info['+language_id+'][left_excerpt]" rows="3" ></textarea>';
				html += '</div>';

			$('.langContainer.part2').append(html);

			var html = '<div class="form-group">';
				html += '<label class="form-label" for="left-image-description">{{ __('Image Description') }}</label>';
				html += '<textarea id="left-image-description" class="form-control tinymce-editor" name="info['+language_id+'][left_image_description]" rows="3" ></textarea>';
				html += '</div>';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="left-main-content">{{ __('Main Content') }}</label>';
				html += '<textarea id="left-main-content" class="form-control tinymce-editor" name="info['+language_id+'][left_content]" rows="3" ></textarea>';
				html += '</div>';

			$('.langContainer.part3').append(html);

			var html = '<div class="form-group">';
				html += '<label class="form-label" for="right-title">{{ __('Title') }}</label>';
				html += '<input id="right-title" type="text" class="form-control" name="info['+language_id+'][right_title]" value="">';
				html += '</div>';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="right-excerpt">{{ __('Excerpt') }}</label>';
				html += '<textarea id="right-excerpt" class="form-control" name="info['+language_id+'][right_excerpt]" rows="3" ></textarea>';
				html += '</div>';

			$('.langContainer.part4').append(html);

			var html = '<div class="form-group">';
				html += '<label class="form-label" for="right-image-description">{{ __('Image Description') }}</label>';
				html += '<textarea id="right-image-description" class="form-control tinymce-editor" name="info['+language_id+'][right_image_description]" rows="3" ></textarea>';
				html += '</div>';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="right-main-content">{{ __('Main Content') }}</label>';
				html += '<textarea id="right-main-content" class="form-control tinymce-editor" name="info['+language_id+'][right_content]" rows="3" ></textarea>';
				html += '</div>';

			$('.langContainer.part5').append(html);

			tinymce.remove();
			initTinymce();
		}
    </script>
<script>
         $(document).on('change', '.file-uploader', function(event) {
            $(event.target).parent().find('alert-danger').remove();

			if($(event.target).hasClass('videoMarker')){
				var url = '{{ route('video-upload') }}';
			}else{
				var url = '{{ route('image-upload') }}';
			}

			var formData = new FormData;

			var file = event.target.files[0];
			var blob = new Blob([file], { type: file.type });

			formData.append('file', blob, file.name);

			$('.bg-loader').addClass('active');

			$.ajax({
				url: url,
				type: 'post',
				dataType: 'json',
				data: formData,
				cache: false,
				contentType: false,
				processData: false,
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				beforeSend: function() {

				},
				complete: function() {

				},
				success: function(json) {
					$('.bg-loader').removeClass('active');
					if(json.error){
						$(event.target).after('<div class="alert-danger mt-2">'+json.error+'</div>');
					}
					if(json.location && $(event.target).closest('.form-group').find('img').length > 0){
						$(event.target).closest('.form-group').find('img').attr('src', json.location).addClass('fileImage');
					}
					if(json.location && $(event.target).closest('.form-group').find('.dataLink a').length > 0){
						$(event.target).closest('.form-group').find('.dataLink a').attr('href', json.location).addClass('btn').addClass('btn-primary').html('<i class="fa fa-eye"></i>');
						//add video preview
						var vBox = $(event.target).closest('.form-group').find('.dataVideo');
						vBox.html('<div><video data-controls="false" src="'+json.location+'" muted="" playsinline="" loop="" autoplay=""></video></div>');
						getVideoSize(vBox);
					}
					if(json.file){
						$(event.target).closest('.form-group').find('.boxUpload').val(json.file);
					}
				}
			});
        });
    </script>
@endsection