<template >
  <v-container id = "createAccountListen">
    <v-card align-center>
      <p class="text-center logowhite--text" style="font-size:30pt">Details</p>

      <v-form>
        <v-text-field
          label="name"
          v-model="newname"
          name="name"
          prepend-icon="mdi-account-tie"
          type="text"
          color="primary"
        />
        <v-text-field
          label="revenue"
          v-model="newrevenue"
          name="revenue"
          prepend-icon="mdi-currency-usd"
          type="text"
          color="primary"
        />
        <v-text-field
          label="description"
          v-model="newdescription"
          name="description"
          prepend-icon="mdi-information-variant"
          type="text"
          color="primary"
        />
      </v-form>

      <div class="text-center ma-3">
        <v-btn rounded color="logowhite" outlined dark v-on:click="addAccount()">Add</v-btn>
      </div>
    </v-card>
  </v-container>
</template>
<script>
import { baseUri } from "../variables";
export default {
  name: "CreateTimeTrackAccount",
  data: () => ({
    user: sessionStorage.getItem("timeTrackAccountListUserId"),
    newname: "",
    newrevenue: "",
    newdescription: "",
  }),

  methods: {
    addAccount() {
      if (this.newname != "" || this.newrevenue != "" || this.newdescription != "") {
        var xhttp = new XMLHttpRequest();
        var suc;
        xhttp.onreadystatechange = function() {
          if ((this.status == 201) & (this.readyState == 4)) {
           suc = true;
          }
        };
        xhttp.open("POST", baseUri + "/accounts", false);
        xhttp.setRequestHeader("Content-Type", "application/json");

        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
        xhttp.send(
          "{" +
            '"user": "' +
            this.user +
            '", "revenue": "' +
            this.newrevenue +
            '", "name": "' +
            this.newname +
            '", "description": "' +
            this.newdescription +
            '"}'
        );
        if (suc == true ) {
          this.$router.push("/timetrackaccounts");
        }
      }
    },
  },
   mounted() {
     var listen =  document.getElementById('createAccountListen');
    listen.addEventListener("keyup", e => {
      if (e.keyCode === 13) {
        e.preventDefault();

        this.addAccount();
      }
    });
  }
};
</script>