<template>
	<div class="panel panel-default nominee-add-page">
		<div class="panel-body">
			<div class="nominee-add-page__header clearfix">
				<h4 class="pull-left nominee-add-page__title">
					<i class="fa fa-user-plus text-muted"></i> Tambah Calon
				</h4>
				<router-link :to="{ name: 'Maklumat Calon', query: { position_id: position_id } }"
					class="btn btn-default pull-right">
					<i class="fa fa-arrow-left"></i> Kembali
				</router-link>
			</div>

			<p class="text-muted small nominee-add-page__intro">
				Lengkapkan maklumat calon. Medan bertanda <span class="text-danger">*</span> adalah wajib.
			</p>

			<form class="nominee-add-form" method="POST" id="add_form" :action="data.API + 'nominee'"
				enctype="multipart/form-data" @submit.prevent="add()">
				<div class="row">
					<div class="col-md-8">
						<div class="row">
							<div class="col-sm-6">
								<div class="form-group">
									<label for="nominee-name">Nama Calon <span class="text-danger">*</span></label>
									<input id="nominee-name" type="text" name="name" class="form-control"
										placeholder="Nama penuh" required />
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label for="nominee-no-anggota">No. Anggota <span
											class="text-danger">*</span></label>
									<input id="nominee-no-anggota" type="text" name="no_anggota" class="form-control"
										placeholder="No. keahlian" required />
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-sm-6">
								<div class="form-group">
									<label for="nominee-unit">Unit <span class="text-danger">*</span></label>
									<input id="nominee-unit" type="text" name="unit" class="form-control" required />
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label for="nominee-umur">Umur <span class="text-danger">*</span></label>
									<input id="nominee-umur" type="number" name="umur" class="form-control" min="1"
										max="120" placeholder="Tahun" required />
								</div>
							</div>
						</div>

						<div class="form-group">
							<label for="nominee-jawatan-sekarang">Jawatan Sekarang <span
									class="text-danger">*</span></label>
							<input id="nominee-jawatan-sekarang" type="text" name="jawatan_sekarang"
								class="form-control" required />
						</div>

						<div class="form-group">
							<label for="nominee-education">Taraf Pendidikan</label>
							<input id="nominee-education" type="text" name="education" class="form-control"
								placeholder="Pilihan" />
						</div>

						<div class="form-group">
							<label for="nominee-experience">Pengalaman Kerja</label>
							<textarea id="nominee-experience" name="experience" class="form-control" rows="4"
								placeholder="Pilihan — senaraikan pengalaman relevan"></textarea>
						</div>

						<div class="form-group">
							<label for="nominee-position-id">Sesi Dicalonkan <span class="text-danger">*</span></label>
							<select id="nominee-position-id" class="form-control" v-model="position_id"
								name="position_id" required>
								<option value="0" disabled>— Pilih sesi —</option>
								<option v-for="position in data.positions" :key="position.id" :value="position.id">
									{{ position.name }}
								</option>
							</select>
						</div>
					</div>

					<div class="col-md-4">
						<div class="nominee-add-photo panel panel-default">
							<div class="panel-heading">
								<strong><i class="fa fa-camera"></i> Gambar calon</strong>
								<span class="text-muted small nominee-add-photo__hint">Pilihan</span>
							</div>
							<div class="panel-body">
								<div class="nominee-add-photo__preview"
									:class="{ 'nominee-add-photo__preview--empty': !imageUrl }">
									<img v-if="imageUrl" :src="imageUrl" alt="Pratonton gambar calon" />
									<div v-else class="nominee-add-photo__placeholder">
										<i class="fa fa-picture-o"></i>
										<span>Tiada gambar dipilih</span>
									</div>
								</div>
								<label class="btn btn-default btn-block nominee-add-photo__browse"
									for="nominee-file-input">
									<i class="fa fa-folder-open"></i> Pilih fail
								</label>
								<input id="nominee-file-input" name="photo" type="file" class="nominee-add-photo__input"
									accept="image/*" @change="handleImageChange" />
								<p class="text-muted small nominee-add-photo__formats">PNG, JPG atau GIF</p>
							</div>
						</div>
					</div>
				</div>

				<hr class="nominee-add-form__rule" />

				<div class="clearfix nominee-add-form__actions">
					<router-link :to="{ name: 'Maklumat Calon', query: { position_id: position_id } }"
						class="btn btn-default">
						<i class="fa fa-times"></i> Batal
					</router-link>
					<button type="submit" class="btn btn-primary" :disabled="loading">
						<i v-if="loading" class="fa fa-spinner fa-spin"></i>
						<i v-else class="fa fa-check"></i>
						{{ loading ? 'Menghantar…' : 'Simpan calon' }}
					</button>
				</div>
			</form>
		</div>
	</div>
</template>

<script>
export default {
	data: function () {
		return {
			imageUrl: '',
			loading: false
		}
	},

	methods: {
		add: function () {
			if (this.loading) return;
			var vm = this;
			this.loading = true;
			this.util.notify('Adding Nominee', 'progress', 0);
			$('#add_form').ajaxSubmit({
				success: function (response) {
					$.notifyClose();
					vm.loading = false;
					if (vm.util.showResult(response, 'success', 'ajax'))
						vm.$router.push({ name: 'Maklumat Calon' });
				},
				error: function (error) {
					alert('Nominee with the same name has already registered');
					location.reload();
					$.notifyClose();
					vm.loading = false;
					vm.util.showResult(error, 'error', 'ajax');
				},
				uploadProgress: function (a, b, c, progress) {
					vm.util.notify('Adding Nominee', 'progress', progress);
				}
			})
		},

		handleImageChange(event) {
			const file = event.target.files[0];
			const imageType = /image.*/;

			if (file && file.type.match(imageType)) {
				const reader = new FileReader();

				reader.onload = (e) => {
					this.imageUrl = e.target.result;
				};

				reader.readAsDataURL(file);
			} else {
				event.target.value = '';
				this.imageUrl = '';
			}
		}
	},

	computed: {
		position_id: {
			get: function () {
				return this.$route.query.position_id;
			},

			set: function (id) {
				this.$router.replace({ query: { position_id: id } });
			}
		}
	}
}
</script>

<style scoped>
.nominee-add-page__header {
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.nominee-add-page__title {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 600;
}

.nominee-add-page__title .fa {
	margin-right: 6px;
}

.nominee-add-page__intro {
	margin-bottom: 18px;
}

.nominee-add-photo .panel-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.nominee-add-photo__hint {
	font-weight: normal;
}

.nominee-add-photo__preview {
	width: 100%;
	aspect-ratio: 1;
	max-height: 240px;
	border-radius: 4px;
	overflow: hidden;
	background: #f9f9f9;
	border: 1px dashed #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.nominee-add-photo__preview--empty {
	min-height: 180px;
}

.nominee-add-photo__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nominee-add-photo__placeholder {
	text-align: center;
	color: #999;
	padding: 16px;
}

.nominee-add-photo__placeholder .fa {
	font-size: 36px;
	display: block;
	margin-bottom: 8px;
	opacity: 0.65;
}

.nominee-add-photo__placeholder span {
	display: block;
	font-size: 12px;
}

.nominee-add-photo__input {
	position: absolute;
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	z-index: -1;
}

.nominee-add-photo__browse {
	margin-bottom: 0;
}

.nominee-add-photo__formats {
	margin: 8px 0 0;
	text-align: center;
}

.nominee-add-form__rule {
	margin-top: 8px;
	margin-bottom: 16px;
	border-top-color: #eee;
}

.nominee-add-form__actions {
	text-align: right;
}

.nominee-add-form__actions .btn+.btn {
	margin-left: 8px;
}

@media (max-width: 991px) {
	.nominee-add-photo {
		margin-top: 8px;
	}
}
</style>
