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

<template>
  <!-- eslint-disable max-len -->
  <section>
    <section class="intro-single">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-single-box">
              <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
            </div>
            <br />
          </div>
          <div class="row mb-4">
            <div class="col-md-4">
              <img class="img-fluid" :src="image1" alt="Resort Image" />
            </div>
            <div class="col-md-4">
              <img class="img-fluid" :src="image2" alt="Resort Image" />
            </div>
            <div class="col-md-4">
              <img class="img-fluid" :src="image3" alt="Resort Image" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="container" style="text-align:left;">
      <div class="row mb-4">
        <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>
              <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
            </ul>
          </div>
        </div>
        <div class="col-md-6">
          <form
            id="mainForm"
            method="POST"
            action="/interested-timeshare/"
            accept-charset="UTF-8"
            enctype="multipart/form-data"
          >
            <div class="title-box-d section-t4">
              <h3 class="title-d">Summary</h3>
            </div>
            <div class="form-row">
              <div class="col-md-3">
                <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.unit"
                    disabled
                  />
                </div>
              </div>
              <div class="col-md-3">
                <label for="resortWeek">Week</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" style="color: #60CBEB">
                      <b>W#</b>
                    </span>
                  </div>
                  <input
                    class="form-control"
                    type="text"
                    id="week"
                    name="resortWeek"
                    :value="week.week"
                    disabled
                  />
                </div>
              </div>

              <div class="form-row">
                <div class="col-md-9">
                  <label for="resortModule">Module</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="module"
                      name="resortModule"
                      :value="week.module"
                      disabled
                    />
                  </div>
                </div>
              </div>
              <div class="col-md-5">
                <label for="price">Price</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"
                    name="price"
                    id="price"
                    :value="week.price"
                    disabled
                  />
                </div>
              </div>
              <div class="col-md-5">
                <label for="resortModule">Current 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="week.currentLevy"
                    disabled
                  />
                </div>
              </div>
            </div>
            <br />
            <div class="form-row">
              <div>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                    </span>
                    <input class="form-control" type="text" name="name" placeholder="Name" />
                  </div>
                </div>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
                    </span>
                    <input
                      class="form-control"
                      type="number"
                      name="mobile"
                      placeholder="Contact Number"
                    />
                  </div>
                </div>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
                    </span>
                    <input class="form-control" type="email" name="email" placeholder="Email" />
                  </div>
                </div>
              </div>
            </div>
          </form>
          <br />

          <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>

          <!-- <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 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="{resort: resort.prName, unit: week.unit, week: week.week, module: week.module, price: week.price}"
                  />
                </div>
              </div>
            </div>
          </div>

          <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
        </div>
      </div>
    </div>
  </section>
</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', 'contactDetails']),
  },
  methods: {
    ...mapActions('resort', ['initResort']),
    ...mapActions('week', ['initWeek']),
  },
};
</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>