@extends('dashboard.layouts.main')

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

@section('content')
    <form action="{{ route('shop-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 Product') }}</h2>
                <div class="permalink mb-3">
                    <div class="permalink d-flex justify-content-end">
                        @can('add shop')
						<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>{{ __('Product 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="preview">{{ __('Preview Text') }}</label>
										<textarea class="form-control" id="preview" name="info[{{$data->language_id}}][preview]" rows="4">{{ isset($data->preview) ? $data->preview : old('info.'.$data->language_id.'.preview') }}</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>
										@error('info.'.$data->language_id.'.description')
										<div class="alert-danger mt-2">{{ $message }}</div>
										@enderror
									</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">
                            <label class="form-label">{{ __('Preview Image') }}</label>
                            <div class="form-file mb-3">
                                <div class="imageUploadBox">
									<img src="{{ old('preview_image') ? asset('storage/uploads/tmp/' . old('preview_image')) : asset('assets/images/application/image.svg') }}" alt="Preview Image" class="fileImage" data-default="{{ asset('assets/images/application/image.svg') }}">
									<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('preview_image') }}" name="preview_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('preview_image')
								<div class="alert-danger mt-2">{{ $message }}</div>
								@enderror
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">{{ __('Product Image') }}</label>
                            <div class="form-file mb-3">
                                <div class="imageUploadBox">
									<img src="{{ old('image') ? asset('storage/uploads/tmp/' . old('image')) : asset('assets/images/application/image.svg') }}" alt="Image" class="fileImage" data-default="{{ asset('assets/images/application/image.svg') }}">
									<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('image') }}" name="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('image')
								<div class="alert-danger mt-2">{{ $message }}</div>
								@enderror
                            </div>
                        </div>     
						<div class="form-group">
                            <label class="form-label" for="main_category">{{ __('Category') }}</label>
                            @php($product_category_id = old('product_category_id'))
							<select name="product_category_id" class="form-control" id="product_category_id">
								<option></option>
								@foreach($categories as $category)
								<option value="{{$category->id}}" @if($category->id == $product_category_id) selected @endif>{{$category->getInfo()->title}}</option>
								@endforeach
							</select>
							@error('product_category_id')
                                <div class="alert-danger mt-2">{{ $message }}</div>
                            @enderror                            
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="external_link">{{ __('External Link') }}</label>
                            <input type="text" class="form-control" id="external_link" name="external_link" value="{{ old('external_link') }}">
                            @error('external_link')
                                <div class="alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </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="preview">{{ __('Preview Text') }}</label>';
				html += '<textarea class="form-control" id="preview" name="info['+language_id+'][preview]" 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>
         $(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