E-Vote/resources/assets/js/components/demo/voter/home/attendance.vue

<template>
    <div class="row col-md-10 col-md-offset-1">
        <div class="col-md-12">

            <h4 class="text-center fw-bold">PENGESAHAN KEHADIRAN</h4>
            <hr />

            <h5 class="text-center">
                <a href="https://drive.google.com/uc?export=download&id=1O5DVDIbGy-w0bejV6RqtJGIty-_5LJD8"
                    target="_blank"
                    style="font-weight: bold; text-decoration: none; padding: 10px 20px; border: 2px solid #007bff; color: #007bff; border-radius: 5px; display: inline-block;">
                    ⬇ Muat Turun Etika Mesyuarat Agung
                </a>
            </h5>

            <form @submit.prevent="edit()" id="edit_form">
                <div class="form-group">
                    <label for="name">Nama : </label>
                    <input type="text" name="name" class="form-control" readonly :value="data.user.name" required />
                </div>

                <div class="form-group">
                    <label for="no_kp">No. Kad Pengenalan :</label>
                    <input type="text" name="no_kp" class="form-control" readonly :value="data.user.no_kp" required />
                </div>

                <div class="form-group">
                    <label for="no_anggota">No. Anggota : </label>
                    <input type="text" name="no_anggota" class="form-control" readonly :value="data.user.no_anggota"
                        required />
                </div>

                <div class="form-group">
                    <label for="no_anggota">Unit : </label>
                    <input type="text" name="unit" class="form-control" readonly :value="data.user.unit" required />
                </div>

                <div class="form-group red-border">
                    <label for="kehadiran">Kehadiran :</label>
                    <select class="form-control" id="kehadiran" name="kehadiran" required>
                        <option value="0">Sila Pilih :</option>
                        <option value="1">Fizikal</option>
                        <option value="2">Maya</option>
                    </select>
                    <small class="form-text text-muted">
                        <em>Sila pilih kehadiran (Maya/Fizikal) kemudian klik “✅ SAYA TERIMA”</em>
                    </small>
                </div>

                <div class="alert alert-info mt-4 small">
                    <p><strong>*</strong> Pendaftaran akan dibuka dari <strong>jam 7.00 pagi hingga 10.00 pagi (25 April
                            2025)</strong>.</p>
                    <p>
                        <strong>*</strong> Elaun kehadiran berjumlah <strong>RM300.00 (secara fizikal)</strong> akan
                        diberikan secara TUNAI selepas mesyuarat. <br />
                        Manakala <strong>RM150.00 (secara atas talian)</strong> akan dikreditkan ke akaun anggota yang
                        hadir penuh.
                    </p>
                </div>

                <br>

                <div class="text-center mt-4">
                    <!-- If already confirmed attendance -->
                    <div v-if="data.user.kehadiran != 0" class="alert alert-success fw-bold text-center py-4">
                        <p class="mb-2">KEHADIRAN ANDA TELAH DISAHKAN SECARA</p>
                        <h5 class="text-uppercase mb-3">
                            <strong class="fw-bold">
                                {{ data.user.kehadiran == 1 ? 'FIZIKAL' : 'MAYA' }}
                            </strong>
                        </h5>

                        <router-link :to="{ name: 'Vote' }"
                            class="btn btn-warning px-4 py-2 fw-bold rounded-pill shadow-sm">
                            🗳️ Undi Sekarang
                        </router-link>
                    </div>


                    <!-- If not yet confirmed attendance -->
                    <button type="submit" class="btn btn-lg btn-success px-5" v-else-if="data.election.status == 2">
                        ✅ SAYA TERIMA
                    </button>
                </div>

            </form>
        </div>
    </div>
</template>

<style>
.form-group.red-border {
    border: 2px solid red;
    padding: 10px;
    border-radius: 5px;
}

.form-group.red-border label {
    color: rgb(0, 0, 0);
}
</style>


<script>
export default {
    data: function () {
        return {
            loading: false,
            userSubmitted: false // Add a flag to track if the user has already submitted
        }
    },

    methods: {
        // refreshUser: function () {

        //     var vm = this;
        //     axios.get(config.API + 'voter/' + this.data.user.id)
        //         .then(response => {
        //             vm.data.user = response.data;
        //             console.log(response.data)
        //         })
        // },



        edit: function () {
            if (this.loading) return;

            const selectedValue = document.getElementById("kehadiran").value;
            if (selectedValue === "0") {
                this.util.notify(" Sila pilih jenis kehadiran anda sebelum meneruskan.", "error");
                return;
            }

            this.loading = true;
            var vm = this;
            this.util.notify('Adding Attendance', 'loading');

            axios.put(config.API + 'attendance/' + this.data.user.id, $('#edit_form').serialize())
                .then(response => {
                    $.notifyClose();
                    vm.loading = false;

                    if (vm.util.showResult(response, 'success')) {
                        // ✅ Redirect to vote page
                        location.reload();
                        vm.$router.push({ name: 'Vote' }); // OR use path: vm.$router.push('/vote');
                    }
                })
                .catch(error => {
                    $.notifyClose();
                    vm.loading = false;
                    vm.util.showResult(error, 'error');
                });
        }

    }
}
</script>