@extends('dashboard.layouts.main')

@section('title', getSiteName() . ' - Dashboard - Add New Category')

@section('content')
    <form action="{{ route('shop-categories-add-save') }}" method="post" class="pc-content" enctype="multipart/form-data">
        @csrf
        <!-- [ Main Content ] start -->
        <div class="row pt-0">
            <div class="page-header-title">
                <h2 class="mb-3">{{ __('Add New Category') }}</h2>
                <div class="permalink mb-3">
                    <div class="permalink d-flex justify-content-end">
						@can('add articles')
                        <button type="submit" class="btn btn-primary me-2 w-auto">{{ __('Add') }}</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>{{ __('Category Information') }}</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="title">{{ __('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="description">{{ __('Description') }}</label>
										<textarea class="form-control tinymce-editor" id="description" name="info[{{$data->language_id}}][description]" rows="4">{{ isset($data->description) ? $data->description : old('info.'.$data->language_id.'.description') }}</textarea>
									</div>
								</div>
							@endforeach
						</div>
                        <div class="form-group">
                            <label class="form-label" for="main-page-slug">{{ __('Page URL') }}</label>
                            <input id="main-page-slug" type="text" class="form-control" name="slug" value="{{ old('slug') }}">
                            @error('slug')
                                <div class="alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group d-none">
                            <label class="form-label">{{ __('Category Image') }}</label>
                            <div class="form-file mb-3">
                                <img src="{{ asset('assets/images/application/image.svg') }}" alt="Product Image" class="user-photo-preview" data-default="{{ asset('assets/images/application/image.svg') }}">
                                <input type="file" name="image" class="form-control file-uploader" aria-label="file example" data-gtm-form-interact-field-id="0" accept="image/jpeg,image/jpg,image/png,image/webp">
                                @error('image')
                                <div class="alert-danger mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>  
                        <div class="form-group">
                            <label class="form-label" for="sort_order">{{ __('Sort Order') }}</label>
                            <input type="text" class="form-control" id="sort_order" name="sort_order" value="{{ old('sort_order') }}">
                            @error('sort_order')
                            <div class="alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-check mt-4 mb-3" style="padding-left: 0;">
                            <input class="form-check-input" type="checkbox" name="in_menu" id="in_menu" @if(old('in_menu')) checked @endif style="margin-left: 0; margin-right: 5px;">
                            <label class="form-check-label" for="in_menu">{{ __('Add To Menu') }}</label>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="status">{{ __('Status') }}</label>
                            <select name="status" id="status" class="form-select">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </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">{{ __('Description') }}</label>';
				html += '<textarea class="form-control tinymce-editor" id="page-content" name="info['+language_id+'][description]" 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>
    <script>
        $('.file-uploader').on('change', function(event) {
            let input = event.target,
                reader = new FileReader(),
                $input = $(this); // Сохраняем ссылку на элемент #file-uploader

            reader.onload = function() {
                let dataURL = reader.result;
                $input.prev('img').attr('src', dataURL); // Используем сохраненную ссылку на элемент
            };

            reader.readAsDataURL(input.files[0]);
        });
    </script>
@endsection