var VPSalinTugas = (function () {
    let vt_template = `
    <div class="modal fade" ref="modal"  tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen modal-dialog-centered">
          <div class="modal-content card-style">
            <div class="modal-header px-0 border-0">
              <h5 class="text-bold">Salin Tugas Pelajaran</h5>
              <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
                <i class="lni lni-cross-circle"></i>
              </button>
            </div>
            <div class="modal-body px-0">
              <div class="content">

                <div class="row m-0">
                    <div class="col-md-6">
                        <div class="text-center my-5" v-if="existingTugas.loading">
                            <div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
                        </div>
                        <div v-else>
                            <small> Jumlah Tugas : {{filExistT.filter(v=>v.show).length}}</small>
                            <div class="input-style-1 mb-1"><input type="text" v-model="existingTugas.query" placeholder="Cari Tugas"></div>
                            <div title="Hapus Semua" @click="this.existingTugas.data=[]" class="border border-light shadow-sm rounded-top p-2 text-center" style="cursor: pointer;"><i class="mdi mdi-trash-can"></i></div>
                            <div class="siswa-list overflow-auto">
                                <template v-for="(fet,i) in filExistT">
                                    <div v-if="fet.show" :title="'Hapus '+fet.judul" @click="this.existingTugas.data = this.existingTugas.data.filter((v, index) => i!=index);" class="border border-light shadow-sm rounded px-1 siswa-item" style="cursor: pointer;">{{fet.parsedName}}</div>
                                </template>
                            </div>
                        </div>
                        
                    </div>
                    <div class="col-md-6">
                        <div class="text-center my-5" v-if="relatedTugas.loading">
                            <div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
                        </div>
                        <div v-else>
                            <small> Jumlah Tugas : 0</small>
                            <div class="input-style-1 mb-1"><input type="text" v-model="relatedTugas.query" placeholder="Cari Tugas"></div>
                            <div title="Tambah Semua" @click="addAllRel" class="border border-light shadow-sm rounded-top p-2 text-center" style="cursor: pointer;"><i class="mdi mdi-arrow-up-bold"></i><i class="mdi mdi-arrow-up-bold"></i></div>
                            <div class="siswa-list overflow-auto">
                                <template v-for="(frt,i) in filRelT">
                                    <div v-if="frt.exists" title="Tugas Sudah Ada" class="text-white bg-primary border border-light shadow-sm rounded px-1 siswa-item" style="cursor: pointer;">{{frt.parsedName}}</div>
                                    <div v-else :title="'Tambah '+frt.judul" @click="existingTugas.data.push(relatedTugas.data[i]);" class="border border-light shadow-sm rounded px-1 siswa-item" style="cursor: pointer;">{{frt.parsedName}}</div>
                                </template>
                                </div>
                            </div>
                        </div>
                    </div>
    
                  </div>
                </div>
                <div class="modal-footer px-0">
    
                    <div class="action d-flex flex-wrap justify-content-end">
                        &nbsp;
                    <button type="submit" @click="save" :disabled="!ready" class="main-btn btn-sm primary-btn btn-hover">
                        <template v-if="!ready"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        </template>
                        <template v-else>
                            Simpan
                        </template>
                    </button>
                    </div>
                </div>
              </div>
            </div>
        </div>
`;

    return {
        name: "salin-tugas",
        props: ['jadwalId', 'hscrf'],
        template: vt_template,
        data() {
            return {
                relatedTugas: {
                    query: '',
                    loading: false,
                    data: [],
                },
                existingTugas: {
                    query: '',
                    loading: false,
                    data: [],
                },

                mdl: {
                    loading: false,
                    instance: null,
                }
            }
        },
        mounted() {
        },
        computed: {
            filExistT() {
                let data = this.existingTugas.data.map(m => {
                    m.parsedName = `${m.judul} | ${m.kode_kompetensi == 'KP' ? 3 : 4}.${m.nomor_kompetensi} ${m.nama_kompetensi}`;
                    m.show = this.existingTugas.query == '' || m.parsedName.toLowerCase().indexOf(this.existingTugas.query) != -1;
                    return m;
                });
                return data;
            },
            filRelT() {
                let data = this.relatedTugas.data.map(m => {
                    m.parsedName = `${m.kode_mapel}  | ${m.nama_kelas} | ${m.judul} | ${m.kode_kompetensi == 'KP' ? 3 : 4}.${m.nomor_kompetensi} ${m.nama_kompetensi}`;
                    m.show = this.relatedTugas.query == '' || m.parsedName.toLowerCase().indexOf(this.relatedTugas.query) != -1;
                    m.exists = this.existingTugas.data.findIndex(v => v.id == m.id) != -1;
                    return m;
                });
                return data;
            },
            ready() {
                return !this.mdl.loading && !this.relatedTugas.loading && !this.existingTugas.loading
            }
        },
        methods: {
            start() {
                this.modal();
                this.loadRelatedTugas();
                this.loadExistingTugas();
            },
            addAllRel() {
                this.relatedTugas.data.forEach(el => {
                    if (this.existingTugas.data.findIndex(v => v.id == el.id) != -1) return;
                    this.existingTugas.data.push(el);
                });
            },
            save() {
                if (!this.ready) return;
                this.mdl.loading = true;
                let data = { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value };
                data.ct = this.existingTugas.data.filter(v => !v.is_new).map(v => {
                    return v.id;
                });
                data.nt = this.existingTugas.data.filter(v => v.is_new).map(v => {
                    return v.id;
                });
                axios({
                    method: 'POST',
                    data,
                    url: `${this.$store.state.config.base_url}/panel/e-learning/jadwal-mengajar/tugas/${this.jadwalId}/save`
                }).then((response) => {
                    this.$emit('updated', true);
                    this.loadExistingTugas();
                    this.loadRelatedTugas();
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                }).finally(() => this.mdl.loading = false);
            },
            loadExistingTugas() {
                if (this.existingTugas.loading) return;
                this.existingTugas.loading = true;
                axios({
                    method: 'get',
                    url: `${this.$store.state.config.base_url}/panel/e-learning/jadwal-mengajar/tugas/${this.jadwalId}/all`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.$store.state.config.csrf = this.$store.state.config.csrf;
                    this.existingTugas.data = response.data.tugas;
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                }).finally(() => this.existingTugas.loading = false);
            },
            loadRelatedTugas() {
                axios({
                    method: 'get',
                    url: `${window.location.href}/related`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.$store.state.config.csrf = this.$store.state.config.csrf;
                    this.relatedTugas.data = response.data.tugas.map(v => {
                        v.is_new = true;
                        return v;
                    });
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                }).finally(() => this.relatedTugas.loading = false);

            },
            modal(e = 'show') {
                if (!this.mdl.instance) {
                    this.mdl.instance = new bootstrap.Modal(this.$refs.modal);
                }
                switch (e) {
                    case "hide":
                        this.mdl.instance.hide();
                        break;
                    case "show":
                        this.mdl.instance.show();
                        break;
                    case "toggle":
                        this.mdl.instance.toggle();
                        break;
                    case "dispose":
                        this.mdl.instance.dispose();
                        break;
                }
            },
        }
    }
})();
