diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index cbbff03b..9a4c6c1c 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -8,92 +8,155 @@
         <div class="grid-content bg-purple" align="center">
           I need :
           <el-select v-model="value" placeholder="RMB">
-            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"/>
-            <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2"/>
+            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" />
           </el-select>
         </div>
       </el-col>
     </el-row>
     <br>
     <el-row :gutter="20" type="flex" justify="center" align="middle">
-      <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8"><div class="grid-content bg-purple" align="left"><el-input v-model="booking.amount" placeholder="Amount"/></div></el-col>
+      <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
+        <div class="grid-content bg-purple" align="left">
+          <el-input v-model="booking.amount" placeholder="Amount" />
+        </div>
+      </el-col>
     </el-row>
     <!-- Input-Amount-end -->
     <hr>
     <!-- Rate-Display -->
     <br>
     <el-row :gutter="20" type="flex" justify="center" align="middle">
-      <el-col><div class="grid-content bg-purple" align="right"/></el-col>
-      <el-col><div class="grid-content bg-purple" align="left"/></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">Cheque</div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">BA</div></el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="right" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="left" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">Cheque</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">BA</div>
+      </el-col>
     </el-row>
 
     <el-row :gutter="20" type="flex" justify="center" align="middle">
-       <el-col>
+      <el-col>
         <el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="left">
-            <div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div>
+          <div class="grid-content bg-purple" align="right">
+            <i type="button" class="el-icon-question" circle/>
+          </div>
         </el-tooltip>
       </el-col>
       <!-- <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div></el-col> -->
-      <el-col><div class="grid-content bg-purple" align="left">X1 :</div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="left">X1 :</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.56</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.64</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.62</div>
+      </el-col>
     </el-row>
 
     <el-row :gutter="20" type="flex" justify="center" align="middle">
-      <el-col><div class="grid-content bg-purple"/></el-col>
-      <el-col><div class="grid-content bg-purple"/></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">
-      <el-button type="text" @click="acceptTerm('x1_cash')">Book</el-button></div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">
-      <el-button type="text" @click="acceptTerm('x1_cheque')">Book</el-button></div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">
-      <el-button type="text" @click="acceptTerm('x1_ba')">Book</el-button></div></el-col>
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x1_cash')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x1_cheque')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x1_ba')">Book</el-button>
+        </div>
+      </el-col>
     </el-row>
 
     <br>
     <el-row :gutter="20" type="flex" justify="center" align="middle">
-            <el-col>
+      <el-col>
         <el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="left">
-            <div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div>
+          <div class="grid-content bg-purple" align="right">
+            <i type="button" class="el-icon-question" circle/>
+          </div>
         </el-tooltip>
       </el-col>
-      <el-col><div class="grid-content bg-purple" align="left">X2 :</div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="left">X2 :</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.56</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.64</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.62</div>
+      </el-col>
     </el-row>
 
     <el-row :gutter="20" type="flex" justify="center" align="middle">
-      <el-col><div class="grid-content bg-purple"/></el-col>
-      <el-col><div class="grid-content bg-purple"/></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">
-      <el-button type="text" @click="acceptTerm('x2_cash')">Book</el-button></div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">
-      <el-button type="text" @click="acceptTerm('x2_cheque')">Book</el-button></div></el-col>
-      <el-col><div class="grid-content bg-purple" align="center">
-      <el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button></div></el-col>
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x2_cash')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x2_cheque')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button>
+        </div>
+      </el-col>
     </el-row>
     <!-- Rate-Display-end -->
 
     <!-- Form_popup -->
-    <el-dialog :visible.sync="dialogFormVisible" title="Booking" fullscreen="true" center>
-      <el-form><div align="center">
-        <el-form-item>
-          <el-input v-model="booking.account_name" type="text" placeholder="China Beneficiary Account" style="width: 80%"/>
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="booking.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%"/>
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="booking.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%"/>
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="booking.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"/>
-      </el-form-item></div>
+    <el-dialog :visible.sync="dialogFormVisible" title="Booking" :fullscreen="true" center>
+      <el-form>
+        <div align="center">
+          <el-form-item>
+            <el-input v-model="booking.account_name" type="text" placeholder="China Beneficiary Account" style="width: 80%" />
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="booking.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="booking.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="booking.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
+            />
+          </el-form-item>
+        </div>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">Cancel</el-button>
@@ -104,12 +167,12 @@
     <!-- Form_popup-end -->
 
     <!-- Booking_confirmation_popup -->
-    <el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" fullscreen="true" center>
+    <el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" :fullscreen="true" center>
 
       <!-- Table_booking_confirmation -->
       <el-table :data="bookingConfirmTable" align="center">
-        <el-table-column prop="data1" align="right" width="200"/>
-        <el-table-column prop="data2" align="left" width="200"/>
+        <el-table-column prop="data1" align="right" width="200" />
+        <el-table-column prop="data2" align="left" width="200" />
       </el-table>
       <!-- Table_booking_confirmation-end -->
 
@@ -120,55 +183,47 @@
     </el-dialog>
     <!-- Booking_confirmation_popup -->
 
-    <br><br>
+    <br>
+    <br>
     <hr>
 
     <!-- Booking Table -->
-    <el-row :gutter="20" >
+    <el-row :gutter="20">
       <div>
-        <el-table :data="bookingTable"> 
-           <el-table-column
-              label="No."
-              width="106">
-              <el-button type="text" slot-scope="scope" @click="viewStatus('{{scope.row.booking_no}}')"> {{scope.row.booking_no}}</el-button>
-               
-          
-            </el-table-column>
+        <el-table :data="bookingTable">
+          <el-table-column label="No." width="106">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+            <el-button type="text" slot-scope="scope" @click="(event) => { BookingStatus(event, scope.row.booking_no) }"> {{scope.row.booking_no}}</el-button>
+          </el-table-column>
           <el-table-column label="Date" prop="date" width="120" sortable/>
           <!-- <el-table-column  label="Term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler">
         </el-table-column> -->
-          <el-table-column label="Rate" width="74" prop="rate"/>
-          <el-table-column label="Amount" prop="amount" justify="center" width="110"/>
-          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount" prop="transfer_amount" width="150"/>
+          <el-table-column label="Rate" width="74" prop="rate" />
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" />
+          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
+            prop="transfer_amount" width="150" />
           <!-- <el-table-column label="ETA" sortable width="100"/> -->
           <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
         </el-table-column> -->
           <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
-            <el-table-column
-              label="Status"
-              width="106">
-              <template slot-scope="scope">
-                <el-popover trigger="hover" placement="top">
-                  <p>{{ scope.row.status_desc }}</p>
-                  <div slot="reference" class="name-wrapper">
-                    <el-tag size="medium">{{ scope.row.status }}</el-tag>
-                  </div>
-                </el-popover>
-              </template>
-            </el-table-column>
+          <el-table-column label="Status" width="106">
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.status }}</el-tag>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
           <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
-          <el-table-column prop="timeout" label="Bankin Timeout"/>
-          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag" label=""
-                           width="180" filter-placement="bottom-end" >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleEdit(scope.$index, scope.row)">Update</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)">Cancel</el-button>
-          </template>
+          <el-table-column prop="timeout" label="Bankin Timeout" />
+          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+            label="" width="180" filter-placement="bottom-end">
+            <template slot-scope="scope">
+              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
+            </template>
           </el-table-column>
         </el-table>
       </div>
@@ -178,236 +233,289 @@
   </el-main>
 </template>
 <style>
-  .el-tag{
+  .el-tag {
     cursor: pointer;
   }
 </style>
 <script>
-import Form from 'vform'
-import LoginWithGithub from '~/components/LoginWithGithub'
-import store from '~/store'
-import axios from 'axios'
+  import Form from 'vform'
+  import LoginWithGithub from '~/components/LoginWithGithub'
+  import store from '~/store'
+  import axios from 'axios'
 
-export default {
-  middleware: ['auth'],
+  export default {
+    middleware: ['auth'],
 
-  data () {
-    return {
-      booking: {amount: '', account_name: '', bank_name: '', bank_branch: '', account_num: ''},
-      term: '',
-      options1: [{
+    data() {
+      return {
+        status: '',
+        booking: {
+          amount: '',
+          account_name: '',
+          bank_name: '',
+          bank_branch: '',
+          account_num: ''
+        },
+        term: '',
+        options1: [{
+          value: 'RMB',
+          label: 'RMB'
+        }],
+        options2: [{
+          value2: 'MYR',
+          label2: 'MYR'
+        }],
         value: 'RMB',
-        label: 'RMB'
-      }],
-      options2: [{
-        value2: 'MYR',
-        label2: 'MYR'
-      }],
-      value: 'RMB',
-      dialogFormVisible: false,
-      dialogFormVisible1: false,
-      formLabelWidth: '0px',
-      bookingTable: [
-        {
-        date: '12/1/2018',
-        booking_no: '001',
-        rate: '1.23',
-        amount: 'RM 1000',
-        transfer_amount: 'RMB 10000',
-        status: '(1/6)',
-        status_desc: 'Waiting for payment',
-        timeout: '56:00:00'
-        },
-        {
-        date: '12/1/2018',
-        booking_no: '002',
-        rate: '1.23',
-        amount: 'RM 1000',
-        transfer_amount: 'RMB 10000',
-        status: '(2/6)',
-        status_desc: 'Waiting verification',
-        timeout: '56:00:00'
-        },
-        {
-        date: '12/1/2018',
-        booking_no: '003',
-        rate: '1.23',
-        amount: 'RM 1000',
-        transfer_amount: 'RMB 10000',
-        status: '(3/6)',
-        status_desc: 'Processing transfer',
-        timeout: '56:00:00'
-        },
-        {
-        date: '12/1/2018',
-        booking_no: '004',
-        rate: '1.23',
-        amount: 'RM 1000',
-        transfer_amount: 'RMB 10000',
-        status: '(4/6)',
-        status_desc: 'Transfer Complete, please upload your PO',
-        timeout: '56:00:00'
-        },
-        {
-        date: '12/1/2018',
-        booking_no: '005',
-        rate: '1.23',
-        amount: 'RM 1000',
-        transfer_amount: 'RMB 10000',
-        status: '(5/6)',
-        status_desc: 'Processing invoice',
-        timeout: '56:00:00'
-        },
-        {
-        date: '12/1/2018',
-        booking_no: '006',
-        rate: '1.23',
-        amount: 'RM 1000',
-        transfer_amount: 'RMB 10000',
-        status: '(6/6)',
-        status_desc: 'Order Completed',
-        timeout: '56:00:00'
-        }
-      ],
-      bookingConfirmTable: [{
-        data1: 'Order Number :',
-        data2: '001'
-      }, {
-        data1: 'Date :',
-        data2: '25/5/2018'
-      }, {
-        data1: 'Customer Marking :',
-        data2: 'CIEF/150ECE'
-      }, {
-        data1: '',
-        data2: ''
-      }, {
-        data1: 'Payment Method :',
-        data2: 'Cash/Bank Transfer'
-      }, {
-        data1: '',
-        data2: ''
-      }, {
-        data1: 'CNY/RMB :',
-        data2: 'CNY 120,500.00'
-      }, {
-        data1: '+ Service Charge :',
-        data2: 'CNY 20.00'
-      }, {
-        data1: '/ RATE :',
-        data2: '1.63'
-      }, {
-        data1: '',
-        data2: 'MYR 73,848.04'
-      }, {
-        data1: '+ GST 6% :',
-        data2: 'MYR 4,430.88'
-      }, {
-        data1: '',
-        data2: 'MYR 78,278.92'
-      }, {
-        data1: '',
-        data2: ''
-      }, {
-        data1: 'China Beneficiary Acc :',
-        data2: ''
-      }, {
-        data1: '',
-        data2: 'PENDING'
-      }, {
-        data1: '',
-        data2: ''
-      }, {
-        data1: 'Bank In Amount :',
-        data2: 'MYR 78,278.92'
-      }, {
-        data1: '',
-        data2: ''
-      }]
-    }
-  },
-  methods: {
-    // TODO fetch booking data on load 
-
-    formatter (row, column) {
-      return row.address
-    },
-    filterTag (value, row) {
-      return row.tag === value
-    },
-    filterHandler (value, row, column) {
-      const property = column['property']
-      return row[property] === value
-    },
-    acceptTerm: function (newterm) {
-      if (this.booking.amount == ''){
-        this.$message({
-          message: 'Please input amount',
-          type: 'warning'
-        });
-        return;
+        dialogFormVisible: false,
+        dialogFormVisible1: false,
+        formLabelWidth: '0px',
+        bookingTable: [{
+            date: '12/1/2018',
+            booking_no: '001',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(1/6)',
+            status_desc: 'Waiting for payment',
+            timeout: '56:00:00'
+          },
+          {
+            date: '12/1/2018',
+            booking_no: '002',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(2/6)',
+            status_desc: 'Waiting verification',
+            timeout: '56:00:00'
+          },
+          {
+            date: '12/1/2018',
+            booking_no: '003',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(3/6)',
+            status_desc: 'Processing transfer',
+            timeout: '56:00:00'
+          },
+          {
+            date: '12/1/2018',
+            booking_no: '004',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(4/6)',
+            status_desc: 'Transfer Complete, please upload your PO',
+            timeout: '56:00:00'
+          },
+          {
+            date: '12/1/2018',
+            booking_no: '005',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(5/6)',
+            status_desc: 'Processing invoice',
+            timeout: '56:00:00'
+          },
+          {
+            date: '12/1/2018',
+            booking_no: '006',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(6/6)',
+            status_desc: 'Order Completed',
+            timeout: '56:00:00'
+          }
+        ],
+        bookingConfirmTable: [{
+          data1: 'Order Number :',
+          data2: '001'
+        }, {
+          data1: 'Date :',
+          data2: '25/5/2018'
+        }, {
+          data1: 'Customer Marking :',
+          data2: 'CIEF/150ECE'
+        }, {
+          data1: '',
+          data2: ''
+        }, {
+          data1: 'Payment Method :',
+          data2: 'Cash/Bank Transfer'
+        }, {
+          data1: '',
+          data2: ''
+        }, {
+          data1: 'CNY/RMB :',
+          data2: 'CNY 120,500.00'
+        }, {
+          data1: '+ Service Charge :',
+          data2: 'CNY 20.00'
+        }, {
+          data1: '/ RATE :',
+          data2: '1.63'
+        }, {
+          data1: '',
+          data2: 'MYR 73,848.04'
+        }, {
+          data1: '+ GST 6% :',
+          data2: 'MYR 4,430.88'
+        }, {
+          data1: '',
+          data2: 'MYR 78,278.92'
+        }, {
+          data1: '',
+          data2: ''
+        }, {
+          data1: 'China Beneficiary Acc :',
+          data2: ''
+        }, {
+          data1: '',
+          data2: 'PENDING'
+        }, {
+          data1: '',
+          data2: ''
+        }, {
+          data1: 'Bank In Amount :',
+          data2: 'MYR 78,278.92'
+        }, {
+          data1: '',
+          data2: ''
+        }]
       }
-      this.dialogFormVisible = true
-      this.term = newterm
     },
-    getCalculationValue () {
-      this.dialogFormVisible = false
-      this.dialogFormVisible1 = true
-    },
-    createBooking: function () {
-      this.$router.push({ name: 'booking.user.upload' })
-      // this.dialogFormVisible1 = true
+    methods: {
+      // TODO fetch booking data on load 
 
-      // let newBooking = {
-      //   amount: this.booking.amount,
-      //   account_name: this.booking.account_name,
-      //   bank_name: this.booking.bank_name,
-      //   bank_branch: this.booking.bank_branch,
-      //   account_num: this.booking.account_num,
-      //   term: this.term
-      // }
-      // console.log(newBooking)
-      // axios.post('api/booking', newBooking)
-      //   .then((response) => {
-      //     console.log(response)
-
-      //     // this code to insert the input data into the database (success)
-      //     // this.Booking.amount = amount;
-      //     // this.Booking.account_name = account_name;
-      //     // this.Booking.bank_name = bank_name;
-      //     // this.Booking.branch = bank_branch;
-      //     // this.Booking.account_num = account_num;
-      //     // this.term = term;
-      //   })
-      //   .catch((error) => {
-      //     console.log(error)
-      //   })
-    },
-    BookingStatus(id){
-      axios.post('api/booking/'+ id + '/status', newBooking)
-        .then((response) => {
-          console.log(response)
-
-          // this code to insert the input data into the database (success)
-          // this.Booking.amount = amount;
-          // this.Booking.account_name = account_name;
-          // this.Booking.bank_name = bank_name;
-          // this.Booking.branch = bank_branch;
-          // this.Booking.account_num = account_num;
-          // this.term = term;
-        })
-        .catch((error) => {
-          console.log(error)
-      })
-    },
-    BookingList () {
-      axios.get('api/booking')
-        .then((response) => {
-          console.log(response)
-          this.list = response.data
+      formatter(row, column) {
+        return row.address
+      },
+      filterTag(value, row) {
+        return row.tag === value
+      },
+      filterHandler(value, row, column) {
+        const property = column['property']
+        return row[property] === value
+      },
+      acceptTerm: function (newterm) {
+        if (this.booking.amount == '') {
+          this.$message({
+            message: 'Please input amount',
+            type: 'warning'
+          });
+          return;
+        }
+        this.dialogFormVisible = true
+        this.term = newterm
+      },
+      getCalculationValue() {
+        this.dialogFormVisible = false
+        this.dialogFormVisible1 = true
+      },
+      createBooking: function () {
+        this.$router.push({
+          name: 'booking.user.upload'
         })
+        // this.dialogFormVisible1 = true
+
+        // let newBooking = {
+        //   amount: this.booking.amount,
+        //   account_name: this.booking.account_name,
+        //   bank_name: this.booking.bank_name,
+        //   bank_branch: this.booking.bank_branch,
+        //   account_num: this.booking.account_num,
+        //   term: this.term
+        // }
+        // console.log(newBooking)
+        // axios.post('api/booking', newBooking)
+        //   .then((response) => {
+        //     console.log(response)
+
+        //     // this code to insert the input data into the database (success)
+        //     // this.Booking.amount = amount;
+        //     // this.Booking.account_name = account_name;
+        //     // this.Booking.bank_name = bank_name;
+        //     // this.Booking.branch = bank_branch;
+        //     // this.Booking.account_num = account_num;
+        //     // this.term = term;
+        //   })
+        //   .catch((error) => {
+        //     console.log(error)
+        //   })
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      },
+      BookingStatus(index, row) {
+
+        // TODO : Get booking status from server 
+        this.status = 1
+
+        switch (this.status) {
+          case 1:
+            this.$router.push({
+              name: 'booking.user.upload'
+            })
+      
+          case 2:
+            this.$router.push({
+              name: 'booking.user.upload'
+            })
+            break;
+          case 3:
+            this.$router.push({
+              name: 'booking.user.upload'
+            })
+            break;
+          case 4:
+            this.$router.push({
+              name: 'booking.user.upload'
+            })
+            break;
+
+          case 5:
+            this.$router.push({
+              name: 'booking.user.upload'
+            })
+            break;
+
+          case 6:
+            this.$router.push({
+              name: 'booking.user.upload'
+            })
+            break;
+          default:
+            break
+        }
+
+
+        // axios.post('api/booking/'+ id + '/status', newBooking)
+        //   .then((response) => {
+        //     console.log(response)
+
+        //     // this code to insert the input data into the database (success)
+        //     // this.Booking.amount = amount;
+        //     // this.Booking.account_name = account_name;
+        //     // this.Booking.bank_name = bank_name;
+        //     // this.Booking.branch = bank_branch;
+        //     // this.Booking.account_num = account_num;
+        //     // this.term = term;
+        //   })
+        //   .catch((error) => {
+        //     console.log(error)
+        // })
+      },
+      BookingList() {
+        axios.get('api/booking')
+          .then((response) => {
+            console.log(response)
+            this.list = response.data
+          })
+      }
     }
-  }
 
-}
-</script>
+  }
+</script>
\ No newline at end of file