const template = html`
  <form>
  <div class="row">
    <div class="col-sm-12">
        <img :src="'/photos/tMoehochNxbNUcVbh4oo5gwdiRVv9YnM.png'" height="100px" style="border-radius: 50%; margin:10px"/>
    </div>
  </div>
  <div class="row">
      <div class="col-sm-12">
          <div class="btn btn-default file-upload">
						<input id="photos_upload" type="file" name="files" user-data="data">
						<i class="fa fa-arrow-circle-o-up"></i> &nbsp;Choose photo
        </div>
    </div> 
    </div>   
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputFirst_name">First Name</label>
      <input class="form-control" v-model="data.first_name">
      
    </div>
    <div class="form-group col-md-6">
      <label for="inputLast_name">Last Name</label>
      <input class="form-control" v-model="data.last_name">
    </div>
  </div>
  &nbsp;
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputUsername"></label> Username</label>
      <input class="form-control" v-model="data.username">
    </div>
    <div class="form-group col-md-6">
      <label for="inputRole">Role</label>
      <input class="form-control" v-model="data.role">
    </div>
  </div>
  &nbsp;
  <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputEmail">Email</label>
      <input class="form-control" v-model="data.email">
    </div>
  </div>
  &nbsp;
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputExtension">Extension</label>
      <input class="form-control" v-model="data.extension">
    </div>
    <div class="form-group col-md-6">
      <label for="inputDDial">Direct Dial</label>
      <input class="form-control" v-model="data.direct_dial">
    </div>
  </div>
  &nbsp;
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputMobile">Mobile ???</label>
      <input class="form-control" v-model="data.mobile">
    </div>
    <div class="form-group col-md-6">
      <label for="inputAPAK">Asana Private API key</label>
      <input class="form-control" v-model="data.asana_private_api_key">
    </div>
  </div>
  

  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inputMuteCheck">
      <label class="form-check-label" for="inputMuteCheck">
        Mute all sound
      </label>
    </div>
  </div>
  &nbsp;
  <hr>
  <button class="btn btn-primary" @click="save()">Update Details</button>
</form>
`;
import state from "../../state/main.js";
import api from "../../api.js";
export default {
  props: ["userId"],
  data: function() {
    return {
      data: {}
    };
  },
  watch: {
    userId(val, oldVal) {
      this.load();
    }
  },
  mounted() {
    this.load();
  },
  components: {},
  methods: {
    async load() {
      const key = `hr/user-details/${this.userId}`;
      state.sub(key, value => (this.data = value));
      const data = await api.get[key]();
      state.set(key, data);
    },
    async save() {
      event.preventDefault();
      await api.put[`hr/user-details/${this.userId}`]({}, this.data);
      var input = document.querySelector('input[type="file"]');

      var data = new FormData();
      data.append("files", input.files[0]);

      const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
      
      fetch("/api/v1/users/profile-photo", {
        method: "POST",
        headers: {
          "X-CSRF-TOKEN": csrfToken
          // "Content-Type": "multipart/form-data" - Don't set this for FormData
        },
        body: data
      });
    }
  },
  template
};
//
