<template>
  <div class="container pt-5">
    <div class="row mb-8">
      <div class="col-md-6">
        <h3>{{ property.propertyName }}</h3>
        <p v-html="property.description"></p>
        <p>
          <strong>View by Appointment only!</strong>
        </p>
        <br />
        <p></p>
        <!-- To arrange a viewing contact Mynie:
        <div class="col-md-4">
          <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a><br />
          <a href="tel:0124921238">+27 (0) 12 492 1238</a>
        </div>-->
      </div>
      <div class="col-md-6">
        <div class="form-group row">
          <div class="form-group col-md-6 mb-4">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control"
                id="Suburb"
                placeholder="Suburb"
                data-rule="minlen:4"
                v-model="property.suburb"
                disabled
              />
            </float-label>
            <!-- <float-label>
              <input
                type="text"
                name="name"
                class="form-control"
                id="Unit"
                placeholder="Unit"
                data-rule="minlen:4"
                v-model="property.unit"
                disabled
              />
            </float-label> -->

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-6">
            <float-label label="PRICE">
              <currency-input
                onclick="this.setSelectionRange(0, this.value.length)"
                name="resPrice"
                :value="property.price"
                @input="property.price = $event"
                v-model="property.price"
                id="resPrice"
                class="form-control"
                disabled
              />
            </float-label>

            <div class="validation"></div>
          </div>

          <div class="form-group col-md-6">
            <div v-for="(el, i) in property.displayData[0].values" :key="i">
              <float-label v-if="el.name === 'Erf Size'">
                <input
                  type="text"
                  name="name"
                  class="form-control"
                  id="Size"
                  placeholder="Size"
                  data-rule="minlen:4"
                  v-model="el.value"
                  disabled
                />
              </float-label>
            </div>

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-6 mb-4">
            <div class="validation"></div>
          </div>
          <div class="form-group col-md-12 mb-4 mt-2">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control uniInput"
                id="Name"
                placeholder="Name"
                data-rule="minlen:4"
                v-model="indiv.name"
              />
            </float-label>

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-6 mb-4">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control uniInput"
                id="ContactNumber"
                placeholder="ContactNumber"
                data-rule="minlen:4"
                v-model="indiv.cellNumber"
              />
            </float-label>

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-6">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control uniInput"
                id="Email"
                placeholder="Email"
                data-rule="minlen:4"
                v-model="indiv.emailAddress"
              />
            </float-label>

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-12">
            <float-label fixed label="How did you hear about this property?">
              <select v-model="heardFrom" name="heardFrom" id="" class="form-control uniSelect">
                <option value="Referred by someone">Referred by someone</option>
                <option value="Website Search">Website Search</option>
                <option value="Google Search">Google Search</option>
                <option value="Social Media">Social Media</option>
              </select>
            </float-label>
          </div>
          <div class="form-group col-md-12 mt-3">
            <float-label>
              <textarea
                type="textArea"
                style="height:130px"
                name="message"
                class="form-control uniInput"
                id="Email"
                placeholder="Message"
                data-rule="minlen:4"
                v-model="message"
              />
            </float-label>

            <div class="validation"></div>
          </div>
        </div>
        <div class="text-center">
          <button class="btn-solid-blue" @click="sendMail()">ENQUIRE NOW</button>
        </div>
        <div v-if="boolSent">
          <alert :text="alertMsg" :type="'SUCCESS'" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import axios from "axios";
import alert from "../../shared/alert";
import Log from "../../../assets/Log";
import { mapState, mapGetters, mapActions } from "vuex";

export default {
  components: {
    alert
  },
  data() {
    return {
      alertMsg: "Sent! You can expect a reply soon!",
      name: null,
      email: null,
      contactNumber: null,
      property: null,
      message: null,
      boolSent: false,
      heardFrom: ""
    };
  },
  mounted() {
    this.boolSent = false;
    this.getIndividual(Log.getUser().id);
  },
  props: {
    property: {}
  },
  computed: {
    ...mapState("individual", ["indiv"]),
    ...mapState("authentication", ["isLoggedIn", "user"])
    // ...mapGetters({
    //   user: "authentication/getUser",
    //   person: "authentication/getPerson"
    // })
  },
  methods: {
    ...mapActions("individual", ["getIndividual"]),
    async sendMail() {
      var mailObj = {
        //toAddress: "jlouw365@gmail.com",
        fromAddress: "jlouw365@gmail.com",
        name: this.indiv.name,
        email: this.indiv.emailAddress,
        phone: this.indiv.cellNumber,
        property: this.property.id.toString(),
        message: this.message,
        heardFrom: this.heardFrom
      };

      const response = await axios.post("/api/mail/1", mailObj);

      if (response.status === 200) {
        this.boolSent = true;
      } else {
        console.log("Error");
      }
    },
    countDownChanged(dismissCountDown) {
      this.dismissCountDown = dismissCountDown;
    }
  },
  created() {
    this.$emit("Loaded", true);
  }
};
</script>

<style lang="scss" scoped></style>
