var VPOverviewUjian = (function () {
    let vp_template = `
    <div class="row">
        <div class="col-xl-4 col-lg-6 col-sm-6">
            <div class="icon-card mb-30">
                <div class="icon purple">
                    <i class="lni lni-calendar"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Ujian Hari Ini</h6>
                    <h3 class="text-bold mb-10">{{data.ujian_today}}</h3>
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
        <div class="col-xl-4 col-lg-6 col-sm-6">
            <div class="icon-card mb-30">
                <div class="icon success">
                    <i class="lni lni-eye"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Ujian Aktif</h6>
                    <h3 class="text-bold mb-10">{{data.ujian_active}}</h3>
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
        <div class="col-xl-4 col-lg-6 col-sm-6">
            <div class="icon-card mb-30">
                <div class="icon orange">
                    <i class="lni lni-pie-chart"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Data Ujian Siswa</h6>
                    <h3 class="text-bold mb-10">{{data.ujiansiswa}}</h3>
                    <!-- <p class="text-sm text-success">
                        <i class="lni lni-arrow-up"></i> +23.4%
                    </p> -->
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
        <div class="col-xl-6 col-lg-6 col-sm-6">
            <div class="icon-card mb-30">
                <div class="icon primary">
                    <i class="lni lni-thumbs-up"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Data Jawaban</h6>
                    <h3 class="text-bold mb-10">{{data.jawaban}}</h3>
                    <!-- <p class="text-sm text-danger">
                        <i class="lni lni-arrow-down"></i> -2.00%
                    </p> -->
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
        <div class="col-xl-6 col-lg-6 col-sm-6">
            <div class="icon-card mb-30">
                <div @click="refreshPasscodeApp()" class="icon success" style="cursor: pointer;">
                    <i class="fas fa-key"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Kode Buka Aplikasi</h6>
                    <h3 class="text-bold mb-10" id="passcode_locked_app">{{data.passcode_locked_app}}</h3>
                    <!-- <p class="text-sm text-danger">
                        <i class="lni lni-arrow-down"></i> -2.00%
                    </p> -->
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
    </div>
    <div class="card p-1 my-1">
        <timeline-ujian></timeline-ujian>
    </div>
    <div class="card p-1 my-1">
        <monthline-ujian></monthline-ujian>
    </div>

    `;
    return {
        name: "overview-ujian",
        template: vp_template,
        data() {
            return {
                data: {}
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + "/panel/ujian/overview/data?startDate=" + mm().hours(0).minutes(0).seconds(0).unix() + "&endDate=" + mm().hours(23).minutes(59).seconds(59).unix(),
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.data = response.data;
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                });
            },
            refreshPasscodeApp() {
                axios({
                    method: 'get',
                    url: `${window.location.href}/change-passcode-app`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    document.getElementById('passcode_locked_app').innerHTML = response.data.passcode_locked_app;
                }, (error) => {
                });
            },
        },
    }
})();

