<template>
<q-layout view="hHh Lpr hff">
    <q-header elevated>
        <q-toolbar>
            <q-btn flat @click="drawerLeft = !drawerLeft" round dense icon="menu" />
           
            <div class="q-px-md" style="font-size:16px;line-height: 1.5;">
                <input type="text" maxlength="3" style="font-size:14px; border-radius: 5px;max-width: 36px;max-height:26px;"/> / 999
            </div>
             <q-toolbar-title class="yellow q-px-none">
                Docexams MedicalDocexams Medical licensing examsDocexams Medical licensing examsDocexams Medical licensing examsDocexams Medical licensing exams!
                <q-tooltip content-class="bg-grey-3 text-grey-9" content-style="border:1px solid #d1d1d1;font-size: 16px" :offset="[10, 10]">
                        Docexams Medical licensing exam licensing examsDocexams Medical licensing examsDocexams Medical licensing examsDocexams Medical licensing examsDocexams Medical!
                    </q-tooltip>
            </q-toolbar-title>

            <div class="">
                <q-btn icon="create" flat class="pad-5 show" @click="slidersN = true">
                    <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                        Notes
                    </q-tooltip>
                </q-btn>

                <q-btn icon="flag" flat class="pad-5 show">
                    <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                        Flag a question
                    </q-tooltip>
                </q-btn>
                <q-btn icon="post_add" flat class="pad-5 show">
                    <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                        Lab Values
                    </q-tooltip>
                </q-btn>
                <q-btn icon="keyboard" flat class="pad-5 show">
                    <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                        Calculator
                    </q-tooltip>
                </q-btn>
                <q-btn icon="brightness_medium" flat class="pad-5 show" @click="slidersRC = true">
                    <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                        Reverse Color
                    </q-tooltip>
                </q-btn>
                <q-btn icon="format_size" flat class="pad-5 show" @click="slidersTZ = true">
                    <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                        Text Zoom
                    </q-tooltip>
                </q-btn>
                <q-btn icon="dashboard" flat class="pad-5 show yellow" @click="bar = true">
                    <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                        Go to Dashboard
                    </q-tooltip>
                </q-btn>

                <q-fab square flat text-color="white" class="hide" v-model="fab" label-position="left" label="Actions" vertical-actions-align="right" color="primary" icon="keyboard_arrow_down" direction="down">
                    <q-fab-action square color="primary" @click="slidersN = true" icon="create" label-position="left" label="Notes" />
                    <q-fab-action square color="primary" @click="onClick" icon="flag" label-position="left" label="Flag a question" />
                    <q-fab-action square color="primary" @click="onClick" icon="post_add" label-position="left" label="Lab values" />
                    <q-fab-action square color="primary" @click="onClick" icon="keyboard" label-position="left" label="Calculator" />
                    <q-fab-action square color="primary" @click="slidersRC = true" icon="brightness_medium" label-position="left" label="Reverse color" />
                    <q-fab-action square color="primary" @click="slidersTZ = true" icon="format_size" label-position="left" label="Text Zoom" />
                    <q-fab-action square color="primary" @click="bar = true" icon="dashboard" label-position="left" label="Dashboard" />
                    <q-fab-action square color="dark" @click="report = true" icon="report" label-position="left" label="Report" />

                </q-fab>
            </div>
        </q-toolbar>
    </q-header>
    <q-footer elevated>
        <q-toolbar>
            <q-toolbar-title>
                <q-btn icon="arrow_back" flat class="pad-5">
                    <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                        Previous
                    </q-tooltip>
                </q-btn>
                <q-btn icon="arrow_forward" flat class="pad-5">
                    <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                        Next
                    </q-tooltip>
                </q-btn>

            </q-toolbar-title>

            <q-btn icon="pause" flat class="pad-5" @click="bar3 = true">
                <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                    Pause Test
                </q-tooltip>
            </q-btn>
            <q-btn icon="play_arrow" flat class="pad-5">
                <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                    Start Test
                </q-tooltip>
            </q-btn>
            <q-btn icon="stop" flat class="pad-5" @click="bar2 = true">
                <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                    End Test
                </q-tooltip>
            </q-btn>
            <q-btn flat class="pad-5" ripple= 'false'	>
                <q-badge class="text-subtitle2" outline label="30:00" />
                <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">
                    Timer
                </q-tooltip>
            </q-btn>

        </q-toolbar>
    </q-footer>

    <q-dialog v-model="slidersRC">
        <q-card style="width: 300px" class="q-px-sm q-pb-md">
            <q-card-section class="text-h6 text-center">
                <q-icon name="brightness_medium" />
                Reverse Color
            </q-card-section>

            <q-item dense class="flex-center">
                <q-btn class="q-ma-sm" color="white" text-color="dark" label="White" />
                <q-btn class="q-ma-sm" color="black" text-color="white" label="Black" />
            </q-item>
        </q-card>
    </q-dialog>
    <q-dialog v-model="slidersTZ">
        <q-card style="width: 300px" class="q-px-sm q-pb-md">
            <q-card-section class="text-h6 text-center">
                <q-icon name="format_size" />
                Text Zoom
            </q-card-section>

            <q-item dense>
                <q-btn class="q-ma-sm" color="dark" label="-" />
                <q-item-section>
                    <q-btn class="q-ma-sm" color="primary" label="Reset" />
                </q-item-section>
                <q-btn class="q-ma-sm" color="white" text-color="dark" label="+" />
            </q-item>
        </q-card>
    </q-dialog>
    <q-dialog v-model="slidersN">
        <q-card style="width: 600px" class="q-px-sm q-pb-md">
            <q-card-section class="text-h6 text-center">
                <q-icon name="create" />
                Notes
            </q-card-section>

            <q-item dense>
                <div class="q-pa-sm" style="min-width: 500px;">
                    <q-input v-model="text" type="textarea" />
                </div>

            </q-item>
            <q-item dense class="flex-center">
                <q-btn class="q-ma-sm" color="primary" text-color="white" label="Save" />
                <q-btn class="q-ma-sm" color="negative" text-color="white" label="Close" v-close-popup />
            </q-item>

        </q-card>
    </q-dialog>

    <q-dialog v-model="bar" persistent transition-show="flip-down" transition-hide="flip-up">
        <q-card class="bg-primary text-white">
            <q-bar>
                <div class="flex-center">Go to Dashboard?</div>
                <q-space />
                <q-btn dense flat icon="close" v-close-popup>
                    <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
                </q-btn>
            </q-bar>
            <q-card-section class="q-pa-lg">
                This action will pause your test and will redirect you to Qbank Dashbaord. Do you wish to continue?
            </q-card-section>
            <q-item dense class="flex-center">
                <q-btn class="q-ma-sm" color="white" text-color="primary" label="Yes" />
                <q-btn class="q-ma-sm" color="dark" text-color="white" label="No" v-close-popup />
            </q-item>
        </q-card>
    </q-dialog>
    <q-dialog v-model="bar2" persistent transition-show="flip-down" transition-hide="flip-up">
        <q-card class="bg-primary text-white">
            <q-bar>
                <div class="flex-center">End Test ?</div>
                <q-space />
                <q-btn dense flat icon="close" v-close-popup>
                    <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
                </q-btn>
            </q-bar>
            <q-card-section class="q-pa-lg">
                Do you want to end this test?
            </q-card-section>
            <q-item dense class="flex-center">
                <q-btn class="q-ma-sm" color="white" text-color="primary" label="Yes" />
                <q-btn class="q-ma-sm" color="dark" text-color="white" label="No" v-close-popup />
            </q-item>
        </q-card>
    </q-dialog>
    <q-dialog v-model="bar3" persistent transition-show="flip-down" transition-hide="flip-up">
        <q-card class="bg-primary text-white">
            <q-bar>
                <div class="flex-center">Pause Test ?</div>
                <q-space />
                <q-btn dense flat icon="close" v-close-popup>
                    <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
                </q-btn>
            </q-bar>
            <q-card-section class="q-pa-lg">
                Do you want to pause your exam?
            </q-card-section>
            <q-item dense class="flex-center">
                <q-btn class="q-ma-sm" color="white" text-color="primary" label="Yes" v-close-popup @click="persistent = true" />
                <q-btn class="q-ma-sm" color="dark" text-color="white" label="No" v-close-popup />
            </q-item>
        </q-card>
    </q-dialog>
    <q-dialog v-model="persistent" persistent transition-show="scale" transition-hide="scale">
        <q-card class="bg-blue text-white" style="width: 300px">
            <q-card-section>
                <div class="text-h6">Test is Paused</div>
            </q-card-section>

            <q-card-section class="q-pt-none">
                To resume test click RESUME button.
            </q-card-section>

            <q-card-actions align="right" class="bg-white text-blue">
                <q-btn flat label="RESUME" v-close-popup />
            </q-card-actions>
        </q-card>
    </q-dialog>
    <q-dialog v-model="report">
        <q-card style="width: 95vw" 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: 80vw;">
                    <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-drawer v-model="drawerLeft" show-if-above :width="250" :breakpoint="700" elevated content-class="bg-grey-1">
        <q-scroll-area class="fit">
            <div class="q-pa-md">
                <div v-for="n in 10" :key="n" style="border-bottom:1px dotted #d1d1d1;padding-bottom:5px;">
                    <q-icon name="fiber_manual_record" class="text-primary" style="font-size: 14px;padding:15px;" />
                    {{ n }}
                    <q-icon name="create" class="text-primary" style="font-size: 14px;padding:15px;" />
                    <q-icon name="flag" class="text-primary" style="font-size: 14px;padding:15px;" />
                    <q-icon name="done" class="text-positive" style="font-size: 14px;padding:15px;" />
                    <q-icon name="clear" class="text-negative" style="font-size: 14px;padding:15px;" />
                    <q-icon name="favorite" class="text-primary" style="font-size: 14px;padding:15px;" />

                </div>
            </div>
        </q-scroll-area>
    </q-drawer>

    <q-page-container>
        <keep-alive>
            <router-view />
        </keep-alive>
    </q-page-container>
</q-layout>
</template>

<script>

export default {
    name: 'QbankAppLayout',

    components: {
        // EssentialLink
    },

    data() {
        return {
            // leftDrawerOpen: false,
            drawerLeft: false,
            paging: 10,
            fab: false,
            icon: false,
            bar: false,
            bar2: false,
            bar3: false,
            report: false,
            subject: null,
            description: null,
            accept: false,
            persistent: false,
            toolbar: false,
            slidersRC: false,
            slidersTZ: false,
            slidersN: false,
            slideVol: 0,
            text: ''

        }
    },
    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>
.pad-5 {
    padding: 5px;
}

.show {
    display: inline-block;
}

.hide {
    display: none;
}

.yellow {
    color: yellow;
}

#no-hover:hover {
    background: none !important;
}

@media only screen and (min-width: 0px) and (max-width:900px) {

    .hide {
        display: block;
    }

    .show {
        display: none;
    }
}
</style>
