<template>
    <div class="row m-b-10 parentContainer">
        <div class="col">
            <div class="row p-b-10 b-b b-grey">
                <div class="col-2">{{ item.posting_date }}</div>
                <div class="col-2">{{ item.transaction_description_1 + ' - ' + item.transaction_description_2 }}</div>

                <!-- Mapping Approval tab -->
                <div class="col-5" v-if="item.owners.pending_verification.length === 1">
                    <div class="row">
                        <div class="col">{{item.owners.pending_verification[0].system}}</div>
                        <div class="col">{{ typeString(item.owners.pending_verification[0].type) }}</div>
                        <div class="col"><a :href="item.owners.pending_verification[0].reference_link" target="_blank">{{item.owners.pending_verification[0].reference}}</a></div>
                    </div>
                </div>
                
                <!-- Pending Export tab -->
                <div class="col-5" v-if="item.owners.approved.length === 1">
                    <div class="row">
                        <div class="col">{{item.owners.approved[0].system}}</div>
                        <div class="col">{{ typeString(item.owners.approved[0].type) }}</div>
                        <div class="col">
                            <div class="col d-flex justify-content-between">
                                <a :href="item.owners.approved[0].reference_link" target="_blank">{{item.owners.approved[0].reference}}</a>
                                <div v-if="stage === 4">
                                    <!-- revert button -->
                                    <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="approveCorrectMappingTransaction">
                                        <i class="fa fa-times fa-fw"></i>
                                    </button>
                                    <modal-component class="animate__animated animate__fast animate__fadeIn" type="approveCorrectMappingTransaction">
                                        <general-confirmation-form-component
                                            :contentText="returnTextRevert(item.owners.approved[0].reference)"
                                            modalType="confirm"
                                            class="text-center"
                                            :apiRoute="route('api.accounting.bankStatement.details.status.update', item.owners.approved[0].id, 'pending_verification')"
                                            apiMethod="post"
                                            :section="section"
                                        >
                                        </general-confirmation-form-component>
                                    </modal-component>

                                    <!-- edit button -->
                                    <button class="btn btn-xs btn-outline-success b-rad-none m-r-5 requestModal" data-type="updateOwner">
                                        <i class="fa fa-edit"></i>
                                    </button>                                    
                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="updateOwner">
                                        <edit-single-item-in-list-component :data="item" :section="section" editMapped="true"></edit-single-item-in-list-component>
                                    </modal-component>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mapping Review tab -->
                <div class="col-5" v-if="item.owners.pending_verification.length > 1">
                    <div class="row">
                        <div class="col">
                            <div class="row" v-for="owner in item.owners.pending_verification">
                                <div class="col">
                                    {{ owner.system }}
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row" v-for="owner in item.owners.pending_verification">
                                <div class="col">
                                    {{ typeString(owner.type) }}
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row parentContainer" v-for="owner in item.owners.pending_verification">
                                <div class="col d-flex justify-content-between">
                                    <a :href="owner.reference_link" target="_blank">{{ owner.reference }}</a>
                                    <div v-if="stage === 2" style="display: flex;">
                                        <button class="btn btn-xs btn-outline-primary b-rad-none m-r-5 requestModal" data-type="approveCorrectMappingTransaction">
                                            <i class="fa fa-check fa-fw"></i>
                                        </button>
                                        <modal-component class="animate__animated animate__fast animate__fadeIn" type="approveCorrectMappingTransaction">
                                            <general-confirmation-form-component
                                                :contentText="returnTextWithVariable(owner.reference)"
                                                modalType="confirm"
                                                class="text-center"
                                                :apiRoute="route('api.accounting.bankStatement.details.status.update', owner.id, 'approve')"
                                                apiMethod="post"
                                                :section="section"
                                            >
                                            </general-confirmation-form-component>
                                        </modal-component>

                                        <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="revertPendingMappingTransaction">
                                            <i class="fa fa-times fa-fw"></i>
                                        </button>
                                        <modal-component class="animate__animated animate__fast animate__fadeIn" type="revertPendingMappingTransaction">
                                            <general-confirmation-form-component
                                                contentText="Are you sure you want to reject this mapping?"
                                                modalType="delete"
                                                class="text-center"
                                                :apiRoute="route('api.accounting.statement_transaction.owner.status.update', owner.id, 'reject')"
                                                apiMethod="post"
                                                :section="section"
                                            >
                                            </general-confirmation-form-component>
                                        </modal-component>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- unknow tab -->
                <div class="col-5" v-if="!item.owners.pending_verification.length && !item.owners.approved.length">
                    <div class="row">
                        <div class="col">
                            <button class="btn btn-xs btn-outline-success b-rad-none m-r-5 requestModal" data-type="updateOwner">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                        <div class="col">
                            <button class="btn btn-xs btn-outline-success b-rad-none m-r-5 requestModal" data-type="updateOwner">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                        <div class="col">
                            <button class="btn btn-xs btn-outline-success b-rad-none m-r-5 requestModal" data-type="updateOwner">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">

                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="updateOwner">
                                <edit-single-item-in-list-component :data="item" :section="section"></edit-single-item-in-list-component>
                            </modal-component>
                        </div>
                    </div>

                </div>
                <div class="col-1">{{ item.amount }}</div>
                <div class="col-1 text-success" v-if="item.owners.approved.length">{{ [6, 7, 8, 9, 10, 11, 12, 13, 14].includes(item.owners.approved[0].type) ? 'Miscellaneous' : 'Approved'  }}</div>

                <!-- Pending Export tab for checkbox here -->
                <div class="col-1" v-if="item.owners.approved.length === 1">
                    <input type="checkbox" class="request_export_item" v-model="selectAll" :value="item.id">
                </div>

                <div class="col-1 text-danger" v-if="!item.owners.approved.length">Pending...</div>
                <div class="col-1" v-if="stage === 1">
                    <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteMappingTransaction">
                        <i class="fa fa-times fa-fw"></i>
                    </button>
                    <modal-component class="animate__animated animate__fast animate__fadeIn" type="deleteMappingTransaction">
                        <general-confirmation-form-component
                            contentText="Are you sure you want to reject this mapping?"
                            modalType="delete"
                            class="text-center"
                            :apiRoute="route('api.accounting.statement_transaction.owner.status.update', item.owners.pending_verification[0].id, 'reject')"
                            apiMethod="post"
                            :section="section"
                        >
                        </general-confirmation-form-component>
                    </modal-component>
                </div>
            </div>
<!--            <span v-for="owner in item.owners">{{owner.system + ' - ' + owner.owner_id}}</span>-->
<!--            [0].system + ' - ' + item.owner_guess[0].bill_no-->
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            stage: {
                type: Number,
                default: 0
            },
            section:{
                type: String,
                required: true
            },
            selectAll: {
                type:Boolean
            }
        },
        methods: {
            typeString(type){
                switch(type) {
                    case 1:
                        return 'Sales';
                    case 2:
                        return 'Wallet Top Up';
                    case 3:
                        return 'Wallet Withdrawal';
                    case 4:
                        return 'Payment Refund';
                    case 5:
                        return 'Supplier Payment';
                    case 6:
                        return 'Internal Bank Transfer Out';
                    case 7:
                        return 'Internal Bank Transfer In';
                    case 8:
                        return 'Salary Payment';
                    case 9:
                        return 'Statutory Payment';
                    case 10:
                        return 'FPX Charges';
                    case 11:
                        return 'FPX Charges Refund';
                    case 12:
                        return 'Bank Charges';
                    case 13:
                        return 'Credit Card Payment';
                    case 14:
                        return 'Non-Operational Payment';
                }
            },
            returnTextWithVariable(variable) {
                return "Are you sure you want to choose this mapping " + variable + "?";
            },
            returnTextRevert(variable) {
                return "Are you sure you want to revert this mapping " + variable + "?";
            }
        },
        mixins: [componentHandler]
    }
</script>
