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

<style>
.spinner {
	display: inline-block;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: radial-gradient(farthest-side,var(--bs-primary) 94%,#0000) top/9px 9px no-repeat,
          conic-gradient(#0000 30%,var(--bs-primary));
   -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0);
   animation: spinner-c7wet2 1s infinite linear;
}

@keyframes spinner-c7wet2 {
   100% {
      transform: rotate(1turn);
   }
}
</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">Detail Perangkat</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">Detail Perangkat</li>
					</ol>
				</div>

			</div>
		</div>
	</div>
	<!-- end page title -->

	<div class="section-body">
		<div class="row flex-lg-row flex-column-reverse">
			<div class="col-lg-8">
				<form id="form" method="post" action="{{base_url 'api/whatsapp'}}/{{device.id}}/update">
					<div class="card">
						<div class="card-header">
							<span class="fw-bold card-title">Information</span>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-lg-7">
									<div class="form-group">
										<label>Nama Device</label>
										<input name="name" value="{{device.name}}" class="form-control" type="text" autocomplete="off">
										<validation for="name" class="badge bg-warning"></validation>
									</div>
									<div class="form-group mt-2">
										<label>Session</label>
										<p class="form-control bg-light">{{device.session}}</p>
									</div>
									<div class="form-group mt-2">
										<label>Paket</label>
										<p class="form-control bg-light">{{package.name}}</p>
									</div>
									<div class="form-group mt-2">
										<label>Pemesanan</label>
										<div class="input-group">
											<span class="input-group-text"><i class="fa fa-calendar-alt"></i></span>
											<span class="form-control bg-light">{{datetimeidformat device.created_at}}</span>
										</div>
									</div>
									<div class="form-group mt-2">
										<label>Kedaluarsa</label>
										<div class="input-group">
											<span class="input-group-text"><i class="fa fa-calendar-check"></i></span>
											<span class="form-control bg-light">{{datetimeidformat device.expired_at}}</span>
										</div>
									</div>
									{{#if changestatus}}
									<div class="form-group mt-2">
										<label>Status</label>
										<select class="form-control" name="status" required="">
											<option {{#ifcond device.status '==' 'active'}} selected="" {{/ifcond}} value="active">Aktif</option>
											<option {{#ifcond device.status '==' 'inactive'}} selected="" {{/ifcond}} value="inactive">Nonaktif</option>
										</select>
										<span validation-for="status"></span>
									</div>
									{{/if}}
									<div class="form-group">
										<label>Webhook</label>
										<input name="webhook_url" value="{{device.webhook_url}}" class="form-control" type="text" placeholder="https://" autocomplete="off">
										<validation for="webhook_url" class="badge bg-warning"></validation>
									</div>
									{{#ifcond package.slug '!=' 'trial'}}
									<div class="form-group mt-2">
										<label class="d-block">Renewal</label>
										<a href="{{base_url 'member_area/whatsapp'}}/{{device.id}}/renew" class="btn btn-sm btn-danger"><i class="fa fa-calendar"></i> Perpanjang Masa Aktif</a>
									</div>
									{{/ifcond}}
								</div>
								<div class="col-lg-5">
									<img src="{{base_url 'uploads/generals/preferences-pana.png'}}" class="img-fluid">
								</div>
							</div>
						</div>
						<div class="card-footer">
							<div class="text-end">
								<button class="btn btn-primary"><i class="icon cil-save"></i> Simpan</button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="col-lg-4">
				<div class="card mb-3">
					<div class="card-header">
						<div class="d-flex justify-content-between">
							<div>
								<span class="fw-bold card-title">Device Info</span>
							</div>
							<div id="device-action" class="d-flex gap-2">
								
							</div>
						</div>
					</div>
					<div class="card-body">
						<div id="device-status" class="text-center">
							<div class="spinner"></div>
						</div>
					</div>
					<div class="card-footer">
						<p id="device-msg">Silahkan tunggu...</p>
					</div>
				</div>
			</div>
		</div>
	</div>

</section>

{{#section 'javascript'}}
<script type="text/javascript">
	const session = '{{device.session}}';
	const img_connected = `{{base_url 'uploads/generals/connected.png'}}`;
	const img_disconnected = `{{base_url 'uploads/generals/disconnected.png'}}`;
	const html_loading = `<div class="spinner"></div>`;

	const actions = {
		start: `<button class="btn btn-primary btn-sm"><i class="fa fa-play"></i> Start</button>`.toHTML(),
		restart: `<button class="btn btn-warning btn-sm btn-restart"><i class="fa fa-sync-alt"></i> Restart</button>`.toHTML(),
		logout: `<button class="btn btn-secondary btn-sm btn-logout"><i class="fa fa-sign-out-alt"></i> Logout</button>`.toHTML(),
	}

</script>
<script
   src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.2/qs.min.js"
   integrity="sha256-TDxXjkAUay70ae/QJBEpGKkpVslXaHHayklIVglFRT4="
   crossorigin="anonymous"
 ></script>
 <script src="/socket.io/socket.io.js"></script>
 <script src="{{base_url 'assets/member_area/libs/qrcode/qrcode.min.js'}}" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {

		const socket = io.connect('/device', { query: { session } });
		socket.on('connection', (s) => {
			actions.start.addEventListener("click", function(event){
				event.preventDefault();
				$(`#device-status`).html(html_loading);
				socket.emit('start');
			});

			actions.restart.addEventListener("click", function(event){
				event.preventDefault();
				$(`#device-status`).html(html_loading);
				socket.emit('restart');
			});

			actions.logout.addEventListener("click", function(event){
				event.preventDefault();
				$(`#device-status`).html(html_loading);
				socket.emit('logout');
			});

			socket.on('connected', params => {
				$(`#device-status`).html(`<img class="img-fluid" src="${img_connected}">`);
				$(`#device-msg`).text(params.message);
				if(params.actions) {
					$(`#device-action`).empty();
					params.actions.forEach((val, key) => {
						$(`#device-action`).append(actions[val]);
					});
				}
			});

			socket.on('connecting', params => {
				$(`#device-status`).html(html_loading);
				$(`#device-msg`).text(params.message);
				if(params.actions) {
					$(`#device-action`).empty();
					params.actions.forEach((val, key) => {
						$(`#device-action`).append(actions[val]);
					});
				}
			});

			socket.on('disconnected', params => {
				$(`#device-status`).html(`<img class="img-fluid" src="${img_disconnected}">`);
				$(`#device-msg`).text(params.message);
				if(params.actions) {
					$(`#device-action`).empty();
					params.actions.forEach((val, key) => {
						$(`#device-action`).append(actions[val]);
					});
				}
			});

			socket.on('qr', params => {
				$(`#device-status`).html(`<div id="qrcode"></div>`);
				var qrcode = new QRCode(document.getElementById("qrcode"), {
				    text: params.qr,
				    width: 256,
				    height: 256,
				    colorDark : "#000000",
				    colorLight : "#ffffff",
				    correctLevel : QRCode.CorrectLevel.L
				});
				$("#qrcode > img").css({"margin":"auto"});
				$(`#device-msg`).text("Silahkan scan QR Code di atas!");
				if(params.actions) {
					$(`#device-action`).empty();
					params.actions.forEach((val, key) => {
						$(`#device-action`).append(actions[val]);
					});
				}
			});
		});

		$("#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.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}}