var VPJMAgenda = (function () {
    let vp_template = `
        <div v-if="mapel_id">
            <form @submit.prevent="simpan">
                <div class="form-group">
                    <label>Rangkuman</label><br>
                <editor :tinymceScriptSrc="$store.state.config.base_url+'/vendors/tinymce/js/tinymce/tinymce.min.js'" v-model="rangkuman"  :api-key="tinymcekey" :init="tinymce" />
                </div>
                
                <div class="form-group">
                    <label>RPP</label>
                    <div class="select-style-1  mx-1">
                        <div class="select-position">
                            <select required class="bg-white" style="margin-right:25px" @change="" v-model="rpp_id">
                                <option :value="null">Pilih RPP</option>
                                <option v-for="r in filteredRPP" :value="r.id">{{r.nomor_kompetensi}} {{r.nama_kompetensi}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <button :disabled="!rpp_id||!rangkuman" class="btn btn-success">
                    Simpan
                </button>
            </form>

            <div class="my-2 table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="text-center">
                        <tr>
                        <th scope="col">#</th>
                        <th scope="col">RANGKUMAN</th>
                        <th scope="col">FILE</th>
                        <th scope="col">PERTEMUAN</th>
                        <th scope="col">TANGGAL</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(a,i) in agenda">
                            <th scope="row" class="text-center">{{i+1}}</th>
                            <td class="text-center py-2" v-html="a.rangkuman"></td>
                            <td class="text-center p-2">
                                <a class="btn btn-primary rounded-full" v-if="getRPPFileUrl(a.rpp_id)" title="Unduh" :download="getRPPFileName(a.rpp_id)" :href="getRPPFileUrl(a.rpp_id)"><i class="fas fa-download"></i> Unduh</a>
                            </td>
                            <td class="text-center p-2">
                                <span class="badge bg-success">
                                {{i+1}}
                                </span>
                            </td>
                            <td class="text-center p-2">
                                <span class="badge bg-success">
                                  {{a.tanggal}}
                                </span>
                            </td>
                        </tr>
                    </tbody>
            
                </table>
            </div>

        </div>
    `;
    return {
        name: "jadwal-agenda",
        template: vp_template,
        props: ['tinymcekey',],
        data() {
            return {
                rangkuman: null,
                rpp_id: null,
                mapel_id: null,

                rpp: [],
                agenda: [],
                tinymce: {
                    toolbar:
                        "bold italic numlist bullist emoticons",
                }
            }
        },
        mounted() {

            this.loadAgenda()
            this.loadRPP()
        },
        methods: {
            getRPPFileUrl(id) {
                let index = this.rpp.findIndex(v => v.id == id);
                if (index == -1) return null;
                return this.rpp[index].file;
            },
            getRPPFileName(id) {
                let index = this.rpp.findIndex(v => v.id == id);
                if (index == -1) return null;
                return `${this.rpp[index].nomor_kompetensi.split(' ').join('-')}-${this.rpp[index].nama_kompetensi.split(' ').join('-')}-${this.rpp[index].kode_tahun.split(' ').join('-')}-${this.rpp[index].nama_tahun.split(' ').join('-')}-${this.rpp[index].semester_tahun.split(' ').join('-')}.pdf`;
            },
            loadRPP() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + "/panel/e-learning/rpp/all",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.rpp = response.data.data;
                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Memuat Data Agenda'), 'error')
                });
            },
            loadAgenda() {
                axios({
                    method: 'get',
                    url: window.location.href + "/agenda",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.agenda = response.data.agenda.map(v => {
                        v.tanggal = mm({ unix: v.created_at }).format('YYYY-MM-DD');
                        return v;
                    });
                    this.mapel_id = response.data.mapel_id;
                    this.rangkuman = this.agenda[this.agenda.length - 1].rangkuman;
                    this.rpp_id = this.agenda[this.agenda.length - 1].rpp_id;
                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Memuat Data Agenda'), 'error')

                });
            },
            simpan() {
                axios({
                    method: 'patch',
                    data: {
                        [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                        'rangkuman': this.rangkuman,
                        'rpp_id': this.rpp_id,
                    },
                    url: window.location.href + "/agenda",
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.loadAgenda();
                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Update Data Agenda'), 'error')

                });
            }
        },
        computed: {
            filteredRPP() {
                return this.rpp.filter(v => v.mapel_id == this.mapel_id && v.tahun_active == 1);
            },
        }
    }
})();
