<template>
    <b-row>
        <b-col md="6">
            <b-card title="來賓聯絡資訊">
                <b-form @submit.prevent>
                    <b-row>
                        <b-col cols="12">
                            <b-form-group
                                label="姓名"
                                label-for="name"
                                label-cols-md="4"
                            >
                                <b-input-group class="input-group-merge">
                                    <b-input-group-prepend is-text>
                                        <feather-icon icon="UserIcon" />
                                    </b-input-group-prepend>
                                    <b-form-input
                                        id="name"
                                        placeholder="您的全名"
                                        v-model="name"
                                        debounce="1000"
                                    />
                                </b-input-group>
                            </b-form-group>
                        </b-col>
                        <b-col cols="12">
                            <b-form-group
                                label="來賓編號"
                                label-for="userID"
                                label-cols-md="4"
                            >
                                <b-input-group class="input-group-merge">
                                    <b-input-group-prepend is-text>
                                        <feather-icon icon="UserIcon" />
                                    </b-input-group-prepend>
                                    <b-form-input
                                        id="userID"
                                        placeholder="AXXX"
                                        v-model="userID"
                                    />
                                </b-input-group>
                            </b-form-group>
                        </b-col>
                        <b-col cols="12">
                            <b-form-group
                                label="身分證字號"
                                label-for="nationalID"
                                label-cols-md="4"
                            >
                                <b-input-group class="input-group-merge">
                                    <b-input-group-prepend is-text>
                                        <feather-icon icon="CreditCardIcon" />
                                    </b-input-group-prepend>
                                    <b-form-input
                                        id="nationalID"
                                        placeholder="AXXXXXXXXX"
                                        v-model="nationalID"
                                    />
                                </b-input-group>
                            </b-form-group>
                        </b-col>
                        <b-col cols="12">
                            <b-form-group
                                label="出生年月日"
                                label-for="birth"
                                label-cols-md="4"
                            >
                                <b-input-group class="input-group-merge">
                                    <b-input-group-prepend is-text>
                                        <feather-icon icon="CalendarIcon" />
                                    </b-input-group-prepend>
                                    <flat-pickr
                                        placeholder="點擊選擇日期"
                                        v-model="birth"
                                        class="form-control"
                                    />
                                </b-input-group>
                            </b-form-group>
                        </b-col>
                        <b-col cols="12">
                            <b-form-group
                                label="連絡電話"
                                label-for="phone"
                                label-cols-md="4"
                            >
                                <b-input-group class="input-group-merge">
                                    <b-input-group-prepend is-text>
                                        <feather-icon icon="SmartphoneIcon" />
                                    </b-input-group-prepend>
                                    <b-form-input
                                        id="phone"
                                        type="number"
                                        placeholder="電話..."
                                        v-model="phone"
                                    />
                                </b-input-group>
                            </b-form-group>
                        </b-col>
                        <b-col cols="12">
                            <b-form-group
                                label="聯絡地址"
                                label-for="address"
                                label-cols-md="4"
                            >
                                <b-input-group class="input-group-merge">
                                    <b-input-group-prepend is-text>
                                        <feather-icon icon="MapPinIcon" />
                                    </b-input-group-prepend>
                                    <b-form-input
                                        id="address"
                                        placeholder="聯絡地址"
                                        v-model="address"
                                    />
                                </b-input-group>
                            </b-form-group>
                        </b-col>
                        <!-- submit and reset -->
                        <b-col offset-md="8">
                            <b-button
                                v-ripple.400="'rgba(186, 191, 199, 0.15)'"
                                type="reset"
                                variant="outline-secondary"
                            >
                                重設
                            </b-button>
                            <b-button
                                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
                                v-b-modal.modal-login
                                variant="outline-primary"
                            >
                                填寫完成
                            </b-button>
                        </b-col>
                    </b-row>
                </b-form>
            </b-card>
        </b-col>
        <b-modal
            id="modal-login"
            cancel-variant="outline-secondary"
            ok-title="送出"
            cancel-title="取消"
            centered
            title="再次確認"
            @ok="postForm"
        >
            <b-form @submit.prevent>
                <b-row>
                    <b-col cols="12">
                        <b-form-group
                            label="姓名"
                            label-for="name"
                            label-cols-md="4"
                        >
                            <b-input-group class="input-group-merge">
                                <b-form-input
                                    id="name"
                                    v-model="name"
                                    readonly
                                />
                            </b-input-group>
                        </b-form-group>
                    </b-col>
                    <b-col cols="12">
                        <b-form-group
                            label="來賓編號"
                            label-for="userID"
                            label-cols-md="4"
                        >
                            <b-input-group class="input-group-merge">
                                <b-form-input
                                    id="userID"
                                    v-model="userID"
                                    readonly
                                />
                            </b-input-group>
                        </b-form-group>
                    </b-col>
                    <b-col cols="12">
                        <b-form-group
                            label="身分證字號"
                            label-for="nationalID"
                            label-cols-md="4"
                        >
                            <b-input-group class="input-group-merge">
                                <b-form-input v-model="nationalID" readonly />
                            </b-input-group>
                        </b-form-group>
                    </b-col>
                    <b-col cols="12">
                        <b-form-group
                            label="出生年月日"
                            label-for="birth"
                            label-cols-md="4"
                        >
                            <b-input-group class="input-group-merge">
                                <b-form-input
                                    id="birth"
                                    v-model="birth"
                                    readonly
                                />
                            </b-input-group>
                        </b-form-group>
                    </b-col>
                    <b-col cols="12">
                        <b-form-group
                            label="連絡電話"
                            label-for="phone"
                            label-cols-md="4"
                        >
                            <b-input-group class="input-group-merge">
                                <b-form-input
                                    id="phone"
                                    type="number"
                                    v-model="phone"
                                    readonly
                                />
                            </b-input-group>
                        </b-form-group>
                    </b-col>
                    <b-col cols="12">
                        <b-form-group
                            label="聯絡地址"
                            label-for="address"
                            label-cols-md="4"
                        >
                            <b-input-group class="input-group-merge">
                                <b-form-input
                                    id="address"
                                    v-model="address"
                                    readonly
                                />
                            </b-input-group>
                        </b-form-group>
                    </b-col>
                </b-row>
            </b-form>
        </b-modal>
    </b-row>
</template>

<script>
import {
    BCard,
    BFormGroup,
    BFormInput,
    BFormCheckbox,
    BForm,
    BButton,
    BInputGroup,
    BInputGroupPrepend,
    BRow,
    BCol,
    BFormDatepicker,
    BModal,
    VBModal,
} from "bootstrap-vue";
import Ripple from "vue-ripple-directive";
import useJwt from "@/auth/jwt/useJwt";
import flatPickr from 'vue-flatpickr-component'
import { Mandarin } from 'flatpickr/dist/l10n/zh-tw.js';
import ToastificationContent from "@core/components/toastification/ToastificationContent.vue";

flatpickr("#your-input-element", {
    locale: Mandarin, // 使用繁體中文
    wrap: true,
    position: "above",
    defaultDate: "1975-01-01"
});

export default {
    components: {
        BCard,
        BRow,
        BCol,
        BFormGroup,
        BFormInput,
        BFormCheckbox,
        BInputGroup,
        BInputGroupPrepend,
        BForm,
        BButton,
        BFormDatepicker,
        BModal,
        flatPickr,
        ToastificationContent,
    },
    directives: {
        "b-modal": VBModal,
        Ripple,
    },
    data() {
        return {
            userID: "",
            name: "",
            nationalID: "",
            phone: "",
            address: "",
            birth: "",
        };
    },
    methods: {
        postForm() {
            let variant = "success";
            useJwt
                .postData("/api/guest", {
                    user_id: this.userID,
                    name: this.name,
                    national_id: this.nationalID,
                    birth: this.birth,
                    address: this.address,
                    phone: this.phone,
                })
                .then((response) => {
                    console.log(response.data);
                    this.$toast({
                        component: ToastificationContent,
                        props: {
                            title: "報到成功",
                            icon: "CheckCircleIcon",
                            text: this.name + "報到成功!",
                            variant,
                        },
                    });
                    this.resetForm();
                })
                .catch((error) => {
                    console.log(error);
                    variant = "danger";
                    this.$toast({
                        component: ToastificationContent,
                        props: {
                            title: "報到失敗",
                            icon: "CheckCircleIcon",
                            text: "報到失敗! 原因: " + error,
                            variant,
                        },
                    });
                });
        },
        fetchGuestID(name) {
            useJwt
                .getData(`/api/guest/lookup?name=${name}`)
                .then((response) => {
                    console.log(response.data);
                    if (response.data) {
                        this.userID = response.data;
                    }
                })
                .catch((error) => {
                    console.log("Error fetching guest ID:", error);
                });
        },
        resetForm() {
            this.userID = "";
            this.name = "";
            this.nationalID = "";
            this.phone = "";
            this.address = "";
            this.birth = "";
        },
    },
    watch: {
        name: {
            handler(newName) {
                if (newName) {
                    this.fetchGuestID(newName);
                }
            },
            immediate: false,
        },
    },
};
</script>
<style lang="scss">
@import '~@resources/scss/vue/libs/vue-flatpicker.scss';
</style>
