@extends('dashboard.layouts.main')

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

@section('content')
    <form action="{{ route('contact-us-update') }}" method="post" class="pc-content">
        @csrf
        <!-- [ 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">Contact 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">
            <!-- [ 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">
							@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>
            <!-- [ sample-page ] end -->
        </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').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');

			tinymce.remove();
			initTinymce();
		}
    </script>
@endsection