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

				<div class="page-title-right">
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a href="javascript: void(0);">Pengguna</a></li>
						<li class="breadcrumb-item active">Pendaftaran</li>
					</ol>
				</div>

			</div>
		</div>
	</div>
	<!-- end page title -->
	
	<div class="section-body">
		<form id="form" action="{{base_url 'api/users/register'}}">
			<div class="row">
				<div class="col-xl-4 col-lg-12 col-sm-12">
					<div class="card mb-4">
						<div class="card-header">
							<div class="card-title">Foto Profil</div>
						</div>
						<div class="card-body text-center">
							<img alt="Avatar" class="img-fit-center mb-4" style="height: 274px; width: 274px;" src="{{base_url 'uploads/profiles/user.png'}}">
							<label class="btn btn-primary btn-sm w-100">
								<span><i class="fa fa-camera"></i> Ganti Foto</span>
								<input type="file" accept=".jpg,.png,.jpeg" name="photo" class="d-none">
							</label>
							<span validation-for="photo" class="badge bg-warning mt-2"></span>
						</div>
					</div>
				</div>
				<div class="col-xl-8 col-lg-12 col-sm-12">
					<div class="card">
						<div class="card-header">
							<div class="card-title">Biodata</div>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-lg-12">
									<div class="form-group">
										<label for="exampleInputname">Nama Lengkap</label>
										<input autocomplete="" name="name" value="" type="text"
										class="form-control" placeholder="Nama Lengkap">
										<span validation-for="name" class="badge bg-warning"></span>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="form-group">
										<label for="exampleInputUsename">Username</label>
										<input autocomplete="" name="username" value=""
										type="text" class="form-control" placeholder="Username">
										<span validation-for="username" class="badge bg-warning"></span>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="form-group">
										<label for="exampleInputUsename">Email</label>
										<input autocomplete="" name="email" value="" type="text"
										class="form-control" placeholder="email">
										<span validation-for="email" class="badge bg-warning"></span>
									</div>
								</div>
								<div class="col-lg-12">
									<div class="form-group">
										<label for="exampleInputnumber">Nomor Telepon</label>
										<input autocomplete="" name="phone" value=""
										type="number" class="form-control" placeholder="contoh: 085789451248">
										<span validation-for="phone" class="badge bg-warning"></span>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="card">
						<div class="card-header">
							<div class="float-start">
								<div class="card-title">Keamanan</div>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="card-body no-padding">
							<span class="d-inline-block bg-warning px-1 px-2 text-dark rounded mb-2">* Kosongkan kata
							sandi jika tidak ingin mengganti.</span>
							<div class="form-group">
								<label>Kata Sandi</label>
								<input name="password" value="" class="form-control" type="password" autocomplete="off">
								<span validation-for="password" class="badge bg-warning"></span>
							</div>
							<div class="form-group">
								<label>Konfirmasi Kata Sandi</label>
								<input name="password_confirm" value="" class="form-control" type="password"
								autocomplete="off">
								<span validation-for="password_confirm" class="badge bg-warning"></span>
							</div>
						</div>
					</div>
					<div class="card">
						<div class="card-header">
							<div class="card-title"><i class="fa fa-user-circle"></i> Pernyataan</div>
						</div>
						<div class="card-body">
							<label>
								<input type="checkbox" name="agree" value="1">
								<span class="ms-2 fw-bold">Saya menyatakan dan bertanggung jawab bahwa data yang saya
									isikan pada formulir data pengguna ini adalah
								<b>BENAR</b> dan <b>SAH</b> sesuai dengan identitas yang berlaku.</span>
							</label>
							<button disabled type="submit" class="btn btn-primary mt-1 w-100">Simpan Data</button>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</section>

{{#section 'javascript'}}
<script type="text/javascript">
	$(document).ready(function() {
		$(`input[name="agree"]`).change(function(e) {
			e.preventDefault();
			$(`button[type="submit"]`).prop("disabled", !this.checked);
		});

		$(`input[type="file"]`).change(function(e) {
			e.preventDefault();
			if (this.files.length > 0) {
				[img] = this.files;
				imgUrl = URL.createObjectURL(img);
				$(`img[alt="Avatar"]`).attr("src", imgUrl);
			}
		});

		$("#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( base_url('member_area/users') );
				});
			})
			.fail(function(jqXHR, textStatus, errorThrown) {
				if (jqXHR.responseJSON ?? false) {
					Swal.fire('Maaf!', jqXHR.responseJSON.message, 'error');
					if (jqXHR.responseJSON.errors ?? false) {
						$.each(jqXHR.responseJSON.errors, function(index, val) {
							$(`span[validation-for="${index}"]`).text(val);
						});
					}
				}
			})
			.always(function() {
				$.LoadingOverlay("hide");
			});
		});
	});
</script>
{{/section}}