<template>
     <div class="row">
        <div class="col">
            <div v-if="vouchers && vouchers.length > 0" class="row fs-10 p-b-5">List of Vouchers, click to select</div>
            <div class="row text-left no-margin bg-white p-b-10" v-if="vouchers && !isLoading" v-for="item in vouchers" v-bind:key="item.id" >
                <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" @click="selectVoucher(item)">
                    <div class="row">
                        <div class="col text-left no-padding">{{ item.voucher.code }}</div>
                        <div class="col text-right no-padding">
                            <span>{{ item.voucher.name }}</span>
                        </div>
                        <!-- <div class="col text-right no-padding" v-if="item.voucher.type == 'AMOUNT'">
                            RM{{ item.voucher.value/100 }} Discount
                        </div>
                        <div class="col text-right no-padding" v-if="item.voucher.type == 'PERCENT'">
                            <span v-if="item.voucher.value === 1">50% Discount</span>
                            <span v-else>{{ item.voucher.name }}</span>
                        </div> -->
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-8 text-left no-padding">
                            <span v-if="item.voucher.end_date">
                                Valid till {{ item.voucher.end_date }}
                            </span>
                            <span v-else>
                                No expiry date
                            </span>
                        </div>
                        <div class="col-12 col-md-4 text-right no-padding">
                            <a class="requestModal"  :data-type="'showVoucherTnC-' + item.id">Terms</a>
                        </div>
                        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" size="extra-large" :type="'showVoucherTnC-' + item.id">
                            <div class="container">
                                <div class="card">
                                    <div class="card-header">
                                        Terms & Conditions
                                    </div>
                                    <div class="card-body">
                                        <ol>
                                            <li>Vouchers are only valid for purchases made on <a href="https://exchange.cief-malaysia.com/" target="_blank">https://exchange.cief-malaysia.com/</a>.</li>
                                            <li>Each voucher is applicable for a single transaction (unless stated otherwise).</li>
                                            <li>Each voucher is only applicable for new orders.</li>
                                            <li>Voucher codes are to be entered at the checkout or cart page (unless stated otherwise).</li>
                                            <li>Vouchers are not valid for promotions or discounted products (unless stated otherwise).</li>
                                            <li>Customers should take note of the expiry dates of the voucher(s) that they wish to redeem. Any voucher(s) which have expired will be invalid.</li>
                                            <li>Individual vouchers are only valid during its respective promotion period. This guideline overrides any individual voucher policy (unless stated otherwise).</li>
                                            <li>CIEF reserves the right to cancel any order if a customer’s purchasing behavior appears to be suspicious or potentially fraudulent.</li>
                                            <li>CIEF vouchers are not exchangeable for cash at <a href="https://exchange.cief-malaysia.com/" target="_blank">https://exchange.cief-malaysia.com/</a>.</li>
                                            <li>This voucher can only be used and redeemed by a registered customer who has already logged into their account during purchase.</li>
                                            <li>CIEF reserves the right to amend the terms & conditions or cancel any vouchers/promotions without prior notice.</li>
                                            <li>Additional terms & conditions are stated on the respective promotion banners (e.g. duration, discount amounts, validity for campaigns/promotions or certain services).</li>
                                        </ol>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
                                    </div>
                                </div>
                            </div>
                        </modal-component>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useRequest } from '@/composables/useRequest';
import { useQueueStore } from '@/stores/queue';
import route from '@/general/functions/router';

const props = withDefaults(defineProps<{
    section?: string;
    employee?: { id: number } | null;
}>(), {
    section: 'availableVouchersSection',
    employee: null
});

const emit = defineEmits<{
    (e: 'selected-voucher', code: string): void;
}>();

const queueStore = useQueueStore();
const { submit } = useRequest();

const vouchers = ref<any[] | null>(null);
const isLoading = ref(true);

const pendingQueue = computed(() => queueStore.isInCompleteQueue(props.section));

const successHandler = (response: any) => {
    isLoading.value = false;
    queueStore.setListComplete({ name: props.section, data: [] });
    vouchers.value = response.payload.data;
};

const fetchVouchers = () => {
    if (props.employee) {
        isLoading.value = true;
        const filters = JSON.stringify({ has_vouchers_all_with_company: props.employee.id });
        submit(
            route('api.voucher.user.list') + '?filters=' + filters,
            'get',
            props.section,
            false,
            false,
            undefined,
            {
                successHandler
            }
        );
    }
};

const selectVoucher = (item: any) => {
    emit('selected-voucher', item.voucher.code);
};

watch(pendingQueue, (inComplete) => {
    if (inComplete) {
        fetchVouchers();
    }
});

onMounted(() => {
    queueStore.updateListQueue({ name: props.section });
});
</script>
