<template>
    <div class="row m-b-10">
        <div class="col bg-white">
            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
            <div class="row" v-show="!isLoading">
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col-auto p-r-0">
                            <document-file-viewer-component :file="item.files[0]">
                                <template slot="button">
                                    <button class="btn btn-xs btn-default bg-master-lightest b-rad-none no-border">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                </template>
                            </document-file-viewer-component>
                        </div>
                        <div class="col p-t-10 p-b-10">
                            <div class="row">
                                <div class="col">
                                    <div class="text-primary fs-10 bold">{{item.created_at}}</div>
                                </div>
                            </div>
                            <div class="row align-items-center">
                                <div class="col">
                                    <div class="muted fs-10">{{item.owner.name}}</div>
                                </div>
                            </div>
                        </div>
                        <div v-if="item.status === 1" class="col-auto">
                            <div class="row parentContainer">
                                <div class="col p-l-0">
                                    <button class="btn btn-xs btn-default bg-success b-rad-none no-border requestModal" data-type="approveDocument">
                                        <i class="fa fa-check text-white"></i>
                                    </button>
                                    <modal-component small type="approveDocument">
                                        <div class="row">
                                            <div class="col text-center">
                                                <div class="row">
                                                    <div class="col text-center">
                                                        <div class="row m-b-20">
                                                            <div class="col">
                                                                <h5 class="all-caps">Currency Order Placed</h5>
                                                                <div class="fs-11">Are you sure you that the currency order has been placed with the supplier?</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 data-dismiss="modal" class="btn btn-sm btn-success btn-block b-rad-none" @click="approveDocument('approve')">Confirm</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </modal-component>
                                </div>
                            </div>
                        </div>
                        <div v-if="item.status === 2" class="col-auto">
                            <div class="row parentContainer">
                                <div class="col p-l-0">
                                    <button class="btn btn-xs btn-default bg-danger b-rad-none no-border requestModal" data-type="deleteDocument">
                                        <i class="fa fa-times text-white"></i>
                                    </button>
                                    <modal-component small type="deleteDocument">
                                        <div class="row">
                                            <div class="col text-center">
                                                <div class="row">
                                                    <div class="col text-center">
                                                        <div class="row m-b-20">
                                                            <div class="col">
                                                                <h5 class="all-caps">Are you Sure?</h5>
                                                                <div class="fs-11">Are you sure you want to delete this docuement?</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 data-dismiss="modal" class="btn btn-sm btn-danger btn-block b-rad-none" @click="deleteDocument()">Delete</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </modal-component>
                                </div>
                            </div>
                        </div>
                    </div>

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

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import staticFormHandler from '../../../general/mixins/staticFormHandler'
    export default {
        data() {
            return {
                expanded: false
            }
        },
        methods: {
            approveDocument(status){
                this.isLoading = true;
                this.submit(this.route('api.document.status.approve', this.item.id, status), 'put', 'identificationVerificationSection', true, true);
            },
            deleteDocument() {
                this.isLoading = true;
                this.submit(this.route('api.document.delete', this.item.id), 'delete', 'identificationVerificationSection', true, true);
            }
        },
        mixins: [componentHandler, staticFormHandler]
    }
</script>
