<template>
    <v-dialog v-model="contactDialog" max-width="500px">
      <v-card>
        <v-card-title>Contact</v-card-title>
        <v-card-text v-if="send_status == false">
          <v-col cols="12">
            <v-text-field label="Title" dense outlined hide-details required v-model="title"></v-text-field>
        </v-col>
        <v-col cols="12">
            <v-text-field label="Your email" dense outlined hide-details required v-model="u_email"></v-text-field>
        </v-col>
        <v-col cols="12">
            <v-textarea label="Message" dense required outlined hide-details v-model="message"></v-textarea>
        </v-col>
        </v-card-text>
        <v-card-text v-else>
            <v-alert
                text
                type="success"
                >
            Your message have been delivered.</v-alert>
        </v-card-text>
        <v-card-actions>
          <v-btn color="red darken-1" text @click="contactDialog = false">Close</v-btn>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="sendEmail()" v-if="send_status == false">Send</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </template>
  
  <script>
  import axios from 'axios';

  export default {
    data() {
      return {
        APIEndPoint: '',
        contactDialog: false,
        title: '',
        message: '',
        u_email: '',
        send_status: false,
        send_error: false,
      };
    },
    methods:{
        setOpen(){
            this.contactDialog = true;
        },
        sendEmail(){
            var postFields = {
                title: this.title,
                u_email: this.u_email,
                message: this.message,
                action: 'sendMessage',
            }
            axios.post(this.APIEndPoint + 'core.php', postFields)
                .then(response => {
                    if (response.data.status === 'fail') {
                        this.send_error = true;
                    } else {
                        this.send_status = true;
                        this.title = '';
                        this.message = '';
                        this.u_email = '';
                    }
                })
        }
    },
    created(){
        this.APIEndPoint = this.$hostname;
    }
  };
  </script>
  