<template>
  <div class="q-pa-sm bg-white">
    <div class="text-h5 q-pb-md">General Information</div>
    <q-card class="q-mb-lg">
      <q-card-section>
        <div class="q-pa-md flex flex-center column">
          <q-uploader
            url
            label="Upload Profile Photo"
            :headers="[{name: 'X-Custom-Timestamp', 
                    value: 1550240306080}]"
            thumbnails
            style="max-width: 400px; max-height:400px;"
          />
          <div
            class="text-subtitle2 text-thin q-ma-md grey-4"
          >Please only upload your clear facial image.</div>
        </div>
        <div>
          <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
            <div class="row">
              <div class="col-12 col-md-4 q-pa-xs">
                <q-input
                  dense
                  outlined
                  v-model="fname"
                  label="First name *"
                  hint="Please input first name"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type your first name']"
                />
              </div>
              <div class="col-12 col-md-4 q-pa-xs">
                <q-input
                  dense
                  outlined
                  v-model="lname"
                  label="Last name *"
                  hint="Please input last name"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type your last name']"
                />
              </div>
              <div class="col-12 col-md-4 q-pa-xs">
                <q-input
                  dense
                  outlined
                  v-model="email"
                  type="email"
                  label="Email Address *"
                  hint="abc@domain.com"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type something']"
                />
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-2 q-pa-xs">
                <q-select
                  dense
                  outlined
                  v-model="gender"
                  :options="filterOptGender"
                  label="Gender *"
                  hint="Please select gender"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type something']"
                />
              </div>
              <div class="col-12 col-md-3 q-pa-xs">
                <q-input
                  dense
                  outlined
                  v-model="date"
                  mask="date"
                  label="Date of Birth *"
                  hint="Please pick a DOB"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please input date of birth']"
                >
                  <template v-slot:append>
                    <q-icon name="event" class="cursor-pointer">
                      <q-popup-proxy
                        ref="qDateProxy"
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-date v-model="date" @input="() => $refs.qDateProxy.hide()" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </div>
              <div class="col-12 col-md-3 q-pa-xs">
                <q-select
                  dense
                  outlined
                  v-model="countrylive"
                  :options="filterOptLiving"
                  label="Country of Living *"
                  hint="Please select country of living"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type something']"
                />
              </div>
              <div class="col-12 col-md-4 q-pa-xs">
                <q-input
                  mask="(###) ### - ####"
                  dense
                  outlined
                  number
                  v-model="phone"
                  label="Mobile Number (should be 11 digits) *"
                  hint="Please enter mobile number (###) ### - ####"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type phone number']"
                />
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-6 col-xs-12 q-pa-xs">
                <q-select
                  dense
                  outlined
                  label="Select Above number is available on:"
                  v-model="model"
                  use-input
                  use-chips
                  multiple
                  input-debounce="0"
                  @new-value="createValue"
                  :options="filterOptions"
                  @filter="filterFn"
                  style="width: auto;"
                  color="primary"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please select something']"
                />
              </div>
              <div class="col-12 col-md-3 q-pa-xs">
                <q-select
                  dense
                  outlined
                  v-model="countrybirth"
                  :options="filterOptBirth"
                  label="Country of Birth *"
                  hint="Please select country of birth"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type something']"
                />
              </div>
              <div class="col-12 col-md-3 q-pa-xs">
                <q-input
                  dense
                  outlined
                  v-model="findus"
                  label="Where did you find us?
                             *"
                  hint="abc@domain.com"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type something']"
                />
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-12">
                <label class="text-caption text-bold text-grey-8 q-pa-md">About me</label>
                <q-editor
                  min-height="15vh"
                  v-model="editor"
                  :definitions="{
                            bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
                        }"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type something']"
                />
              </div>
              <div class="col-12 col-md-12 q-py-md">
                <q-btn color="secondary" size="md" type="submit" label="Update"  @click="accept =! accept"/>
              </div>
            </div>
          </q-form>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
const stringOptions = ["Whatsapp", "imo", "Viber", "Wechat", "Line"];
const subtopic = ["hamatology", "cardiovascular", "git", "infactious desease"];
const fee = [
  "$ 5",
  "$ 10",
  "$ 15",
  "$ 20",
  "$ 25",
  "$ 30",
  "$ 35",
  "$ 40",
  "$ 45",
  "$ 50"
];
const days = ["Sunday", "Monday", "Tuesday", "Thirsday", "Friday", "Saturday"];
const year = ["2010", "2011", "2012", "2013", "2014", "2015"];
const gender = ["Male", "Female"];
const living = ["Pakistan", "UAE", "USA", "India", "KSA"];
const birth = ["Pakistan", "UAE", "USA", "India", "KSA"];
export default {
  data() {
    return {
      model: null,
      step: 1,
      time: "",
      fname: null,
      lname: null,
      email: null,
      phone: null,
      countrybirth: null,
      countrylive: null,
      gender: null,
      findus: null,
      text: null,
      accept: false,
      daystime: true,
      progress1: 0.9,
      filterOptions: stringOptions,
      filterOptSubtopic: subtopic,
      filterOptFee: fee,
      filterOptDays: days,
      filterOptYears: year,
      filterOptGender: gender,
      filterOptLiving: living,
      filterOptBirth: birth,
      showScroller2: false,
      value: "",
      inputValue: "",
      date: "",
      editor: "",
      options: [],
      myModel: []
    };
  },
  computed: {
    progressLabel1() {
      return (this.progress1 * 100).toFixed(2) + "%";
    },
    scrollerPopupStyle150() {
      if (this.$q.screen.lt.sm) {
        return {
          width: "90vw",
          height: "70vh"
        };
      } else {
        return {
          maxHeight: "200px",
          height: "200px",
          width: "250px"
        };
      }
    }
  },
  methods: {
    onSubmit() {
      if (this.accept !== true) {
        this.$q.notify({
          color: "red-5",
          textColor: "white",
          icon: "warning",
          message: "Something went wrong! Not Submitted"
        });
      } else {
        this.$q.notify({
          color: "green-4",
          textColor: "white",
          icon: "cloud_done",
          message: "Submitted"
        });
      }
    },

    onReset() {
      this.name = null;
      this.age = null;
      this.accept = false;
    },
    reset() {
      this.daystime = true;
    },
    createValue(val, done) {
      if (val.length > 0) {
        const model = (this.model || []).slice();

        val
          .split(/[,;|]+/)
          .map(v => v.trim())
          .filter(v => v.length > 0)
          .forEach(v => {
            if (stringOptions.includes(v) === false) {
              stringOptions.push(v);
            }
            if (model.includes(v) === false) {
              model.push(v);
            }
          });

        done(null);
        this.model = model;
      }
    },

    filterFn(val, update) {
      update(() => {
        if (val === "") {
          this.filterOptions = stringOptions;
        } else {
          const needle = val.toLowerCase();
          this.filterOptions = stringOptions.filter(
            v => v.toLowerCase().indexOf(needle) > -1
          );
        }
      });
    }
  },
  watch: {
    value(val) {
      const type = Object.prototype.toString.call(this.value);
      if (type === "[object Array]") {
        this.inputValue = `${val[0]} - ${val[1]}`;
      }
    },
    inputValue(val) {
      const parts = val.split(" - ");
      if (parts[0] !== this.value[0] || parts[1] !== this.value[1]) {
        this.value[0] = parts[0];
        this.value[1] = parts[1];
      }
    }
  }
};
</script>

<style lang="css">
.q-uploader__file--img {
  height: 300px !important;
  min-width: 200px !important;
}

.my-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

/* .q-stepper__title {
    display: none;
}
.q-stepper__label .q-stepper__line {
    display: none;
} */
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .q-stepper__tab {
    display: none;
  }
}
</style><style lang="css" scoped>
.instructions ul {
  list-style: none;
}

.instructions ul li:before {
  content: "\2713";
  margin-left: -20px;
  margin-right: 10px;
  padding: 5px;
  color: green;
  font-size: 20px;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .instructions ul {
    padding: 0;
    margin-left: 0px;
    margin-right: 5px;
  }
}
</style>
