diff --git a/database/migrations/2018_07_11_150423_update_accno_to_id_setting_active_table.php b/database/migrations/2018_07_11_150423_update_accno_to_id_setting_active_table.php
new file mode 100644
index 00000000..148134b9
--- /dev/null
+++ b/database/migrations/2018_07_11_150423_update_accno_to_id_setting_active_table.php
@@ -0,0 +1,51 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class UpdateAccnoToIdSettingActiveTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('setting_active_banks', function(Blueprint $table)
+        {
+            $table->dropForeign('setting_active_banks_x1_bank_id_foreign');
+            $table->dropForeign('setting_active_banks_x2_bank_id_foreign');
+            $table->dropForeign('setting_active_banks_beneficiary_id_foreign');
+            $table->dropColumn('x1_bank_id');
+            $table->dropColumn('x2_bank_id');
+            $table->dropColumn('beneficiary_id');
+        });
+
+        Schema::table('setting_active_banks', function(Blueprint $table)
+        {
+            $table->unsignedInteger('x1_bank_id')->unique();
+            $table->foreign('x1_bank_id')
+                ->references('id')->on('setting_malaysia_banks');
+
+            $table->unsignedInteger('x2_bank_id')->unique();
+            $table->foreign('x2_bank_id')
+                ->references('id')->on('setting_malaysia_banks');
+
+            $table->unsignedInteger('beneficiary_id')->unique();
+            $table->foreign('beneficiary_id')
+                ->references('id')->on('setting_beneficiaries');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
diff --git a/database/seeds/DatabaseSeeder.php b/database/seeds/DatabaseSeeder.php
index 32544630..2c2e3c17 100644
--- a/database/seeds/DatabaseSeeder.php
+++ b/database/seeds/DatabaseSeeder.php
@@ -24,7 +24,7 @@ class DatabaseSeeder extends Seeder
         $this->call(MarkingSeeder::class);  
         DB::statement('SET FOREIGN_KEY_CHECKS=0;');
         $this->call(SettingMalaysiaBankSeeder::class);  
-        $this->call(SettingBeneficiaresSeeder::class);  
+        $this->call(SettingBeneficiarySeeder::class);  
         $this->call(SettingActiveBankSeeder::class);
         DB::statement('SET FOREIGN_KEY_CHECKS=1;');
     }
diff --git a/database/seeds/SettingActiveBankSeeder.php b/database/seeds/SettingActiveBankSeeder.php
index feed9792..59ed5afd 100644
--- a/database/seeds/SettingActiveBankSeeder.php
+++ b/database/seeds/SettingActiveBankSeeder.php
@@ -1,6 +1,8 @@
 <?php
 
 use Illuminate\Database\Seeder;
+use App\SettingMalaysiaBank;
+use App\SettingBeneficiary;
 
 class SettingActiveBankSeeder extends Seeder
 {
@@ -11,11 +13,15 @@ class SettingActiveBankSeeder extends Seeder
      */
     public function run()
     {
+        $bankx1 = SettingMalaysiaBank::where('acc_no', "=" ,'malaysiaacc01')->first();
+        $bankx2 = SettingMalaysiaBank::where('acc_no', "=",'malaysiaacc02')->first();
+        $chinabank = SettingBeneficiary::where('acc_no', "=" ,'123456789')->first();
+
         DB::table('setting_active_banks')->truncate();
         DB::table('setting_active_banks')->insert([
-        	'x1_bank_id' => 'malaysiaacc01',
-        	'x2_bank_id' => 'malaysiaacc02',
-        	'beneficiary_id' => '123456789'
+        	'x1_bank_id' => $bankx1->id,
+        	'x2_bank_id' => $bankx2->id,
+        	'beneficiary_id' => $chinabank->id
         ]);
     }
 }
diff --git a/database/seeds/SettingBeneficiaresSeeder.php b/database/seeds/SettingBeneficiarySeeder.php
similarity index 91%
rename from database/seeds/SettingBeneficiaresSeeder.php
rename to database/seeds/SettingBeneficiarySeeder.php
index c7da261c..ff34fbc4 100644
--- a/database/seeds/SettingBeneficiaresSeeder.php
+++ b/database/seeds/SettingBeneficiarySeeder.php
@@ -1,8 +1,9 @@
 <?php
 
 use Illuminate\Database\Seeder;
+use App\SettingBeneficiary;
 
-class SettingBeneficiaresSeeder extends Seeder
+class SettingBeneficiarySeeder extends Seeder
 {
     /**
      * Run the database seeds.
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index 41400042..33b1a5d2 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -270,13 +270,23 @@
         },
         supplier_booking:{
         },
+        active_bank_setting: {
+          x1_bank_id: null,
+          x2_bank_id: null,
+          beneficiary_id: null
+        },
+        beneficiaryDetail:{
+          company_name: '奕继椿',
+          bank_name: '民生银行 深川红荔支行',
+          acc_no: '123456789',
+        },
         supplier: null,
         supplier_options: null,
         exampleContent: "This is TEXT"
-
       }
     },
     beforeCreate() {
+      
       const loading = this.$loading({
         lock: true,
         text: 'Please wait..',
@@ -287,41 +297,64 @@
       axios
         .get('/api/admin/booking/' + this.$route.params.id)
         .then((response) => {
-          loading.close()
           this.booking_details = response.data
         }).catch((error) => {
           console.log(error)
-          loading.close()
           this.$router.push({
             name: 'notfound'
           })
         })
 
-      axios
-        .get('/api/supplier-booking/' + this.$route.params.id)
+      axios.get('/api/supplier-booking/' + this.$route.params.id)
         .then((response) => {
-          loading.close()
           this.supplier_booking = response.data
         }).catch((error) => {
           console.log(error)
-          loading.close()
           this.$router.push({
             name: 'notfound'
           })
         })
 
-
-
+	  axios.get('/api/active-bank')
+          .then((response) => {
+            axios.get('/api/setting-beneficiary/' + response.data.beneficiary_id)
+	          .then((response) => {
+          		loading.close();
+	            this.supplier_booking.china_bank_name = response.data.bank_name;
+	            this.supplier_booking.china_company_name = response.data.company_name;
+	            this.supplier_booking.china_acc_no = response.data.acc_no;
+	          })
+	          .catch((error) => {
+          		loading.close();
+	            console.log(error);
+	            this.$message({
+	              showClose: true,
+	              message: 'Fetch data fail',
+	              type: 'error',
+	              duration: 10000
+	            });
+	          });
+          })
+          .catch((error) => {
+          	loading.close();
+            console.log(error);
+            this.$message({
+              showClose: true,
+              message: 'Fetch data fail',
+              type: 'error',
+              duration: 10000
+            });
+          });
     },
     methods: {
       downloadReport(){
         let canvas = document.getElementById('myCanvas')
-     var dataString = canvas.toDataURL("image/png");
-     console.log(dataString)
-      var link = document.createElement("a");
-      link.download = 'image';
-      link.href = dataString;
-      link.click();
+        var dataString = canvas.toDataURL("image/png");
+        console.log(dataString)
+        var link = document.createElement("a");
+        link.download = 'image';
+        link.href = dataString;
+        link.click();
       },
       goToSupplierBooking(){
           this.$router.push({
@@ -330,7 +363,7 @@
           })
       },
       completeReport() {
-        // TODO : send request to change status
+    	// TODO : send request to change status
         this.loading_btn = true
         axios
           .post('/api/booking/' + this.$route.params.id + '/confirm-supplier')
@@ -362,174 +395,179 @@
             id: this.$route.params.id
           }
         })
-      }
-
+      },
     },
     directives: {
       insertMessage: function (canvasElement, binding) {
-        ////////////////// variable //////////////////////////
-        var canvasWidth = 450;
-        var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, 410,
-          470, 490, 510, 610, 630
-        ]
-        const canvasHeight = rowHeight[rowHeight.length - 1];
+      	setTimeout(function (canvasElement, binding) {
+            ////////////////// variable //////////////////////////
+            var canvasWidth = 450;
+            var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, 410,
+              470, 490, 510, 610, 630
+            ]
+            const canvasHeight = rowHeight[rowHeight.length - 1];
 
-        var column1X = 220;
-        var column2X = 320;
-        var column3X = 420;
+            var column1X = 220;
+            var column2X = 320;
+            var column3X = 420;
 
-        ///////////////////Canvast Init////////////////////
-        var canvas = document.getElementById("myCanvas");
-        canvas.width = canvasWidth;
-        canvas.height = canvasHeight;
-        // Get canvas context
-        var ctx = canvasElement.getContext("2d");
-        // Clear the canvas
-        ctx.clearRect(0, 0, 300, 150);
+            ///////////////////Canvast Init////////////////////
+            var canvas = document.getElementById("myCanvas");
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
+            // Get canvas context
+            var ctx = canvasElement.getContext("2d");
+            // Clear the canvas
+            ctx.clearRect(0, 0, 300, 150);
 
-        ctx.fillStyle = "#FFFFFF";
-        ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
-        for (var i = 1; i < rowHeight.length; i++) {
-          if (i % 2 == 1)
-            ctx.fillStyle = "#A9D08E";
-          else
             ctx.fillStyle = "#FFFFFF";
-          ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
-        }
-        ///////////// fillup with text////////////////
-        //// config canvas
-        ctx.fillStyle = "#000000";
-        ctx.font = "13px Arial";
-        ctx.textAlign = "right";
-        //// Row 1
-        ctx.fillText("Payment Voucher :", column1X, rowHeight[1] - 5);
-        ctx.fillText(binding.value.id, column3X, rowHeight[1] - 5);
-        //// Row 2
-        ctx.fillText("Date :", column1X, rowHeight[2] - 5);
-        ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
-        //// Row 3
-        ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
-        ctx.font = "bold 14px Arial";
-        ctx.fillStyle = "#0070D5";
-        ctx.fillText("CIEF/605HOS", column3X, rowHeight[3] - 5);
-        ctx.fillStyle = "#000000";
-        ctx.font = "13px Arial";
-        //// Row 4
-        ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
-        ctx.fillText(binding.value.id, column3X, rowHeight[4] - 5);
-        //// Row 4
-        ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
-        ctx.fillText("Full Payment", column3X, rowHeight[5] - 5);
-        //// Row 5
-        ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
-        ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
-        //// Row 6
-        ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
-        //// Row 7
-        // Empty
-        //// Row 8
-        ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
-        ctx.fillText("MYR", column2X, rowHeight[9] - 5);
-        ctx.font = "bold 14px Arial";
-        ctx.fillText(binding.value.transfer_amount, column3X, rowHeight[9] - 5);
-        ctx.font = "13px Arial";
-        //// Row 8
-        ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
-        ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
-        //// Row 9
-        // Empty
-        //// Row 10
-        ctx.font = "bold 14px Arial";
-        ctx.fillText("CNY", column2X, rowHeight[12] - 5);
-        ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
-        ctx.font = "13px Arial";
-        //line
-        ctx.beginPath();
-        ctx.lineWidth = 1;
-        ctx.moveTo(column1X + 30, rowHeight[11]);
-        ctx.lineTo(column3X + 20, rowHeight[11]);
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.lineWidth = 2;
-        ctx.moveTo(column1X + 30, rowHeight[12]);
-        ctx.lineTo(column3X + 20, rowHeight[12]);
-        ctx.stroke();
-        //// Row 11
-        ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
-        ctx.fillText("MYR", column2X, rowHeight[14] - 5);
-        ctx.fillText("4830.68", column3X, rowHeight[14] - 5);
-        //// Row 12
-        ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
-        ctx.fillText("MYR", column2X, rowHeight[15] - 5);
-        ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
-        //// Row 13
-        ctx.fillText("+ SALES TAX (10%) :", column1X, rowHeight[16] - 5);
-        ctx.fillText("MYR", column2X, rowHeight[16] - 5);
-        ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
-        //// Row 14
-        ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
-        ctx.fillText("MYR", column2X, rowHeight[17] - 15);
-        ctx.fillText("289.84", column3X, rowHeight[17] - 15);
-        //// Row 15
-        ctx.font = "bold 14px Arial";
-        ctx.fillText("Customer Bank In Amount :", column1X, rowHeight[18] - 5);
-        ctx.fillStyle = "#0070D5";
-        ctx.fillText("MYR", column2X, rowHeight[18] - 5);
-        ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[18] - 5);
-        ctx.fillStyle = "#000000";
-        ctx.font = "13px Arial";
-        //line
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.moveTo(column1X + 30, rowHeight[17]);
-        ctx.lineTo(column3X + 20, rowHeight[17]);
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(column1X + 30, rowHeight[18] + 1);
-        ctx.lineTo(column3X + 20, rowHeight[18] + 1);
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(column1X + 30, rowHeight[18] - 2);
-        ctx.lineTo(column3X + 20, rowHeight[18] - 2);
-        ctx.stroke();
-        //// Row 16
-        ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
-        ctx.fillText("CNY", column2X, rowHeight[19] - 25);
-        ctx.fillText("224.68", column3X, rowHeight[19] - 25);
-        //// Row 16
-        ctx.font = "bold 14px Arial";
-        ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
-        ctx.font = "bold italic 15px Arial";
-        ctx.fillStyle = "#0070D5";
-        ctx.fillText("CNY", column2X, rowHeight[20] - 5);
-        ctx.fillText("7692.17", column3X - 20, rowHeight[20] - 5);
-        ctx.fillStyle = "#000000";
-        ctx.font = "13px Arial";
-        //// Row 17
-        //// Row 18
-        //// Row 19
-        var img = new Image();
-        img.src = "/banklogo.png";
-        img.crossOrigin = "anonymous";
-        var maxwidth = 70;
-        var ratio = maxwidth / img.width;
-        var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
-        var y = rowHeight[21] + offset; // to make it always center
+            ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
+            for (var i = 1; i < rowHeight.length; i++) {
+              if (i % 2 == 1)
+                ctx.fillStyle = "#A9D08E";
+              else
+                ctx.fillStyle = "#FFFFFF";
+              ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
+            }
+            ///////////// fillup with text////////////////
+            //// config canvas
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            ctx.textAlign = "right";
+            //// Row 1
+            ctx.fillText("Payment Voucher :", column1X, rowHeight[1] - 5);
+            ctx.fillText(binding.value.id, column3X, rowHeight[1] - 5);
+            //// Row 2
+            ctx.fillText("Date :", column1X, rowHeight[2] - 5);
+            ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
+            //// Row 3
+            ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
+            ctx.font = "bold 14px Arial";
+            ctx.fillStyle = "#0070D5";
+            ctx.fillText("CIEF/605HOS", column3X, rowHeight[3] - 5);
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            //// Row 4
+            ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
+            ctx.fillText(binding.value.id, column3X, rowHeight[4] - 5);
+            //// Row 4
+            ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+            ctx.fillText("Full Payment", column3X, rowHeight[5] - 5);
+            //// Row 5
+            ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
+            ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
+            //// Row 6
+            ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
+            //// Row 7
+            // Empty
+            //// Row 8
+            ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[9] - 5);
+            ctx.font = "bold 14px Arial";
+            ctx.fillText(binding.value.transfer_amount, column3X, rowHeight[9] - 5);
+            ctx.font = "13px Arial";
+            //// Row 8
+            ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
+            ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
+            //// Row 9
+            // Empty
+            //// Row 10
+            ctx.font = "bold 14px Arial";
+            ctx.fillText("CNY", column2X, rowHeight[12] - 5);
+            ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
+            ctx.font = "13px Arial";
+            //line
+            ctx.beginPath();
+            ctx.lineWidth = 1;
+            ctx.moveTo(column1X + 30, rowHeight[11]);
+            ctx.lineTo(column3X + 20, rowHeight[11]);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.lineWidth = 2;
+            ctx.moveTo(column1X + 30, rowHeight[12]);
+            ctx.lineTo(column3X + 20, rowHeight[12]);
+            ctx.stroke();
+            //// Row 11
+            ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[14] - 5);
+            ctx.fillText("4830.68", column3X, rowHeight[14] - 5);
+            //// Row 12
+            ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+            ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+            //// Row 13
+            ctx.fillText("+ SALES TAX (10%) :", column1X, rowHeight[16] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[16] - 5);
+            ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
+            //// Row 14
+            ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+            ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+            ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+            //// Row 15
+            ctx.font = "bold 14px Arial";
+            ctx.fillText("Customer Bank In Amount :", column1X, rowHeight[18] - 5);
+            ctx.fillStyle = "#0070D5";
+            ctx.fillText("MYR", column2X, rowHeight[18] - 5);
+            ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[18] - 5);
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            //line
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(column1X + 30, rowHeight[17]);
+            ctx.lineTo(column3X + 20, rowHeight[17]);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(column1X + 30, rowHeight[18] + 1);
+            ctx.lineTo(column3X + 20, rowHeight[18] + 1);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(column1X + 30, rowHeight[18] - 2);
+            ctx.lineTo(column3X + 20, rowHeight[18] - 2);
+            ctx.stroke();
+            //// Row 16
+            ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+            ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+            ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+            //// Row 16
+            ctx.font = "bold 14px Arial";
+            ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
+            ctx.font = "bold italic 15px Arial";
+            ctx.fillStyle = "#0070D5";
+            ctx.fillText("CNY", column2X, rowHeight[20] - 5);
+            ctx.fillText("7692.17", column3X - 20, rowHeight[20] - 5);
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            //// Row 17
+            //// Row 18
+            //// Row 19
+            var img = new Image();
+            img.src = "/banklogo.png";
+            img.crossOrigin = "anonymous";
+            var maxwidth = 70;
+            var ratio = maxwidth / img.width;
+            var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+            var y = rowHeight[21] + offset; // to make it always center
 
-        img.onload=function(){
-		      ctx.drawImage(img, 50, 530, 80, 50);
-	      };
-
-        // text
-        ctx.font = "bold 14px Arial";
-        ctx.textAlign = "center";
-        ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
-        ctx.fillText("户名 : 奕继椿", column2X - 40, rowHeight[22] - 60);
-        ctx.fillText("6226 1906 8014 3314", column2X - 40, rowHeight[22] - 40);
-        ctx.fillText("民生银行 深川红荔支行", column2X - 40, rowHeight[22] - 20);
-        ctx.font = "13px Arial";
+            img.onload=function(){
+    		      ctx.drawImage(img, 50, 530, 80, 50);
+    	      };
 
+            // text
+            ctx.font = "bold 14px Arial";
+            ctx.textAlign = "center";
+            console.log(binding.value.amountInRMB);
+            console.log(binding.value);
+            ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+            ctx.fillText("户名 : " + binding.value.china_company_name, column2X - 40, rowHeight[22] - 60);
+            ctx.fillText(binding.value.china_acc_no, column2X - 40, rowHeight[22] - 40);
+            ctx.fillText(binding.value.china_bank_name , column2X - 40, rowHeight[22] - 20);
+            
+            ctx.font = "13px Arial";
+    	}, 1000,canvasElement,binding);
+	        
       }
     }
+
   }
 </script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 5071cf96..593af081 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,103 +1,103 @@
 <template>
-  <el-main>
-    <progress-track v-model="status"/>
+	<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 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">
-      <h4 style="margin-top:5%;">Waiting For Payment</h4>
-    </div>
+	 <div v-else align="center">
+		<h4 style="margin-top:5%;">Waiting For Payment</h4>
+	</div>
 
-    <el-row justify="center" align="center">
-      <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;">
-        <tbody>
-          <tr>
-            <td class="el-table_2_column_9 is-right ">Amount : </td>
-            <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-              <b> RMB {{ booking.amount }} </b>
-            </td>
-          </tr>
-          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-              <b> MYR {{ booking.bankin_amount }} </b>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;"  align="center">
-      <tr>
-        <td align="center">TC Global Trade (M) Sdn Bhd (1190583-A) <br> GST : 001408413696 <br> HLB : 2200 0010 531 <br> MBB : 5148 4233 6341</td>
-        
-      </tr>
-            <!-- <tr><td align="center">GST : 001408413696</td></tr>
-            <tr><td align="center">HLB : 2200 0010 531</td></tr>
-            <tr><td align="center">MBB : 5148 4233 6341</td></tr>   -->
-            </table>
-    </el-row>
-    <br>
+	<el-row justify="center" align="center">
+		<table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;">
+		<tbody>
+			<tr>
+			<td class="el-table_2_column_9 is-right ">Amount : </td>
+			<td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+				<b> RMB {{ booking.amount }} </b>
+			</td>
+			</tr>
+			<tr>
+			<td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
+			<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+				<b> MYR {{ booking.bankin_amount }} </b>
+			</td>
+			</tr>
+		</tbody>
+		</table>
+		<table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;"  align="center">
+		<tr>
+			<td align="center">
+				{{bankDetail.company_name}}<br/>
+				{{bankDetail.bank_name}} : {{bankDetail.acc_no}}
+			</td>
+			
+		</tr>
+		</table>
+	</el-row>
+	<br>
 
-    <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
+	<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
 
-    <div align="center">
+	<div align="center">
 
-      <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>
-      <!-- <button v-on:click="startTimer">Start timer</button> -->
-    </div>
-    <br>
+		<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>
+		<!-- <button v-on:click="startTimer">Start timer</button> -->
+	</div>
+	<br>
 
-    <!-- upload image -->
-    <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-               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>
-    <br>
-    <!-- upload image end -->
+	<!-- upload image -->
+	<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
+				 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>
+	<br>
+	<!-- upload image end -->
 
-    <!-- <el-form label-width="300px">
-        <el-form-item label="Amount (RM) :"> -->
-    <div align="center">
-      Bankin Amount (RM) :
-      <el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
-        <div align="center">
-          <el-form-item prop="transfer_amount">
-            <el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
-            />
-          </el-form-item>
-          <el-form-item>
-            <div align="center">
-              <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>
-            </div>
-          </el-form-item>
-        </div>
-      </el-form>
-      <br>
-      <br>
-    </div>
-    <!-- </el-form-item>
-    </el-form> -->
+	<!-- <el-form label-width="300px">
+	<el-form-item label="Amount (RM) :"> -->
+	<div align="center">
+		Bankin Amount (RM) :
+		<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
+		<div align="center">
+			<el-form-item prop="transfer_amount">
+			<el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
+			/>
+			</el-form-item>
+			<el-form-item>
+			<div align="center">
+				<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>
+			</div>
+			</el-form-item>
+		</div>
+		</el-form>
+		<br>
+		<br>
+	</div>
+	<!-- </el-form-item>
+	</el-form> -->
 
-  </el-main>
+	</el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
-  }
+	.booking-details {
+	font-weight: bold;
+	}
 </style>
 <script>
 import VueCountdown from '@xkeshi/vue-countdown'
@@ -105,148 +105,197 @@ 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,
-        user_bankslip_path: null,
-        reject_reason: null,
-      },
-      rules: {
-        transfer_amount: [{
-          required: true,
-          message: 'Please input amount',
-          trigger: 'change'
-        } ]}
-    }
-  },
-  beforeCreate () {
-    const loading = this.$loading({
-      lock: true,
-      text: 'Please wait..',
-      spinner: 'el-icon-loading',
-      background: 'rgba(0, 0, 0, 0.7)'
-    })
+	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 : {},
 
-    axios
-      .get('/api/booking/' + this.$route.params.id)
-      .then((response) => {
-        console.log(response)
-        this.booking.amount = response.data.amount
-        this.booking.bankin_amount = response.data.bia
-        this.booking.timeout = response.data.timeout * 1000
+		}
+	},
+	beforeCreate () {
+		const loading = this.$loading({
+		lock: true,
+		text: 'Please wait..',
+		spinner: 'el-icon-loading',
+		background: 'rgba(0, 0, 0, 0.7)'
+		})
 
-        if (response.data.user_bankslip_path)
-        {
-          this.booking.user_bankslip_path = response.data.user_bankslip_path
-          this.booking.reject_reason = response.data.reject_reason
-        }
+		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;
 
-        this.start = true
-        loading.close()
+		if (response.data.user_bankslip_path)
+		{
+			this.booking.user_bankslip_path = response.data.user_bankslip_path
+			this.booking.reject_reason = response.data.reject_reason
+		}
 
-        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) => {
-        console.log(error)
-        loading.close()
-        this.$router.push({
-          name: 'notfound'
-        })
-      })
-  },
-  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)
-    },
-    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) => {
-          this.$message({
-            showClose: true,
-            message: 'Your bankinslip has been submitted, please wait admin to approve.',
-            type: 'success',
-            duration: 5000
-          })
+		this.start = true
+		loading.close()
 
-          console.log(response)
-          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 (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) => {
+		console.log(error)
+		loading.close()
+		this.$router.push({
+			name: 'notfound'
+		})
+		})
+	},
+	beforeMount(){
+		this.updateBankDetail();
+	},
+	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)
+		},
+		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) => {
+				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;
+		},
+		updateBankDetail(){
+			axios.get('/api/active-bank')
+			.then((response) => {
+				this.active_bank_setting = response.data;
+				console.log(this.active_bank_setting.x1_bank_id);
+				this.getBankDetailWithTerm();
+			})
+			.catch((error) => {
+				console.log(error);
+				this.$message({
+					showClose: true,
+					message: 'Fetch data fail',
+					type: 'error',
+					duration: 10000
+				});
+			});
+		},
+		getBankDetailWithTerm(){
+			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;
+				})
+				.catch((error) => {
+					console.log(error);
+					this.$message({
+						showClose: true,
+						message: 'Fetch data fail',
+						type: 'error',
+						duration: 10000
+					});
+				});
+		}
+	}
 }
 </script>
diff --git a/routes/api.php b/routes/api.php
index ef3d2af0..5e860f45 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -46,10 +46,12 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::get('user', 'UserController@show');
 	Route::patch('settings/profile', 'Settings\ProfileController@update');
 	Route::patch('settings/password', 'Settings\PasswordController@update');
+
+	// for both user and admin
+	Route::get('active-bank', 'SettingActiveBankController@index');	
+	Route::get('malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@show');
 });
 
-
-
 Route::group(['middleware' => 'guest:api'], function () {
     Route::post('login', 'Auth\LoginController@login')->name('login');
     Route::post('register', 'Auth\RegisterController@create');
@@ -70,7 +72,6 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::get('setting-credit', 'SettingCreditController@index');
 	Route::put('setting-credit', 'SettingCreditController@update');
 
-	Route::get('setting-active-bank', 'SettingActiveBankController@index');
 	Route::put('setting-active-bank', 'SettingActiveBankController@update');
 
 	Route::get('setting-supplier', 'SettingSupplierController@index');
@@ -86,7 +87,6 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::delete('setting-beneficiary/{beneficiary}', 'SettingBeneficiaryController@delete');
 
 	Route::get('setting-malaysia-bank', 'SettingMalaysiaBankController@index');
-	Route::get('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@show');
 	Route::post('setting-malaysia-bank', 'SettingMalaysiaBankController@store');
 	Route::put('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@update');
 	Route::delete('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@delete');
@@ -108,5 +108,9 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::get('booking/{id}/po', 'BookingController@showPurchaseOrder');
 	Route::post('booking/{id}/upload-invoice', 'BookingController@uploadInvoice');
 	Route::post('booking/{id}/confirm-invoice', 'BookingController@confirmInvoice');	
+
+	// for both user and admin
+	Route::get('setting-active-bank', 'SettingActiveBankController@index');	
+	Route::get('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@show');	
 	
 });
\ No newline at end of file