{{#section 'meta'}}
<title>Tulis Baru</title>
{{/section}}

{{#section 'css'}}
<link rel="stylesheet" type="text/css" href="{{base_url 'assets/member_area/libs/select2/css/select2.min.css'}}">
{{/section}}

<section>
	<!-- start page title -->
	<div class="row">
		<div class="col-12">
			<div class="page-title-box d-sm-flex align-items-center justify-content-between">
				<h4 class="mb-sm-0 font-size-18">Tulis Baru</h4>

				<div class="page-title-right">
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a href="javascript: void(0);">Blog</a></li>
						<li class="breadcrumb-item active">Tulis Baru</li>
					</ol>
				</div>

			</div>
		</div>
	</div>
	<!-- end page title -->
	
	<div class="section-body">
		<form id="form" action="{{base_url 'api/blogs/create'}}">
			<div class="row">
				<div class="col-lg-12">
					<div class="card">
						<div class="card-header">
							<div class="card-title mb-0">
								<div class="d-flex justify-content-between">
									<div>Thumbnail</div>
									<div>
										<label class="btn btn-primary btn-sm mb-0">
											<input accept=".jpg,.jpeg,.png" type="file" name="thumbnail">
											<span><i class="fa fa-upload"></i> Unggah Foto</span>
										</label>
									</div>
								</div>
							</div>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-lg-12">
									<div class="form-group">
										<label>*Resolusi 1200 x 628</label>
										<img id="img-preview" class="img-fluid" src="{{base_url 'assets/member_area/images/customs/blog-preview.png'}}">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-8">
					<div class="card">
						<div class="card-header">
							<div class="card-title">
								Form Konten
							</div>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-lg-12">
									<div class="form-group">
										<label>Judul</label>
										<input name="title" placeholder="Masukkan judul" type="text" class="form-control" autocomplete="off">
										<span validation-for="title"></span>
									</div>
								</div>
								<div class="col-lg-12">
									<div class="form-group">
										<label>Konten</label>
										<textarea id="editor" class="form-control" name="content" rows="12"></textarea>
										<span validation-for="content"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="card">
						<div class="card-header">
							<div class="card-title">
								Informasi Tambahan
							</div>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-lg-12">
									<div class="form-group">
										<label>Kategori</label>
										<select name="category" class="form-control" required="">
											{{#each categories}}
											<option>{{this.category}}</option>
											{{/each}}
										</select>
										<span validation-for="category"></span>
									</div>
								</div>
								<div class="col-lg-12">
									<div class="form-group">
										<label>Tags</label>
										<select name="tags[]" multiple="multiple" class="form-control"></select>
										<span validation-for="tags"></span>
									</div>
								</div>
								<div class="col-md-12">
									<div class="form-group">
										<label>Status</label>
										<div class="d-flex gap-2">
											<div class="form-check d-inline-block">
												<input class="form-check-input" type="radio" name="status" value="PUBLISH" id="flexRadioDefault1" checked="true">
												<label class="form-check-label" for="flexRadioDefault1">
													Publish
												</label>
											</div>
											<div class="form-check d-inline-block">
												<input class="form-check-input" type="radio" name="status" value="DRAFT" id="flexRadioDefault2">
												<label class="form-check-label" for="flexRadioDefault2">
													Draft
												</label>
											</div>
										</div>
										<span validation-for="status" class="badge bg-warning px-3 py-3 text-left mt-2"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="card-footer">
							<button type="submit" class="btn btn-primary">Submit Blog</button>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</section>

{{#section 'javascript'}}
<script type="text/javascript" src="{{base_url 'assets/member_area/libs/tinymce/tinymce.min.js'}}"></script>
<script type="text/javascript" src="{{base_url 'assets/member_area/libs/select2/js/select2.min.js'}}"></script>
<script type="text/javascript">
	$(document).ready(function() {

		$(`select[name="category"]`).select2({
			width: '100%',
			tags: true
		});

		$(`select[name^="tags"]`).select2({
			width: '100%',
			tags: true
		});

		tinymce.init({
			selector: '#editor',
			height: 480,
			plugins: [
				"advlist autolink link image lists charmap print preview hr anchor pagebreak",
				"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
				"save table directionality emoticons template paste"
			],
			toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
			relative_urls : false,
			remove_script_host : true,
			document_base_url : base_url(''),
			automatic_uploads: true,
			images_upload_handler: handleImageUpload,
		});

		function handleImageUpload(blobInfo, success, failure, progress) {
			var xhr, formData;
			
			xhr = new XMLHttpRequest();
			xhr.withCredentials = false;
			xhr.open('POST', base_url(`api/blogs/upload_img`));
			
			xhr.upload.onprogress = function (e) {
				progress(e.loaded / e.total * 100);
			};
			
			xhr.onload = function () {
				var json;
				
				if (xhr.status === 403) {
					failure('HTTP Error: ' + xhr.status, {
						remove: true
					});
					return;
				}
				
				if (xhr.status < 200 || xhr.status >= 300) {
					failure('HTTP Error: ' + xhr.status);
					return;
				}
				
				json = JSON.parse(xhr.responseText);
				if (!json || typeof json.url != 'string') {
					failure('Invalid JSON: ' + xhr.responseText);
					return;
				}
				success(json.url);
			};
			
			xhr.onerror = function () {
				failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
			};
			
			formData = new FormData();
			formData.append('file', blobInfo.blob(), blobInfo.filename());
			
			xhr.send(formData);
		};

		$(`input[type="file"][name="thumbnail"]`).on('change', function(event) {
			if(this.files && this.files.length>0) {
				const [file] = this.files;
				const imgurl = URL.createObjectURL(file);
				$(`#img-preview`).prop('src', imgurl);
			}
		});

		$("#form").submit(function(event) {
			event.preventDefault();
			var formData = new FormData(this);
			$(`span[validation-for]`).text('');
			$.LoadingOverlay("show");
			$.ajax({
				url: this.action,
				type: 'POST',
				dataType: 'json',
				processData: false,
				contentType: false,
				data: formData,
			})
			.done(function(response, textStatus, jqXHR) {
				Swal.fire({
					title: 'Berhasil!',
					text: response.message,
					icon: 'success',
					showCancelButton: false,
					confirmButtonColor: false,
					confirmButtonText: 'Ya',
				}).then((result) => {
					location.replace( base_url('member_area/blogs/posts') );
				});
			})
			.fail(function(jqXHR, textStatus, errorThrown) {
				if(jqXHR.responseJSON ?? false) {
					const json = jqXHR.responseJSON;
					Swal.fire('Maaf!', json.message, 'error');
					if(json.errors ?? false) {
						$.each(json.errors, function(index, val) {
							$(`span[validation-for="${index}"]`).text(val);
						});
					}
				}
			})
			.always(function() {
				$.LoadingOverlay("hide");
			});
		});
	});
</script>
{{/section}}