var VPMateri = (function () {
  let vp_materi = `
      
            <div class="accordion accordion-style-three" id="accordionStyle3">
              <!-- Single Accordion -->
              <div v-for="(m,i) in materi" @click="viewMateri(m.id)"  class="accordion-item">
                <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">{{m.judul}}
                    <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.isi"></p>
                  </div>
                </div>
              </div>
            </div>
         
    `;
  let vp_file = `
        <div class="row p-3">
        <template v-for="f in materi">
            <div v-if="f.file" @click="archiveType(f.file)" class="col-3">
                <a :href="f.file">
                    <div class="card border text-center p-3" style="font-size:30px">
                        <i :class="archiveIcon(f.file)">
                        </i>
                    </div>
                    <div class="text-center">
                        <small>{{f.judul}}</small>
                    </div>
                </a>
            </div>
        </template>
        </div>
    `;
  let vp_template = `
        <div class="card">
          <div class="card-body p-3">
            <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="materi-tab" data-bs-toggle="tab" data-bs-target="#materi" type="button" role="tab" aria-controls="materi" aria-selected="true">Materi</button>
                </li>
                <li v-if="materi.filter(v=>v.file).length>0" class="nav-item" role="presentation">
                  <button class="btn" id="file-tab" data-bs-toggle="tab" data-bs-target="#file" type="button" role="tab" aria-controls="file" aria-selected="false">File</button>
                </li>
              </ul>
              <div class="tab-content rounded-lg" style="border:0px" id="affanTabs1Content">
                <div class="tab-pane fade active show" id="materi" role="tabpanel" aria-labelledby="materi-tab">
                    ${vp_materi}
                </div>
                <div class="tab-pane fade" id="file" role="tabpanel" aria-labelledby="file-tab">
                    ${vp_file}
                </div>
              </div>
            </div>
          </div>
        </div>
    `;
  return {
    name: "materi",
    template: vp_template,

    data() {
      return {
        materi: [],
        errMsg: '',

      }
    },
    mounted() {

      this.loadMateri();
    },
    methods: {
      archiveIcon(name) {
        return archiveIcon(name);
      },
      loadMateri() {
        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.materi = response.data;
        }, (error) => {
          this.errMsg = gaem(error);
        }).finally(() => this.loading = false);
      },
      viewMateri(id) {
        axios({
          method: 'PATCH',
          data: { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value, },
          url: window.location.href + '/viewing/' + id,
        }).then((response) => {
        }, (error) => {
        });
      },
    },
  }
})();
