<template>
  <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
    <div class="container">
      <div class="form">
        <div class="row">
          <div class="col">
            <div class="section-header">
              <h2>Edit Template</h2>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <float-label fixed label="USAGE">
              <select
                v-model="singleTemp.name"
                class="form-control uniSelect"
                name=""
                id=""
              >
                <option value="WeekOfferMade-User">
                  Timeshare Week Offer Made (User)
                </option>
                <option value="WeekOfferMade-Owner">
                  Timeshare Week Offer Made (Admin)
                </option>
                <option value="WeekLoaded-Agent">
                  Timeshare Week Listed (Agent)
                </option>
                <option value="WeekLoaded-Owner">
                  Timeshare Week Listed (Owner)
                </option>
                <option value="ContactUs">Contact Us (Admin)</option>
                <option value="EnquireNow">Enquire Now (Admin)</option>
              </select>
            </float-label>
          </div>
          <div class="col">
            <float-label fixed label="SUBJECT">
              <input
                type="text"
                class="form-control uniInput"
                v-model="singleTemp.subject"
              />
            </float-label>
          </div>
        </div>
        <div class="row mt-5">
          <div class="col-md-12">
            <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
              <li class="nav-item">
                <a
                  class="nav-link active"
                  id="html-tab"
                  data-toggle="tab"
                  href="#html"
                  role="tab"
                  aria-controls="html"
                  aria-selected="false"
                >
                  <h2>
                    html
                  </h2>
                </a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  id="preview-tab"
                  data-toggle="tab"
                  href="#preview"
                  role="tab"
                  aria-controls="preview"
                  aria-selected="true"
                >
                  <h2>
                    Preview
                  </h2>
                </a>
              </li>
            </ul>
            <div class="tab-content" id="myTabContent">
              <div class="row mt-5">
                <div class="col-md-10 mt-3">
                  <float-label fixed label="DYNAMIC FIELD">
                    <select
                      v-model="selectedProperty"
                      class="form-control uniSelect"
                      name=""
                      id=""
                    >
                      <optgroup label="Resort Fields">
                        <option value="[RESORTNAME]">Resort Name</option>
                        <option value="[UNITNUMBER]">Unit Number</option>
                        <option value="[MODULE]">Module</option>
                        <option value="[RESORTPRICE]">Resort Price</option>
                        <option value="[RESORTSEASON]">Resort Season</option>
                        <option value="[RESORTLEVY]">Resort Levy</option>
                        <option value="[OFFERMADE]">Offer Made</option>
                        <option value="[OWNER]">OWNER</option>
                      </optgroup>
                      <optgroup label="Property Fields">
                        <option value="[PROPERTYREF]">Property Ref</option>
                        <option value="[PROPERTYNAME]">Property Name</option>
                        <option value="[PROPERTYPRICE]">Property Price</option>
                        <option value="[PROPERTYID]">Property ID</option>
                      </optgroup>
                      <optgroup label="User Fields">
                        <option value="[FULLNAME]">Fullname</option>
                        <option value="[USEREMAIL]">User Email</option>
                        <option value="[USERCELLPHONE]">
                          User Cellphone Number
                        </option>
                        <option value="[USERTELEPHONE]">
                          User Telephone Number
                        </option>
                        <option value="[USERCOMMENT]">User Comment</option>
                        <option value="[USERMESSAGE]">User Message</option>
                      </optgroup>
                    </select>
                  </float-label>
                </div>
                <div class="col">
                  <button class="btn-solid-blue" @click="onItemAdd">
                    INSERT
                  </button>
                </div>
              </div>
              <div
                class="tab-pane fade show active mt-4"
                style="
                  background-color: rgba(255, 255, 255, 0.75);
                  padding: 10px;
                "
                id="html"
                role="tabpanel"
                aria-labelledby="directions-tab"
              >
                <div class="text-left">
                  <div class="input-group mb-3">
                    <textarea
                      id="bodyInput"
                      class="form-control"
                      type="text"
                      rows="40"
                      step="any"
                      name="levy"
                      v-model="singleTemp.body"
                    />
                  </div>
                </div>
              </div>
              <div
                class="tab-pane fade mt-4"
                id="preview"
                role="tabpanel"
                aria-labelledby="resort-layout-tab"
              >
                <div class="no-style" v-html="singleTemp.body"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-4">
          <div class="col">
            <button class="btn-solid-blue" @click="sendToApi()">UPDATE</button>
          </div>
          <div class="col">
            <button class="btn-solid-blue" @click="$router.go(-1)">
              CANCEL
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapActions, mapState } from 'vuex'

import alert from '../shared/alert'
export default {
  data() {
    return {
      selectedProperty: '',
    }
  },
  components: {
    alert,
  },
  created() {
    this.getSingleTemplate(this.$route.params.id).then(() => {
      console.log(this.recipient)
    })
  },
  computed: {
    ...mapState('template', ['singleTemp']),
  },
  methods: {
    ...mapActions('template', ['getSingleTemplate', 'editItem']),
    sendToApi() {
      this.editItem(this.singleTemp)
        .then(() => this.$router.go(-1))
        .catch((ex) => console.log(ex))
    },
    onItemAdd() {
      var placeHolder = this.selectedProperty
      // will give the current postion of the cursor
      var curPos = document.getElementById('bodyInput').selectionStart

      // will get the value of the text area
      let x = $('#bodyInput').val()

      // will get the value of the input box
      let text_to_insert = placeHolder

      // setting the updated value in the text area
      $('#bodyInput').val(x.slice(0, curPos) + text_to_insert + x.slice(curPos))
    },
  },
}
</script>

<style lang="scss" scoped>
.nav-tabs li a {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-color: rgb(221, 221, 221);
}

.nav-tabs li :hover {
  background-color: rgb(27, 117, 187);
}

.nav-tabs li a.active {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-color: rgb(221, 221, 221);
}

.nav-tabs li a :hover {
  background-color: transparent;
  color: white;
}
</style>
