@extends('dashboard.layouts.main')

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

@section('content')
	<div class="bg-loader">
		<div class="circular-progress">
			<div class="inner-circle"></div>
			<p class="percentage">0%</p>
		</div>
	</div>
	<link rel="stylesheet" href="{{ asset('assets/css/plugins/dropzone.min.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/plugins/datepicker-bs5.min.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/plugins/flatpickr.min.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/plugins/bootstrap-switch-button.min.css') }}">
    <form id="saveForm" action="{{ route('news-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 Article') }}</h2>
                <div class="permalink mb-3">
                    <div class="permalink d-flex justify-content-end">
						@can('add articles')
                        <button type="button" class="buttonSave btn btn-primary me-2 w-auto" data-type="add">{{ __('Add') }}</button>
						@endcan
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- [ sample-page ] start -->
            <div class="col-sm-12">
                <div class="card">
                    <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 id="info-{{$data->language_id}}-title" 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 id="info-{{$data->language_id}}-meta_title" 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">{{ __('Tags') }}</label>
										<input class="form-control choices-select" type="text" name="info[{{$data->language_id}}][tags]" value="{{ isset($data->tags) ? $data->tags : old('info.'.$data->language_id.'.tags') }}" >
									</div>
								</div>
							@endforeach
						</div>
                        <div class="form-group">
                            <label class="form-label" for="main-page-slug">{{ __('Page URL') }}</label>
                            <input id="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="card">
							<div class="card-header">
								<div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="preview_type" value="0" id="preview_type0" checked  data-type="image">
									<label class="form-check-label" for="preview_type0"> {{ __('Image') }} </label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" name="preview_type" value="1" id="preview_type1" data-type="video">
									<label class="form-check-label" for="preview_type1"> {{ __('Video') }} </label>
								</div>
							</div>
							<div class="card-body">								
								<div class="previewType active" data-type="image">
									<div class="form-group">
										<label class="form-label">{{ __('Preview Image') }}</label>
										<div class="form-file mb-3">
											@php($desaturate = old('desaturate'))
											<div class="imageUploadBox">
											<img src="{{ asset('assets/images/application/image.svg') }}" alt="Preview Image" class="fileImage @if($desaturate) img__desaturate @endif" 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,image/gif">
											@error('image')
											<div class="alert-danger mt-2">{{ $message }}</div>
											@enderror
											<div class="desaturate">
												<input name="desaturate" value="1" @if($desaturate) checked @endif class="d-none" type="checkbox" data-toggle="switchbutton" data-onlabel="Desaturate&nbsp;on" data-offlabel="Desaturate&nbsp;off">
										   </div>
										    Recommended dimensions for gif images 660x989px or 660x371px
										</div>
									</div>
								</div>
								<div class="previewType videoCheckPoint" data-type="video">
									<div class="form-group">
										<label class="form-label" for="video_preview">{{ __('Video Preview') }}</label><br />
										<div class="dataVideo">
											<div>
											@if(old('video_preview'))
											<video data-controls="false" src="{{ asset('storage/uploads/tmp/' . $news->video_preview)}}" muted="" playsinline="" loop="" autoplay=""></video>
											@endif
											</div>
										</div>
										<button class="btn btn-secondary selectFile" type="button">{{ __('Upload File') }}</button>
										<input type="text" readonly value="{{ old('video_preview') }}" name="video_preview" class="form-control boxUpload d-none" />
										<input type="file" class="file-uploader d-none videoMarker" accept="video/mp4,video/ogg,video/webm,video/mov">
										<input type="hidden" name="video_preview_ratio" dataratio value="{{ old('video_preview_ratio') }}" />
										<div class="dataLink">
										@if(old('video_preview'))
										<a href="{{ asset('storage/uploads/tmp/' . old('video_preview')) }}" target="_blank" class="btn btn-primary"><i class="fa fa-eye"></i></a>
										@else
										<a href="" target="_blank"></a>
										@endif
										</div>
										@error('video_preview')
										<div class="alert-danger mt-2">{{ $message }}</div>
										@enderror
									</div>
									<div class="card">
										<div class="card-body">
											<div>
												<div class="form-group d-none">
													<label class="form-label">{{ __('Orientation') }}</label>
													<div>
														<div class="form-check form-check-inline">
															<input class="form-check-input" type="radio" name="position" value="0" id="position0" >
															<label class="form-check-label" for="position0"> {{ __('Vertical') }} </label>
														</div>
														<div class="form-check form-check-inline">
															<input class="form-check-input" type="radio" name="position" value="1" id="position1" checked>
															<label class="form-check-label" for="position1"> {{ __('Horisontal') }} </label>
														</div>
													</div>
												</div>
											</div>
											<div class="form-group">
												<label class="form-label">{{ __('Video Content') }}</label>
												<div>
													<div class="form-check form-check-inline">
														<input class="form-check-input videoInput" type="radio" name="video_type" value="0" id="video_type0" checked data-type="youtube">
														<label class="form-check-label" for="video_type0"> {{ __('Youtube') }} </label>
													</div>
													<div class="form-check form-check-inline">
														<input class="form-check-input videoInput" type="radio" name="video_type" value="1" id="video_type1" data-type="upload">
														<label class="form-check-label" for="video_type1"> {{ __('Upload') }} </label>
													</div>
												</div>
											</div>
											<div class="videoType active" data-type="youtube">
												<div class="form-group">
													<label class="form-label" for="video_youtube">{{ __('Video Link') }}</label>
													<input type="text" class="form-control" id="video_youtube" name="video_youtube" placeholder="" value="{{ old('video_youtube') }}">
													@error('video_youtube')
													<div class="alert-danger mt-2">{{ $message }}</div>
													@enderror
												</div>
											</div>
											<div class="videoType" data-type="upload">
												<div class="form-group">
													<label class="form-label" for="video_upload">{{ __('Video') }}</label><br />
													<div class="dataVideo">
														<div>
														@if(old('video_upload'))
														<video data-controls="false" src="{{ asset('storage/uploads/tmp/' . $news->video_upload)}}" muted="" playsinline="" loop="" autoplay=""></video>
														@endif
														</div>
													</div>
													<button class="btn btn-secondary selectFile" type="button">{{ __('Upload File') }}</button>
													<input type="text" readonly value="{{ old('video_upload') }}" name="video_upload" class="form-control boxUpload d-none" />
													<input type="file" class="file-uploader d-none videoMarker" accept="video/mp4,video/ogg,video/webm,video/mov">
													<input type="hidden" name="video_upload_ratio" dataratio value="{{ old('video_upload_ratio') }}" />
													<div class="dataLink">
													@if(old('video_upload'))
													<a href="{{ asset('storage/uploads/tmp/' . old('video_upload')) }}" target="_blank"><i class="fa fa-eye"></i></a>
													@else
													<a href="" target="_blank"></a>
													@endif
													</div>
													@error('video_upload')
													<div class="alert-danger mt-2">{{ $message }}</div>
													@enderror
												</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="form-label" for="video">{{ __('Video Link For Button') }}</label>
										<input type="text" class="form-control" id="video" name="video" placeholder="" value="{{ old('video') }}">
										@error('video')
										<div class="alert-danger mt-2">{{ $message }}</div>
										@enderror
									</div>
								</div>
								<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="title">{{ __(' Title') }}</label>
											<input type="text" class="form-control" id="title" name="info[{{$data->language_id}}][preview_title]" value="{{ isset($data->preview_title) ? $data->preview_title : old('info.'.$data->language_id.'.preview_title') }}">
										</div>
									</div>
								@endforeach
								</div>
							</div>
						</div>

						<div class="card">
							<div class="card-header">
								<div class="d-flex align-items-center justify-content-between">
									<h5>{{ __('Blocks') }}</h5>
									<div class="blockTypeList">
										<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ __('Add block') }}</button>
										<div class="dropdown-menu" style="">
										  <a id="addText" class="dropdown-item" href="javascript:void(0);">{{ __('Text') }}</a>
										  <a id="addImage" class="dropdown-item" href="javascript:void(0);">{{ __('Image') }}</a>
										  {{--<a id="addVideo" class="dropdown-item" href="javascript:void(0);">{{ __('Video') }}</a>--}}
										  <a id="addSlideshow" class="dropdown-item" href="javascript:void(0);">{{ __('Slideshow') }}</a>
										</div>
									  </div>
								</div>
							</div>
							<script>
								var blockRow = 0;
								var imageRow = 0;
							</script>
							<div class="card-body">
								<div class="blocks">

								</div>
							</div>
							<div class="card-footer">
								<div class="d-flex align-items-end justify-content-end">
									<div class="blockTypeList">
										<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ __('Add block') }}</button>
										<div class="dropdown-menu" style="">
										  <a id="addText" class="dropdown-item" href="javascript:void(0);">{{ __('Text') }}</a>
										  <a id="addImage" class="dropdown-item" href="javascript:void(0);">{{ __('Image') }}</a>
										  {{--<a id="addVideo" class="dropdown-item" href="javascript:void(0);">{{ __('Video') }}</a>--}}
										  <a id="addSlideshow" class="dropdown-item" href="javascript:void(0);">{{ __('Slideshow') }}</a>
										</div>
									  </div>
								</div>
							</div>
						</div>
						<div class="form-group">
                            <label class="form-label" for="date_publish">{{ __('Date Publish') }}</label>
                            <div class="input-group timepicker">
								<input type="text" name="date_publish" class="form-control flatpickr-input" id="date_publish" value="{{ old('date_publish') }}">
								<span class="input-group-text">
									<i class="feather icon-calendar"></i>
								</span>
							</div>
                        </div>
						<div class="form-group">
                            <label class="form-label" for="step">{{ __('Categories') }}</label>
                            <div class="card">
								<div class="card-body">
									@foreach($categories as $category)
									<div class="form-check">
										<input @if(old('categories.' . $category->id)) checked @endif class="form-check-input" name="categories[{{$category->id}}]" type="checkbox" id="cat{{$category->id}}" data-gtm-form-interact-field-id="0">
										<label class="form-check-label" for="cat{{$category->id}}">{{$category->getInfo()->title}}</label>
									</div>
									@endforeach
								</div>
							</div>
                        </div>
						<div class="form-group">
                            <label class="form-label">{{ __('Show Type') }}</label>
							<div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" name="show_type" value="0" id="show_type0" checked>
									<label class="form-check-label" for="show_type0"> {{ __('Show In News') }} </label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" name="show_type" value="1" id="show_type1">
									<label class="form-check-label" for="show_type1"> {{ __('Show In Video') }} </label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" name="show_type" value="2" id="show_type2">
									<label class="form-check-label" for="show_type2"> {{ __('Show In News And Video') }} </label>
								</div>
							</div>
						</div>
                        <div class="form-group d-none">
                            <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-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>
		<div class="row pt-0">
            <div class="page-header-title">
                <div class="permalink mb-3">
                    <div class="permalink d-flex justify-content-end">
						@can('add articles')
                        <button type="button" class="buttonSave btn btn-primary me-2 w-auto" data-type="add">{{ __('Add') }}</button>
						@endcan
                    </div>
                </div>
            </div>
        </div>
        <!-- [ Main Content ] end -->
    </form>
@endsection

@section('footer-scripts')
	<script src="{{ asset('assets/js/plugins/datepicker-full.min.js') }}"></script>
	<script src="{{ asset('assets/js/plugins/flatpickr.min.js') }}"></script>
	<script src="{{ asset('assets/js/plugins/bootstrap-switch-button.min.js') }}"></script>
    <script>
		(function () {
			document.querySelector('.flatpickr-input').flatpickr({
				enableTime: true,
				noCalendar: false,
				time_24hr: true
			});
		})();
		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 id="info-'+language_id+'-title" 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 id="info-'+language_id+'-meta_title" type="text" 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">Tags</label>';
				html += '<input class="form-control choices-select" type="text" name="info['+language_id+'][tags]" value="">';
				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="langBox active" data-id="'+language_id+'">';
				html += '<div class="form-group">';
				html += '<label class="form-label" for="title">{{ __('Title') }}</label>';
				html += '<input type="text" class="form-control" id="title" name="info['+language_id+'][preview_title]" value="">';
				html += '</div>';
				html += '</div>';

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

			if($('.block').length > 0){
				$('.block').each(function(i,e){
					var html = '';
					var type = $(e).attr('data-type');
					var thisBlockRow = $(e).attr('data-row');
					switch(type){
						case 'text':
							html = createBlockTextLang(language_id, 'active', thisBlockRow);
							$(e).find('.langContainer').append(html);
							break;
						case 'image':
						case 'video':
							html = createBlockTitleLang(language_id, 'active', thisBlockRow);
							$(e).find('.langContainer').append(html);
							break;
						case 'slideshow':
							$('.block').find('.blockImage').each(function(j,s){
								var thisImageRow = $(s).attr('data-row');
								html = createBlockImageTitleLang(language_id, 'active', thisBlockRow, thisImageRow);
								$(s).find('.langContainer').append(html);
							});
							break;
					}
				});
			}

			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() {

				},
				xhr: function() {
					var xhr = new window.XMLHttpRequest();
					xhr.upload.addEventListener('progress', function(e) {
						if (e.lengthComputable) {
							var percentComplete = Math.round((e.loaded / e.total) * 100);
							var angle = percentComplete*360/100;
							$('.circular-progress').css({'background': 'conic-gradient(#ed2026 '+angle+'deg, rgb(0 0 0 / 61%) 0deg)'});							
							$('.percentage').text(percentComplete + '%');
						}
					}, false);
					return xhr;
				},
				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);
					}
				}
			});
        });
		$(document).ready(function(){
			$('.dataVideo').each(function(i,e){
				getVideoSize($(e));
			});
		});
    </script>
@endsection