<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="col-sm-12">
          <div class="about-img-box">
            <img
              src="img/sell.jpg"
              alt="Timeshare To Sell"
              class="img-fluid"
              style="width:800px;height:400px;"
            />
          </div>
          <div class="sinse-box">
            <h3 class="sinse-title">
              Timeshare To Sell
              <span></span>
            </h3>
          </div>
        </div>
        <br />
        <div>
          <div style="float: right;" class="btn btn-link color-b">
            <router-link to="LinkToBeSelected">
              Bulk Weeks Upload
              <span class="ion-ios-arrow-forward" style="color:#60CBEB"></span>
            </router-link>
          </div>
        </div>
        <br />
        <br />
        <p>* You need to be logged in to submit your listing. Please register and log in if you have not done so already.</p>
        <hr />
      </div>
    </div>
    <div class="row mb-4">
      <div class="container col-md-10">
        <form
          id="mainForm"
          method="POST"
          action="/to-sell"
          accept-charset="UTF-8"
          enctype="multipart/form-data"
        >
          <div class="form-group row">
            <div class="col-md-4">
              <label>Were you referred by an agent?</label>
              <br />
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input radiogroup"
                  type="radio"
                  value="true"
                  :checked="refAgent"
                  @change="changeRef"
                />
                <label class="form-check-label" for="referedBy">Yes</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input radiogroup"
                  type="radio"
                  value="false"
                  :checked="!refAgent"
                  @change="changeRef"
                />
                <label class="form-check-label" for="referedBy">No</label>
              </div>
            </div>
            <div class="col-md-4" v-if="refAgent">
              <label for="Name of Agency">Agency</label>
              <select class="form-control" id="Agency" name="agency" v-model="sellItem.agency">
                <option v-for="(item, i) in agencies" :key="i">{{item.agencyName}}</option>
              </select>
            </div>
            <div class="col-md-4" v-if="refAgent">
              <label for="Name of Agent">Agent</label>
              <select class="form-control" id="agent" name="agent" v-model="sellItem.agent">
                <option v-for="(item, i) in agents" :key="i">{{item.name}}</option>
              </select>
            </div>
          </div>

          <div class="form-group row">
            <div class="col-md-6">
              <label for="Resort Name">Resort Name</label>
              <select
                class="form-control"
                id="resort"
                name="resort"
                v-model="sellItem.resort"
                @change="resortChange()"
              >
                <option value="Other">Other</option>
                <option
                  v-for="(resort, r) in resorts"
                  :key="r"
                  :value="resort"
                >{{resort.resortName}}</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="* If other" v-if="sellItem.otherResort">Name of resort</label>
              <input
                class="form-control"
                v-if="sellItem.otherResort"
                placeholder="* If other"
                type="text"
                name="other"
                v-model="sellItem.otherResortName"
              />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label for="Region">Region</label>
              <select class="form-control" name="region" id="region" v-model="sellItem.region">
                <option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="Season">Season</label>
              <select class="form-control" name="season" v-model="sellItem.season">
                <option v-for="(season, r) in seasons" :key="r">{{season.name}}</option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label for="Module">Module</label>
              <input
                class="form-control"
                placeholder="Module"
                type="text"
                name="module"
                v-model="sellItem.module"
              />
            </div>
            <div class="col-md-6">
              <label for="Week number">Week Number</label>
              <input
                class="form-control"
                placeholder="Week Number"
                type="text"
                name="week"
                v-model="sellItem.weekNumber"
              />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label for="Bedrooms">Bedrooms</label>
              <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
                <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="Sleeps maximum">Sleeps maximum</label>
              <select class="form-control" name="sleeps" v-model="sellItem.maxSleep">
                <option v-for="(item, i) in maxSleep" :key="i">{{item}}</option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label for="Unit number">Unit Number</label>
              <input
                class="form-control"
                placeholder="Unit Number"
                type="text"
                name="unit"
                v-model="sellItem.unitNumber"
              />
            </div>
            <div class="col-md-6">
              <label for="Owner">Owner</label>
              <input
                class="form-control"
                placeholder="Owner"
                type="text"
                name="owner"
                v-model="sellItem.owner"
              />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label for="Levy">Levy Amount</label>
              <input
                class="form-control"
                placeholder="Levy"
                type="number"
                step="any"
                name="levy"
                v-model="sellItem.levyAmount"
              />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <p>Has your week been spacebanked for the current year?</p>
              <div class="form-check">
                <input
                  class="form-check-input"
                  type="radio"
                  name="spacebankedyear"
                  id="spacebankedyearyes"
                  value="Yes"
                  @change="changeCurrentBanked"
                  :checked="sellItem.currentYearBanked"
                />
                <label class="form-check-label" for="spacebankedyearyes">Yes</label>
              </div>
              <div class="form-check">
                <input
                  class="form-check-input"
                  type="radio"
                  name="spacebankedyear"
                  id="spacebankedyearno"
                  value="No"
                  :checked="!sellItem.currentYearBanked"
                  @change="changeCurrentBanked"
                />
                <label class="form-check-label" for="spacebankedyearno">No</label>
              </div>
            </div>
            <div class="col-md-6">
              <label
                for="If yes, please confirm with whom"
                v-if="sellItem.currentYearBanked"
              >Please confirm with whom</label>
              <select
                class="form-control"
                name="spacebankOwner"
                v-if="sellItem.currentYearBanked"
                v-model="sellItem.bankedWith"
              >
                <option v-for="(item, i) in bankedEntities" :key="i">{{item}}</option>
              </select>
            </div>
          </div>
          <br />
          <hr />
          <br />
          <h3>Share transfer information</h3>
          <br />
          <tr>
            <td>1. With respect to my timeshare module/week, I confirm that:</td>
          </tr>

          <div class="form-group row">
            <label
              for="name"
              class="col-form-label col-md-8"
              align="left"
            >1.1 All levy amounts for the current cycle have been paid in full</label>
            <div class="col-md-4">
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="paid"
                  value="Yes"
                  :checked="sellItem.leviesPaidInFull"
                  @change="changeLeviesPaidInFull()"
                />
                <label class="form-check-label" for="paid">Yes</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="paid"
                  value="No"
                  :checked="!sellItem.leviesPaidInFull"
                  @change="changeLeviesPaidInFull()"
                />
                <label class="form-check-label" for="paid">No</label>
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <label
              for="name"
              class="col-form-label col-md-8"
              align="left"
            >1.2 My week is placed for rental this year</label>
            <div class="col-md-4">
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="rental"
                  value="Yes"
                  :checked="sellItem.weekPlacedForRental"
                  @change="changeWeekPlacedForRental()"
                />
                <label class="form-check-label" for="paidyes">Yes</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="rental"
                  value="No"
                  :checked="!sellItem.weekPlacedForRental"
                  @change="changeWeekPlacedForRental()"
                />
                <label class="form-check-label" for="paidno">No</label>
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <label
              for="name"
              class="col-form-label col-md-8"
              align="left"
            >1.3 I/We bought the timeshare module/week on the following date:</label>
            <div class="col-md-4">
              <input
                type="date"
                class="form-control"
                name="date"
                v-model="sellItem.originalPurchaseDate"
              />
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <label
              for="name"
              class="col-form-label col-md-8"
              align="left"
            >1.4 The purchase price for which I/we bought timeshare module/week was:</label>
            <div class="col-md-4">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">R</span>
                </div>
                <input
                  class="form-control"
                  type="number"
                  step="any"
                  name="purchasePrice"
                  placeholder="R"
                  v-model="sellItem.originalPurchasePrice"
                />
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <label
              for="name"
              class="col-form-label col-md-8"
              align="left"
            >1.5 I/We bought the timeshare module/week for the following dates for the current year:</label>
            <div class="col-md-4">
              Arrival Date :
              <input
                type="date"
                class="form-control"
                name="occupationDate1"
                v-model="sellItem.arrivalDate"
              />
              Departure Date :
              <input
                type="date"
                class="form-control"
                name="occupationDate2"
                v-model="sellItem.departureDate"
              />
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <label
              for="name"
              class="col-form-label col-md-8"
              align="left"
            >1.6 The selling price for the timeshare module/week for which I/we want to sell is: (Including Vat)</label>
            <div class="col-md-4">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">R</span>
                </div>
                <input
                  class="form-control"
                  type="number"
                  step="any"
                  name="sellingPrice"
                  placeholder="R"
                  v-model="sellItem.sellingPrice"
                />
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <label
              for="name"
              class="col-form-label col-md-8"
              align="left"
            >1.7 Estate agent’s commission agreed to (state Rand value)</label>
            <div class="col-md-4">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">R</span>
                </div>
                <input
                  class="form-control"
                  type="number"
                  step="any"
                  name="commission"
                  placeholder="R"
                  v-model="sellItem.agentCommission"
                />
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <label
              for="name"
              class="col-form-label col-md-8"
              align="left"
            >1.8 Mandate to sell timeshare</label>
            <div class="col-md-4">
              <input class="btn btn-b-n" type="file" name="mandate" />
            </div>
          </div>

          <button type="submit" class="btn btn-b-n btn-lg">Submit</button>

          <hr />

          <p>* A listing fee of R380 including VAT is payable to list your timeshare week/module on the Uni-Vate website</p>
          <br />
          <br />
          <p style="text-align:center;">
            To rent your week out
            <a href="https://www.tradeunipoint.com/" target="_blank">click here</a>
          </p>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'TimeshareToSell',
  created() {
    this.initTimeshare();
  },
  computed: {
    ...mapState('timeshare', [
      'resorts',
      'regions',
      'detailedRegion',
      'seasons',
      'resortBedrooms',
      'maxSleep',
      'bankedEntities',
      'sellItem',
      'agencies',
      'agents',
    ]),
    refAgent() {
      return this.sellItem && this.sellItem.referedByAgent;
    },
  },
  methods: {
    previewFiles(event) {
      console.log(event.target.files);
    },
    changeRef() {
      this.sellItem.agent = undefined;
      this.sellItem.agency = undefined;
      this.sellItem.referedByAgent = !this.sellItem.referedByAgent;
    },
    changeLeviesPaidInFull() {
      this.sellItem.leviesPaidInFull = !this.sellItem.leviesPaidInFull;
    },
    changeWeekPlacedForRental() {
      this.sellItem.weekPlacedForRental = !this.sellItem.weekPlacedForRental;
    },
    changeCurrentBanked() {
      this.sellItem.bankedWith = undefined;
      this.sellItem.currentYearBanked = !this.sellItem.currentYearBanked;
    },
    resortChange() {
      if (this.sellItem && this.sellItem.resort === 'Other') {
        this.sellItem.otherResortName = undefined;
        this.sellItem.otherResort = true;
      } else {
        this.sellItem.otherResortName = undefined;
        this.sellItem.otherResort = false;
      }
    },
    ...mapActions('timeshare', ['initTimeshare']),
  },
};
</script>
