<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 && item.voucher.end_date">Valid till {{ item.voucher.end_date }}</p>
            <p v-else>-</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">
            <p v-if="item.voucher.type == 'AMOUNT'">RM{{ item.voucher.value / 100 }} Discount</p>
            <p v-if="item.voucher.type == 'PERCENT'">
                <span v-if="item.voucher.value === 1">50% discount on service fee only</span>
                <span v-else>{{ item.voucher.value }}% Discount</span>
            </p>
        </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>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        methods: {
            submit(){},
        },
        mixins: [componentHandler]
    }
</script>
