{{#section 'meta'}}
<title>Postingan</title>
{{/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">Postingan</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">Postingan</li>
					</ol>
				</div>

			</div>
		</div>
	</div>
	<!-- end page title -->
	
	<div class="section-body">
		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-body">
						<div class="table-responsive-md">
							<table id="table" class="table table-hover table-striped">
								<thead>
									<tr>
										<th>Tanggal</th>
										<th>Thumbnail</th>
										<th>Judul</th>
										<th>Status</th>
										<th>Aksi</th>
									</tr>
								</thead>
								<tbody>

								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<template id="row-action">
	<div class="d-flex flex-wrap gap-2">
		<a data-id="edit" href="#" class="btn btn-warning text-dark btn-sm"><i class="fa fa-edit"></i></a>
		<button data-id="archived" href="#" class="btn btn-secondary btn-sm"><i class="fa fa-archive"></i></button>
	</div>
</template>

{{#section 'javascript'}}
<script type="text/javascript">
	$(document).ready(function() {
		const table = $('#table').DataTable({
			'ajax':{
				'url'		: base_url('api/blogs/posts/datatable'),
				'dataSrc'	: 'data',
				'type'		: 'POST'
			},
			'processing'	: true,
			'serverSide'	: true,
			'paging'		: true,
			'lengthChange'	: true,
			'searching'		: true,
			'ordering'		: true,
			'info'			: true,
			'autoWidth'		: false,
			'order'			: [ [4, 'desc'] ],
			'columns'		: [
				{'data': 'created_at', render: idDateTimeFormat},
				{'data': 'thumbnail', render: (data, i, row) => {
					const url = base_url(`uploads/blogs/${data}`);
					return `<img class="img-blog" src="${url}">`;
				}},
				{'data': 'title'},
				{'data': 'status'},
				{'data': 'id', render: (data, i, row) => {
					return $(`#row-action`).html();
				}},
			],
			'createdRow'	: function(element, row) {
				$(`a[data-id="edit"]`, element).prop('href', base_url(`member_area/blogs/${row.id}/update`));
				$(`button[data-id="archived"]`, element).click(function(event) {
					event.preventDefault();
					Swal.fire({
						title: 'Peringatan!',
						html: `Anda akan mengarsipkan postingan<br><strong>${row.title}</strong>?`,
						icon: 'warning',
						showCancelButton: true,
						confirmButtonColor: false,
						cancelButtonColor: false,
						cancelButtonText: 'Batal',
						confirmButtonText: 'Ya',
					}).then((result) => {
						if (result.isConfirmed) {
							$.LoadingOverlay("show");
							$.ajax({
								url: base_url(`api/blogs/${row.id}/archive`),
								type: 'POST',
								dataType: 'json',
								processData: true,
								contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
								data: {},
							})
							.done(function(response, textStatus, jqXHR) {
								Swal.fire('Berhasil!', response.message, 'success');
								table.ajax.reload();
							})
							.fail(function(jqXHR, textStatus, errorThrown) {
								if(jqXHR.responseJSON ?? false) {
									const json = jqXHR.responseJSON;
									Swal.fire('Maaf!', json.message, 'error');
								}
							})
							.always(function() {
								$.LoadingOverlay("hide");
							});
						}
					});
				});
			}
		});
	});
</script>
{{/section}}