{{#section 'meta'}}
<title>Perpanjang Masa Aktif</title>
{{/section}}

<style type="text/css">
	ul.package-features {
	    list-style: none;
	    padding: 0;
	    margin: 0;
	}

	.package-features li {
	    border-bottom: solid 1px #acafb6;
	    padding: 0.25rem 0;
	}

	.package-icons {
	    display: inline-block;
	    padding: 1rem;
	    background: var(--bs-green);
	    color: white;
	    border-radius: 50%;
	    width: 64px;
	    height: 64px;
	}

	.package-icons i {    
		font-size: 2.5rem;
	    line-height: .75;
	}
</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">Perpanjang Masa Aktif</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">Perpanjang Masa Aktif</li>
					</ol>
				</div>

			</div>
		</div>
	</div>
	<!-- end page title -->
	
	<div class="section-body">
		<div class="row">
			<div class="col-lg-8">
				<div class="card">
					<div class="card-header">
						<div class="card-title">Detail Informasi</div>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-lg-6">
								<div class="mb-4">
									<b>Perangkat:</b>
									<table>
										<tbody>
											<tr>
												<td>Nama</td>
												<td class="px-2">:</td>
												<td>{{device.name}}</td>
											</tr>
											<tr>
												<td>Session</td>
												<td class="px-2">:</td>
												<td>{{device.session}}</td>
											</tr>
											<tr>
												<td>Kedaluarsa</td>
												<td class="px-2">:</td>
												<td class="text-danger">{{datetimeidformat device.expired_at}}</td>
											</tr>
											<tr>
												<td>Paket</td>
												<td class="px-2">:</td>
												<td class="fw-bold">{{package.name}}</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div>
									<b>Keterangan Paket:</b>
									<ul class="package-features">
										{{#jsoneach package.features}}
										<li class="package-feature-items">{{this}}</li>
										{{/jsoneach}}
									</ul>
								</div>
							</div>
							<div class="col-lg-6">
								<img class="img-fluid" src="{{base_url 'uploads/generals/features.png'}}">
							</div>
						</div>
					</div>
					<div class="card-footer">
						
					</div>
				</div>
			</div>
			<div class="col-lg-4">
				<div class="card">
					<form id="form" method="post" action="{{base_url 'api/whatsapp'}}/{{device.id}}/renew">
						<div class="card-header">
							<div class="card-title">Pembayaran</div>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-lg-12">
									<div class="form-group">
										<label>Harga</label>
										<div class="form-control">Rp.{{number_format package.price}}/Bln</div>
									</div>
								</div>
								<div class="col-lg-12">
									<div class="form-group">
										<label>Durasi</label>
										<select name="duration" required="" class="form-control">
											<option value="1">1 Bulan</option>
											<option value="3">3 Bulan</option>
											<option value="6">6 Bulan</option>
											<option value="12">12 Bulan</option>
										</select>
										<span validation-for="duration"></span>
									</div>
								</div>
								<div class="col-lg-12">
									<div class="form-group">
										<label>Total Bayar</label>
										<div id="price-total" class="form-control">Rp.{{number_format package.price}}</div>
									</div>
								</div>
								<div class="col-lg-12">
									<div class="form-group">
										<label>Metode Pembayaran</label>
										<select name="bank_id" required="" class="form-control">
											<option value="">-- Pilih Metode --</option>
											{{#each banks}}
											<option value="{{this.id}}">[{{this.mode}}] {{this.name}}</option>
											{{/each}}
										</select>
										<span validation-for="bank_id"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="card-footer">
							<div class="text-center">
								<button class="btn btn-primary"><i class="fa fa-money-bill-alt mr-1"></i> Bayar Sekarang</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>

{{#section 'javascript'}}
<script type="text/javascript">
	const price = {{{package.price}}};
</script>
<script type="text/javascript">
	$(document).ready(function() {
		$(`select[name="bank_id"]`).select2({
			width: '100%'
		});

		$(`select[name="duration"]`).select2({
			width: '100%'
		}).on('select2:select', function(event){
			event.preventDefault();
			$(`#price-total`).text( idr(parseInt(this.value) * price, "Rp.") );
		});

		$("#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.replace(response.redirect_to);
				});
			})
			.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}}