{{#section 'meta'}}
<title>Webhook</title>
{{/section}}

<style type="text/css">
	div.form-control,
	pre.form-control {
		min-height: 2.3rem;
		overflow: auto;
	}
</style>

<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">Webhook</h4>

				<div class="page-title-right">
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a href="javascript: void(0);">Whatsapp</a></li>
						<li class="breadcrumb-item active">Webhook</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 class="text-nowrap">Session ID</th>
										<th>Event</th>
										<th>URL</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">
		<button data-id="detail" href="#" class="btn btn-warning text-dark btn-sm"><i class="fa  fa-info-circle"></i> Detail</button>
	</div>
</template>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				
			</div>
			<div class="modal-body"> 
				
				<div class="row">
					<div class="form-group col-lg-12">
						<label>Tanggal</label>
						<div class="form-control" data-id="created_at"></div>
					</div>
					<div class="form-group col-lg-6">
						<label>Device</label>
						<div class="form-control" data-id="session"></div>
					</div>
					<div class="form-group col-lg-6">
						<label>Event</label>
						<div class="form-control" data-id="event"></div>
					</div>
					<div class="form-group col-lg-6">
						<label>URL</label>
						<div class="form-control" data-id="url"></div>
					</div>
					<div class="form-group col-lg-6">
						<label>Status</label>
						<div class="form-control" data-id="status"></div>
					</div>
					<div class="form-group col-lg-12">
						<label>Data</label>
						<pre class="form-control" data-id="data"></pre>
					</div>
					<div class="form-group col-lg-12">
						<label>Response</label>
						<pre class="form-control" data-id="response"></pre>
					</div>
				</div>
				
			</div>
			<div class="modal-footer"> 
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button> 
			</div>
		</div>
	</div>
</div>

{{#section 'javascript'}}
<script type="text/javascript">

	$(document).ready(function() {

		const table = $('#table').DataTable({
			'ajax':{
				'url'		: base_url('api/whatsapp/webhooks'),
				'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': 'session'},
				{'data': 'event'},
				{'data': 'url'},
				{'data': 'status'},
				{'data': 'id', render: (data, i, row) => {
					return $(`#row-action`).html();
				}},
			],
			'createdRow'	: function(element, row) {

				$(`[data-id="detail"]`, element).click(function(event) {
					event.preventDefault();
					$.each(row, function(index, val) {
						 $(`[data-id="${index}"]`).text(val);
					});

					$(`#exampleModal`).modal('show');
				});


			}
		});
	});
</script>
{{/section}}