var VPProfile = (function () {
  let vp_template = `
    
  <div class="page-content-wrapper py-3">

  <div v-if="photo.errMsg" class="toast toast-autohide custom-toast-1 toast-danger home-page-toast fade show"
      role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="7000" data-bs-autohide="true">
      <div class="toast-body">
          <svg class="bi bi-bookmark-check text-white" width="30" height="30" viewBox="0 0 16 16" fill="currentColor"
              xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd"
                  d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z">
              </path>
              <path fill-rule="evenodd"
                  d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z">
              </path>
          </svg>
          <div class="toast-text ms-3 me-2">
              <p class="mb-1 text-white">Error!</p><small class="d-block">{{photo.errMsg}}</small>
          </div>
      </div>
      <button class="btn btn-close btn-close-white position-absolute p-1" type="button" data-bs-dismiss="toast"
          aria-label="Close"></button>
      <span class="toast-autohide-animation" style="animation-duration: 7000ms;"></span>
  </div>

  <div class="container">
      <div v-if="!person.nomor_induk" class="text-center">
          <div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
      </div>
      <div v-else>
          <!-- User Information-->
          <div class="card user-info-card mb-3">
              <div class="card-body d-flex align-items-center">
                  <div class="user-profile me-3">
                      <img :src="person.photo" :onerror="$store.state.config.onerrorAvatar" :alt="'Foto '+$store.state.config.person.nama" @click="$refs['photo-input'].click()"><i
                          style="cursor:pointer" @click="$refs['photo-input'].click()"
                          :class="photo.loading?'fas fa-spin fa-sync':'bi bi-pencil'"></i>
                      <form action="#">
                          <input @change="photoChange" :disabled="photo.loading" class="form-control"
                              ref="photo-input" type="file">
                      </form>
                  </div>
                  <div class="user-info">
                      <div class="d-flex align-items-center">
                          <h5 class="mb-1">{{person.nama}}</h5>
                      </div>
                      <p class="mb-0">{{person.nomor_induk}}</p>
                  </div>
              </div>
          </div>
          <!-- User Meta Data-->
          <div class="card user-data-card">
              <div class="card-body">
                <div v-show="errMsg" class="alert custom-alert-2 alert-danger alert-dismissible fade show"
                    role="alert"><i class="bi bi-info-circle"></i>
                    <span>{{errMsg}}</span>
                    <button class="btn btn-close btn-close-white position-relative p-1 ms-auto" type="button"
                        data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                  <form @submit.prevent="save">
                      <div class="form-group mb-3">
                          <label class="form-label" for="fullname">Nama Lengkap</label>
                          <input class="form-control" id="fullname" type="text" :value="person.nama"
                              placeholder="Full Name" readonly>
                      </div>
                      <div class="form-group mb-3">
                          <label class="form-label" for="nis">Nomer Induk Siswa</label>
                          <input class="form-control" id="nis" type="text" :value="person.nomor_induk"
                              placeholder="Nomer Induk" readonly>
                      </div>
                      <div class="form-group mb-3">
                          <label class="form-label" for="kelas">Kelas</label>
                          <input class="form-control" id="kelas" type="text" :value="person.kelas" placeholder="Kelas"
                              readonly>
                      </div>
                      <div class="form-group mb-3">
                          <label class="form-label" for="jurusan">Jurusan</label>
                          <input class="form-control" id="jurusan" type="text" :value="person.jurusan"
                              placeholder="Jurusan" readonly>
                      </div>
                      <div class="form-group mb-3">
                          <label class="form-label" for="email">Email Address</label>
                          <input class="form-control" id="email" type="text" v-model="person.email"
                              placeholder="Email Address">
                      </div>
                      <div class="form-group mb-3">
                          <label class="form-label" for="telp">No Telpon</label>
                          <input class="form-control" id="telp" type="text" v-model="person.phone"
                              placeholder="No Handphone">
                      </div>
                      <div class="form-group mb-3">
                          <label class="form-label" for="password">Ganti Password (Kosongkan jika tidak ingin ganti
                              password)</label>
                          <input class="form-control" v-model="person.password" id="password" type="password">
                      </div>

                      <button v-if="!loading" class="btn btn-success w-100" type="submit">Perbarui Profil</button>
                      <button v-else class="btn btn-primary w-100" type="button">Memperbarui...</button>
                      <br>
                      <div v-show="infoMsg" class="alert custom-alert-2 alert-info alert-dismissible fade show"
                          role="alert"><i class="bi bi-info-circle"></i>
                          <span>{{infoMsg}}</span>
                          <button class="btn btn-close btn-close-white position-relative p-1 ms-auto" type="button"
                              data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>
                  </form>
              </div>
          </div>

      </div>

  </div>
</div>
    `;
  return {
    name: "profile",

    template: vp_template,
    data() {
      return {
        errMsg: '',
        infoMsg: '',
        loading: false,
        photo: {
          cancelToken: null,
          loading: false,
          file: null,
          errMsg: '',
        }
      }
    },
    computed: {
      person() {
        return this.$store.state.config.person;
      }
    },
    mounted() {
      this.$store.dispatch('config/loadPerson');
    },
    methods: {
      photoChange(e) {
        let [photo] = e.target.files;
        if (!photo) return this.photo.file = null;
        this.photo.file = photo;
        this.savePhoto();
      },
      savePhoto() {
        this.photo.loading = true;
        this.photo.errMsg = '';
        let formData = new FormData();
        formData.append('image', this.photo.file);
        formData.append([this.$store.state.config.csrf.name], this.$store.state.config.csrf.value);
        axios.post(this.$store.state.config.base_url + '/profile/photo', formData)
          .then(res => {
            this.person.photo = res.data.location;
            this.photo.loading = false;
            this.photo.file = null;
          }
          ).catch(err => {
            this.photo.loading = false;
            this.photo.errMsg = gaem(err);
          }
          );
      },
      save() {
        if (this.loading) return;
        this.errMsg = '';
        this.infoMsg = '';
        let data = {
          [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
          email: this.person.email,
          phone: this.person.phone,
          password: this.person.password,
        };
        this.loading = true;
        axios({
          method: 'PUT',
          data: data,
          url: window.location.href,
        }).then((response) => {
          if (!isObject(response.data)) return this.errMsg = gaem({
            response
          }, response.data);
          this.infoMsg = 'Berhasil menyimpan';
        }, (error) => {
          this.errMsg = gaem(error);
        }).finally(() => this.loading = false);
      },
    },
  }
})();
