diff --git a/src/components/pay/SelectFinalise.vue b/src/components/pay/SelectFinalise.vue
index 760b56a..06b6aab 100644
--- a/src/components/pay/SelectFinalise.vue
+++ b/src/components/pay/SelectFinalise.vue
@@ -1,22 +1,151 @@
 <template>
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-7">
-        <p>Cawangan: Ar-Rahn Kota Bharu 2</p>
-        <table class="table table-bordered">
-          <tbody>
-            <tr>
-              <td>X0192091029-02012</td>
-              <td>RM1212.00</td>
-            </tr>
-            <tr>
-              <td>X0192091029-02012</td>
-              <td>RM1212.00</td>
-            </tr>
-          </tbody>
-        </table>
-        <p>Jumlah Dipilih: RM2129</p>
+  <h5>Finalise</h5>
+  <p>Cawangan: Ar-Rahn Kota Bharu 2</p>
+  <table class="table table-bordered">
+    <tbody>
+      <tr v-for="data in finalSurat" v-bind:key="data">
+        <td>{{ data.norujukan }}</td>
+        <td>RM{{ data.total_payment }}</td>
+      </tr>
+    </tbody>
+  </table>
+  <p>Jumlah Dipilih: RM{{ totalHarga }}</p>
+  <div class="d-flex justify-content-between">
+    <router-link class="btn btn-danger" v-bind:to="{ name: 'detail' }"
+      >Cancel</router-link
+    >
+    <button
+      ref="backButton"
+      data-bs-toggle="modal"
+      data-bs-target="#payModal"
+      class="btn btn-primary"
+    >
+      Teruskan
+    </button>
+  </div>
+  <div
+    class="modal fade"
+    id="payModal"
+    tabindex="-1"
+    aria-labelledby="payModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="payModalLabel">Bayar Bidaan</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
+          <p>ADAKAH ANDA PASTI?</p>
+          <h4 class="text-danger">
+            <i
+              >Fi pengurusan RM1 akan dikenakan untuk setiap kali bayaran
+              melalui Billplz.</i
+            >
+          </h4>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
+            Tidak
+          </button>
+          <button
+            type="button"
+            v-on:click="doPayment()"
+            class="btn btn-success"
+          >
+            Ya
+          </button>
+        </div>
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  props: {
+    totalHarga: "",
+    finalSurat: "",
+  },
+  data() {
+    return {
+      // changeProp: finalSurat,
+      form: {
+        email: localStorage.getItem("email"),
+        notel: localStorage.getItem("notelbimbit"),
+        name: localStorage.getItem("name"),
+        user_id: localStorage.getItem("id"),
+        lelong_id: localStorage.getItem("lelong_id"),
+        invoice_id: "",
+        invoice_no: "",
+        total: this.totalHarga,
+        // sag: [
+        //   {
+        //     norujukan: "APM211121-0015",
+        //     kodcaw: "APM",
+        //     total_payment: 1329,
+        //   },
+        //   {
+        //     norujukan: "APM211120-0018",
+        //     kodcaw: "APM",
+        //     total_payment: 1443,
+        //   },
+        // ],
+        sag: [],
+      },
+    };
+  },
+  mounted() {
+    this.getInvoice();
+  },
+  methods: {
+    getInvoice() {
+      axios
+        .get("/invoice", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            user_id: localStorage.getItem("id"),
+            lelong_id: localStorage.getItem("lelong_id"),
+          },
+        })
+        .then((response) => {
+          if (response.data.success == true) {
+            this.form.invoice_id = response.data.invoice.id;
+            this.form.invoice_no = response.data.invoice.invoice_no;
+            
+            let convertData = JSON.parse(JSON.stringify(this.finalSurat));
+            this.form.sag = convertData;
+          } else if (response.data.success == false) {
+            alert("No Invoice Id");
+          }
+        })
+        .catch((error) => {
+          this.loading = false;
+          console.log(error);
+        });
+    },
+    doPayment() {
+      axios
+        .post("/bidpayment", this.form)
+        .then((response) => {
+          console.log(response);
+          window.location.href = response.data.message + "?auto_submit=true";
+        })
+        .catch((response) => {
+          alert(response.message);
+          console.log(response);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/pay/SelectId.vue b/src/components/pay/SelectId.vue
index 2c85f16..85dd881 100644
--- a/src/components/pay/SelectId.vue
+++ b/src/components/pay/SelectId.vue
@@ -1,57 +1,71 @@
 <template>
-  <p>Pilih Surat</p>
-  <div class="container">
-    <table class="table table-bordered">
-      <tbody>
-        <tr>
-          <td><input type="checkbox" /></td>
-          <td>X0192091029-02012</td>
-          <td>RM1212.00</td>
-        </tr>
-        <tr>
-          <td><input type="checkbox" /></td>
-          <td>X0192091029-02012</td>
-          <td>RM1212.00</td>
-        </tr>
-        <tr>
-          <td><input type="checkbox" /></td>
-          <td>X0192091029-02012</td>
-          <td>RM1212.00</td>
-        </tr>
-      </tbody>
-    </table>
-    <p>Jumlah Dipilih: RM2129</p>
-    <div class="d-flex justify-content-between">
-      <button v-on:click="$emit(clickBack)" class="btn btn-secondary">
-        Kembali
-      </button>
-      <button
-        ref="nextButton"
-        v-on:click="clickNextButton()"
-        class="btn btn-primary"
-      >
-        Teruskan
-      </button>
-      <!-- <button
-          ref="payButton"
-          type="button"
-          class="btn btn-success m-3"
-          data-bs-toggle="modal"
-          data-bs-target="#exampleModal"
-          hidden
+  <div v-if="!nextButton">
+    <h5>Pilih Surat</h5>
+    <p>{{ selectedRadio.cawangan }}</p>
+    <div class="container">
+      <table class="table table-bordered">
+        <tbody>
+          <tr v-for="data in selectedRadio.sag" v-bind:key="data">
+            <td>
+              <input type="checkbox" v-bind:value="data" v-model="listSag" />
+              <input
+                type="checkbox"
+                v-bind:value="data.total_payment"
+                v-model="totalSelect"
+              />
+            </td>
+            <td>{{ data.norujukan }}</td>
+            <td>RM{{ data.total_payment }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <p>Jumlah Dipilih: RM{{ sum }}</p>
+      <div class="d-flex justify-content-between">
+        <router-link class="btn btn-danger" v-bind:to="{ name: 'detail' }"
+          >Cancel</router-link
         >
-          Bayar
-        </button> -->
+        <button
+          ref="nextButton"
+          v-on:click="clickNextButton()"
+          class="btn btn-primary"
+        >
+          Teruskan
+        </button>
+      </div>
     </div>
   </div>
+  <div v-else>
+    <select-finalise v-bind:finalSurat="listSag" v-bind:totalHarga="sum"></select-finalise>
+  </div>
 </template>
 
 <script>
+import SelectFinalise from "./SelectFinalise.vue";
+
 export default {
-  methods: {},
-  emits: {
-    clickBack() {
-      console.log("hye");
+  components: {
+    "select-finalise": SelectFinalise,
+  },
+  props: {
+    selectedRadio: "",
+  },
+  data() {
+    return {
+      listSag: [],
+      totalSelect: [],
+      nextButton: false,
+    };
+  },
+  methods: {
+    clickNextButton() {
+      this.nextButton = true;
+    },
+  },
+  computed: {
+    sum() {
+      return this.totalSelect.reduce(function (a, b) {
+        return parseInt(a) + parseInt(b);
+      }, 0);
     },
   },
 };
diff --git a/src/components/pay/SelectOutlet.vue b/src/components/pay/SelectOutlet.vue
index b7e912b..83424b7 100644
--- a/src/components/pay/SelectOutlet.vue
+++ b/src/components/pay/SelectOutlet.vue
@@ -2,13 +2,17 @@
   <div class="container">
     <div class="row justify-content-center">
       <div class="col-7">
-        <div v-if="!clickNext">
-          <p>Pilih Cawangan</p>
+        <div v-if="!nextButton">
+          <h5>Pilih Cawangan</h5>
           <table class="table table-bordered">
             <tbody>
               <tr v-for="data in namaCawangan" v-bind:key="data">
                 <td>
-                  <input type="radio" name="idCawangan" id="idCawangan" />
+                  <input
+                    type="radio"
+                    v-bind:value="data"
+                    v-model="selectRadio"
+                  />
                 </td>
                 <td>{{ data.cawangan }}</td>
               </tr>
@@ -25,20 +29,10 @@
             >
               Teruskan
             </button>
-            <!-- <button
-          ref="payButton"
-          type="button"
-          class="btn btn-success m-3"
-          data-bs-toggle="modal"
-          data-bs-target="#exampleModal"
-          hidden
-        >
-          Bayar
-        </button> -->
           </div>
         </div>
         <div v-else>
-          <select-id></select-id>
+          <select-id v-bind:selectedRadio="selectRadio"></select-id>
         </div>
       </div>
     </div>
@@ -53,20 +47,24 @@ export default {
     "select-id": SelectId,
   },
   props: {
-    id: Number,
     namaCawangan: "",
   },
   data() {
     return {
-      clickNext: false,
+      nextButton: false,
       selectCawangan: this.namaCawangan,
+      selectRadio: "",
     };
   },
 
   methods: {
-    clickNextButton() {
-      this.clickNext = true;
+    clickRadio(value) {
+      console.log(value);
+      this.selectRadio = value;
     },
+    clickNextButton() {
+      this.nextButton = true;
+    }
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/pay/ThePay.vue b/src/components/pay/ThePay.vue
index a4ac34d..9b5f929 100644
--- a/src/components/pay/ThePay.vue
+++ b/src/components/pay/ThePay.vue
@@ -5,48 +5,17 @@
       <div v-if="statusComponent == 1">
         <select-outlet v-bind:namaCawangan="lists"></select-outlet>
       </div>
-      <!-- <div v-if="statusComponent == 2">
+      <div v-if="statusComponent == 2">
         <select-id></select-id>
       </div>
       <div v-else-if="statusComponent == 3">
         <select-finalse></select-finalse>
-      </div> -->
+      </div>
       
     </base-card>
   </the-template>
 
-  <div
-    class="modal fade"
-    id="exampleModal"
-    tabindex="-1"
-    aria-labelledby="exampleModalLabel"
-    aria-hidden="true"
-  >
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
-        </div>
-        <div class="modal-body">...</div>
-        <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-secondary"
-            data-bs-dismiss="modal"
-          >
-            Close
-          </button>
-          <button type="button" class="btn btn-primary">Save changes</button>
-        </div>
-      </div>
-    </div>
-  </div>
+ 
 </template>
 
 <script>
@@ -79,11 +48,11 @@ export default {
     liveData() {
       axios
         .get(
-          "/bayar/" +
+          "/bayarBaki/" +
             localStorage.getItem("id") +
-            "/1" ,
-            // +
-            // localStorage.getItem("lelong_id"),
+            // "/1" ,
+            "/" +
+            localStorage.getItem("lelong_id"),
           {
             headers: {
               Authorization: "Bearer " + localStorage.getItem("token"),
@@ -103,10 +72,10 @@ export default {
         });
     },
     clickBackButton() {
-      // this.statusComponent -= 1;
+      this.statusComponent -= 1;
     },
     clickNextButton() {
-      // this.statusComponent += 1;
+      this.statusComponent += 1;
     },
   },
 };
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 30c341c..7347975 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -68,8 +68,10 @@
                           >
                             <td>{{ index + 1 }}</td>
                             <td>{{ data.norujukan }}</td>
-                            <td>RM {{ data.hargabida }}</td>
+                            <td>RM {{ data.total_payment }}</td>
                             <td>{{ data.marhun }}</td>
+                            <td class="text-danger" v-if="data.status_payment === null">Belum Bayar (null)</td>
+                            <td class="text-success" v-if="data.status_payment === 1">Selesai (1)</td>
                           </tr>
                         </tbody>
                       </table>
@@ -107,9 +109,11 @@ export default {
       this.loading = true;
       axios
         .get(
-          "/bayar/" + localStorage.getItem("id") + "/1",
-          // +
-          // localStorage.getItem("lelong_id"),
+          "/bayar/" +
+            localStorage.getItem("id") +
+            // "/1",
+            "/" +
+            localStorage.getItem("lelong_id"),
           {
             headers: {
               Authorization: "Bearer " + localStorage.getItem("token"),
@@ -119,6 +123,7 @@ export default {
         .then((response) => {
           if (response.statusText == "OK") {
             this.loading = false;
+            console.log(response);
             this.lists = response.data.data;
             this.tarikhLelong = response.data.tarikh_lelong;
           } else {
diff --git a/src/components/result/ResultMain.vue b/src/components/result/ResultMain.vue
index 95a55b3..288ed5b 100644
--- a/src/components/result/ResultMain.vue
+++ b/src/components/result/ResultMain.vue
@@ -19,15 +19,15 @@
         </tr>
         <tr>
           <td>1</td>
-          <td>12/03/2020</td>
-          <td>RM1212.00</td>
-          <td class="text-success">Selesai</td>
+          <td></td>
+          <td></td>
+          <td class="text-success"></td>
         </tr>
         <tr>
           <td>1</td>
-          <td>12/03/2020</td>
-          <td>RM1212.00</td>
-          <td class="text-success">Selesai</td>
+          <td></td>
+          <td></td>
+          <td class="text-success"></td>
         </tr>
       </tbody>
     </table>