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

     <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-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="11" 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="11" 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="editRecord()">Edit</v-btn>
      </div>
    </v-card>
  </v-container>
</template>
<script>
export default {
  name: "EditTimeTrackAccount",
  data: () => ({
    timestart: null,
    menutime: false,
    timeend: null,
    menutime2: false,
    menu: false,
    menu2: false,
    types: [ "PAID" ,"BREAK"],
    type: "",
    stardate: "",
    enddate: "",    
    newtype: "",
    newstartdate: new Date().toISOString().substr(0, 10),
    newenddate: new Date().toISOString().substr(0, 10)
  }),

  methods: {
    editRecord() {
      var link = sessionStorage.getItem("timeRecordEditSelfLink");

      if (this.newname != this.name || this.newstartdate != this.startdate || this.newenddate != this.enddate) {
        this.newstartdate = this.newstartdate + "T" + this.timestart;
        this.newenddate = this.newenddate + "T" + this.timeend;
        var xhttp = new XMLHttpRequest();
        var suc;
        xhttp.onreadystatechange = function() {
          if ((this.status == 200) & (this.readyState == 4)) {
            suc = true;
          }
        };
        xhttp.open("PATCH", link, false);
        xhttp.setRequestHeader("Content-Type", "application/json");

        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
        xhttp.send(
          "{" +
            ' "startdate": "' +
            this.newstartdate +
            '", "enddate": "' +
            this.newenddate +
            '", "type": "' +
            this.newtype +
            '"}'
        );
        if (suc == true) {
          this.$router.push("/timerecords");
        }
      }
    }
  },
  created() {
    var recordxhttp = new XMLHttpRequest();
    var record;

    recordxhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        record = JSON.parse(recordxhttp.responseText);
      }
    };
    recordxhttp.open(
      "GET",
      sessionStorage.getItem("timeRecordEditSelfLink"),
      false
    );

    recordxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));

    recordxhttp.send(null);
    this.type = record.type;
    this.startdate = record.startdate;

    this.newtype = record.type;
    var start = record.startdate;
    start = start.split("T");
    var starttime = start[1];
    var startdate = start[0];
    this.newstartdate = startdate;
    this.timestart = starttime;
    var end = record.enddate;
    end = end.split("T");
    var endtime = end[1];
    var enddate = end[0];
    this.newenddate = enddate;
    this.timeend = endtime;
  },
  mounted() {
    var listen = document.getElementById("editRecordListen");
    listen.addEventListener("keyup", e => {
      if (e.keyCode === 13) {
        e.preventDefault();

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