<template>
    <div class="row border p-3 mb-4 parentContainer">
        <div class="col-md-4">
            <p v-if="item.reward">{{ item.reward.name }}</p>
            <p v-else>{{ item.voucher.name }}</p>
            <p v-if="item.voucher.description">{{ item.voucher.description }}</p>
            <p v-if="item.reward">{{ item.reward.description }}</p>

            <p v-if="item.voucher && item.voucher.is_redeemed">Voucher claimed</p>
            <p v-else-if="item.voucher.end_date && new Date() > new Date(item.voucher.end_date)">This voucher has expired</p>
            <p v-else-if="item.voucher && item.voucher.end_date">Valid till {{ item.voucher.end_date }}</p>
            <p v-else>Non-expired</p>
        </div>
        <div class="col-md-3">
            <p v-if="item.voucher && item.voucher.is_redeemed" class="text-secondary">{{ item.voucher.code }}</p>
            <p v-else class="text-primary">{{ item.voucher.code }}</p>
        </div>
        <div class="col-md-4"></div>
        <div class="col-md-1">
            <a class="pointer requestModal" :data-type="'showVoucherTnC-' + item.id">Terms</a>
            <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>
</template>

<script setup lang="ts">
import { useComponentHandler } from '@/composables/useComponentHandler';

interface Props {
    data: Record<string, any>;
}

const props = defineProps<Props>();
const { item } = useComponentHandler(props);
</script>
