Merge Conflicts Resolved

src/components/timeshare/sell/sellPage.vue

               </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" 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" 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" type="text" name="unit" v-model="sellItem.unitNumber" />
-            </div>
-            <div class="col-md-6">
-              <label for="Owner">Owner</label>
-              <input class="form-control" 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>
-              <div class="input-group-prepend">
-                <span class="input-group-text" style="color: #60CBEB">
-                  <b>R</b>
-                </span>
-                <input
-                  class="form-control"
-                  type="number"
-                  step="any"
-                  name="levy"
-                  v-model="sellItem.levyAmount"
-                />
+          <div class="container">
+            <div class="offset-md-1 col-md-12">
+              <div class="form-group row">
+                <div class="col-md-5">
+                  <label for="Resort Name">Resort Name</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>RN</b>
+                      </span>
+                    </div>
+                    <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>
+                <div class="col-md-5">
+                  <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>
-          </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 class="form-group row">
+                <div class="col-md-3">
+                  <label for="Region">Province</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>P</b>
+                      </span>
+                    </div>
+                    <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>
+                <div class="col-md-3">
+                  <label for="Season">Season</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>S</b>
+                      </span>
+                    </div>
+                    <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="col-md-2">
+                  <label for="Module">Module</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>M</b>
+                      </span>
+                    </div>
+                    <input class="form-control" type="text" name="module" v-model="sellItem.module" />
+                  </div>
+                </div>
+                <div class="col-md-2">
+                  <label for="Week number">Week Number</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>W#</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      name="week"
+                      v-model="sellItem.weekNumber"
+                    />
+                  </div>
+                </div>
               </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 class="form-group row">
+                <div class="col-md-4">
+                  <label for="Bedrooms">Bedrooms</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>Bed</b>
+                      </span>
+                    </div>
+                    <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
+                      <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <label for="Sleeps maximum">Sleep max</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>Max</b>
+                      </span>
+                    </div>
+                    <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="col-md-3">
+                  <label for="Unit number">Unit Number</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>U#</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      name="unit"
+                      v-model="sellItem.unitNumber"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-7">
+                  <label for="Owner">Owner</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>O</b>
+                      </span>
+                    </div>
+                    <input class="form-control" type="text" name="owner" v-model="sellItem.owner" />
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <label for="Levy">Levy Amount</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>R</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="number"
+                      step="any"
+                      name="levy"
+                      v-model="sellItem.levyAmount"
+                    />
+                  </div>
+                </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>
             </div>
             <div class="col-md-6">
             <td>1. With respect to my timeshare module/week, I confirm that:</td>
           </tr>
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <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">
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <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">
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <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
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <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">
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <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 :
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <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">
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <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">
 
           <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="form-group row" style="text-align:left">
+            <label for="name" class="col-form-label col-md-8">1.8 Mandate to sell timeshare</label>
             <div class="col-md-4">
               <input class="btn btn-b-n" type="file" name="mandate" />
             </div>
       'sellItem',
       'agencies',
       'agents',
-      'indivdual',
-      'address',
-      'bankingDetails',
     ]),
     refAgent() {
       return this.sellItem && this.sellItem.referedByAgent;