diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 8cdf46d1..c0c6f224 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,100 +1,116 @@
 <template>
-  <el-main>
-    <progress-track v-model="status"/>
-    <div v-if="booking.user_bankslip_path" align="center">
-      <h4 style="margin-top:5%" >
-        Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
-        Reason : {{ booking.reject_reason }}
-      </h4>
-      <br>
-      <br>
-    </div>
-    <div v-else align="center">
-      <h1>Waiting For Payment</h1>
-    </div>
+	<el-main>
+		<progress-track v-model="status" />
+		<div align="center" v-if="booking.user_bankslip_path">
+			<h4 style="margin-top:5%">
+				Your Bankslip Has Been Rejected, Please Reupload Your Bankslip
+				<br> Reason : {{ booking.reject_reason }}
+			</h4>
+			<br>
+			<br>
+		</div>
+		<div v-else align="center">
+			<h1>Please Upload Bankslip</h1>
+		</div>
 
-    <div class="row">
-      <table class="table table-striped">
-        <tbody>
-          <tr>
-            <td>Amount : </td>
-            <td><b>RMB {{ booking.amount }}</b></td>
-          </tr>
-          <tr>
-            <td>Bankin Amount : </td>
-            <td><b> MYR {{ booking.bankin_amount }}</b></td>
-          </tr>
-          <tr>
-            <td colspan="2">
-              <b>{{ bankDetail.company_name }}</b><br>
-              {{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="row timer">
-      <div class="col">
-        <vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
-          <template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
-        </vue-countdown>
-      </div>
-    </div>
-    <!-- upload image -->
-    <div class="row upload">
-      <div class="col">
-        <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'"
-                   :on-preview="handlePictureCardPreview"
-                   :on-remove="handleRemove"
-                   :on-error="uploadError"
-                   accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
-                   list-type="picture-card" align="center">
-          <i class="el-icon-plus" />
-        </el-upload>
-        <el-dialog :visible.sync="dialogVisible">
-          <img :src="dialogImageUrl" width="100%" alt="">
-        </el-dialog>
-      </div>
-    </div>
-    <!-- upload image end -->
-    <div class="row bankinAmount">
-      <div class="col">
-        Bankin Amount (RM) :<br>
-        <el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
-          <el-form-item prop="transfer_amount">
-            <el-input v-model="user_slip_form.transfer_amount" class="transferAmountInput" type="text" placeholder="Transfer Amount"/>
-          </el-form-item>
-          <el-form-item>
-            <el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
-            <router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
-              Upload Later
-            </router-link>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-  </el-main>
+		<div class="row">
+			<table class="table table-striped">
+				<tbody>
+					<tr>
+						<td>Amount : </td>
+						<td>
+							<b>RMB {{ booking.amount }}</b>
+						</td>
+					</tr>
+					<tr>
+						<td>Bankin Amount : </td>
+						<td>
+							<b> MYR {{ booking.bankin_amount }}</b>
+						</td>
+					</tr>
+					<tr>
+						<td colspan="2">
+							<b>{{ bankDetail.company_name }}</b>
+							<br> {{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<div class="row timer">
+			<div class="col">
+				<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
+					<template slot-scope="props">Time Remaining：
+						<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
+				</vue-countdown>
+			</div>
+		</div>
+		<!-- upload image -->
+		<div class="row upload">
+			<div class="col">
+				<!-- <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false" :on-preview="handlePictureCardPreview"
+				    :on-remove="handleRemove" :on-error="uploadError" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" list-type="picture-card"
+				    align="center">
+					<i class="el-icon-plus" />
+				</el-upload>
+				<el-dialog :visible.sync="dialogVisible">
+					<img :src="dialogImageUrl" width="100%" alt="">
+				</el-dialog> -->
+				<el-upload class="avatar-uploader" :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false" :on-success="handleUploadSuccess"
+				    :before-upload="beforeFileUpload"
+					algin="center">
+					<img v-if="imageUrl" :src="imageUrl" class="avatar">
+					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
+				</el-upload>
+			</div>
+		</div>
+		<!-- upload image end -->
+		<div class="row bankinAmount">
+			<div class="col">
+				Bankin Amount (RM) :
+				<br>
+				<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
+					<el-form-item prop="transfer_amount">
+						<el-input class="transferAmountInput" v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount"
+						/>
+					</el-form-item>
+					<el-form-item>
+						<el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
+						<router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
+							Upload Later
+						</router-link>
+					</el-form-item>
+				</el-form>
+			</div>
+		</div>
+	</el-main>
 </template>
 <style>
 	h1 {
-		margin-top:5%;
-		font-size:3vw;
-		text-align:center;
-		margin-bottom:3%;
-  	}
-	.timer, .upload, .bankinAmount {
+		margin-top: 5%;
+		font-size: 3vw;
+		text-align: center;
+		margin-bottom: 3%;
+	}
+
+	.timer,
+	.upload,
+	.bankinAmount {
 		text-align: center;
 	}
 
 	.transferAmountInput {
 		width: 20%;
 	}
+
 	.row {
-    	margin-bottom: 3%;
-  	}
-	td:last-child {
-		text-align:center;
+		margin-bottom: 3%;
 	}
+
+	td:last-child {
+		text-align: center;
+	}
+
 	@media screen and (max-width: 767px) {
 		.transferAmountInput {
 			width: 60%;
@@ -103,200 +119,256 @@
 			font-size: 3.5vmin;
 		}
 		h1 {
-      		font-size: 1em;
-    	}
+			font-size: 1em;
+		}
 	}
+	  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
 </style>
 <script>
-import VueCountdown from '@xkeshi/vue-countdown'
-import ProgressTrack from '~/components/ProgressTrack'
-import axios from 'axios'
+	import VueCountdown from '@xkeshi/vue-countdown'
+	import ProgressTrack from '~/components/ProgressTrack'
+	import axios from 'axios'
 
-export default {
-  middleware: ['auth'],
-  name: 'MyComponent',
-  components: {
-    'vue-countdown': VueCountdown,
-    'progress-track': ProgressTrack
-  },
-  data () {
-    return {
-      status: 2,
-      start: false,
-      loading: false,
-      dialogImageUrl: '',
-      dialogVisible: false,
-      booking_id: this.$route.params.id,
-      user_slip_form: {
-        transfer_amount: ''
-      },
-      booking: {
-        amount: '',
-        bankin_amount: '',
-        timeout: 1,
-        term: '123',
-        user_bankslip_path: null,
-        reject_reason: null
-      },
-      rules: {
-        transfer_amount: [{
-          required: true,
-          message: 'Please input amount',
-          trigger: 'change'
-        }]
-      },
-      active_bank_setting: {
-        x1_bank_id: null,
-        x2_bank_id: null,
-        beneficiary_id: null
-      },
-      bankDetail: {}
-    }
-  },
-  beforeCreate () {
-    const loading = this.$loading({
-      lock: true,
-      text: 'Please wait..',
-      spinner: 'el-icon-loading',
-      background: 'rgba(0, 0, 0, 0.7)'
-    })
+	export default {
+		middleware: ['auth'],
+		name: 'MyComponent',
+		components: {
+			'vue-countdown': VueCountdown,
+			'progress-track': ProgressTrack
+		},
+		data() {
+			return {
+				status: 2,
+				start: false,
+				loading: false,
+				dialogImageUrl: '',
+				imageUrl:null,
+				dialogVisible: false,
+				booking_id: this.$route.params.id,
+				user_slip_form: {
+					transfer_amount: ''
+				},
+				booking: {
+					amount: '',
+					bankin_amount: '',
+					timeout: 1,
+					term: '123',
+					user_bankslip_path: null,
+					reject_reason: null,
+				},
+				rules: {
+					transfer_amount: [{
+						required: true,
+						message: 'Please input amount',
+						trigger: 'change'
+					}]
+				},
+				active_bank_setting: {
+					x1_bank_id: null,
+					x2_bank_id: null,
+					beneficiary_id: null
+				},
+				bankDetail: {}
+			}
+		},
+		beforeCreate() {
+			const loading = this.$loading({
+				lock: true,
+				text: 'Please wait..',
+				spinner: 'el-icon-loading',
+				background: 'rgba(0, 0, 0, 0.7)'
+			})
 
-    axios.get('/api/booking/' + this.$route.params.id)
-      .then((response) => {
-        this.booking.amount = response.data.amount
-        this.booking.bankin_amount = response.data.bia
-        this.booking.timeout = response.data.timeout * 1000
-        this.booking.term = response.data.term
+			axios.get('/api/booking/' + this.$route.params.id)
+				.then((response) => {
+					this.booking.amount = response.data.amount;
+					this.booking.bankin_amount = response.data.bia;
+					this.booking.timeout = response.data.timeout * 1000;
+					this.booking.term = response.data.term;
 
-        if (response.data.user_bankslip_path) {
-          this.booking.user_bankslip_path = response.data.user_bankslip_path
-          this.booking.reject_reason = response.data.reject_reason
-        }
-        console.log(this.booking)
-        this.start = true
+					if (response.data.user_bankslip_path) {
+						this.booking.user_bankslip_path = response.data.user_bankslip_path
+						this.booking.reject_reason = response.data.reject_reason
+					}
+					console.log(this.booking);
+					this.start = true;
 
-        if (this.booking.timeout < 0) {
-          this.$message({
-            showClose: true,
-            message: 'Booking timeout, please make another booking.',
-            type: 'error',
-            duration: 30000
-          })
-          this.$router.push({
-            name: 'home'
-          })
-        }
-      }).catch((error) => {
-        this.$router.push({
-          name: 'notfound'
-        })
-        console.log(error)
-      })
-    axios.get('/api/active-bank')
-      .then((response) => {
-        this.active_bank_setting = response.data
-        var url = ''
-        if (this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' || this.booking.term === 'x1_ba') {
-          url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id
-        } else if (this.booking.term === 'x2_cash' || this.booking.term === 'x2_cheque' || this.booking.term === 'x2_ba') {
-          url = '/api/malaysia-bank/' + this.active_bank_setting.x2_bank_id
-        }
+					if (this.booking.timeout < 0) {
+						this.$message({
+							showClose: true,
+							message: 'Booking timeout, please make another booking.',
+							type: 'error',
+							duration: 30000
+						})
+						this.$router.push({
+							name: 'home'
+						})
+					}
+				}).catch((error) => {
+					this.$router.push({
+						name: 'notfound'
+					})
+					console.log(error)
+				})
+			axios.get('/api/active-bank')
+				.then((response) => {
+					this.active_bank_setting = response.data;
+					var url = '';
+					if (this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' || this.booking.term === 'x1_ba') {
+						url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id;
+					} else if (this.booking.term === 'x2_cash' || this.booking.term === 'x2_cheque' || this.booking.term === 'x2_ba') {
+						url = '/api/malaysia-bank/' + this.active_bank_setting.x2_bank_id;
+					}
 
-        axios.get(url)
-          .then((response) => {
-            this.bankDetail = response.data
-            loading.close()
-          })
-          .catch((error) => {
-            loading.close()
-            console.log(error)
-            this.$message({
-              showClose: true,
-              message: 'Fetch data fail',
-              type: 'error',
-              duration: 10000
-            })
-          })
-      })
-      .catch((error) => {
-        console.log(error)
-        this.$message({
-          showClose: true,
-          message: 'Fetch bank details fail',
-          type: 'error',
-          duration: 10000
-        })
-      })
-  },
-  methods: {
-    handleCoutdownend () {
-      this.$message({
-        showClose: true,
-        message: 'Booking timeout, please make another booking.',
-        type: 'error',
-        duration: 30000
-      })
-      this.$router.push({
-        name: 'home'
-      })
-    },
-    handleRemove (file, fileList) {
-      // console.log(file, fileList)
-    },
-    uploadError (file, fileList) {
-      this.$message.warning(`Incorrect file format or file size too big.`)
-    },
-    handlePictureCardPreview (file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    submitUserSlip (formName) {
-      this.loading = true
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          let newConfirmation = {
-            amount: this.booking.amount,
-            term: this.term
-          }
-        } else {
-          this.loading = false
-        }
-      })
-      let newUserSlip = {
-        transfer_amount: this.user_slip_form.transfer_amount
-      }
-      axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount/', newUserSlip)
-        .then((response) => {
-          console.log(response)
+					axios.get(url)
+						.then((response) => {
+							this.bankDetail = response.data;
+							loading.close()
+						})
+						.catch((error) => {
+							loading.close()
+							console.log(error);
+							this.$message({
+								showClose: true,
+								message: 'Fetch data fail',
+								type: 'error',
+								duration: 10000
+							});
+						});
+				})
+				.catch((error) => {
+					console.log(error);
+					this.$message({
+						showClose: true,
+						message: 'Fetch bank details fail',
+						type: 'error',
+						duration: 10000
+					});
+				});
+		},
+		methods: {
+			handleUploadSuccess(res, file) {
+				this.imageUrl = URL.createObjectURL(file.raw);
+				this.$message({
+					showClose: true,
+					message: 'Uploaded.',
+					type: 'success',
+					duration: 5000
+				})
+			},
 
-          this.$message({
-            showClose: true,
-            message: 'Your bankinslip has been submitted, please wait admin to approve.',
-            type: 'success',
-            duration: 5000
-          })
+			beforeFileUpload(file) {
+				//const isJPG = file.type === 'image/jpeg';
+				const isLt10M = file.size / 10240 / 10240 < 2;
 
-          this.$router.push({
-            name: 'home'
-          })
-        })
-        .catch((error) => {
-          this.loading = false
-          this.$message({
-            showClose: true,
-            message: 'Please upload your bankin slip first.',
-            type: 'warning',
-            duration: 10000
-          })
-          console.log(error)
-        })
-    },
-    handleTimeExpire () {
-      alert('Booking expired')
-    },
-    startTimer () {
-      this.start = true
-    }
-  }
-}
+				// if (!isJPG) {
+				// 	this.$message.error('Avatar picture must be JPG format!');
+				// }
+				if (!isLt10M) {
+					this.$message.error('File size can not exceed 10MB!');
+				}
+
+				this.$message({
+					showClose: true,
+					message: 'Uploading..',
+					type: 'success',
+					duration: 5000
+				})
+				// return isJPG && isLt2M;
+				return isLt10M;
+			},
+
+			handleCoutdownend() {
+				this.$message({
+					showClose: true,
+					message: 'Booking timeout, please make another booking.',
+					type: 'error',
+					duration: 30000
+				})
+				this.$router.push({
+					name: 'home'
+				})
+			},
+			handleRemove(file, fileList) {
+				// console.log(file, fileList)
+			},
+			uploadError(file, fileList) {
+				this.$message.warning(`Incorrect file format or file size too big.`)
+			},
+			handlePictureCardPreview(file) {
+				this.dialogImageUrl = file.url
+				this.dialogVisible = true
+			},
+			submitUserSlip(formName) {
+				this.loading = true
+				this.$refs[formName].validate((valid) => {
+					if (valid) {
+						let newConfirmation = {
+							amount: this.booking.amount,
+							term: this.term
+						}
+					} else {
+						this.loading = false
+					}
+				})
+				let newUserSlip = {
+					transfer_amount: this.user_slip_form.transfer_amount
+				}
+				axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount/', newUserSlip)
+					.then((response) => {
+						console.log(response);
+
+						this.$message({
+							showClose: true,
+							message: 'Your bankinslip has been submitted, please wait admin to approve.',
+							type: 'success',
+							duration: 5000
+						})
+
+						this.$router.push({
+							name: 'home'
+						})
+
+					})
+					.catch((error) => {
+						this.loading = false
+						this.$message({
+							showClose: true,
+							message: 'Please upload your bankin slip first.',
+							type: 'warning',
+							duration: 10000
+						})
+						console.log(error)
+					})
+			},
+			handleTimeExpire() {
+				alert('Booking expired')
+			},
+			startTimer() {
+				this.start = true;
+			}
+		}
+	}
 </script>