diff --git a/src/components/BidHistory.vue b/src/components/BidHistory.vue
index 9e40a01..b123ae4 100644
--- a/src/components/BidHistory.vue
+++ b/src/components/BidHistory.vue
@@ -9,14 +9,14 @@
       Kembali <i class="bi bi-backspace-fill"></i>
     </button>
     <h1>Rekod Bidaan <i class="bi bi-receipt"></i></h1>
-    <div class="card">
+    <!-- <div class="card"> -->
       <div class="card-body">
         <button @click="renderListBid" class="badge btn-secondary">
           Reload <i class="bi bi-arrow-clockwise"></i>
         </button>
         <ListBid :key="ListBidComponent" />
       </div>
-    </div>
+    <!-- </div> -->
   </div>
   <Footer />
 </template>
diff --git a/src/components/Cart.vue b/src/components/Cart.vue
index fdffafa..d187746 100644
--- a/src/components/Cart.vue
+++ b/src/components/Cart.vue
@@ -527,7 +527,13 @@
             >
               Kembali
             </button>
-            <button type="submit" class="btn btn-success" @click="bidderSelectBidItem()">Daftar Bidaan</button>
+            <button
+              type="submit"
+              class="btn btn-success"
+              @click="bidderSelectBidItem()"
+            >
+              Daftar Bidaan
+            </button>
             <p
               class="fst-italic mt-3 fw-lighter"
               style="text-align: right; font-size: small"
@@ -608,7 +614,66 @@
       </div>
     </div>
   </div>
-  <Footer />
+  <div class="container-fluid bg-light" style="bottom: 0">
+    <footer
+      class="
+        d-flex
+        flex-wrap
+        justify-content-between
+        align-items-center
+        py-3
+        my-4
+        border-top
+      "
+      style="bottom: 0"
+    >
+      <p class="col-md-4 mb-0 text-muted justify-content-start">
+        &copy; 2022 Company, Inc
+      </p>
+
+      <a
+        href="/"
+        class="
+          col-md-4
+          d-flex
+          align-items-center
+          justify-content-center
+          mb-3 mb-md-0
+          me-md-auto
+          link-dark
+          text-decoration-none
+        "
+      >
+        <svg class="bi me-2" width="40" height="32">
+          <!-- <use xlink:href="#bootstrap" /> -->
+          <!-- <i class="bi bi-spotify"></i> -->
+        </svg>
+      </a>
+
+      <ul class="nav col-md-4 justify-content-center">
+        <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted"
+            >Permodalan Kelantan Berhad</a
+          >
+        </li>
+        <!-- <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">Home</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">Features</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">Pricing</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">FAQs</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">About</a>
+        </li> -->
+      </ul>
+    </footer>
+  </div>
 </template>
 
 <script>
@@ -641,12 +706,13 @@ export default {
         hargabida: "",
       },
       formPayment: {
-        email: "amirhamzan30@gmail.com",
-        notel: "0198900990",
+        email: "amirhassan.hamzan@gmail.com",
+        notel: "0192020100",
         name: "amir",
-        user_id: "8",
-        lelong_id: "4",
+        user_id: localStorage.getItem('id'),
+        lelong_id: localStorage.getItem('lelong_id')
       },
+      test: localStorage.getItem('id'),
       formCheck: {
         user_id: localStorage.getItem("id"),
         lelong_id: "4",
@@ -675,17 +741,18 @@ export default {
       return total.toFixed(2);
     },
     // ...mapGetters(["idLelong"])
-    ...mapState(["idLelong"]),
+    // ...mapState(["idLelong"]),
+    ...mapGetters(["idLelong"]),
     myValue() {
       return this.$store.state.lelong_id;
     },
-    count () {
+    count() {
       return store.state.lelong_id;
-    }
+    },
   },
   mounted: function () {
-    this.listCart();
     this.checkFeePayment();
+    this.listCart();
   },
   methods: {
     trybayar() {
@@ -768,27 +835,26 @@ export default {
       axios
         .post("/feepayment", this.formPayment)
         .then((response) => {
+          console.log(response);
           window.open(response.data.message + "?auto_submit=true");
-
           // window.location.href = response.data.message + '?auto_submit=true';
+          console.log(response);
+
+
         })
-        .catch((error) => {
-          // console.log("test");
-          console.log(error);
-          // console.log(this.formPayment);
-        });
+          .catch((error) => {
+            console.log(error);
+          });
     },
     checkFeePayment() {
-      // let test = this.store.state.idLelong;
-      // console.log(test);
       axios
-        .get("/bidder/hisfeepay", {
+        .get("/bidder/historyFeePay", {
           headers: {
             Authorization: "Bearer " + localStorage.getItem("token"),
           },
           params: {
             user_id: localStorage.getItem("id"),
-            lelong_id: "4",
+            lelong_id: localStorage.getItem("lelong_id"),
           },
         })
         // .post("/addToCart", this.form, {
diff --git a/src/components/dashboard/LelongToday.vue b/src/components/dashboard/LelongToday.vue
index f318507..cb4b3d8 100644
--- a/src/components/dashboard/LelongToday.vue
+++ b/src/components/dashboard/LelongToday.vue
@@ -23,7 +23,7 @@
         <tbody>
           <tr v-for="(item, index) in response" :key="item.id">
             <td>{{ index + 1 }}</td>
-            <td>{{ item.lelongbid[0].cawangan.caw_name }}</td>
+            <td>nama cawangan</td>
             <td>{{ item.masamula_lelong }}</td>
           </tr>
         </tbody>
@@ -81,6 +81,7 @@ export default {
         .then((response) => {
           this.response = response.data;
           console.log(response.data);
+          localStorage.setItem("lelong_id", response.data[0].id);
           // this.cawangan = response.data[0].lelongbid[0].cawangan.caw_dbname;
           // console.log(this.cawangan);
 
diff --git a/src/components/result/ToPay.vue b/src/components/result/ToPay.vue
index f85bd99..1cf305e 100644
--- a/src/components/result/ToPay.vue
+++ b/src/components/result/ToPay.vue
@@ -5,12 +5,9 @@
   <!-- <Navbar /> -->
   <div
     v-if="loading"
-    style="min-height: 70vh; display: grid; place-items: center;"
+    style="min-height: 70vh; display: grid; place-items: center"
   >
-    <div
-      class="spinner-border"
-      role="status"
-    >
+    <div class="spinner-border" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>
   </div>
@@ -151,7 +148,13 @@
               <div class="m-t-sm">
                 <div class="btn-group">
                   <!-- <a href="#" class="btn btn-white btn-sm"> Batal</a> -->
-                  <a href="#" class="btn btn-primary">Bayar </a>
+                  <button
+                    data-bs-toggle="modal"
+                    data-bs-target="#bayarBidaanModal"
+                    class="btn btn-primary"
+                  >
+                    Bayar
+                  </button>
                 </div>
               </div>
             </div>
@@ -190,6 +193,73 @@
       </div>
     </div>
   </div>
+
+  <!-- modal bayar bidaan menang -->
+  <div
+    class="modal fade"
+    id="bayarBidaanModal"
+    tabindex="-1"
+    aria-labelledby="payModalLabel"
+    aria-hidden="true"
+    data-bs-backdrop="static"
+    data-bs-keyboard="false"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="editModalLabel">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
+              >Caj tambahan RM1 akan dikenakan untuk setiap kali bayaran melalui Billplz.</i
+            >
+          </h4>
+
+          <!-- <table class="table table-bordered">
+              <tbody>
+                <tr class="bg-light">
+                  <th>Jumlah Surat</th>
+                  <th>Jumlah Bidaan</th>
+                </tr>
+                <tr>
+                  <td>{{ total_sag }}</td>
+                  <td>RM{{ total_bidaan }}</td>
+                </tr>
+              </tbody>
+            </table> -->
+        </div>
+        <div class="modal-footer">
+          <button
+            type="submit"
+            class="btn btn-secondary me-2"
+            data-bs-dismiss="modal"
+          >
+            Kembali
+          </button>
+          <button type="submit" class="btn btn-success" @click="bidPayment()">
+            Bayar
+          </button>
+          <p
+            class="fst-italic mt-3 fw-lighter"
+            style="text-align: right; font-size: small"
+          >
+            *Pelayar akan dialihkan ke halaman pembayaran jika butang 'Bayar'
+            ditekan.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
   <!-- <HistoryResult /> -->
   <!-- <Footer /> -->
 </template>
@@ -201,7 +271,7 @@ import Footer from "../Footer.vue";
 import axios from "axios";
 
 export default {
-  name: "Cart",
+  name: "ToPay",
   components: {
     Navbar,
     Footer,
@@ -212,6 +282,14 @@ export default {
       sags: Array,
       total_hargabida: "",
       loading: false,
+      formPayment: {
+        email: "amirhassan.hamzan@gmail.com",
+        notel: "0192020100",
+        name: "amir",
+        user_id: localStorage.getItem("id"),
+        lelong_id: localStorage.getItem("lelong_id"),
+        total: "1890",
+      },
     };
   },
   mounted: function () {
@@ -236,6 +314,24 @@ export default {
           console.log(error);
         });
     },
+    bidPayment() {
+      axios
+        .post("/bidpayment", {
+          email: this.formPayment.email,
+          notel: this.formPayment.notel,
+          name: this.formPayment.name,
+          user_id: this.formPayment.user_id,
+          lelong_id: this.formPayment.lelong_id,
+          total: this.total_hargabida,
+        })
+        .then((response) => {
+          console.log(response);
+          window.open(response.data.message + "?auto_submit=true");
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
   },
   // data() {
   //   return {