<template>
    <div class="row">
        <div class="col">
            <div class="row justify-content-center">
                <div class="col-auto text-center">
                    <div class="row">
                        <div class="col text-center">
                            <div class="row">
                                <div class="col">
                                    <h5 class="all-caps">Reject Document</h5>
                                    <div class="fs-11">Are you sure you want to reject this customer's identification?</div>
                                </div>
                            </div>
                            <div class="row text-left margin-auto m-t-10 m-b-10">
                                <div class="col">
                                    <span class="text-danger fs-9">{{ error }}</span>
                                    <div class="fs-11">Reason: </div>
                                    <div class="row">
                                        <div class="col fs-11">
                                            <div class="b-a padding-5 w-100 m-b-5 pointer b-grey muted" :class="{'b-primary': parameters.rejectRemark === rejectRemarkItem, 'text-primary': parameters.rejectRemark === rejectRemarkItem}" v-for="rejectRemarkItem in rejectRemarkArray" @click="chooseRejectRemark(rejectRemarkItem)">{{ rejectRemarkItem }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col p-r-5">
                                    <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
                                </div>
                                <div class="col p-l-5">
                                    <div class="btn btn-sm btn-danger btn-block b-rad-none" @click="approveDocument('reject')">Reject</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import modalFormHandler from '../../../general/mixins/modalFormHandler';
    import { required } from "vuelidate/lib/validators";
    export default {
        data(){
            return {
                parameters: {
                    rejectRemark: null,
                },
                rejectRemarkArray: null,
                documentType: this.data.document_type === 'IDENTITY_CARD' ? 'IC' : 'SSM',
                error: null,
            }
        },
        validations: {
            parameters: {
                rejectRemark: { required },
            }
        },
        created(){
            this.rejectRemarkArray = [
                this.documentType + ' not clear',
                this.documentType + ' name different with registration name',
                'Wrong Document uploaded',
                'Non-Malaysian ' + this.documentType + ' Uploaded', 
                this.documentType + ' not Genuine'
            ];
        },
        methods: {
            approveDocument(status){
                this.parameters.rejectRemark === null ? this.error = 'Please choose a remark.' : null;
                this.isLoading = true;
                this.submit(this.route('api.company.identification.approval', this.item.owner.id, this.item.id, status), 'put', 'identificationVerificationSection', true, true);
            },
            chooseRejectRemark(remark) {
                this.parameters.rejectRemark = remark;
            }
        },
        mixins: [componentHandler, modalFormHandler]

    }
</script>