<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-lg bg-white">
      <div class="text-h5 q-pb-md">Contact Us</div>
      <q-card class="my-card q-pa-md q-mb-xl">
        <q-form @submit="contactUsForm" class="q-gutter-md">
          <div class="row">
            <div class="col-12 col-md-6 q-pa-xs">
              <q-input
                dense
                outlined
                v-model="fname"
                label="Name *"
                hint="Please input name"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please type your complete name']"
              />
            </div>

            <div class="col-12 col-md-6 q-pa-xs">
              <q-input
                dense
                outlined
                v-model="email"
                autocomplete="off"
                type="email"
                label="Email Address *"
                hint="abc@domain.com"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please type your email address']"
              />
            </div>
          </div>
          <div class="row">
            <div class="col-12 col-md-6 q-pa-xs">
              <q-select
                dense
                outlined
                v-model="service"
                :options="filterOptSercice"
                label="What do you need help with?  *"
                hint="Please select service"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please select option']"
              />
            </div>
            <div class="col-12 col-md-6 q-pa-xs">
              <q-select
                dense
                outlined
                v-model="sections"
                :options="filterOptSections"
                label="Section *"
                hint="Please select section"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please select section']"
              />
            </div>
          </div>

          <div class="row">
            <div class="col-12 col-md-12">
              <q-input
                dense
                v-model="text1"
                outlined
                rows="2"
                type="textarea"
                label="Describe the problem you're having? *"
                hint="Please input the problem you're having? "
                placeholder="Give your question an approperiate title"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please input the problem you are having?']"
              />
            </div>
          </div>
          <div class="row">
            <div class="col-12 col-md-12">
              <q-input
                dense
                v-model="text2"
                outlined
                rows="7"
                type="textarea"
                label="What's your question, comment, or issuse? *"
                hint="Please input your question, comment, or issuse? "
                placeholder="Share all details. The more we know, the better we can help you."
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please input your question, comment, or issuse?']"
              />
            </div>
            <div class="col-12 col-md-12 q-py-md">
              <b class="text-red">Note:</b>
              Send us a file screen-short, or document (optional).
            </div>
            <div class="q-pa-md flex flex-center column">
              <q-uploader
                url
                label="Choose File"
                :headers="[{name: 'X-Custom-Timestamp', 
                    value: 1550240306080}]"
                thumbnails
                style="max-width: 400px; max-height:400px;"
              />
            </div>
          </div>
          <div class="col-12 col-md-12 q-py-md flex flex-center">
            <q-btn color="secondary" size="md" type="submit" label="Send" @click="accept =! accept" />
          </div>
        </q-form>
      </q-card>
    </div>
  </transition>
</template>
<script>
const service = ["Qbank", "Course", "Tutor"];
const sections = [
  "Payment/Billing/Refund",
  "Technical Issues/Errors",
  "Content",
  "Other",
  "Question Error"
];
export default {
  data() {
    return {
      fname: null,
      email: null,
      sections: null,
      service: null,
      text1: null,
      text2: null,
      filterOptSercice: service,
      filterOptSections: sections,
      showScroller2: false,
      accept: false,
      value: "",
      options: [],
      myModel: []
    };
  },
  methods: {
    contactUsForm: function () {
      this.$refs.contactUsForm.validate().then(success => {
        if (success) {
          alert('login button has clicked!')
          this.$router.push('/dashboards')
        } else {
          alert('login failed! ')

          this.$router.push('/tutor-create')
        }
      });
      this.$refs.contactUsForm.resetValidation();
    },

    
  }
  }

</script>