<template>
    <div>
        <v-img src="/images/veg.jpg">
        
        <template>
            <v-container>
                <v-row class="py-5">
                    <v-title class="font-weight-bold white--text" >CONTACT US<br><v-icon class="black--text">mdi-whatsapp</v-icon>- 8597894293</v-title>
                    <v-col md="12">

                            <template>
                                <v-card outlined id="position" width="500" class="pa-5 mx-auto mt-5" color="grey lighten-3">
                                    <v-form ref="form" v-model="valid" lazy-validation>
                                        <v-text-field v-model="name" :counter="10" :rules="nameRules" label="Name"
                                            required>
                                        </v-text-field>
                                         <v-text-field   label="P-Number" required>
                                        </v-text-field>

                                        <v-text-field v-model="email" :rules="emailRules" label="E-mail" required>
                                        </v-text-field>
                                       

                                        <v-textarea color="cyan" label="Input Massege"></v-textarea>

                                        <v-checkbox v-model="checkbox"
                                            :rules="[v => !!v || 'You must agree to continue!']" label="Do you agree?"
                                            required></v-checkbox>
<!-- 
                                        <v-btn :disabled="!valid" color="success" class="mr-4" @click="validate">
                                            Submit
                                        </v-btn> -->


                                    </v-form>
                                </v-card>


                            </template>
                      


                    </v-col>
                   
                </v-row>
            </v-container>

        </template>
        </v-img>

    </div>


</template>
<script>
    export default {
        data: () => ({
            valid: true,
            name: '',
            nameRules: [
                v => !!v || 'Name is required',
                v => (v && v.length <= 10) || 'Name must be less than 10 characters',
            ],
            email: '',
            emailRules: [
                v => !!v || 'E-mail is required',
                v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
            ],
            select: null,
            items: [
                'Item 1',
                'Item 2',
                'Item 3',
                'Item 4',
            ],
            checkbox: false,
        }),

        methods: {
            validate() {
                this.$refs.form.validate()
            },
            reset() {
                this.$refs.form.reset()
            },
            resetValidation() {
                this.$refs.form.resetValidation()
            },
        },
    }
</script>
<style>

</style>