<template>
<div class="q-pa-md">
    <div class="text-h4 q-my-md q-pa-md text-center">
        Tutor Registration Steps
    </div>
    <q-stepper v-model="step" header-nav ref="stepper" color="primary" animated>
        <q-step :name="1" title="General Info" prefix="1" :done="step > 1" :header-nav="step > 1">
            <div class="text-h6 text-center">
                <q-badge align="middle" color="secondary">1</q-badge>
                General Information
            </div>
            <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 something']" />
                        </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 something']" />
                        </div>
                        <div class="col-12 col-md-4 q-pa-xs">
                            <q-input dense outlined v-model="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 type something']">
                                 <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 something']" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6 col-xs-12 q-pa-xs">
                            <!-- <q-btn-group>
                                <q-btn  class="q-pa-sm q-px-md" color="primary" label="Whatsapp" />
                                <q-btn  class="q-pa-sm q-px-md" color="primary" label="imo" />
                                <q-btn  class="q-pa-sm q-px-md" color="primary" label="Viber" />
                                <q-btn  class="q-pa-sm q-px-md" color="primary" label="Wechat" />
                                <q-btn  class="q-pa-sm q-px-md" color="primary" label="Line" />
                            </q-btn-group> -->
                            <q-select dense outlined label="Select multiple chat Apps" v-model="model" use-input use-chips multiple input-debounce="0" @new-value="createValue" :options="filterOptions" @filter="filterFn" style="width: auto;" color="primary" />

                        </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">
                            <q-input dense v-model="text" outlined rows="7" type="textarea" label="About me *" hint="Please input about me" placeholder="For example: 'I am MD, having USMLE Step 2 CK passed. Have ambition for supporting medical students to achieve their carrier targets. Have clinical experience in diagnosis and treatment planning, preventive as well as emergency care in reputable hospitals. I have contributed 2 publications in the Journal of American Medicine and also listed as the major contributor in the publication that featured strong clinical result in the therapeutic effect of Nucytoxan, currently one of the most commonly used anticancer drug therapies used to treat many non-small lung cancers and myelomas. 
                            I tailor my tutoring methods to suit the personal needs and learning requirements for each individual student. I am truly passionate about teaching online and my previous tutoring experience proves that I am good at it. When I am not working, my other passions are screenwriting and creating glass mosaics. I look forward to connecting with you soon.'" />
                        </div>
                        <div class="col-12 col-md-12 q-py-md">
                            <b class="text-red">Note:</b> Your number will only be used for tutoring proposal's notifications. DocExams will not share it with any third party.

                        </div>

                    </div>

                </q-form>
            </div>

            <q-stepper-navigation class="flex flex-center">
                <q-btn @click="() => { done1 = true; step = 2 }" color="secondary" label="Save &amp; Continue" />
            </q-stepper-navigation>
        </q-step>

        <q-step :name="2" title="Tutoring Info &amp; Availability" prefix="2" :done="step > 2" :header-nav="step > 2">
            <div class="text-h6 text-center">
                <q-badge align="middle" color="secondary">2</q-badge>
                Tutoring info &amp; Availability
            </div>

            <q-list>
                <q-expansion-item bordered group="somegroup" label="Tutoring Expertise" header-class="bg-grey-2 text-grey-8 text-bold q-mb-sm" expand-icon-class="text-grey-8" default-opened>
                    <q-card class="bg-white">
                        <q-card-section>

                            <div class="row">
                                <div class="text-body1">
                                    Please ONLY select those exams or topics which you can teach confidently. Otherwise it may result in downgrading your tutoring profile. (i.e. MOH --> GP --> Internal Medicine --> GIT. Renal)
                                </div>
                                <div class="col-12 col-md-5 q-pa-sm">
                                    <q-list bordered class="rounded-borders">
                                        <q-expansion-item dense expand-separator label="Physician">
                                            <q-expansion-item dense :header-inset-level="1" expand-separator label="MOH UAE">

                                                <q-expansion-item dense switch-toggle-side dense-toggle label="General Practitionar (GP)" :header-inset-level="1" :content-inset-level="2">
                                                    <q-card>
                                                        <q-card-section dense>
                                                            <q-list>
                                                                <q-item dense clickable v-ripple>
                                                                    <q-item-section dense>
                                                                        <q-item-label dense>Internal Medician</q-item-label>
                                                                    </q-item-section>
                                                                </q-item>

                                                                <q-item dense clickable v-ripple>
                                                                    <q-item-section>
                                                                        <q-item-label dense>Surgery</q-item-label>
                                                                    </q-item-section>
                                                                </q-item>

                                                                <q-item dense clickable v-ripple>
                                                                    <q-item-section>
                                                                        <q-item-label dense>Obs &amp; Gynae</q-item-label>
                                                                    </q-item-section>
                                                                </q-item>
                                                                <q-item dense clickable v-ripple>
                                                                    <q-item-section>
                                                                        <q-item-label dense>Behavioral Scicene</q-item-label>
                                                                    </q-item-section>
                                                                </q-item>
                                                            </q-list>

                                                        </q-card-section>
                                                    </q-card>
                                                </q-expansion-item>

                                                <q-expansion-item switch-toggle-side dense-toggle label="Yesterday" :header-inset-level="1" :content-inset-level="2">
                                                    <q-card>
                                                        <q-card-section dense>
                                                            Lorem ipsum
                                                        </q-card-section>
                                                    </q-card>
                                                </q-expansion-item>
                                            </q-expansion-item>
                                        </q-expansion-item>
                                    </q-list>
                                </div>
                                <div class="col-12 col-md-4 q-pa-sm">
                                    <q-select dense outlined label="* Sub topics" v-model="model" use-input use-chips multiple input-debounce="0" @new-value="createValue" :options="filterOptSubtopic" @filter="filterFn" style="width: auto;" />
                                </div>
                                <div class="col-12 col-md-3 q-pa-sm">
                                    <q-btn color="primary" class="full-width">
                                        <div>Add Expertise</div>
                                    </q-btn>
                                </div>
                            </div>
                            <div class="row ">
                                <div v-for="n in 4" :key="n" class="col-12 col-md-3 col-xs-12 q-pa-xs text-center">
                                    <q-chip removable v-model="daystime" @remove="log('expertise')" color="grey" text-color="white" class="q-pa-md">
                                        Monday 02:30 to 4:30
                                    </q-chip>
                                </div>

                            </div>
                        </q-card-section>
                    </q-card>
                </q-expansion-item>

                <q-expansion-item group="somegroup" label="Tutoring Fee &amp; Availability" header-class="bg-grey-2 text-grey-8 text-bold" expand-icon-class="text-grey-8">
                    <q-card class="bg-white">
                        <q-card-section>
                            <div class="row">
                                <div class="col-12 col-md-5">
                                    <q-select dense outlined v-model="model" :options="filterOptFee" label="Expected Fee Per Hour" />
                                    <div class="text-caption q-my-sm">
                                        (Minimum per hour expected fee from a single student in US Dollar i.e. US $ 15)
                                    </div>
                                </div>
                            </div>
                            <q-separator class="q-my-lg" inset />
                            <div class="row">
                                <div class="col-12 col-md-5 q-pa-xs">
                                    <q-select dense outlined v-model="model" :options="filterOptDays" label="Days" />
                                </div>
                                <div class="col-12 col-md-5 q-pa-xs">
                                    <q-input color="primary" outlined dense v-model="inputValue" label="Start time - End time" mask="##:## - ##:##" class="text-body1">
                                        <template v-slot:append>
                                            <q-icon name="far fa-clock" class="cursor-pointer">
                                                <q-popup-proxy v-model="showScroller2" anchor="top right" self="bottom middle">
                                                    <q-scroller   v-model="value" view="time-range"  text-color="white" color="primary" inner-text-color="grey-8" inner-color="white" :style="scrollerPopupStyle150" @close="() => { showScroller2 = false }" />
                                                </q-popup-proxy>
                                            </q-icon>
                                        </template>
                                    </q-input>

                                    <!-- <q-input dense outlined label="Start Time" v-model="time" mask="time" :rules="['time']">
                                        <template v-slot:append>
                                            <q-icon name="access_time" class="cursor-pointer">
                                                <q-popup-proxy transition-show="scale" transition-hide="scale">
                                                    <q-time v-model="time" />
                                                </q-popup-proxy>
                                            </q-icon>
                                        </template>
                                    </q-input> -->
                                </div>
                                <!-- <div class="col-12 col-md-1 q-py-md text-center">
                                    To
                                </div> -->
                                <!-- <div class="col-12 col-md-3 q-pa-xs">
                                    <q-input dense outlined label="End Time" v-model="time" mask="time" :rules="['time']">
                                        <template v-slot:append>
                                            <q-icon name="access_time" class="cursor-pointer">
                                                <q-popup-proxy transition-show="scale" transition-hide="scale">
                                                    <q-time v-model="time" />
                                                </q-popup-proxy>
                                            </q-icon>
                                        </template>
                                    </q-input>
                                </div> -->
                                <div class="col-12 col-md-2 q-mt-xs">
                                    <q-btn color="primary" class="full-width">
                                        Add Time
                                    </q-btn>
                                </div>

                            </div>
                            <div class="row ">
                                <div v-for="n in 6" :key="n" class="col-12 col-md-2 col-xs-12 q-pa-xs text-center">
                                    <q-chip removable v-model="daystime" @remove="log('daystime')" color="grey" text-color="white" class="q-pa-md">
                                        Monday 02:30 to 4:30
                                    </q-chip>
                                </div>
                            </div>
                            <div class="text-subtitle q-py-md">Set your available days with timing, when you can offer live lectures.</div>
                        </q-card-section>
                    </q-card>
                </q-expansion-item>
            </q-list>

            <q-stepper-navigation class="flex flex-center">
                <q-btn @click="() => { done2 = true; step = 3 }" color="secondary" label="Save &amp; Continue" />
                <q-btn flat @click="step = 1" color="primary" label="Back" class="q-ml-sm" />
            </q-stepper-navigation>
        </q-step>
        <q-step :name="3" title="Education And Experience" prefix="3" :done="step > 3" :header-nav="step > 3">
            <div class="text-h6 text-center">
                <q-badge align="middle" color="secondary">3</q-badge>
                Education And Experience
            </div>
            <div class="row q-mt-lg">
                <div class="col-12 text-h6 q-py-lg">
                    Academic Education
                </div>
                <div class="col-12 col-md-3 q-pa-xs">
                    <q-input dense outlined v-model="name" label="Degree name *" hint="Please enter your degree name" lazy-rules :rules="[ val => val && val.length > 0 || 'Please type something']" />
                </div>
                <div class="col-12 col-md-4 q-pa-xs">
                    <q-input dense outlined v-model="name" label="College/University Name *" hint="Please enter your College/University name" lazy-rules :rules="[ val => val && val.length > 0 || 'Please type something']" />
                </div>
                <div class="col-12 col-md-3 q-pa-xs">
                    <q-select dense outlined v-model="myModel" :options="filterOptYears" label="Passing Year" />
                </div>
                <div class="col-12 col-md-2 q-mt-xs">
                    <q-btn color="primary" class="full-width">
                        Add Degree
                    </q-btn>
                </div>
                <div class="text-subtitle q-py-md"><b class="text-red-4">Note: </b> Must provide details for atleast last academic degree.</div>
            </div>
            <q-separator class="q-my-lg" inset />
            <div class="row">
                <div class="col-12 text-h6 q-py-lg">
                    Medical Licensing Exam (if any)
                </div>
                <div class="col-12 col-md-6">
                    <!-- <label class="text-caption q-py-sm text-bold">Category/Doctype/Topics</label> -->
                    <q-list bordered class="rounded-borders">
                        <q-expansion-item expand-separator label="Physician">
                            <q-expansion-item dense :header-inset-level="1" expand-separator label="MOH UAE">

                                <q-expansion-item dense switch-toggle-side dense-toggle label="General Practitionar (GP)" :header-inset-level="1" :content-inset-level="2">
                                    <q-card>
                                        <q-card-section dense>
                                            <q-list>
                                                <q-item dense clickable v-ripple>
                                                    <q-item-section dense>
                                                        <q-item-label dense>Internal Medician</q-item-label>
                                                    </q-item-section>
                                                </q-item>

                                                <q-item dense clickable v-ripple>
                                                    <q-item-section>
                                                        <q-item-label dense>Surgery</q-item-label>
                                                    </q-item-section>
                                                </q-item>

                                                <q-item dense clickable v-ripple>
                                                    <q-item-section>
                                                        <q-item-label dense>Obs &amp; Gynae</q-item-label>
                                                    </q-item-section>
                                                </q-item>
                                                <q-item dense clickable v-ripple>
                                                    <q-item-section>
                                                        <q-item-label dense>Behavioral Scicene</q-item-label>
                                                    </q-item-section>
                                                </q-item>
                                            </q-list>

                                        </q-card-section>
                                    </q-card>
                                </q-expansion-item>

                                <q-expansion-item switch-toggle-side dense-toggle label="Yesterday" :header-inset-level="1" :content-inset-level="2">
                                    <q-card>
                                        <q-card-section dense>
                                            Lorem ipsum
                                        </q-card-section>
                                    </q-card>
                                </q-expansion-item>
                            </q-expansion-item>
                        </q-expansion-item>
                    </q-list>
                </div>
                <div class="col-12 col-md-3 q-pa-xs">
                    <!-- <label class="text-caption q-py-sm text-bold">Exam Passing Year</label> -->

                    <q-select dense outlined v-model="myModel" :options="filterOptYears" label="Passing Year" />
                </div>
                <div class="col-12 col-md-2 q-mt-xs">
                    <q-btn color="primary" class="full-width">
                        Add Exam
                    </q-btn>
                </div>

            </div>
            <q-separator class="q-my-lg" inset />
            <div class="row">
                <div class="col-12 text-h6 q-py-lg">
                    Tutoring Experience (if any)
                </div>
                <div class="col-12 col-md-12">
                    <q-input dense v-model="text" outlined rows="4" type="textarea" label="Tutoring Experience *" hint="Please enter your tutoring experience" placeholder="For example: 'Total three years teaching experience as Asst. professor in a recognized medical college in Dubai. I have extensive tutoring experience for various USMLE Step CK subjects. I have also helped students to gain their residency program after USMLE. Have worked with a local medical community institute and contributed regularly with my live lectures for medical professionals seeking carrer in middle east.'" />
                </div>
            </div>

            <q-stepper-navigation class="flex flex-center">
                <q-btn @click="() => { done3 = true; step = 4 }" color="secondary" label="Save &amp; Continue" />
                <q-btn flat @click="step = 2" color="primary" label="Back" class="q-ml-sm" />
            </q-stepper-navigation>
        </q-step>
        <q-step :name="4" title="Intro Video" prefix="4" :done="step > 4" :header-nav="step > 4">
            <div class="text-h6 text-center">
                <q-badge align="middle" color="secondary">4</q-badge>
                Demo Video
            </div>
            <div class="row flex flex-center">
                <div class="col-12 col-md-7 q-ma-sm">
                    <q-card class="my-card">
                        <q-card-section>
                            <div class="text-center">
                                Upload your introductory video
                            </div>
                            <div class="flex flex-center q-py-lg">
                                <q-btn unelevated color="primary" text-color="grey-2" @click="startComputing(3)" icon="cloud_upload" style="width: 100px" />
                            </div>
                            <q-linear-progress size="25px" :value="progress1" color="secondary">
                                <div class="absolute-full flex flex-center">
                                    <q-badge color="white" text-color="secondary" :label="progressLabel1" />
                                </div>
                            </q-linear-progress>
                        </q-card-section>
                    </q-card>

                </div>
                <div class="col-12 col-md-4 q-ma-sm">
                    <q-card class="my-card">
                        <q-card-section>
                            <div class="text-center text-subtitle1">
                                How to create an introductory video?
                            </div>
                            <div class="flex flex-center">
                                <q-img src="statics/howToUpload.png" style="" class="rounded-borders">
                                </q-img>

                            </div>
                        </q-card-section>
                    </q-card>

                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-12 q-mt-md">
                    <q-expansion-item v-model="expanded" label="Read the instructions" header-class="text-h6 text-grey-8 text-thin text-center bg-grey-3">
                        <q-card>
                            <q-card-section>
                                <div class="row">
                                    <div class="col-12 col-md-6 instructions">
                                        <strong>Why upload a demo? </strong>
                                        <ul>
                                            <li class="first">Helpfull for students to judge your expertise.</li>
                                            <li>More interactive &amp; result oriented. </li>
                                            <li class="last">Plan your video keeping in view that why should student chose you. </li>
                                            <ul>
                                                <li class="first">Create a 60 - second introductory video.</li>
                                                <li>Record your video in a natural daylight, avoiding lightening issue.</li>
                                                <li>Record in a quiet space free of echoes, pops or white noise.</li>
                                                <li>While recording, speak directly into the camera as if you were speaking to a student.</li>
                                                <li>For PC users. Open VLC player then File &gt; Open Capture Device.</li>
                                                <li>For MAC users. Go to Quicktime Player then File &gt; New Movie Recording.</li>
                                                <li class="last">Send us only those videos you created by yourself to avoid copyright issues.</li>
                                            </ul>
                                        </ul>

                                    </div>
                                    <div class="col-12 col-md-6 instructions">
                                        <strong>How to upload a demo? </strong>
                                        <ul>
                                            <li class="first">Create a <strong>60 - second</strong> video introducing yourself and tutoring skills.</li>
                                            <li>Record video from your mobile and send us at our Whatsapp or <br> imo number <strong>+923452410728</strong></li>
                                        </ul>
                                    </div>
                                </div>

                            </q-card-section>
                        </q-card>
                    </q-expansion-item>

                </div>
                <div class="col-12 text-center q-py-md">
                    <b class="text-red">NOTE: </b> It's highly advisible to upload a demo video to maximize your earning,
                    but you may skip this step and upload it later on.

                </div>
            </div>

            <q-stepper-navigation class="flex flex-center">
                <q-btn @click="() => { done4 = true; step = 5 }" color="secondary" label="Save &amp; Continue" />
                <q-btn outlined @click="step = 5" color="dark" label="Skip" class="q-ml-sm" />
                <q-btn flat @click="step = 3" color="primary" label="Back" class="q-ml-sm" />

            </q-stepper-navigation>
        </q-step>

        <q-step :name="5" title="Verify Qualification" prefix="5" :header-nav="step > 5">
            <div class="text-h6 text-center">
                <q-badge align="middle" color="secondary">5</q-badge>
                Verify Qualification
            </div>
            <div class="col-12 q-py-md">
                In order to confirm your qualifications with your identity, kindly upload atleast one official document listed below.
                <ol>
                    <li>Undergraduate / Graduation degree</li>
                    <li>Certification / Diploma / Licensing exam</li>
                    <li>National Identity Card / Driving License</li>
                </ol>
            </div>
            <div class="q-pa-md flex flex-center column">
                <q-uploader url="" label="Upload Profile Photo" />
                <div style="width: 50%;">
                    <figure>
                        <q-zoom background-color="blue-grey-1" scale>
                            <img src="https://cdn.quasar.dev/img/mountains.jpg" alt="QZoom with scale" class="my-image">
                        </q-zoom>
                        <figcaption></figcaption>
                    </figure>
                </div>
            </div>

            <div class="text-subtitle2 text-thin q-ma-md grey-4">
                * Your document(s) will not be shared and only used for internal varification process.
            </div>

            <q-stepper-navigation class="flex flex-center">
                <q-btn dense color="secondary" @click="done5 = true" label="Save &amp; Finish" />
                <q-btn dense outlined @click="done5 = true" color="dark" label="Skip &amp; Finish" class="q-ml-sm" />
                <q-btn flat @click="step = 4" color="primary" label="Back" class="q-ml-sm" />
            </q-stepper-navigation>
        </q-step>
    </q-stepper>
</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: '',
            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: 'You need to accept the license and terms first'
                })
            } 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>
