var VPRekap = (function () {
    let vp_template = `

    <div class="container mt-2">
        <div class="card">
            <div class="card-body">
                <div id="rek" ref="rekap"></div>
            </div>
        </div>
    </div>
    <div class="container mt-2">
        <div class="card">
            <div class="card-body">
                <strong>Status Presensi</strong>
                <div class="d-flex justify-content-evenly mt-2">
                    <div>
                        <button style="border-radius: 50%;" class="btn btn-secondary">{{calendar.izin.length}}</button>
                        <div class="text-center">
                            <span>Izin</span>
                        </div>
                    </div>
                    <div>
                        <button style="border-radius: 50%;" class="btn btn-success">{{calendar.hadir.length}}</button>
                        <div class="text-center">
                            <span>Hadir</span>
                        </div>
                    </div>
                    <div>
                        <button style="border-radius: 50%;" class="btn btn-warning">{{calendar.sakit.length}}</button>
                        <div class="text-center">
                            <span>Sakit</span>
                        </div>
                    </div>
                    <div>
                        <button style="border-radius: 50%;" class="btn btn-danger">{{calendar.alpa.length}}</button>
                        <div class="text-center">
                            <span>Alpa</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
      `;
    return {
        name: "rekap",
        template: vp_template,
        data() {
            return {
                calendar: {
                    instance: null,
                    sakit: [],
                    izin: [],
                    hadir: [],
                    alpa: [],
                },
            }
        },
        mounted() {
            this.initCalendar()
        },
        methods: {
            initCalendar() {
                this.calendar.instance = new FullCalendar.Calendar(this.$refs.rekap, {
                    timeZone: timezone,
                    initialDate: this.date,
                    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                    // the initial locale. of not specified, uses the first one
                    locale: 'id',
                    headerToolbar: {
                        left: '',
                        center: 'title',
                        right: ''
                    },
                    initialView: 'dayGridMonth',
                    eventSources: [{
                        events: (fetchInfo, successCallback, failureCallback) => {
                            axios({
                                method: 'GET',
                                url: `${window.location.href}/rekap?date=${mm().unix()}&type=izin`,
                            }).then((response) => {
                                response.data = response.data.map(v => {
                                    v.start = mm({ unix: v.dateTime }).format('YYYY-MM-DD');
                                    return v;
                                })
                                this.calendar.izin = response.data;
                                successCallback(response.data);
                            }, (err) => {
                                failureCallback(err);
                            });
                        },
                        color: 'grey',
                    },
                    {
                        events: (fetchInfo, successCallback, failureCallback) => {
                            axios({
                                method: 'GET',
                                url: `${window.location.href}/rekap?date=${mm().unix()}&type=sakit`,
                            }).then((response) => {
                                response.data = response.data.map(v => {
                                    v.start = mm({ unix: v.dateTime }).format('YYYY-MM-DD');
                                    return v;
                                })
                                this.calendar.sakit = response.data;
                                successCallback(response.data);
                            }, (err) => {
                                failureCallback(err);
                            });
                        },
                        color: 'yellow',
                    },
                    {
                        events: (fetchInfo, successCallback, failureCallback) => {
                            axios({
                                method: 'GET',
                                url: `${window.location.href}/rekap?date=${mm().unix()}&type=alpa`,
                            }).then((response) => {
                                response.data = response.data.map(v => {
                                    v.start = mm({ unix: v.dateTime }).format('YYYY-MM-DD');
                                    return v;
                                })
                                this.calendar.alpa = response.data;
                                successCallback(response.data);
                            }, (err) => {
                                failureCallback(err);
                            });
                        },
                        color: 'red',
                    },
                    {
                        events: (fetchInfo, successCallback, failureCallback) => {
                            axios({
                                method: 'GET',
                                url: `${window.location.href}/rekap?date=${mm().unix()}&type=hadir`,
                            }).then((response) => {
                                response.data = response.data.map(v => {
                                    v.start = mm({ unix: v.dateTime }).format('YYYY-MM-DD');
                                    v.title = (v.timeIn ? mm({ unix: v.timeIn }).format("HH:mm") : "-") + " - " + (v.timeOut ? mm({ unix: v.timeOut }).format("HH:mm") : "-");
                                    return v;
                                })
                                this.calendar.hadir = response.data;
                                successCallback(response.data);
                            }, (err) => {
                                failureCallback(err);
                            });
                        },
                        color: 'green',
                    },
                    ],
                });
                this.calendar.instance.render();
            },
        }
    }
})();
