<template>
<q-layout view="lHh lpr lFf" container height-hint="96" style="height: 85vh;" class="">
    <q-page-container>
        <div class="row q-px-md">
            <div class="col">
                <p class="q-py-sm qid">Question ID: <span class="text-bold">12354</span></p>
            </div>
            <div class="col absolute-top-right">
                <q-checkbox left-label v-model="orange" label="Mark question as Favorite: " />
            </div>
        </div>
        <q-page class="q-px-md">
            <p>
                A 15-year-old boy presents with a 2-day history of a non-blanching rash down his legs and buttocks. He has recently been started on trimethoprim for a urinary tract infection after going to his general practitioner complaining of abdominal pain.

                Given the likely diagnosis, which of the following is NOT seen in this condition?
            </p>
            <div class="q-pa-md">
                <q-carousel swipeable animated v-model="slide1" thumbnails infinite>
                    <q-carousel-slide :name="1" img-src="statics/imgs/Dentisrty-35179b.jpg" />
                    <q-carousel-slide :name="2" img-src="statics/imgs/Dentistry-32019.jpg" />
                    <q-carousel-slide :name="3" img-src="statics/imgs/Dentistry-35067b.jpg" />
                    <q-carousel-slide :name="4" img-src="statics/imgs/Dentistry-232199.jpg" />
                </q-carousel>
            </div>
            <div class="q-pa-lg ans-box column">
                <!-- <q-option-group v-model="group" :options="options" color="primary" /> -->
                <ol type="A">
                    <li><q-radio v-model="shape" val="line" label="Line" /> <q-icon name="done" class="text-positive" style="font-size: 16px;padding:15px;display:inline;"/></li>
                    <li><q-radio v-model="shape" val="rectangle" label="Rectangle" /><q-icon name="clear" class="text-negative" style="font-size: 16px;padding:15px;display:inline;"/></li>
                    <li><q-radio v-model="shape" val="ellipse" label="Ellipse" /><q-icon name="clear" class="text-negative" style="font-size: 16px;padding:15px;display:inline;"/></li>
                    <li> <q-radio v-model="shape" val="polygon" label="Polygon" /><q-icon name="clear" class="text-negative" style="font-size: 16px;padding:15px;display:inline;"/></li>
                    <li> <q-radio v-model="shape" val="polygon" label="Polygon" /><q-icon name="clear" class="text-negative" style="font-size: 16px;padding:15px;display:inline;"/></li>
                </ol>
                
               
                        
                
               
            </div>

            <div class="q-py-md">
                <div class="q-gutter-y-md maxWidth">
                    <q-card>
                        <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" align="justify" narrow-indicator>
                            <q-tab name="answer" label="Answer" />
                            <q-tab name="explain" label="Explanation" />
                        </q-tabs>

                        <q-separator />

                        <q-tab-panels v-model="tab" animated>
                            <q-tab-panel name="answer">
                                <div class="text-h6">Correct Answer:</div>
                                D. Mouth ulsers
                            </q-tab-panel>

                            <q-tab-panel name="explain">
                                <div class="text-h6">Question Explanation:</div>
                                <div class="q-pa-md">
                                    <q-carousel swipeable animated v-model="slide2" thumbnails infinite>
                                        <q-carousel-slide :name="1" img-src="statics/imgs/Dentisrty-35179b.jpg" />
                                        <q-carousel-slide :name="2" img-src="statics/imgs/Dentistry-32019.jpg" />
                                        <q-carousel-slide :name="3" img-src="statics/imgs/Dentistry-35067b.jpg" />
                                        <q-carousel-slide :name="4" img-src="statics/imgs/Dentistry-232199.jpg" />
                                    </q-carousel>
                                </div>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti neque tenetur cumque aperiam esse fugit hic, quam quae, placeat nisi nesciunt? A iste sint voluptas facilis, corporis sed et cum.</p>
                                <ol>
                                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                                    <li>Amet consectetur adipisicing elit.</li>
                                    <li>Consectetur adipisicing elit.</li>
                                    <li>Lorem ipsum dolor sit amet consectetur .</li>
                                    <li>Ipsum dolor sit amet consectetur adipisicing elit.</li>
                                    <li>Dolor sit amet consectetur adipisicing elit.</li>
                                </ol>
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi nulla enim sit, placeat assumenda temporibus neque similique deleniti dignissimos doloribus alias delectus commodi vitae, numquam non! Porro quos molestias possimus.</p>
                                <strong>Medicine</strong>
                                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda ab quaerat iure asperiores fuga culpa recusandae itaque, accusantium hic, nam commodi. Eos blanditiis dolorum pariatur sunt suscipit odit impedit aut?</p>
                            </q-tab-panel>

                        </q-tab-panels>
                    </q-card>

                </div>
            </div>
        </q-page>
        <q-page-sticky position="bottom-right" :offset="[16, 16]" class="report-us">
            <q-fab color="dark" label-position="left" label="Report" @click="report = true">

            </q-fab>
        </q-page-sticky>
        <q-dialog v-model="report">
            <q-card style="width: 600px" class="q-px-sm q-pb-md">
                <q-card-section class="text-h6 text-center">
                    <q-icon name="flag" />
                    Report Error
                </q-card-section>

                <q-item dense>
                    <div class="q-pa-sm" style="min-width: 500px;">
                        <form @submit.prevent.stop="onSubmit" class="q-gutter-md">
                            <q-input clearable ref="subject" v-model="subject" label="* Subject" hint="Name the issue" lazy-rules :rules="[ val => val && val.length > 0 || 'Please type something']" />

                            <q-input clearable ref="description" type="textarea" v-model="description" label="* Description" lazy-rules :rules="[val => val !== null && val !== '' || 'Please type your description']" />
                        </form>
                    </div>
                </q-item>
                <q-item dense class="flex-center">
                    <q-btn label="Submit" type="submit" color="primary" />
                    <q-btn class="q-ma-sm" color="negative" text-color="white" label="Cancel" v-close-popup />
                </q-item>

            </q-card>
        </q-dialog>
    </q-page-container>
</q-layout>
</template>

<script>
export default {

    data() {
        return {
            leftDrawerOpen: false,
            search: '',
            orange: false,
            report: false,
            slide1: 1,
            slide2: 1,
            storage: 0.26,
            subject: null,
            description: null,
            accept: false,
            shape: 'line',
            tab: 'answer',

        }

    },
    methods: {
        onSubmit() {
            this.$refs.subject.validate()
            this.$refs.description.validate()

            if (this.$refs.subject.hasError || this.$refs.description.hasError) {
                this.formHasError = true
            } else if (this.accept !== true) {
                this.$q.notify({
                    color: 'negative',
                    message: 'You need to type the issue or error first'
                })
            } else {
                this.$q.notify({
                    icon: 'done',
                    color: 'positive',
                    message: 'Submitted'
                })
            }
        },
    }
}
</script>

<style lang="css" scoped>
.b-red {
    border: 1px solid red;
}

.b-blu {
    border: 1px solid blue;
}

.ans-box {
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    margin: 10px 0;
    max-width: 50vw;
}
.maxWidth {max-width: 90%;}
.report-us {
    display: block;
}
.my-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

@media only screen and (min-width: 0px) and (max-width:900px) {
    .qid { font-size: 14px;padding-top:10px;}
    p, ol li {
        font-size: 140%;
    }
    .ans-box {
        max-width: 100vw;
    }
    .maxWidth {max-width: 100%;}
    .report-us {
        display: none;
    }
}
</style>
