{{#section 'meta'}}
<title>Auto Reply</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">Auto Reply</h4>

				<div class="page-title-right">
					<ol class="breadcrumb mb-2">
						<li class="breadcrumb-item"><a href="javascript: void(0);">Whatsapp</a></li>
						<li class="breadcrumb-item active">Auto Reply</li>
					</ol>

					<div class="text-end">
						<button id="btn-add" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> Tambah</button>
					</div>
				</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>Dibuat</th>
										<th>Pesan</th>
										<th>Device</th>
										<th>Status</th>
										<th>Aksi</th>
									</tr>
								</thead>
								<tbody>

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

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<form id="form" method="post" action="">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-title">Formulir</div>
				</div>
				<div class="modal-body"> 
					<div class="row">
						<div class="col-lg-12">
							<div class="form-group">
								<label>Perangkat</label>
								<select class="form-control _select2" name="device_id">
									<option value="">-- Pilih Perangkat --</option>
									{{#each devices}}
									<option value="{{this.id}}">[{{this.session}}] {{this.name}}</option>
									{{/each}}
								</select>
								<span validation-for="device_id"></span>
							</div>
						</div>
						<div class="col-lg-12">
							<div class="form-group">
								<label>Pesan</label>
								<div class="input-group">
									<span class="input-group-text">
										<label class="mb-0">
											<input type="checkbox" value="Yes" name="is_regex">
											<span>Regex?</span>
										</label>
									</span>								
									<input name="message" value="" class="form-control" type="text" autocomplete="off">
								</div>
								<span validation-for="message"></span>
							</div>
						</div>
						<div class="col-lg-12">
							<div class="form-group">
								<label>Balasan</label>
								<textarea class="form-control" name="reply" rows="4"></textarea>
								<span validation-for="reply"></span>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="form-group">
								<label>Status</label>
								<select class="form-control _select2" name="status">
									<option value="">-- Pilih Status --</option>
									<option value="Active">Aktif</option>
									<option value="Inactive">Tidak Aktif</option>
								</select>
								<span validation-for="status"></span>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer"> 
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button> 
					<button type="submit" class="btn btn-primary">Submit</button> 
				</div>
			</div>
		</form>
	</div>
</div>

<template id="row-action">
	<div class="d-flex flex-wrap gap-2">
		<button data-id="edit" class="btn btn-warning text-dark btn-sm"><i class="fa fa-edit"></i> Edit</button>
	</div>
</template>

{{#section 'javascript'}}
<script type="text/javascript">
	$(document).ready(function() {
		const _f = document.forms['form'];

		const table = $('#table').DataTable({
			'ajax':{
				'url'		: base_url('api/whatsapp/autoreplies'),
				'dataSrc'	: 'data',
				'type'		: 'POST'
			},
			'processing'	: true,
			'serverSide'	: true,
			'paging'		: true,
			'lengthChange'	: true,
			'searching'		: true,
			'ordering'		: true,
			'info'			: true,
			'autoWidth'		: false,
			'order'			: [ [0, 'desc'] ],
			'columns'		: [
				{'data': 'created_at', render: idDateTimeFormat},
				{'data': 'message'},
				{'data': 'session'},
				{'data': 'status'},
				{'data': 'id', render: (data, i, row) => {
					return $(`#row-action`).html();
				}}
			],
			'createdRow'	: function(element, row) {
				$(`button[data-id="edit"]`, element).click(function(event) {
					$(`#exampleModal`).modal('show');
					_f.reset();
					_f.action = base_url(`api/whatsapp/autoreply/${row.id}/update`);
					
					_f['device_id'].value = row.device_id;
					_f['status'].value = row.status;
					_f['reply'].value = row.reply;
					_f['message'].value = row.message;
					
					$(`input[type="checkbox"][name="is_regex"]`).prop('checked', (row.is_regex == "Yes" ? true : false));
					$(`._select2`).trigger('change');
				});
			}
		});

		$(`#btn-add`).click(function(event) {
			event.preventDefault();
			_f.reset();
			_f.action = base_url('api/whatsapp/autoreply/add');
			$(`._select2`).trigger('change');
			$(`#exampleModal`).modal('show');
		});

		$(`._select2`).select2({
			width: '100%',
			dropdownParent: $(`#exampleModal`)
		});

		$("#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) {
				$(`#exampleModal`).modal('hide');
				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');
					if(json.errors ?? false) {
						$.each(json.errors, function(index, val) {
							$(`span[validation-for="${index}"]`).text(val);
						});
					}
				}
			})
			.always(function() {
				$.LoadingOverlay("hide");
			});
		});
	});
</script>
{{/section}}