<template>
  <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>
          </div>
        </div>
      </div>
    </section>
    <div class="container">
      <div class="row mb-4">
        <div class="col-md-6">
          <p>{{description}}</p>
        </div>
        <div class="col-md-6">
          <form
            id="mainForm"
            method="POST"
            action="/interested-timeshare/"
            accept-charset="UTF-8"
            enctype="multipart/form-data"
          >
            <div class="form-row">
              <div class="col-md-6">
                <label for="resortunit">Unit</label>
                <input
                  class="form-control"
                  type="text"
                  id="resort"
                  name="resortunit"
                  :value="week.unit"
                  disabled
                />
              </div>
              <div class="col-md-6">
                <label for="resortWeek">Week</label>
                <input
                  class="form-control"
                  type="text"
                  id="week"
                  name="resortWeek"
                  :value="week.week"
                  disabled
                />
              </div>
            </div>
            <br />
            <div class="form-row">
              <div class="col-md-6">
                <label for="resortModule">Module</label>
                <input
                  class="form-control"
                  type="text"
                  id="module"
                  name="resortModule"
                  :value="week.module"
                  disabled
                />
              </div>
              <div class="col-md-6">
                <label for="price">Price</label>
                <input
                  class="form-control"
                  type="text"
                  name="price"
                  id="price"
                  :value="'R ' + week.price"
                  disabled
                />
              </div>
            </div>
            <br />
            <div class="form-row">
              <div class="col-md-6">
                <label for="resortModule">Current Year Levy</label>
                <input
                  class="form-control"
                  type="text"
                  id="levy"
                  name="levy"
                  :value="'R ' + week.currentLevy"
                  disabled
                />
              </div>
            </div>
            <br />
            <div class="form-row">
              <div class="col-md-12">
                <input class="form-control" type="text" name="name" placeholder="Name" />
              </div>
            </div>
            <br />
            <div class="form-row">
              <div class="col-md-12">
                <input
                  class="form-control"
                  type="number"
                  name="mobile"
                  placeholder="Contact Number"
                />
              </div>
            </div>
            <br />
            <div class="form-row">
              <div class="col-md-12">
                <input class="form-control" type="email" name="email" placeholder="Email" />
              </div>
            </div>
            <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>

            <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
          </form>
        </div>
      </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>
  </section>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  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>
