lelong-web-pembida/src/components/List.vue

<template>
  <Navbar />
  <div class="container">
    <button
      class="btn btn-secondary float-start"
      style="margin: 5px"
      onclick="history.back()"
    >
      Go Back <i class="bi bi-backspace-fill"></i>
    </button>
    <h1>List</h1>
    <p>Tarikh Lelong: {{ lelong_details.tarikh_lelong }}</p>

    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon3">Pilih Cawangan</span>
      <select class="form-select">
        <option selected value="1">Ar-Rahn Kota Bharu 2</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <button type="submit" class="btn btn-primary">Cari</button>
    </div>
    <div class="row">
      <div class="col-9">
        <div class="container">
          <div class="row clearfix">
            <div
              v-for="sag in sags"
              :key="sag.id"
              class="col-lg-4 col-md-4 col-sm-12"
              style="margin: 10px 0px"
            >
              <div class="card product_item" style="padding: 15px">
                <div class="body">
                  <div class="product_details">
                    <h5>
                      <a href="#">{{ sag.norujukan }}</a>
                    </h5>
                    <ul class="product_price list-unstyled">
                      <li class="old_price">RM{{ sag.hargaasas }}</li>
                      <li class="old_price">{{ sag.marhun }}</li>
                    </ul>
                    <div class="cp_img">
                      <div class="hover">
                        <a
                          data-bs-toggle="modal"
                          data-bs-target="#bidaModal"
                          @click="clickModal(sag)"
                          class="btn btn-primary btn-sm waves-effect"
                          >Enter <i class="zmdi zmdi-shopping-cart"></i
                        ></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3">
        <div class="ibox" style="border: solid 0.5px">
          <div class="ibox-content">
            <p class="font-bold">Info</p>
            <hr />
            <div>
              <!-- <a href="#" class="product-name"> Product 1</a> -->
              <div class="small m-t-xs">
                <div class="d-flex justify-content-between">
                  <p class="mb-0">Cawangan</p>
                  <p class="mb-0">Kota Bharu 2</p>
                </div>
              </div>
              <hr />
              <div class="small m-t-xs">
                <div class="d-flex justify-content-between">
                  <p class="mb-0">Masa Mula</p>
                  <p class="mb-0">{{ lelong_details.masamula_lelong }}</p>
                </div>
              </div>
              <hr />
              <div class="small m-t-xs">
                <div class="d-flex justify-content-between">
                  <p class="mb-0">Masa Tamat</p>
                  <p class="mb-0">{{ lelong_details.masatamat_lelong }}</p>
                </div>
              </div>

              <!-- <div class="small m-t-xs">
                  Masa Tamat Lelongan: 00:15:29
                </div> -->
              <!-- <div class="m-t text-righ">
                  <a href="#" class="btn btn-xs btn-outline btn-primary"
                    >Info <i class="fa fa-long-arrow-right"></i>
                  </a>
                </div> -->
            </div>
            <!-- <hr /> -->
            <!-- <div>
                <a href="#" class="product-name"> Product 2</a>
                <div class="small m-t-xs">
                  Many desktop publishing packages and web page editors now.
                </div>
                <div class="m-t text-righ">
                  <a href="#" class="btn btn-xs btn-outline btn-primary"
                    >Info <i class="fa fa-long-arrow-right"></i>
                  </a>
                </div>
              </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <div
    class="modal fade"
    id="bidaModal"
    tabindex="-1"
    aria-labelledby="bidaModalLabel"
    aria-hidden="true"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
  >
    <!-- <form @submit.prevent="submit"> -->
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="bidaModalLabel">
            {{ norujukan.norujukan }} : {{ norujukan.id }}
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>

        <div class="modal-body">
          <div class="row m-2">
            <!-- <div class="col-2 border"></div> -->
            <div class="col">
              <h5>Harga Asas: RM{{ norujukan.hargaasas }}</h5>
              <p>Marhun: {{ norujukan.marhun }}</p>
              <table class="table">
                <thead>
                  <tr>
                    <th scope="col">No</th>
                    <th scope="col">Jenis Marhun</th>
                    <th scope="col">Karat</th>
                    <th scope="col">Berat</th>
                    <th scope="col">Nota</th>
                    <th scope="col">Harga Asas</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(marhun, index) in marhuns" :key="marhun.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ marhun.marhun }}</td>
                    <td>{{ marhun.karat }}</td>
                    <td>{{ marhun.berat }}g</td>
                    <td>{{ marhun.nota }}</td>
                    <td>RM{{ marhun.hargaasas }}</td>
                  </tr>
                </tbody>
              </table>
              <div class="row">
                <div class="input-group mb-3">
                  <label class="col-form-label me-2">Tambahan Harga Bida</label>
                  <span class="input-group-text">RM</span>
                  <input type="text" id="tambahanbida" class="form-control" />
                </div>
              </div>
              <div class="row">
                <div class="input-group mb-3">
                  <label class="col-form-label me-2">Jumlah Harga Bida</label>
                  <span class="input-group-text">RM</span>
                  <input
                    v-model="form.hargabida"
                    type="text"
                    class="form-control"
                    id="{{marhun.marhuns}}"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button
            type="submit"
            class="btn btn-danger me-2"
            data-bs-dismiss="modal"
          >
            Batal
          </button>
          <button type="submit" class="btn btn-success" @click="addToCart()">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
    <!-- </form> -->
  </div>
  <Footer />
</template>

<script>
import Navbar from "./Navbar.vue";
import Footer from "./Footer.vue";
import axios from "axios";

export default {
  components: {
    Navbar,
    Footer,
  },
  data() {
    return {
      lelong_details: [],
      sags: [],
      norujukan: "",
      marhuns: [],
      form: {
        user_id: localStorage.getItem("id"),
        lelongbid_id: "",
        hargabida: "",
      },
    };
  },
  mounted: function () {
    this.liveData();
  },
  methods: {
    liveData() {
      axios
        .get("/lelongDetails/cawangan", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
          params: {
            caw_id: 3,
          },
        })
        .then((response) => {
          this.lelong_details = response.data[0];
          this.response = response.data[0].lelongbid;
          this.sags = this.response;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    clickModal(norujukan) {
      this.norujukan = norujukan;
      this.marhuns = this.norujukan.lelongbidmarhun;
      this.form.lelongbid_id = this.norujukan.id;

      // this.try = data().form.lelongbid_id
      // let carName = this.try;
      // document.getElementById("demo").innerHTML = carName;
      // console.log(this.form.lelongbid_id);
      // console.log(this.marhuns);
    },
    addToCart() {
      axios
        .post("/addToCart", this.form, {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        })
        .then((response) => {
          console.log(response);
          // bidaModal.hide();
          // call Cart component to refresh
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>