<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1 class="my-4">
          To Sell
          <div style="float: right;" class="btn btn-blue btn-lg">
            <router-link to class="colorBlack">Bulk Weeks upload</router-link>
          </div>
        </h1>
        <hr />
        <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="col-md-12">
        <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"></label>
              <input
                class="form-control"
                placeholder="Name of Agency"
                type="text"
                name="name of agency"
                value
              />
            </div>
            <div class="col-md-4" v-if="refAgent">
              <label for="Name of Agent"></label>
              <input
                class="form-control"
                placeholder="Name of Agent"
                type="text"
                name="name of agenct"
                value
              />
            </div>
          </div>

          <div class="form-group row">
            <div class="col-md-6">
              <label for="Resort Name"></label>
              <select class="form-control" id="resort" name="resort">
                <option value>Please select Resort Name</option>
                <option value></option>
                <option value="Other">Other</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="* If other"></label>
              <input class="form-control" placeholder="* If other" type="text" name="other" value />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label for="Region"></label>
              <select class="form-control" name="region" id="region">
                <option value>Please select Region</option>
                <option value="gauteng">Gauteng</option>
                <option value="Kwazulu Natal">Kwazulu Natal</option>
                <option value="mpumalanga">Mpumalanga</option>
                <option value="north west">North West</option>
                <option value="free state">Free State</option>
                <option value="eastern cape">Eastern Cape</option>
                <option value="western cape">Western Cape</option>
                <option value="northern cape">Northern Cape</option>
                <option value="limpopo">Limpopo</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="Season"></label>
              <select class="form-control" name="season">
                <option value>Please select Season</option>
                <option value="Peak">Peak</option>
                <option value="Peak 1">Peak 1</option>
                <option value="Peak 2">Peak 2</option>
                <option value="Peak 3">Peak 3</option>
                <option value="Peak 4">Peak 4</option>
                <option value="Red">Red</option>
                <option value="White">White</option>
                <option value="Blue">Blue</option>
                <option value="Flexi">Flexi</option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label for="Module"></label>
              <input class="form-control" placeholder="Module" type="text" name="module" value />
            </div>
            <div class="col-md-6">
              <label for="Week number"></label>
              <input class="form-control" placeholder="Week Number" type="text" name="week" value />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label for="Bedrooms"></label>
              <select class="form-control" name="bedrooms">
                <option value>Please select Bedrooms</option>
                <option value="Studio">Studio</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="Sleeps maximum"></label>
              <select class="form-control" name="sleeps">
                <option value>Please select Sleeps maximum</option>
                <option value="2">2</option>
                <option value="4">4</option>
                <option value="6">6</option>
                <option value="8">8</option>
                <option value="10">10</option>
                <option value="12">12</option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label for="Unit number"></label>
              <input class="form-control" placeholder="Unit Number" type="text" name="unit" value />
            </div>
            <div class="col-md-6">
              <label for="Owner"></label>
              <input class="form-control" placeholder="Owner" type="text" name="owner" value />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label for="Levy"></label>
              <input
                class="form-control"
                placeholder="Levy"
                type="number"
                step="any"
                name="levy"
                value
              />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <h5>Has your week been spacebanked for the current year?</h5>
              <div class="form-check">
                <input
                  class="form-check-input"
                  type="radio"
                  name="spacebankedyear"
                  id="spacebankedyearyes"
                  value="Yes"
                  checked
                />
                <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
                />
                <label class="form-check-label" for="spacebankedyearno">No</label>
              </div>
            </div>
            <div class="col-md-6">
              <label for="If yes, please confirm with whom"></label>
              <select class="form-control" name="spacebankOwner">
                <option value>If yes, please confirm with whom</option>
                <option value="Dial an Exchange">Dial an Exchange</option>
                <option value="RCI">RCI</option>
                <option value="First Exchange">First Exchange</option>
                <option value="iExchange">iExchange</option>
                <option value="Interval International">Interval International</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 />
                <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 />
                <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 />
                <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 />
                <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" value />
            </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">
              <input
                class="form-control"
                type="number"
                step="any"
                name="purchasePrice"
                placeholder="R"
                value
              />
            </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" value />
              Departure Date :
              <input
                type="date"
                class="form-control"
                name="occupationDate2"
                value
              />
            </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">
              <input
                class="form-control"
                type="number"
                step="any"
                name="sellingPrice"
                placeholder="R"
                value
              />
            </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">
              <input
                class="form-control"
                type="number"
                step="any"
                name="commission"
                placeholder="R"
                value
              />
            </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" value />
            </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",
      "maxBedrooms",
      "bankedEntities",
      "sellItem",
      "agencies",
      "agents"
    ]),
    refAgent() {
      return this.sellItem && this.sellItem.referedByAgent;
    }
  },
  methods: {
    changeRef() {
      this.sellItem.referedByAgent = !this.sellItem.referedByAgent;
    },
    ...mapActions("timeshare", ["initTimeshare"])
  }
};
</script>
