var VPTugas = (function () {
  let vp_tugas = `
       
            <div class="accordion accordion-style-three" id="accordionStyle3">
              <!-- Single Accordion -->
              <div v-for="(m,i) in tugas" class="accordion-item mb-3">
                <strong>
                {{m.judul}}
                </strong>
                <div class="accordion-header" id="accordionSeven">
                  <h6 class="shadow-sm rounded border collapsed" data-bs-toggle="collapse" :data-bs-target="'#accordionStyleSeven'+i" aria-expanded="false" :aria-controls="'accordionStyleSeven'+i">
                  Deskripsi 
                    <template v-if="m.ddm.format('YYYY-MM-DD')==mm().format('YYYY-MM-DD')">
                      <span class="text-danger">Hari Ini {{m.ddm.format("HH:mm")}}</span>
                    </template>
                    <template v-else-if="m.ddm.format('YYYY-MM-DD')==mm().add(1,'d').format('YYYY-MM-DD')">
                      <span class="text-warning">
                        Besok {{m.ddm.format("HH:mm")}}
                      </span>
                    </template>
                    <template v-else-if="m.ddm.format('YYYY-MM-DD')==mm().subtract(1,'d').format('YYYY-MM-DD')">
                      <span class="text-secondary">
                      Kemarin {{m.ddm.format("HH:mm")}}
                      </span>
                    </template>
                    <template v-else-if="m.ddm.format('YYYY-MM')==mm().format('YYYY-MM')">
                      <span class="text-secondary">
                      {{m.ddm.format("DD HH:mm")}}
                      </span>
                      </template>
                      <template v-else-if="m.ddm.format('YYYY')==mm().format('YYYY')">
                      <span class="text-secondary">
                      {{m.ddm.format("DD MMMM HH:mm")}}
                      </span>
                      </template>
                      <template v-else>
                      <span class="text-secondary">
                      {{m.ddm.format("YYYY-MM-DD HH:mm")}}
                      </span>
                      </template>
                    <svg class="bi bi-arrow-down-short" width="24" height="24" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"></path>
                    </svg>
                  </h6>
                </div>
                <div class="accordion-collapse collapse" :id="'accordionStyleSeven'+i" aria-labelledby="accordionSeven" data-bs-parent="#accordionStyle3" style="">
                  <div class="accordion-body">
                    <p class="mb-0" v-html="m.deskripsi"></p>
                    <a v-if="m.lampiran" class="stretched-link my-5" :download="'Lampiran '+m.judul+'.'+m.lampiran.split('.').pop()" :href="m.lampiran">Lampiran {{m.judul}}</a>
                    <div class="form-group mb-0">
                      <label class="form-label" for="tugas-file">Berkas</label>
                      <input :disabled="m.point!=null||tugas[i].fileuploading" ref="tif" class="form-control border-0 form-control-sm" @change="file($event,i)" type="file">
                    </div>
                    <div class="my-2" v-if="m.file">
                      <div class="mx-1" v-for="(file,fi) in m.file" >
                        <a class="stretched-link mr-5" :href="file.split('-').pop()">Lampiran {{fi+1}}</a> <i :title="'Hapus Lampiran '+(fi+1)" style="cursor:pointer" @click="delete_file(file.split('-')[0])" class="fas fa-times text-danger"></i>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="form-label" for="exampleTextarea1">Jawaban</label>
                      <textarea :disabled="m.point!=null" @change="save(m.id)" class="form-control"  name="textarea" cols="3" rows="5" v-model="m.answer" placeholder="Tulis Jawaban"></textarea>
                    </div>
                  </div>
                </div>
              </div>
            </div>
         
    `;
  let vp_point = `
            <div class="accordion accordion-flush accordion-style-two" id="accordionStyle2">
              <template v-for="(t,si) in tugas">
              <!-- Single Accordion -->
              <div v-if="t.point!=null" class="accordion-item">
                <div class="accordion-header" id="accordionFive">
                  <h6 class="collapsed" data-bs-toggle="collapse" :data-bs-target="'#accordionStyleFive'+si" aria-expanded="false" :aria-controls="'accordionStyleFive'+si"><i class="bi bi-plus-lg"></i>
                    <div style="max-width:88%">{{t.judul}}</div>
                  </h6>
                </div>
                <div class="accordion-collapse collapse" :id="'accordionStyleFive'+si" aria-labelledby="accordionFive" data-bs-parent="#accordionStyle2">
                  <div class="accordion-body">
                    <span>Nilai : {{t.point}}</span>
                   
                      <div v-if="t.comment" class="comment">
                        <label>Komentar :</label>&nbsp;
                        <strong>{{t.comment}}</strong>
                      </div>
                      <div>
                        <label>Jawaban</label>
                        <p class="mb-0">
                        {{t.answer}}
                        </p>
                      </div>
                  </div>
                </div>
              </div>
              </template>
            </div>
    `;
  let vp_template = `

  <div v-if="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">{{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 v-if="sccMsg" class="toast toast-autohide custom-toast-1 toast-success 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">Success!</p><small class="d-block">{{sccMsg}}</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="card">
          <div class="card-body p-4">
            <div class="standard-tab">
              <ul class="nav rounded-lg mb-2 p-2 shadow-sm" id="affanTabs1" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="btn active" id="tugas-tab" data-bs-toggle="tab" data-bs-target="#tugas" type="button" role="tab" aria-controls="tugas" aria-selected="true">Tugas</button>
                </li>
                <li v-if="tugas.filter(v=>v.point!=null).length>0" class="nav-item" role="presentation">
                  <button class="btn" id="point-tab" data-bs-toggle="tab" data-bs-target="#point" type="button" role="tab" aria-controls="point" aria-selected="false">Nilai</button>
                </li>
              </ul>
              <div class="tab-content rounded-lg " style="border:0px;" id="affanTabs1Content">
                <div class="tab-pane fade active show" id="tugas" role="tabpanel" aria-labelledby="tugas-tab">
                    ${vp_tugas}
                </div>
                <div v-if="tugas.filter(v=>v.point!=null).length>0" class="tab-pane fade" id="point" role="tabpanel" aria-labelledby="point-tab">
                    ${vp_point}
                </div>
              </div>
            </div>
          </div>
        </div>
    `;
  return {
    name: "tugas",
    template: vp_template,

    data() {
      return {
        tugas: [],

        errMsg: '',
        sccMsg: '',
      }
    },
    mounted() {

      this.loadTugas();
    },
    methods: {
      delete_file(id) {
        axios({
          method: 'DELETE',
          data: { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value, },
          url: window.location.href + '/file/' + id,
        }).then((response) => {
          if (!isObject(response.data)) return this.errMsg = gaem({
            response
          }, response.data);
          let fi = -1;
          let ti = this.tugas.findIndex(v => {
            fi = v.file.findIndex(vs => {
              return vs.split('-')[0] == id;
            });
            return fi != -1;
          })
          if (ti != -1 && fi != -1) this.tugas[ti].file.splice(fi, 1);
        }, (error) => {
          this.errMsg = gaem(error);
        })
      },
      loadTugas() {
        this.loading = true;
        axios({
          method: 'GET',
          url: window.location.href + '/all',
        }).then((response) => {

          if (!isObject(response.data)) return this.errMsg = gaem({
            response
          }, response.data);
          this.tugas = response.data.tugas.map(v => {
            v.ddm = mm({ unix: v.dueDate });
            v.file = v.file ? v.file.split(',') : [];
            return v;
          });
        }, (error) => {
          this.errMsg = gaem(error);
        }).finally(() => this.loading = false);
      },
      save(id) {
        this.sccMsg = '';
        this.errMsg = '';
        axios({
          method: 'PATCH',
          data: {
            [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
            answer: this.tugas.find(v => v.id == id).answer
          },
          url: window.location.href + '/save/' + id,
        }).then((response) => {
          if (!isObject(response.data)) return this.errMsg = gaem({
            response
          }, response.data);
          this.sccMsg = response.data.message;
        }, (error) => {
          this.errMsg = gaem(error);
        });
      },
      file(e, index) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        const data = new FormData();
        data.append([this.$store.state.config.csrf.name], this.$store.state.config.csrf.value);
        data.append('file', files[0]);
        this.sccMsg = '';
        this.errMsg = '';
        this.tugas[index].fileuploading = true;
        let id = this.tugas[index].id;
        axios({
          method: 'POST',
          data,
          url: window.location.href + '/file/' + id,
        }).then((response) => {
          if (!isObject(response.data)) return this.errMsg = gaem({
            response
          }, response.data);
          this.sccMsg = response.data.message;
          this.tugas[index].file.push(response.data.file);
          this.$refs.tif.value = null;
        }, (error) => {
          this.errMsg = gaem(error);
        }).finally(() => this.tugas[index].fileuploading = false);
      },
      mm() {
        return mm();
      },
    },
  }
})();
