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

      <v-row>
        <v-col cols="6">
          <v-select
            v-model="newtype"
            :items="types"
            menu-props="auto"
            label="Type"
            hide-details
            prepend-icon="mdi-currency-usd"
            single-line
          ></v-select>
        </v-col>
        <v-col cols="6">
          <v-select
            v-model="accountname"
            :items="accounts"
            menu-props="auto"
            label="Account"
            hide-details
            prepend-icon="mdi-account-tie"
            single-line
          ></v-select>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12" sm="6">
          <v-menu
            ref="menu"
            v-model="menu"
            :close-on-content-click="false"
            :nudge-right="40"           
            transition="scale-transition"
            offset-y
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                v-model="newstartdate"
                label="Startdate"
                prepend-icon="mdi-calendar-range"
                readonly
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker v-model="newstartdate" @input="menu = false" no-title scrollable>
            
            </v-date-picker>
          </v-menu>
        </v-col>
        <v-col cols="12" sm="6">
          <v-menu
            ref="menu2"
            v-model="menu2"
            :close-on-content-click="false"
           :nudge-right="40"
            transition="scale-transition"
            offset-y
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                v-model="newenddate"
                label="Enddate"
                prepend-icon="mdi-calendar-range"
                readonly
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker v-model="newenddate" @input="menu2 = false" no-title scrollable>
             
            </v-date-picker>
          </v-menu>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12" sm="6">
          <v-menu
            ref="menutime"
            v-model="menutime"
            :close-on-content-click="false"
            :nudge-right="40"
            :return-value.sync="timestart"
            transition="scale-transition"
            offset-y
            max-width="290px"
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                v-model="timestart"
                label="Starttime"
                prepend-icon="mdi-clock-outline"
                readonly
                v-on="on"
              ></v-text-field>
            </template>
            <v-time-picker
              v-if="menutime"
              v-model="timestart"
              full-width
              format="24hr"
              @click:minute="$refs.menutime.save(timestart)"
            ></v-time-picker>
          </v-menu>
        </v-col>
        <v-col cols="12" sm="6">
          <v-menu
            ref="menutime2"
            v-model="menutime2"
            :close-on-content-click="false"
            :nudge-right="40"
            :return-value.sync="timeend"
            transition="scale-transition"
            offset-y
            max-width="290px"
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                v-model="timeend"
                label="Endtime"
                prepend-icon="mdi-clock-outline"
                readonly
                v-on="on"
              ></v-text-field>
            </template>
            <v-time-picker
              v-if="menutime2"
              v-model="timeend"
              full-width
              format="24hr"
              @click:minute="$refs.menutime2.save(timeend)"
            ></v-time-picker>
          </v-menu>
        </v-col>
      </v-row>
      <div class="text-center ma-3">
        <v-btn rounded color="logowhite" outlined dark v-on:click="addRecord()">Add</v-btn>
      </div>
    </v-card>
  </v-container>
</template>
<script>
import { baseUri } from "../variables";
export default {
  name: "CreateTimeTrackAccount",
  data: () => ({
    timestart: null,
    menutime: false,
    timeend: null,
    menutime2: false,
    menu: false,
    menu2: false,
    types: [ "PAID" ,"BREAK"],
    accounts: "",
    user: sessionStorage.getItem("timeTrackAccountListUserId"),
    newstartdate: "",
    newenddate: "",
    newtype: "",
    accountname: ""
  }),

  methods: {
    addRecord() {
      var account = "";
      var accountxhttp = new XMLHttpRequest();

      accountxhttp.onreadystatechange = function() {
        if ((this.status == 200) & (this.readyState == 4)) {
          account = JSON.parse(accountxhttp.responseText);
          account = account._links.self.href;
        }
      };
      accountxhttp.open(
        "GET",
        baseUri +
          "/accounts/search/findByUsernameAndName?username=" +
          sessionStorage.getItem("username") +
          "&account=" +
          this.accountname,
        false
      );
      accountxhttp.setRequestHeader("Content-Type", "application/json");

      accountxhttp.setRequestHeader(
        "Authorization",
        sessionStorage.getItem("jwt")
      );
      accountxhttp.send(null);

      if (this.newstartdate != "" && this.newenddate != "" && this.newdate != "" && account != "") {
        var xhttp = new XMLHttpRequest();
        var suc;
        this.newstartdate = this.newstartdate + "T" + this.timestart;
        this.newenddate = this.newenddate + "T" + this.timeend;
        xhttp.onreadystatechange = function() {
          if ((this.status == 201) & (this.readyState == 4)) {
            suc = true;
          }
        };
        xhttp.open("POST", baseUri + "/records", false);
        xhttp.setRequestHeader("Content-Type", "application/json");
        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
        xhttp.send(
          "{" +
            '"startdate": "' +
            this.newstartdate +
            '", "enddate": "' +
            this.newenddate +
            '", "type": "' +
            this.newtype +
            '", "account": "' +
            account +
            '"}'
        );
        if (suc == true) {
          this.$router.push("/timerecords");
        }
      }
    }
  },
  created (){
    var accountsxhttp = new XMLHttpRequest();
    var accounts;
      accountsxhttp.onreadystatechange = function() {
        if ((this.status == 200) & (this.readyState == 4)) {
          accounts = JSON.parse(accountsxhttp.responseText);
          accounts = accounts._embedded.accounts;
        
        }
      };
      accountsxhttp.open(
        "GET",
        baseUri +
          "/accounts/search/findByUsername?username=" +
          sessionStorage.getItem("username") ,
        false
      );
      accountsxhttp.setRequestHeader("Content-Type", "application/json");

      accountsxhttp.setRequestHeader(
        "Authorization",
        sessionStorage.getItem("jwt")
      );
      accountsxhttp.send(null);
      var accountnames =[];
      for (let index = 0; index < accounts.length; index++) {              
        accountnames[index] = accounts[index].name;
        
      }
      this.accounts =accountnames;
  },
  mounted() {
    var listen = document.getElementById("createRecordListen");

    listen.addEventListener("keyup", e => {
      if (e.keyCode === 13) {
        e.preventDefault();

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