UnivateProperties/src/components/timeshare/resort/unitPage.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <br />
    <br />
    <br />
    <br />
    <div class="row">
      <div class="col-md-12 col-lg-8">
        <div class="title-box-d">
          <h1
            class="title-d"
            style="text-align:left; font-size: 250%"
          >{{week ? week.resortName : ''}}</h1>
        </div>
        <br />
      </div>
      <div class="row mb-4">
        <div class="col-md-4">
          <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
        </div>
        <div class="col-md-4">
          <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
        </div>
        <div class="col-md-4">
          <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
        </div>
      </div>
    </div>
    <br />
    <div class="container col-md-12" style="text-align:left;">
      <div class="row">
        <div class="col-md-6">
          <div class="title-box-d">
            <h3 class="title-d">Property Description</h3>
          </div>
          <p>{{description}}</p>
          <div>
            <div class="title-box-d">
              <h3 class="title-d">Facilities</h3>
            </div>
            <ul v-if="resort.prUnitFacilities">
              <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
            </ul>
          </div>
        </div>
        <div class="col-md-6" v-if="week">
          <form
            id="mainForm"
            method="POST"
            action="/interested-timeshare/"
            accept-charset="UTF-8"
            enctype="multipart/form-data"
          >
            <div class="title-box-d">
              <h3 class="title-d">Summary</h3>
            </div>
            <div class="form-row">
              <div class="col-md-6">
                <label for="resortunit">Unit</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" style="color: #60CBEB">
                      <b>U#</b>
                    </span>
                  </div>
                  <input
                    class="form-control"
                    type="text"
                    id="resort"
                    name="resortunit"
                    :value="week ? week.unitNumber : ''"
                    disabled
                  />
                </div>
              </div>
              <div class="col-md-6">
                <label for="resortWeek">Module / Week Number</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" style="color: #60CBEB">
                      <b>M</b>
                    </span>
                  </div>
                  <input
                    class="form-control"
                    type="text"
                    id="week"
                    name="resortWeek"
                    :value="week ? week.weekNumber : ''"
                    disabled
                  />
                </div>
              </div>

              <div class="col-md-6">
                <label for="resortModule">Current Year Levy</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" style="color: #60CBEB">
                      <b>R</b>
                    </span>
                  </div>
                  <input
                    class="form-control"
                    type="text"
                    id="levy"
                    name="levy"
                    :value="formatPrice(week ? week.levyAmount : 0)"
                    disabled
                  />
                </div>
              </div>
              <div class="col-md-6">
                <label for="price">Price</label>
                <div class="property-price d-flex">
                  <!-- <div class="card-header-c d-flex"> -->
                  <div style="width: 260px; height: 70px; border-style: solid; color: #60CBEB;">
                    <!-- <div class="card-title-c align-self-center"> -->
                    <a class="justify-content-center" style="color: black; font-size: 250%">
                      <b>R{{ formatPrice(week ? week.sellPrice : 0) }}</b>
                    </a>
                    <!-- </div> -->
                  </div>
                  <!-- </div> -->
                </div>
              </div>
            </div>
            <br />
          </form>
          <br />

          <!-- <a
              class="btn btn-b-n even-width mr-auto"
              href="/share-transfer-initiation-for-purchaser/"
          >Make an Offer</a>-->
          <button
            type="button"
            class="btn btn-b-n even-width mr-auto"
            data-toggle="modal"
            data-target="#myModal"
          >Make an Offer</button>
          <div class="col-md-12">
            <div id="myModal" class="modal fade" role="dialog">
              <div class="modal-dialog modal-lg">
                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>
                  <div padding-left="20px">
                    <makeOffer
                      name="MakeOffer"
                      :isMakeOffer="true"
                      :isProperty="false"
                      :item="week"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import makeOffer from '../../processFlow/makeOffer.vue';

export default {
  name: 'unit',
  components: {
    makeOffer,
  },
  props: {
    resortCode: {},
    weekId: {},
  },
  mounted() {
    this.initResort(this.resortCode);
    this.initWeek(this.weekId);
  },
  computed: {
    ...mapState('resort', [
      'resort',
      'description',
      'image1',
      'image2',
      'image3',
    ]),
    ...mapState('week', ['week']),
  },
  methods: {
    ...mapActions('resort', ['initResort']),
    ...mapActions('week', ['initWeek']),
    formatPrice(value) {
      if (value) {
        const val = (value / 1).toFixed(2);
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
      }
      return '';
    },
  },
};
</script>
<style scoped>
.btn.btn-b-c {
  background-color: #ffffff;
  color: #60cbeb;
  border-radius: 0;
}

.btn.btn-b-c:hover {
  background-color: #089bf0;
  color: #ffffff;
}
</style>