
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let template = `
<div v-if="!ready" class="text-center my-5">
    <div class="spinner-grow" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
<div v-else align="center" id="card-area">
    <!-- Jadwal and split --> 
    <template v-if="!mergeSchedule&&schedule" v-for="(siswa,index) in data.siswa">
        <div class="pagebreakavoid d-flex justify-content-evenly">
            <div class="m-0 p-1 ">
                <table :style="'width:'+print.width[orientation]+'cm'" style=" border: 1px solid rgb(102, 102, 102);" class="kartu">
                    <tbody>
                        <tr>
                            <td colspan="4" style="border-bottom: 1px solid rgb(102, 102, 102); padding: 0px;">
                                <table class="kartu" width="100%">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 4px;"><img
                                                    :src="data.kementrian" height="40"></td>
                                            <td style="font-weight: bold; padding: 4px;" align="center"> {{cardName}}<br>{{data.nama_sekolah}}<br> TAHUN PELAJARAN {{data.tp}} </td>
                                            <td style="padding: 4px; text-align: right;">
                                                <div style="float: right;"><img style="display: block;"
                                                        :src="data.logo"
                                                        height="40"></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td v-if="print.photo" rowspan="5" class="text-center"><img :src="siswa.photo" :onerror="onerrorAvatar" :alt="'Foto '+siswa.nama" height="40"></td>
                            <td width="120" style="padding-left: 5px;">Nama Peserta</td>
                            <td width="1">:</td>
                            <td>{{siswa.nama}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Nomor Induk</td>
                            <td width="1">:</td>
                            <td>{{siswa.nomor_induk}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Username</td>
                            <td>:</td>
                            <td style="font-size: 12px; font-weight: bold;">{{siswa.nomor_induk}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Password</td>
                            <td>:</td>
                            <td style="font-size: 12px; font-weight: bold;">{{print.password?siswa.password_hash:'**********'}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Ruang</td>
                            <td>:</td>
                            <td>{{siswa.ruang}}</td>
                        </tr>

                        <tr v-if="print.sign">
                            <td colspan="3">
                            </td>
                            <td>
                                <div class="text-center mb-1" style="position:relative">
                                    <div class="mb-4"><span>Kepala Sekolah</span></div>
                                    <img :src="data.ttd" style="position: absolute;z-index: 10;bottom: 14px;right: 47px;" height="50">
                                    <div><span>{{print.sign?data.nama_kepala_sekolah:''}}</span></div>
                                    <div><span>{{print.sign?data.nip_kepala_sekolah:''}}</span></div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-6 m-0 p-1 pagebreakavoid">
                <table :style="'width:'+print.width[orientation]+'cm'" style=" border: 1px solid rgb(102, 102, 102);" class="kartu">
                    <tbody>
                        <tr>
                            <td valign="top" align="center">
                                <table class="table" width="100%" align="center">
                                    <thead>
                                        <tr>
                                            <th>Tanggal</th>
                                            <th>Mata Pelajaran</th>
                                            <th>Jam</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="jadwal in siswa.schedule">
                                            <td width="50" align="center">{{jadwal.startDate}}</td>
                                            <td width="100">{{jadwal.mapel}}</td>
                                            <td width="80">{{jadwal.parsedTime}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </template>

    <!-- Jadwal or merge --> 
    <template v-else v-for="(siswa,index) in combinedDataSiswa">
        <div class="pagebreakavoid d-flex justify-content-evenly">
            <div class="m-0 p-1 pagebreakavoid">
                <table :style="'width:'+print.width[orientation]+'cm'" style="border: 1px solid rgb(102, 102, 102);" class="kartu">
                    <tbody>
                        <tr>
                            <td colspan="4" style="border-bottom: 1px solid rgb(102, 102, 102); padding: 0px;">
                                <table class="kartu" width="100%">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 4px;"><img
                                                    :src="data.kementrian" height="40"></td>
                                            <td style="font-weight: bold; padding: 4px;" align="center"> 
                                                {{cardName}}<br>{{data.nama_sekolah}}<br> TAHUN PELAJARAN {{data.tp}}
                                            </td>
                                            <td style="padding: 4px; text-align: right;">
                                                <div style="float: right;"><img style="display: block;"
                                                        :src="data.logo"
                                                        height="40"></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td v-if="print.photo" rowspan="5" class="text-center"><img :src="siswa[0].photo" :onerror="onerrorAvatar" :alt="'Foto '+siswa[0].nama" height="40"></td>
                            <td width="120" style="padding-left: 5px;">Nama Peserta</td>
                            <td width="1">:</td>
                            <td>{{siswa[0].nama}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Nomor Induk</td>
                            <td width="1">:</td>
                            <td>{{siswa[0].nomor_induk}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Username</td>
                            <td>:</td>
                            <td style="font-size: 12px; font-weight: bold;">{{siswa[0].nomor_induk}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Password</td>
                            <td>:</td>
                            <td style="font-size: 12px; font-weight: bold;">{{print.password?siswa[0].password_hash:'**********'}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Ruang</td>
                            <td>:</td>
                            <td>{{siswa[0].ruang}}</td>
                        </tr>

                        <tr v-if="schedule">
                            <td colspan="4">
                                <table width="100%">
                                    <tbody>
                                        <tr>
                                            <td  valign="top" align="center">
                                                <table class="table" width="100%" border="1" align="center">
                                                    <thead>
                                                        <tr>
                                                            <th>Tanggal</th>
                                                            <th>Mata Pelajaran</th>
                                                            <th>Jam</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr v-for="jadwal in siswa[0].schedule">
                                                            <td width="50" align="center">{{jadwal.startDate}}</td>
                                                            <td width="100">{{jadwal.mapel}}</td>
                                                            <td width="80">{{jadwal.parsedTime}}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr v-if="print.sign">
                            <td colspan="3">
                            </td>
                            <td>
                                <div class="text-center mb-1" style="position:relative">
                                    <div class="mb-4"><span>Kepala Sekolah</span></div>
                                    <img :src="data.ttd" style="position: absolute;z-index: 10;bottom: 14px;right: 47px;" height="50">
                                    <div><span>{{print.sign?data.nama_kepala_sekolah:''}}</span></div>
                                    <div><span>{{print.sign?data.nip_kepala_sekolah:''}}</span></div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div v-if="siswa[1]" class="m-0 p-1 pagebreakavoid">
                <table :style="'width:'+print.width[orientation]+'cm'" style=" border: 1px solid rgb(102, 102, 102);" class="kartu">
                    <tbody>
                        <tr>
                            <td colspan="4" style="border-bottom: 1px solid rgb(102, 102, 102); padding: 0px;">
                                <table class="kartu" width="100%">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 4px;"><img
                                                    :src="data.kementrian" height="40"></td>
                                            <td style="font-weight: bold; padding: 4px;" align="center"> {{cardName}}<br>{{data.nama_sekolah}}<br> TAHUN PELAJARAN {{data.tp}} </td>
                                            <td style="padding: 4px; text-align: right;">
                                                <div style="float: right;"><img style="display: block;"
                                                        :src="data.logo"
                                                        height="40"></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td v-if="print.photo" rowspan="5" class="text-center"><img :src="siswa[1].photo" :onerror="onerrorAvatar" :alt="'Foto '+siswa[1].nama" height="40"></td>
                            <td width="120" style="padding-left: 5px;">Nama Peserta</td>
                            <td width="1">:</td>
                            <td>{{siswa[1].nama}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Nomor Induk</td>
                            <td width="1">:</td>
                            <td>{{siswa[1].nomor_induk}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Username</td>
                            <td>:</td>
                            <td style="font-size: 12px; font-weight: bold;">{{siswa[1].nomor_induk}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Password</td>
                            <td>:</td>
                            <td style="font-size: 12px; font-weight: bold;">{{print.password?siswa[1].password_hash:'**********'}}</td>
                        </tr>
                        <tr>
                            <td style="padding-left: 5px;">Ruang</td>
                            <td>:</td>
                            <td>{{siswa[1].ruang}}</td>
                        </tr>

                        <tr v-if="schedule">
                            <td colspan="4">
                                <table width="100%">
                                    <tbody>
                                        <tr>
                                            <td  valign="top" align="center">
                                                <table class="table" width="100%" border="1" align="center">
                                                    <thead>
                                                        <tr>
                                                            <th>Tanggal</th>
                                                            <th>Mata Pelajaran</th>
                                                            <th>Jam</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr v-for="jadwal in siswa[1].schedule">
                                                            <td width="50" align="center">{{jadwal.startDate}}</td>
                                                            <td width="100">{{jadwal.mapel}}</td>
                                                            <td width="80">{{jadwal.parsedTime}}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr v-if="print.sign">
                            <td colspan="3">
                            </td>
                            <td>
                                <div class="text-center mb-1" style="position:relative">
                                    <div class="mb-4"><span>Kepala Sekolah</span></div>
                                    <img :src="data.ttd" style="position: absolute;z-index: 10;bottom: 14px;right: 47px;" height="50">
                                    <div><span>{{print.sign?data.nama_kepala_sekolah:''}}</span></div>
                                    <div><span>{{print.sign?data.nip_kepala_sekolah:''}}</span></div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </template>
</div>

<div id="print-config">
    <div v-if="!print.box" class="right-down">
        <i style="cursor:pointer" title="Konfigurasi" @click="print.box=!print.box" class="fas fa-spin fa-2x fa-cog"></i>
    </div>
    <div v-else class="print-config-box card p-2 pb-4 col-6">
        <div class="d-flex justify-content-between">
            <h3>Konfigurasi</h3>
            <i style="cursor:pointer" @click="print.box=!print.box" class="fas fa-times fa-2x m-1"></i>
        </div>
        <hr>
        <div class="row">
            <div class="col-12 my-1">
                <label>Nama Kartu</label>
                <div class="input-group">
                    <input class="form-control" v-model="print.cardName" type="text" placeholder="Nama Kartu">
                </div>
            </div>
            <div class="col-6 my-1">
                <label>Ukuran</label>
                <select v-model="print.orientation" class="form-select form-select">
                    <option value="potrait">Potrait</option>
                    <option value="landscape">Landscape</option>
                    <option value="custom">Custom</option>
                </select>
            </div>
            <div class="col-6 my-1">
                <label>Lebar</label>
                <div class="input-group">
                    <input :disabled="orientation!='custom'" class="form-control" min="1" required @change="filterWidth" :value="print.width[orientation]" type="text" placeholder="Masukkan Ukuran">
                </div>
            </div>
            <div class="col-6 my-1">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" :checked="print.photo" @change="print.photo=!print.photo" id="photo">
                    <label class="form-check-label" for="photo">
                        Foto
                    </label>
                </div>
            </div>
            <div class="col-6 my-1">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" :checked="print.sign" @change="print.sign=!print.sign" id="sign">
                    <label class="form-check-label" for="sign">
                        Tanda Tangan
                    </label>
                </div>
            </div>
            <div class="col-6 my-1">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" :checked="print.schedule" @change="print.schedule=!print.schedule" id="Schedule">
                    <label class="form-check-label" for="Schedule">
                        Jadwal
                    </label>
                </div>
            </div>
            <div class="col-6 my-1">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" :checked="print.password" @change="print.password=!print.password" id="Password">
                    <label class="form-check-label" for="Password">
                        Password
                    </label>
                </div>
            </div>
            <div class="col-6 my-1">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" :checked="print.mergeSchedule" @change="print.mergeSchedule=!print.mergeSchedule" id="mergeSchedule">
                    <label class="form-check-label" for="mergeSchedule">
                        Gabungkan Jadwal
                    </label>
                </div>
            </div>
        </div>
        <br>
        <button type="button" onclick="window.print()" class="btn btn-primary btn-sm">Cetak</button>
    </div>
</div>
`;
Vue.createApp({
    template,
    data() {
        return {
            data: [],
            ready: false,
            onerrorAvatar: `this.onerror=null,this.src='${altAvatar}'`,
            print: {
                box: false,
                cardName: localStorage.getItem('nama-kartu') || 'KARTU PESERTA CBT',
                mergeSchedule: (localStorage.getItem('kartu-mergeSchedule') || 'true') == 'true',
                schedule: (localStorage.getItem('kartu-schedule') || 'true') == 'true',
                password: (localStorage.getItem('kartu-password') || 'true') == 'true',
                photo: (localStorage.getItem('kartu-photo') || 'true') == 'true',
                sign: (localStorage.getItem('kartu-sign') || 'true') == 'true',
                orientation: localStorage.getItem('kartu-orientation') || 'potrait',
                width: {
                    custom: localStorage.getItem('kartu-width') || '10.4',
                    potrait: '10.4',
                    landscape: '13.5'
                },
            }
        }
    },
    mounted() {
        this.loadData();
        document.querySelector('body').onkeydown = this.keyDetect;

    },
    computed: {
        orientation() {
            return this.print.orientation;
        },
        cardName() {
            return this.print.cardName;
        },
        sign() {
            return this.print.sign;
        },
        photo() {
            return this.print.photo;
        },
        schedule() {
            return this.print.schedule;
        },
        mergeSchedule() {
            return this.print.mergeSchedule;
        },
        password() {
            return this.print.password;
        },
        combinedDataSiswa() {
            let data = [];
            let d = [];
            for (let i = 1; i <= this.data.siswa.length; i++) {
                if (i % 2 == 0) {
                    d.push(this.data.siswa[i - 1]);
                    data.push(d);
                    d = [];
                } else {
                    d.push(this.data.siswa[i - 1]);
                }
            }
            if (d.length > 0) {
                data.push(d);
            }
            return data;
        }
    },
    watch: {
        orientation(v) {
            localStorage.setItem('kartu-orientation', v);
        },
        cardName(v) {
            localStorage.setItem('nama-kartu', v);
        },
        sign(v) {
            localStorage.setItem('kartu-sign', v);
        },
        photo(v) {
            localStorage.setItem('kartu-photo', v);
        },
        schedule(v) {
            localStorage.setItem('kartu-schedule', v);
        },
        mergeSchedule(v) {
            localStorage.setItem('kartu-mergeSchedule', v);
        },
        password(v) {
            localStorage.setItem('kartu-password', v);
        },
    },
    methods: {
        keyDetect(e) {
            if (e.code == "Escape") this.print.box = false;
        },
        filterWidth(e) {
            e = parseFloat(e.target.value);
            localStorage.setItem('kartu-width', e);
            this.print.width[this.orientation] = e;
        },
        loadData() {
            this.ready = false;
            axios({
                method: 'get',
                url: window.location.href + "/data",
            }).then((response) => {
                if (!isObject(response.data)) return setTimeout(this.loadData, 1000);
                document.title = response.data.page_title
                this.data = response.data.data;
                this.ready = true;

                let tc = document.getElementById('#toolbarContainer');
                if (!tc) return;
                if (!tc.length) return;
                setTimeout(() => tc.remove(), 50)

            }, (error) => {
            });
        }
    },
}).mount("#app");
