{{#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">Tulis Pesan</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">Tulis Pesan</li>
					</ol>
				</div>

			</div>
		</div>
	</div>
	<!-- end page title -->
	
	<div class="section-body">
		<div class="row">
			<div class="col-lg-6">
				<form id="form" method="post" action="">
					<div class="card">
						<div class="card-body">
							<div class="row">
								<div class="col-lg-12">
									<div class="form-group">
										<label>Pilih Perangkat</label>
										<select class="form-control _select2" name="session" required="">
											<option value="">-- Pilih Perangkat --</option>
											{{#each devices}}
											<option value="{{this.session}}">[{{this.session}}] {{this.name}}</option>
											{{/each}}
										</select>
									</div>
								</div>
								<div class="col-lg-12">
									<div class="form-group">
										<label>Nomor</label>
										<input name="phone" value="" class="form-control" type="text" autocomplete="off">
										<span validation-for="phone"></span>
									</div>
								</div>
								<div class="col-lg-12">
									<div class="form-group">
										<label>Pesan</label>
										<textarea class="form-control" name="message" rows="4"></textarea>
										<span validation-for="message"></span>
									</div>
								</div>
							</div>
							<div class="border-top pt-3">
								<button class="btn btn-primary"><i class="fa fa-paper-plane"></i> Kirim Pesan</button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="col-lg-4">
				<div class="d-none d-lg-block">
					<img src="{{base_url 'uploads/generals/writing-a-letter.svg'}}" class="img-fluid">
				</div>
			</div>
		</div>
	</div>
</section>

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

	$(document).ready(function() {
		$(`._select2`).select2({
			width: '100%'
		});

		$(`input[name="phone"]`).on('input propertychange', function(event){
			event.preventDefault();
			const msg = this.value.replaceAll(/[^0-9]/gi, '');
			this.value = msg;
		});

		$("#form").submit(function(event) {
			event.preventDefault();
			const f = this;
			var formData = new FormData(this);
			$(`span[validation-for]`).text('');
			$.LoadingOverlay("show");
			$.ajax({
				url: base_url(`api/v1/${this['session'].value}/send_text`),
				type: 'POST',
				dataType: 'json',
				processData: false,
				contentType: false,
				data: formData,
			})
			.done(function(response, textStatus, jqXHR) {
				Swal.fire('Berhasil!', response.message, 'success');
				f.reset();
				$(`._select2`).trigger('change');
			})
			.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}}