<template>
  <div class="reg-page">
    <div class="regform">
      <div class="col-md-12" style="text-align:left">
        <h4>Restaurant Registration</h4>
        <div class="form-group row"></div>
        <div v-if="hasError" class="form-group row">
          <div>
            <alert :text="resultString" :type="'ERROR'" class="col-md-12" />
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-12" style="text-align:left">
            <h5>Restaurant Details</h5>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Name</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="edit-2-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="rname"
                v-model="restaurantContainer.name"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Logo / Cover Picture</label>
            <div class="input-group-prepend">
              <image-uploader
                :preview="true"
                :className="['fileinput', { 'fileinput--loaded': hasImage }]"
                capture="environment"
                :debug="1"
                doNotResize="gif"
                :autoRotate="true"
                outputFormat="verbose"
                @input="setImage"
              >
                <label for="fileInput" slot="upload-label">
                  <figure>
                    <path
                      class="path1"
                      d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
                    ></path>
                  </figure>
                </label>
              </image-uploader>
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Delivery Fee</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="number"
                name="deliveryFee"
                v-model="restaurantContainer.deliveryFee"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Delivery Radius (KM)</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="pin-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="number"
                name="deliveryRadius"
                v-model="restaurantContainer.deliveryRadius"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Delivery Time (Minutes)</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="clock-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="number"
                name="deliveryRadius"
                placeholder="From"
                v-model="deliverfrom"
              />
              <input
                class="form-control"
                type="number"
                name="deliveryRadius"
                placeholder="To"
                v-model="deliverTo"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <div class="input-group-prepend">
              <label>Methods Of Payment</label>
              <ul>
                <li v-for="(mop, i) in mops" :key="i">
                  <input type="checkbox" :id="mop.name" :value="mop.name" v-model="selectedMops" />
                  <label :for="mop.name">{{ mop.name }}</label>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Shopping Centre</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="shopping-cart-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="shopName"
                v-model="restaurantContainer.shoppingCentre"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Shop Number</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="hash-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="shopNo"
                v-model="restaurantContainer.shopNumber"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <Map @GoogleAddress="UpdateAddress" />
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Trading Hours</label>
            <ListView
              :items="tradingHours"
              :showColumnChooser="false"
              :hideSearch="true"
              :deleteable="true"
              @onDelete="Delete"
              @onNew="New"
            />
            <modal name="tradingHours" :width="600" :height="380">
              <TradingHours @tradingUpdate="TradingUpdate" />
            </modal>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Categories</label>
            <ListView
              :items="categories"
              :showColumnChooser="false"
              :hideSearch="true"
              :deleteable="true"
              :displayColumn="columns"
              :sortKey="Description"
              @onDelete="DeleteCat"
              @onNew="NewCat"
            />
            <modal name="Categories" :width="600" :height="500">
              <Categories @selected="selectedCategory" />
            </modal>
          </div>
        </div>
        <hr />
        <div class="form-group row">
          <div class="col-md-12" style="text-align:left">
            <h5>Restaurant Admin Details</h5>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>First Name</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="name"
                v-model="restaurantContainer.userFirstName"
              />
            </div>
          </div>
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Surname</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="book-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="surname"
                v-model="restaurantContainer.userSurname"
              />
            </div>
          </div>
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Email Address</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="email-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="email"
                v-model="restaurantContainer.userEmailAddress"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Password</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                :type="PasswordBoxType"
                id="password"
                name="password"
                value
                v-model="restaurantContainer.userPassword"
              />
            </div>
          </div>
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Confirm Password</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                :type="PasswordBoxType"
                id="confirmpassword"
                name="confirmpassword"
                v-model="confirmpassword"
                value
              />
              <div>
                <div class="input-group-append">
                  <span class="input-group-text">
                    <eva-icon
                      v-if="showPassword"
                      name="eye-off-outline"
                      fill="#24aae1"
                      @click="togglePassword()"
                    ></eva-icon>
                    <eva-icon v-else name="eye-outline" fill="#24aae1" @click="togglePassword()"></eva-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row"></div>
        <div class="row offset-md-4">
          <div class="col-md-2">
            <button
              @click="SubmitData()"
              class="btn btn-b-n"
              type="button"
              data-dismiss="modal"
            >Submit</button>
          </div>
          <div class="col-md-2 offset-md-1">
            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Cancel</button>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <div v-if="hasError" class="form-group row">
              <div>
                <alert :text="resultString" :type="'ERROR'" class="col-md-12" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "../shared/mapSetLocation";
import ListView from "../shared/listView";
import Switches from "vue-switches";
import TradingHours from "../accounts/tradingHours";
import { mapState, mapActions } from "vuex";
import ImageUploader from "vue-image-upload-resize";
import Categories from "../restaurants/restaurantCategorySelect";

export default {
  name: "RestaurantRegistration",
  components: {
    Map,
    ListView,
    Switches,
    TradingHours,
    ImageUploader,
    Categories
  },
  data() {
    return {
      selectedMops: [],
      chain: false,
      tradingHours: [],
      categories: [],
      hasError: false,
      confirmpassword: "",
      showPassword: false,
      PasswordBoxType: "password",
      hasImage: false,
      image: null,
      columns: ["Description"],
      deliverfrom: "",
      deliverTo: ""
    };
  },
  methods: {
    ...mapActions("registration", ["regRestaurant", "getRestaurantContainer"]),
    UpdateAddress(address) {
      this.restaurantContainer.streetNumber = address.streetNumber;
      this.restaurantContainer.streetName = address.streetName;
      this.restaurantContainer.suburb = address.suburb;
      this.restaurantContainer.city = address.city;
      this.restaurantContainer.province = address.province;
      this.restaurantContainer.country = address.country;
      this.restaurantContainer.postalCode = address.postalCode;
      this.restaurantContainer.googleMapUrl = address.url;
      this.restaurantContainer.latitude = address.coordinates.lat;
      this.restaurantContainer.longitude = address.coordinates.lng;
    },
    New() {
      this.$modal.show("tradingHours");
    },
    Delete(item) {
      this.tradingHours.pop(item);
    },
    NewCat() {
      this.$modal.show("Categories");
    },
    DeleteCat(item) {
      this.categories.pop(item);
    },
    selectedCategory(item) {
      this.categories.push(item[0]);
      this.$modal.hide("Categories");
    },
    TradingUpdate(item) {
      this.tradingHours.push(item);
      this.$modal.hide("tradingHours");
    },
    ChangeChain() {
      this.chain = !this.chain;
    },
    Close() {
      this.$router.push("/");
    },
    SubmitData() {
      this.hasError = false;
      this.errorMsg = "";

      this.restaurantContainer.tHours = this.tradingHours;
      this.restaurantContainer.logo = this.image;

      var mops = "";
      for (let i = 0; i < this.selectedMops.length; i++) {
        mops = mops + this.selectedMops[i] + "|";
      }

      var cats = "";
      for (let i = 0; i < this.categories.length; i++) {
        cats = cats + this.categories[i].description + "|";
      }

      this.restaurantContainer.categories = cats;
      this.restaurantContainer.methodsOfPayment = mops;
      this.restaurantContainer.deliveryTime =
        this.deliverfrom + " - " + this.deliverTo + " Min";

      if (this.restaurantContainer.userPassword !== this.confirmpassword) {
        this.hasError = true;
        this.errorMsg = "Passwords do not match.";
        return;
      }

      this.regRestaurant(this.restaurantContainer);
      this.$router.push("/login");
    },
    togglePassword() {
      this.showPassword = !this.showPassword;
      if (this.showPassword) {
        this.PasswordBoxType = "text";
      } else {
        this.PasswordBoxType = "password";
      }
    },
    setImage: function(output) {
      this.hasImage = true;
      this.image = output.dataUrl;
    }
  },
  computed: {
    ...mapState("registration", ["restaurantContainer"]),
    ...mapState("mop", ["mops"]),
    resultString() {
      return this.restaurantContainer.result;
    }
  },
  mounted() {
    this.getRestaurantContainer();
  }
};
</script>
